63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
||
import { tr } from "@/i18n/tr";
|
||
import { cn } from "@/lib/utils";
|
||
import { formatMoney } from "@/shared/format";
|
||
import type { NetWorth } from "../service";
|
||
|
||
const t = tr.assets.netWorth;
|
||
|
||
/** Net varlık dökümü: artılar ve eksiler, altta toplam. */
|
||
export function NetWorthCard({ data }: { data: NetWorth }) {
|
||
const rows: { label: string; minor: number; sign: 1 | -1 }[] = [
|
||
{ label: t.accounts, minor: data.accountsMinor, sign: 1 },
|
||
{ label: t.assets, minor: data.assetsMinor, sign: 1 },
|
||
{ label: t.contactReceivable, minor: data.contactReceivableMinor, sign: 1 },
|
||
{ label: t.inKindReceivable, minor: data.inKindReceivableMinor, sign: 1 },
|
||
{ label: t.cardDebt, minor: data.cardDebtMinor, sign: -1 },
|
||
{ label: t.contactPayable, minor: data.contactPayableMinor, sign: -1 },
|
||
{ label: t.inKindPayable, minor: data.inKindPayableMinor, sign: -1 },
|
||
];
|
||
const plus = rows.filter((r) => r.sign === 1);
|
||
const minus = rows.filter((r) => r.sign === -1);
|
||
const list = (items: typeof rows) => (
|
||
<dl className="flex flex-col text-sm">
|
||
{items.map((r) => (
|
||
<div key={r.label} className="flex items-center justify-between gap-2 py-1">
|
||
<dt className="text-muted-foreground">{r.label}</dt>
|
||
<dd className="tabular-nums">
|
||
{r.sign < 0 && r.minor ? "−" : ""}
|
||
{formatMoney(r.minor)}
|
||
</dd>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
);
|
||
return (
|
||
<Card size="sm">
|
||
<CardContent className="flex flex-col gap-3">
|
||
<div>
|
||
<p
|
||
className={cn(
|
||
"text-3xl font-semibold tracking-tight tabular-nums",
|
||
data.totalMinor < 0 && "text-expense",
|
||
)}
|
||
>
|
||
{formatMoney(data.totalMinor)}
|
||
</p>
|
||
<p className="text-sm text-muted-foreground">{t.description}</p>
|
||
</div>
|
||
<div className="grid gap-x-8 gap-y-1 border-t pt-2 sm:grid-cols-2">
|
||
{list(plus)}
|
||
{list(minus)}
|
||
</div>
|
||
{data.missingPrice ? (
|
||
<p className="text-xs text-muted-foreground">{t.missingPrice(data.missingPrice)}</p>
|
||
) : null}
|
||
{data.includesHidden ? (
|
||
<p className="text-xs text-muted-foreground">{t.includesHidden}</p>
|
||
) : null}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|