79 lines
3 KiB
TypeScript
79 lines
3 KiB
TypeScript
"use client";
|
|
|
|
import type { LedgerEntry } from "@/payload-types";
|
|
import { formatDate } from "@/lib/banking/format";
|
|
|
|
const typeMeta: Record<string, { label: string; cls: string }> = {
|
|
deposit: { label: "Deposit", cls: "text-emerald-400" },
|
|
withdrawal: { label: "Withdrawal", cls: "text-red-400" },
|
|
transfer: { label: "Transfer", cls: "text-blue-400" },
|
|
payment: { label: "Payment", cls: "text-red-400" },
|
|
fee: { label: "Fee", cls: "text-muted-foreground" },
|
|
salary: { label: "Salary", cls: "text-green-400" },
|
|
adjustment: { label: "Adjustment", cls: "text-amber-400" },
|
|
};
|
|
|
|
export function LedgerTable({ entries }: { entries: LedgerEntry[] }) {
|
|
if (entries.length === 0) {
|
|
return (
|
|
<p className="text-sm text-muted-foreground italic">
|
|
No ledger entries yet.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="border border-border rounded-lg overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="bg-muted/50 border-b border-border">
|
|
<th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
|
|
Date
|
|
</th>
|
|
<th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
|
|
Type
|
|
</th>
|
|
<th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
|
|
Memo
|
|
</th>
|
|
<th className="text-right px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
|
|
Amount
|
|
</th>
|
|
<th className="text-right px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
|
|
Balance
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{entries.map((entry) => {
|
|
const meta = typeMeta[entry.type] ?? {
|
|
label: entry.type,
|
|
cls: "text-muted-foreground",
|
|
};
|
|
const amount = entry.amount ?? 0;
|
|
return (
|
|
<tr key={entry.id} className="border-b border-border/50">
|
|
<td className="px-4 py-2 text-muted-foreground">
|
|
{formatDate(entry.timestamp)}
|
|
</td>
|
|
<td className={`px-4 py-2 font-medium ${meta.cls}`}>
|
|
{meta.label}
|
|
</td>
|
|
<td className="px-4 py-2 text-muted-foreground">{entry.memo}</td>
|
|
<td
|
|
className={`px-4 py-2 text-right font-mono ${amount >= 0 ? "text-emerald-400" : "text-red-400"}`}
|
|
>
|
|
{amount >= 0 ? "+" : ""}
|
|
{amount.toLocaleString()}
|
|
</td>
|
|
<td className="px-4 py-2 text-right font-mono">
|
|
{(entry.balanceAfter ?? 0).toLocaleString()}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|