78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import { formatCents } from "@/lib/drinkkaart";
|
||
|
||
interface TransactionRow {
|
||
id: string;
|
||
type: "deduction" | "reversal";
|
||
amountCents: number;
|
||
balanceBefore: number;
|
||
balanceAfter: number;
|
||
note: string | null;
|
||
reversedBy: string | null;
|
||
reverses: string | null;
|
||
createdAt: Date;
|
||
}
|
||
|
||
interface TransactionHistoryProps {
|
||
transactions: TransactionRow[];
|
||
}
|
||
|
||
export function TransactionHistory({ transactions }: TransactionHistoryProps) {
|
||
if (transactions.length === 0) {
|
||
return <p className="text-sm text-white/40">Nog geen transacties.</p>;
|
||
}
|
||
|
||
return (
|
||
<ul className="space-y-2">
|
||
{transactions.map((t) => {
|
||
const date = new Date(t.createdAt).toLocaleString("nl-BE", {
|
||
day: "numeric",
|
||
month: "short",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
|
||
const isReversal = t.type === "reversal";
|
||
const isReversed = !!t.reversedBy;
|
||
|
||
return (
|
||
<li
|
||
key={t.id}
|
||
className={`flex items-start justify-between rounded-lg border px-4 py-3 ${
|
||
isReversal
|
||
? "border-green-400/20 bg-green-400/5"
|
||
: isReversed
|
||
? "border-white/5 bg-white/3 opacity-60"
|
||
: "border-white/10 bg-white/5"
|
||
}`}
|
||
>
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<span
|
||
className={`font-medium ${isReversal ? "text-green-400" : "text-red-400"}`}
|
||
>
|
||
{isReversal ? "+ " : "− "}
|
||
{formatCents(t.amountCents)}
|
||
</span>
|
||
{isReversal && (
|
||
<span className="rounded-full border border-green-400/30 bg-green-400/10 px-2 py-0.5 text-green-300 text-xs">
|
||
↩ Teruggedraaid
|
||
</span>
|
||
)}
|
||
{isReversed && !isReversal && (
|
||
<span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-white/40 text-xs">
|
||
Teruggedraaid
|
||
</span>
|
||
)}
|
||
</div>
|
||
{t.note && (
|
||
<p className="mt-0.5 text-white/50 text-xs">{t.note}</p>
|
||
)}
|
||
</div>
|
||
<span className="text-sm text-white/50 tabular-nums">{date}</span>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
);
|
||
}
|