From 0d63061ea0c00a2ebce1423f3935b7ce949e9895 Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Sun, 12 Jul 2026 12:17:03 +0200
Subject: [PATCH] refactor(collection-map): flex column root + map flex-1, drop
 bottom list shell

---
 src/app/(app)/collection-map/page.tsx | 87 ++-------------------------
 1 file changed, 4 insertions(+), 83 deletions(-)

diff --git a/src/app/(app)/collection-map/page.tsx b/src/app/(app)/collection-map/page.tsx
index ce4b1d9..bba795c 100644
--- a/src/app/(app)/collection-map/page.tsx
+++ b/src/app/(app)/collection-map/page.tsx
@@ -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}