feat:drinkkaart

apps/web/src/components/drinkkaart/TransactionHistory.tsx

@@ -0,0 +1,77 @@
+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>
+	);
+}