EV Reimbursement App v3: The Full Redesign

The v2 rewrite turned a monolithic script into a clean modular codebase. It was the right foundation. But the UI still looked like a developer tool — functional, not polished. Version 3 changes that.

Complete UI Overhaul

The biggest change is structural. The old layout threw every feature onto one long page. v3 introduces a three-step wizard: Setup (profile and dates), Usage (kWh entry and rates), and Your Reimbursement (results, exports, history). Each step only shows what's relevant, and empty states stay hidden until there's data to display.

The header got slimmed down to a fixed Siemens-branded bar with quick access to help, dark mode, and feedback. The reimbursement total now gets a hero-sized display with contextual export buttons right below it. Chart, history, and trends collapse into <details> elements so they're there when you want them and out of the way when you don't.

Everything is built on a design token system — CSS custom properties for spacing, colors, and typography that keep the whole app consistent.

Security Hardening

This was overdue. v3.2 introduced a full security pass:

• Content Security Policy — a CSP meta tag locks down script, style, font, and connection sources
• Subresource Integrity — all seven CDN resources (Bootstrap, Chart.js, SheetJS, jsPDF) verified with SHA-384 hashes
• XSS prevention — every innerHTML that touched user data was replaced with safe DOM APIs (createElement + .textContent). Profile names, preset names, CSV imports, history labels — all sanitized
• Resilient storage — every JSON.parse call wrapped in try-catch with safe defaults so corrupted localStorage doesn't crash the app

Additional Charges

Real utility bills aren't just kWh times rate. There are service fees, demand charges, and other line items. v3.4 added a toggle for named additional charges — enter a label and amount, and they flow through to every calculation, every export (Receipt, Excel, PDF), and every history snapshot. The billing history cards got a full redesign too, showing expense-style breakdowns with kWh subtotals, itemized charges, and bold totals.

Guided Tour

First-time visitors now get an interactive walkthrough. A spotlight overlay highlights each section with step-by-step descriptions, Skip/Next/Finish navigation, and keyboard support. The tour automatically skips hidden sections, so it adapts to whatever state the app is in. You can replay it anytime from the help modal.

Dark Mode

Full dark mode coverage — not just background colors, but inputs, modals, charts, stat cards, and the gradient background. It toggles from the header and persists across sessions.

EV Impact and Stats

Two new collapsible sections round out the experience. EV Impact shows CO2 saved versus a gasoline equivalent and estimated miles powered. Stats for Nerds displays total days tracked, average daily usage, cost per mile, data points count, and build info.

Accessibility

v3.5 was a dedicated accessibility pass: skip navigation link, aria-live regions for dynamic content, aria-expanded on toggle checkboxes, role attributes on semantic containers, :focus-visible outlines on all interactive elements, and a WCAG AA color contrast fix for muted text in both themes.

Still Zero Build Tools

The architecture hasn't changed philosophically. It's still ES modules served directly by the browser — 16 focused JS modules, 5 CSS files, no bundler, no transpiler. The app went from v2's feature set to a polished, security-hardened, accessible PWA without adding a single build dependency.

That's been the theme across all three major versions: keep the deployment model dead simple while raising the bar on everything else.

Check it out on GitHub or try it live.