62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
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>
|
|
)
|
|
}
|