62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { formatCurrency } from "@/lib/utils"
|
||
|
|
|
||
|
|
const CATEGORY_COLORS: Record<string, string> = {
|
||
|
|
repairs: "bg-amber-500",
|
||
|
|
utilities: "bg-blue-500",
|
||
|
|
insurance: "bg-violet-500",
|
||
|
|
mortgage: "bg-indigo-500",
|
||
|
|
taxes: "bg-red-500",
|
||
|
|
management: "bg-emerald-500",
|
||
|
|
supplies: "bg-cyan-500",
|
||
|
|
other: "bg-white/20",
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
data: { category: string; amount: number }[]
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ExpenseBreakdownChart({ data }: Props) {
|
||
|
|
const total = data.reduce((s, d) => s + d.amount, 0)
|
||
|
|
if (!data.length || total === 0) return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="rounded-2xl border border-white/[0.06] bg-[#16161f] p-5">
|
||
|
|
<h3 className="text-sm font-semibold text-white mb-4">Expense Breakdown <span className="text-white/30 font-normal">(6 months)</span></h3>
|
||
|
|
|
||
|
|
{/* Bar */}
|
||
|
|
<div className="flex h-3 w-full overflow-hidden rounded-full mb-4">
|
||
|
|
{data.map((d) => (
|
||
|
|
<div
|
||
|
|
key={d.category}
|
||
|
|
className={`${CATEGORY_COLORS[d.category] ?? CATEGORY_COLORS.other} transition-all`}
|
||
|
|
style={{ width: `${(d.amount / total) * 100}%` }}
|
||
|
|
title={`${d.category}: ${formatCurrency(d.amount)}`}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Legend */}
|
||
|
|
<div className="space-y-2">
|
||
|
|
{data.map((d) => (
|
||
|
|
<div key={d.category} className="flex items-center justify-between">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className={`h-2.5 w-2.5 rounded-full ${CATEGORY_COLORS[d.category] ?? CATEGORY_COLORS.other}`} />
|
||
|
|
<span className="text-xs capitalize text-white/60">{d.category}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<span className="text-xs text-white/30">{Math.round((d.amount / total) * 100)}%</span>
|
||
|
|
<span className="text-xs font-medium text-white tabular-nums">{formatCurrency(d.amount)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<div className="flex items-center justify-between border-t border-white/[0.06] pt-2 mt-2">
|
||
|
|
<span className="text-xs font-semibold text-white/50">Total</span>
|
||
|
|
<span className="text-sm font-bold text-white tabular-nums">{formatCurrency(total)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|