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

refactor(collection-map): flex column root + map flex-1, drop bottom list shell

Browse source
This commit is contained in:
SJCoetz 2026-07-12 12:17:03 +02:00
parent 56626c8270
commit 0d63061ea0
1 changed files with 4 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/app/(app)/collection-map/page.tsx
View file

@ -562,7 +562,7 @@ export default function CollectionMapPage() {
const stopCount = stopsWithCoords.reduce((s, x) => s + x.items.length, 0);
return (
<div className="space-y-5">
<div className="flex flex-col gap-5">
{/* KPI strip */}
<div className="grid gap-4 md:grid-cols-3">
<Card className="border-primary/10">
@ -604,7 +604,7 @@ export default function CollectionMapPage() {
</Button>
</div>
<div className="grid items-start gap-5 xl:grid-cols-[minmax(0,1fr)_320px]">
<div className="grid items-stretch gap-5 xl:grid-cols-[minmax(0,1fr)_320px]">
{/* Map */}
<Card
className={cn(
@ -612,7 +612,7 @@ export default function CollectionMapPage() {
isFullscreen ? "fixed inset-0 z-[60] rounded-none border-0" : "relative z-0"
)}
>
<div className={cn("relative", isFullscreen ? "h-dvh min-h-0" : "h-[68vh] min-h-[520px]")}>
<div className={cn("relative h-full min-h-[520px]", isFullscreen ? "min-h-0" : "")}>
<div className="absolute right-3 top-3 z-[30] flex gap-2">
<Button
type="button"
@ -754,86 +754,7 @@ export default function CollectionMapPage() {
</div>
</div>
{/* Stop list (bottom, scrollable) */}
<Card className="border-primary/10">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Truck className="h-4 w-4 text-primary" />
Today&apos;s stops
<span className="ml-auto text-xs font-normal text-muted-foreground">
{filteredItems.length} of {items.length}
</span>
</CardTitle>
</CardHeader>
<CardContent className="max-h-[280px] space-y-1.5 overflow-auto">
{filteredItems.length === 0 ? (
<p className="text-sm text-muted-foreground">No stops for this filter.</p>
) : (
filteredItems.map((it) => {
const driver = it.drv_id ? driverMap.get(it.drv_id) : null;
return (
<button
key={it.id}
type="button"
onClick={() => openAssignDialog(it)}
className="flex w-full flex-wrap items-center gap-x-3 gap-y-1 rounded-lg border bg-card/50 px-3 py-2 text-left text-sm transition-colors hover:border-primary/40 hover:bg-primary/5 cursor-pointer"
>
<div className="min-w-0 flex-1">
<p className="truncate font-medium">{it.description || "—"}</p>
<p className="truncate text-xs text-muted-foreground">
<Link
href={`/orders/${it.order_id}`}
onClick={(e) => e.stopPropagation()}
className="hover:underline"
>
{it.order_number || "—"}
</Link>
{" · "}
{it.po_number ? (
<Link
href={`/orders/${it.order_id}`}
onClick={(e) => e.stopPropagation()}
className="hover:underline"
>
PO {it.po_number}
</Link>
) : (
<span>no PO</span>
)}
{" · "}
{it.supplier_name}
</p>
</div>
<Badge variant="outline" className="text-[10px]">
{it.item_status === "assigned" ? "Assigned" : "In pool"}
</Badge>
<Badge variant="secondary" className="text-[10px]">
{driver?.name || "no driver"}
</Badge>
<span
role="button"
tabIndex={0}
onClick={(e) => {
e.stopPropagation();
openAssignDialog(it);
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.stopPropagation();
e.preventDefault();
openAssignDialog(it);
}
}}
className="inline-flex h-7 cursor-pointer items-center rounded-md px-2 text-xs font-medium text-primary hover:bg-primary/10 hover:underline"
>
{it.item_status === "assigned" ? "Reassign" : "Assign"}
</span>
</button>
);
})
)}
</CardContent>
</Card>
{/* TODO(driver-cards Task 5): bottom list removal is finalised below */}
<AssignDriverDialog
open={assignDialog.open}