feat: add better tab view

2026-10-28 00:37:16 +01:00
parent bca6e88138
commit ca3af671cf
37 changed files with 740 additions and 79 deletions
@@ -0,0 +1,46 @@
+'use client';
+
+import type { TabOrder } from '@/lib/api/client';
+import { formatCents } from '@/lib/utils';
+import { useLang } from '@/lib/i18n';
+
+/**
+ * A tab's drinks per order, as the terminal shows them: "—— 12:32 today ——" above each, e.g. "2× Duvel · €4.00 each
+ * · €8.00". Drinks taken off again show when the order lists them.
+ */
+export function TabOrders({ orders }: { orders: TabOrder[] | null | undefined }) {
+  const { t, orderTime } = useLang();
+  if (!orders) {
+    return <p className="text-sm text-muted-foreground">{t('tabs.lines_unknown')}</p>;
+  }
+  if (orders.length === 0) {
+    return <p className="text-sm text-muted-foreground">{t('tabs.lines_empty')}</p>;
+  }
+  return (
+    <div className="space-y-2">
+      {orders.map((order) => (
+        <div key={order.orderId ?? order.startedAt}>
+          <div className="flex items-center gap-2 text-xs font-semibold text-muted-foreground mb-1">
+            <span className="h-px flex-1 bg-border" />
+            <span>{orderTime(order.startedAt)}</span>
+            <span className="h-px flex-1 bg-border" />
+          </div>
+          <ul className="space-y-1 text-sm">
+            {order.items.map((item, i) => (
+              <li key={i} className="flex justify-between gap-4">
+                <span className={item.quantity === 0 ? 'text-muted-foreground line-through' : undefined}>
+                  <span className="font-medium">{item.quantity}×</span> {item.productName}
+                  <span className="text-muted-foreground"> · {formatCents(item.unitPriceInCents)} {t('tabs.each')}</span>
+                  {(item.removed ?? 0) > 0 && (
+                    <span className="text-destructive text-xs"> · {t('history.removed', { count: item.removed! })}</span>
+                  )}
+                </span>
+                <span className="tabular-nums">{formatCents(item.quantity * item.unitPriceInCents)}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}