47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
'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>
|
||
);
|
||
}
|