File size: 3,358 Bytes
865237e 478ea27 1f55496 865237e 1f55496 865237e 1f55496 478ea27 1f55496 478ea27 865237e 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 865237e dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 478ea27 dd7dcdf 865237e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import type { PrRow } from "../api/form";
type Props = {
rows: PrRow[];
/** Extra classes on the outer flex wrapper (e.g. flex-1 min-h-0). */
className?: string;
};
export function PrLineItemsTable({ rows, className = "" }: Props) {
if (!rows.length) return null;
return (
<div
className={`flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-xl border border-outline-variant bg-white shadow-sm ${className}`}
>
<div className="shrink-0 border-b border-outline-variant bg-surface-container-high px-2 py-1.5 font-label-caps text-[8px] font-bold uppercase leading-none tracking-wide text-secondary">
Line items
</div>
<div className="min-h-0 flex-1 overflow-auto">
<table className="w-full min-w-[720px] table-fixed border-collapse text-left text-[11px] leading-snug">
<colgroup>
<col className="w-[7%]" />
<col className="w-[9%]" />
<col className="w-[24%]" />
<col className="w-[32%]" />
<col className="w-[8%]" />
<col className="w-[12%]" />
</colgroup>
<thead className="sticky top-0 z-10">
<tr className="border-b border-outline-variant bg-surface-container-low">
<th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
PR Line Item
</th>
<th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
MAT GRP
</th>
<th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
PR SHORT TEXT
</th>
<th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
PR LONG TEXT
</th>
<th className="px-2 py-1.5 align-bottom text-center text-[10px] font-semibold text-primary">
PR Quantity
</th>
<th className="px-2 py-1.5 align-bottom text-[10px] font-semibold text-primary">
Delivery Date
</th>
</tr>
</thead>
<tbody>
{rows.map((r, idx) => (
<tr
key={`${r.pr_line_item}-${idx}`}
className="border-b border-outline-variant/80 align-top last:border-0"
>
<td className="px-2 py-1 font-data-mono text-[10px] tabular-nums whitespace-nowrap">
{r.pr_line_item}
</td>
<td className="px-2 py-1 font-data-mono text-[10px] whitespace-nowrap">
{r.mat_grp}
</td>
<td className="min-w-0 px-2 py-1 break-words text-on-background">
{r.pr_short_text}
</td>
<td className="min-w-0 px-2 py-1 break-words text-on-background">
{r.pr_long_text}
</td>
<td className="px-2 py-1 text-center tabular-nums whitespace-nowrap">
{r.pr_quantity}
</td>
<td className="min-w-0 px-2 py-1 whitespace-nowrap text-[10px] text-secondary">
{r.delivery_date}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}
|