76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { Bar, BarChart, XAxis, YAxis, CartesianGrid } from "recharts"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import {
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
type ChartConfig,
|
|
} from "@/shared/components/ui/chart"
|
|
import type { DashboardData } from "./use-dashboard-data"
|
|
|
|
const chartConfig = {
|
|
amount: {
|
|
label: "Amount",
|
|
color: "var(--color-blue-500, #3b82f6)",
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
type Props = { data: DashboardData }
|
|
|
|
export function FinancialSummaryChart({ data }: Props) {
|
|
const summary = data.financial_summary
|
|
const currency = summary?.currency ?? ""
|
|
|
|
const chartData = (summary?.chart ?? []).map((item) => ({
|
|
label: item.label ?? "",
|
|
amount: item.amount ?? 0,
|
|
count: item.count ?? 0,
|
|
}))
|
|
|
|
const colors = ["#3b82f6", "#f59e0b", "#ef4444"]
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Financial Summary</CardTitle>
|
|
<CardDescription>
|
|
Invoices, expenses & bills breakdown ({currency})
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer config={chartConfig} className="h-75 w-full">
|
|
<BarChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis dataKey="label" tickLine={false} axisLine={false} />
|
|
<YAxis tickLine={false} axisLine={false} tickFormatter={(v: number) => v.toLocaleString()} />
|
|
<ChartTooltip
|
|
content={
|
|
<ChartTooltipContent
|
|
formatter={(value, _name, item) => (
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{currency} {Number(value).toLocaleString()}</span>
|
|
<span className="text-muted-foreground">{item.payload.count} document(s)</span>
|
|
</div>
|
|
)}
|
|
/>
|
|
}
|
|
/>
|
|
<Bar
|
|
dataKey="amount"
|
|
radius={[6, 6, 0, 0]}
|
|
fill="var(--color-amount)"
|
|
barSize={48}
|
|
>
|
|
{chartData.map((_entry: any, index: number) => (
|
|
<rect key={index} fill={colors[index % colors.length]} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|