first build commit

src/components/dashboard/RecentTransactions.tsx

@@ -0,0 +1,58 @@
+import Link from 'next/link'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { formatCents } from '@/lib/utils/currency'
+import { ArrowRight } from 'lucide-react'
+
+interface RecentTx {
+  id: string
+  date: string
+  description: string
+  amountCents: number
+  type: string
+  accountName: string
+}
+
+export function RecentTransactions({ transactions }: { transactions: RecentTx[] }) {
+  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">Recent Transactions</CardTitle>
+        <Link
+          href="/transactions"
+          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          View all <ArrowRight className="h-3 w-3" />
+        </Link>
+      </CardHeader>
+      <CardContent>
+        {transactions.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-4 text-center">No transactions yet.</p>
+        ) : (
+          <div className="space-y-3">
+            {transactions.map((tx) => {
+              const date = new Date(tx.date)
+              const label = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+              return (
+                <div key={tx.id} className="flex items-start justify-between gap-2">
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium truncate">{tx.description}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {label} · {tx.accountName}
+                    </p>
+                  </div>
+                  <span
+                    className={`text-sm font-medium tabular-nums shrink-0 ${
+                      tx.type === 'CREDIT' ? 'text-green-600' : 'text-foreground'
+                    }`}
+                  >
+                    {tx.type === 'CREDIT' ? '+' : '-'}{formatCents(tx.amountCents)}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}