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

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-17 16:27:27 -04:00
parent 52e092502b
commit 22ce6d18ee
1 changed files with 7 additions and 3 deletions
@@ -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>