+ {/* Top bar */}
+
+ );
+}
+
export default function App() {
const [user, setUser] = useState
+
+
+
+
+
+
+
+
+
+ Contractor Accounts
+ Revenue Tracker
+
+
+
+ TESTER ID: IF530523
+
+
+
+
+ {/* KPI cards */}
+
+
+ {[
+ { label: 'Total Revenue YTD', value: '$' + totalRevenue.toLocaleString(), sub: `${CONTRACTOR_DATA.length} accounts`, accent: 'text-emerald-400' },
+ { label: 'Tests Completed', value: totalTests.toString(), sub: 'YTD 2025–2026', accent: 'text-brand-orange' },
+ { label: 'Active Accounts', value: activeCount.toString(), sub: `of ${CONTRACTOR_DATA.length} total`, accent: 'text-sky-400' },
+ { label: 'Avg Rev / Account', value: '$' + Math.round(totalRevenue / CONTRACTOR_DATA.length).toLocaleString(), sub: 'all accounts', accent: 'text-violet-400' },
+ { label: 'Fleet Vehicles', value: totalVehicles.toString(), sub: 'units served', accent: 'text-zinc-300' },
+ ].map(k => (
+
+
+ {/* Filter bar */}
+
+
+ ))}
+ {k.label}
+ {k.value}
+ {k.sub}
+
+ Filter:
+ {(['all', 'active', 'pending', 'inactive', 'fleet'] as const).map(f => (
+
+ ))}
+ setSearch(e.target.value)}
+ className="ml-auto bg-white/5 border border-white/10 text-zinc-200 placeholder-zinc-600 text-sm px-4 py-1.5 rounded-xl outline-none focus:border-brand-orange/50 font-mono w-52"
+ />
+
+
+ {/* Table */}
+
+
+
+
+
+
+
+ {/* Totals row */}
+ | {h} | + ))} +|||||||
|---|---|---|---|---|---|---|---|
| {c.id} | +
+ {c.company}
+ {c.city}, CA
+ |
+ + {c.type} + | +{c.vehicles} | +{c.lastTest.replace(/-/g, '/')} | +${c.revenue.toLocaleString()} | +{c.ytd} | ++ + {c.status} + + | +
+ {[
+ { label: 'Showing', value: `${filtered.length} accounts` },
+ { label: 'Vehicles', value: filtered.reduce((s, c) => s + c.vehicles, 0).toString() },
+ { label: 'Revenue', value: '$' + filtered.reduce((s, c) => s + c.revenue, 0).toLocaleString(), green: true },
+ { label: 'Tests', value: filtered.reduce((s, c) => s + c.ytd, 0).toString() },
+ ].map(t => (
+
+
+
+ ))}
+ {t.label}
+ {t.value}
+
@@ -792,6 +1050,16 @@ export default function App() {
