David/MEGAINFRA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(dn): inbox 3 table gives the descriptions room at laptop width

Browse source 
Stack the slip line over its PO line picker in one column and show
value with left-on-PO beneath it, so every column fits beside a 300px
documents column without horizontal scroll.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
DEls 2026-10-26 19:57:24 +02:00
parent 533c61bbca
commit d88e2dc0d1
2 changed files with 14 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/dashboard/financial/delivery-notes/inbox-3/inbox-three-workspace.tsx
View file

@ -74,7 +74,7 @@ export function InboxThreeWorkspace(props: InboxThreeWorkspaceProps) {
</div>
</header>
<div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
<div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_300px]">
<div className="order-1 min-w-0 space-y-4">
<ReadyBanner
lines={ready}

29
src/app/dashboard/financial/delivery-notes/inbox-3/line-table.tsx
View file

@ -3,7 +3,7 @@
import { useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { formatNumber } from "@/lib/utils";
import { cn, formatNumber } from "@/lib/utils";
import { sameReceivingUnit } from "@/lib/dn-pipeline/receiving-defaults";
import type { LineEdit, LineRow } from "@/lib/inbox-three/line-rows";
import { PoLinePicker, type PoLineChoice } from "./po-line-picker";
@ -143,25 +143,23 @@ export function LineTable({
eight columns are readable side by side on a laptop. */}
<table className="w-full table-fixed border-collapse text-sm">
<colgroup>
<col className="w-10" />
{/* The slip line and its PO line share one column, stacked, so
the descriptions keep the width and the numbers stay narrow. */}
<col className="w-9" />
<col />
<col className="w-[26%]" />
<col className="w-24" />
<col className="w-40" />
<col className="w-28" />
<col className="w-32" />
<col className="w-24" />
<col className="w-28" />
</colgroup>
<thead>
<tr className="border-b bg-muted/30 text-left text-xs uppercase tracking-wide text-muted-foreground">
<th scope="col" className="w-12 px-2 py-2">#</th>
<th scope="col" className="px-2 py-2">On the slip</th>
<th scope="col" className="px-2 py-2">Goes to PO line</th>
<th scope="col" className="px-2 py-2">#</th>
<th scope="col" className="px-2 py-2">On the slip → goes to PO line</th>
<th scope="col" className="px-2 py-2 text-right">Received</th>
<th scope="col" className="px-2 py-2">Unit</th>
<th scope="col" className="px-2 py-2 text-right">Price</th>
<th scope="col" className="px-2 py-2 text-right">Value</th>
<th scope="col" className="px-2 py-2 text-right">Left on PO</th>
<th scope="col" className="px-2 py-2 text-right">Value · left on PO</th>
</tr>
</thead>
<tbody>
@ -179,8 +177,7 @@ export function LineTable({
{row.slipPrice !== null && ` × ${money(row.slipPrice)}`}
</p>
{row.problem && <p className="mt-1 text-xs text-amber-700 dark:text-amber-300">{row.problem}</p>}
</td>
<td className="px-2 py-3">
<div className="mt-2" />
<PoLinePicker
value={state.poItemId}
items={poItems}
@ -229,11 +226,11 @@ export function LineTable({
<Badge variant="outline" className="mt-1 border-amber-400 text-amber-700 dark:text-amber-300">price differs</Badge>
)}
</td>
<td className="px-2 py-3 text-right tabular-nums">{money(numbers.value)}</td>
<td className="px-2 py-3 text-right tabular-nums">
<span className={numbers.leftOnPo !== null && numbers.leftOnPo < 0 ? "font-semibold text-amber-700 dark:text-amber-300" : ""}>
{numbers.leftOnPo === null ? "—" : formatNumber(numbers.leftOnPo)}
</span>
<p className="font-medium">{money(numbers.value)}</p>
<p className={cn("text-xs", numbers.leftOnPo !== null && numbers.leftOnPo < 0 ? "font-semibold text-amber-700 dark:text-amber-300" : "text-muted-foreground")}>
left {numbers.leftOnPo === null ? "—" : formatNumber(numbers.leftOnPo)}
</p>
{over && (
<label className="mt-1 flex items-center justify-end gap-1 text-xs text-amber-700 dark:text-amber-300">
<input