From 22ce6d18eea79ad6c197a17cce7d173edcb72e0c Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Fri, 17 Apr 2026 16:27:27 -0400
Subject: [PATCH] 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 | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/Dashboard.tsx b/apps/web/src/pages/Dashboard.tsx
index 5589d60..ec21168 100644
--- a/apps/web/src/pages/Dashboard.tsx
+++ b/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">
-        {Array.from({ length: 5 }).map((_, i) => (
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+        {Array.from({ length: 6 }).map((_, i) => (
           <Skeleton key={i} className="h-20" />
         ))}
       </div>