feat(dashboard): add total-spent KPI alongside deployed value

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/web/src/pages/Dashboard.tsx

@@ -104,7 +104,7 @@ export default function Dashboard() {
 
       {data && (
         <>
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
             <KpiCard
               icon={<Package className="h-4 w-4" />}
               label="Total parts"
@@ -124,6 +124,10 @@ export default function Dashboard() {
                   .reduce((sum, s) => sum + s.totalPrice, 0),
               )}
             />
+            <KpiCard
+              label="Total spent"
+              value={currency(data.byState.reduce((sum, s) => sum + s.totalPrice, 0))}
+            />
             <KpiCard
               label="Past-EOL deployments"
               value={data.deployedPastEol
@@ -509,8 +513,8 @@ function EolBanner({
 function DashboardSkeleton() {
   return (
     <div className="space-y-4">
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
-        {Array.from({ length: 5 }).map((_, i) => (
+        {Array.from({ length: 6 }).map((_, i) => (
           <Skeleton key={i} className="h-20" />
         ))}
       </div>