first build commit

src/components/dashboard/BudgetSummary.tsx

@@ -0,0 +1,61 @@
+import Link from 'next/link'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { BudgetProgress } from '@/components/budgets/BudgetProgress'
+import { formatCents } from '@/lib/utils/currency'
+import { ArrowRight } from 'lucide-react'
+
+interface BudgetItem {
+  id: string
+  name: string
+  limitCents: number | null
+  color: string | null
+  spendCents: number
+}
+
+export function BudgetSummary({ budgets }: { budgets: BudgetItem[] }) {
+  return (
+    <Card>
+      <CardHeader className="pb-2 flex flex-row items-center justify-between space-y-0">
+        <CardTitle className="text-sm font-medium text-muted-foreground">Budgets</CardTitle>
+        <Link
+          href="/budgets"
+          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Manage <ArrowRight className="h-3 w-3" />
+        </Link>
+      </CardHeader>
+      <CardContent>
+        {budgets.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-4 text-center">No active budgets.</p>
+        ) : (
+          <div className="space-y-4">
+            {budgets.map((b) => (
+              <div key={b.id} className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 min-w-0">
+                    {b.color && (
+                      <span
+                        className="h-2.5 w-2.5 rounded-full shrink-0"
+                        style={{ backgroundColor: b.color }}
+                      />
+                    )}
+                    <span className="text-sm font-medium truncate">{b.name}</span>
+                  </div>
+                  <span className="text-sm tabular-nums text-muted-foreground shrink-0 ml-2">
+                    {formatCents(b.spendCents)}
+                    {b.limitCents ? ` / ${formatCents(b.limitCents)}` : ''}
+                  </span>
+                </div>
+                {b.limitCents ? (
+                  <BudgetProgress spendCents={b.spendCents} limitCents={b.limitCents} />
+                ) : (
+                  <div className="h-1.5 rounded-full bg-muted" />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}