diff --git a/src/app/(app)/collection-pool/components.tsx b/src/app/(app)/collection-pool/components.tsx
new file mode 100644
index 0000000..ef19d51
--- /dev/null
+++ b/src/app/(app)/collection-pool/components.tsx
@@ -0,0 +1,347 @@
+"use client";
+
+import Link from "next/link";
+import { AlertTriangle, ChevronDown, Loader2, Truck } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { OrderItem } from "@/lib/types";
+import {
+  type CollectionPoolGroup,
+  getAssignmentBadge,
+  getAssignmentState,
+  getPoolAgeLabel,
+} from "./view-model";
+
+type CollectionPoolRow = OrderItem & {
+  ready_for_collection?: boolean | null;
+  expand?: {
+    purchase_order?: {
+      id: string;
+      po_number?: string;
+      supplier?: string;
+      expand?: { supplier?: { id: string; suppliername?: string; email?: string } };
+      status?: string;
+    };
+    order?: {
+      id: string;
+      order_number?: string;
+      company?: string;
+      customer?: string;
+      expand?: {
+        company?: { id: string; company?: string };
+        customer?: { id: string; customer?: string };
+      };
+    };
+  };
+};
+
+export type CollectionPoolVisibleRow = CollectionPoolRow & {
+  supplierId: string;
+  supplierName: string;
+  companyName: string;
+  customerName: string;
+  poNumber: string;
+  orderNumber: string;
+};
+
+function markerTokenToClassName(token?: string): string {
+  switch (token) {
+    case "marker-blue":
+      return "bg-blue-500";
+    case "marker-emerald":
+      return "bg-emerald-500";
+    case "marker-violet":
+      return "bg-violet-500";
+    case "marker-amber":
+      return "bg-amber-500";
+    default:
+      return "bg-slate-300";
+  }
+}
+
+export function PoolRow({
+  row,
+  busy,
+  markerToken,
+  todayYmd,
+  selected,
+  onToggleSelected,
+  onOpenAssign,
+  onToggleReady,
+}: {
+  row: CollectionPoolVisibleRow;
+  busy: boolean;
+  markerToken?: string;
+  todayYmd: string;
+  selected: boolean;
+  onToggleSelected: (rowId: string) => void;
+  onOpenAssign: (row: CollectionPoolVisibleRow) => void;
+  onToggleReady: (row: CollectionPoolVisibleRow, ready: boolean) => void;
+}) {
+  const assignmentState = getAssignmentState(row, todayYmd);
+  const assignmentBadge = getAssignmentBadge(assignmentState);
+  const isAssigned = assignmentState !== "unassigned";
+  const readyLabel = row.ready_for_collection ? "Ready" : "Pending";
+  const assignedDateLabel = row.assigned_at
+    ? new Date(row.assigned_at).toLocaleDateString(undefined, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+      })
+    : null;
+
+  return (
+    <li
+      className={cn(
+        "grid grid-cols-[6px_minmax(0,1fr)]",
+        selected && "bg-primary/5",
+      )}
+      aria-busy={busy}
+    >
+      <span className={cn("min-h-full", markerTokenToClassName(markerToken))} aria-hidden />
+
+      <div className="grid gap-4 p-4 lg:grid-cols-[minmax(0,1.35fr)_minmax(0,0.95fr)_auto_auto] lg:items-center">
+        <div className="flex min-w-0 items-start gap-2">
+          <input
+            type="checkbox"
+            checked={selected}
+            onChange={() => onToggleSelected(row.id)}
+            disabled={busy}
+            aria-label={`Select ${row.description ?? "item"} at ${row.supplierName ?? "unknown supplier"}`}
+            className="mt-1 size-4 shrink-0 cursor-pointer accent-primary disabled:cursor-not-allowed"
+          />
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold text-foreground">{row.supplierName}</p>
+            <p className="mt-1 truncate text-sm text-foreground">{row.description || "(no description)"}</p>
+            <div className="mt-1 flex flex-wrap gap-x-2 gap-y-1 text-xs text-muted-foreground">
+              <span>{row.customerName || "No customer"}</span>
+              <span className="text-border">/</span>
+              <span>{row.companyName || "No company"}</span>
+            </div>
+            {!row.purchase_order && (
+              <div className="mt-2 flex items-start gap-2 rounded-md border border-amber-200/80 bg-amber-50/70 px-2.5 py-2 text-[11px] leading-5 text-amber-900">
+                <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                <span>This row has no purchase order link. The PO may have been deleted.</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="min-w-0 text-sm">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+            <span className="font-medium uppercase tracking-wide">Order</span>
+            <Link href={`/orders/${row.order}`} className="min-w-0 truncate text-foreground hover:underline">
+              {row.orderNumber || row.order}
+            </Link>
+          </div>
+          <div className="mt-1 font-mono text-xs text-muted-foreground">{row.poNumber || "No PO"}</div>
+          <div className="mt-1 text-base font-semibold text-primary">
+            {getPoolAgeLabel(row.updated)}
+          </div>
+          {row.updated && (
+            <div className="mt-0.5 text-[11px] text-muted-foreground">
+              In pool since {new Date(row.updated).toLocaleDateString(undefined, {
+                day: "numeric",
+                month: "short",
+              })}
+            </div>
+          )}
+          {assignedDateLabel && <div className="mt-1 text-xs text-muted-foreground">Scheduled {assignedDateLabel}</div>}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2 lg:flex-col lg:items-start">
+          <span className={cn("inline-flex rounded-full px-2 py-0.5 text-xs font-medium", assignmentBadge.className)}>
+            {assignmentBadge.label}
+          </span>
+          <span
+            className={cn(
+              "inline-flex rounded-full px-2 py-0.5 text-xs font-medium",
+              row.ready_for_collection
+                ? "bg-emerald-100 text-emerald-800 ring-1 ring-emerald-200/60"
+                : "bg-amber-100 text-amber-800 ring-1 ring-amber-200/60",
+            )}
+          >
+            {readyLabel}
+          </span>
+          {row.notes && row.notes.trim().length > 0 && (
+            <span className="group/notes relative inline-flex items-center rounded-md border bg-muted/30 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+              Notes
+              <span
+                role="tooltip"
+                className="pointer-events-none absolute left-0 top-full z-20 mt-1 hidden w-72 rounded-md border bg-popover px-3 py-2 text-xs font-normal normal-case tracking-normal text-popover-foreground shadow-md group-hover/notes:block group-focus-within/notes:block"
+              >
+                {row.notes.length > 280 ? `${row.notes.slice(0, 280)}…` : row.notes}
+              </span>
+            </span>
+          )}
+        </div>
+
+        <div className="flex flex-col items-stretch gap-2 lg:min-w-[11rem]">
+          <Button size="sm" variant={isAssigned ? "outline" : "default"} onClick={() => onOpenAssign(row)} disabled={busy}>
+            {isAssigned ? "Reschedule" : "Assign Driver"}
+          </Button>
+          <Button
+            size="sm"
+            variant={row.ready_for_collection ? "outline" : "default"}
+            onClick={() => onToggleReady(row, !row.ready_for_collection)}
+            disabled={busy}
+            className={
+              row.ready_for_collection
+                ? undefined
+                : "border-emerald-600 bg-emerald-600 text-white shadow-sm shadow-emerald-900/10 hover:border-emerald-700 hover:bg-emerald-700"
+            }
+          >
+            {row.ready_for_collection ? "Mark Pending" : "Mark Ready"}
+          </Button>
+          {busy && (
+            <span className="inline-flex items-center justify-end gap-1 text-[11px] text-muted-foreground">
+              <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
+              Updating...
+            </span>
+          )}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export function SupplierGroup({
+  group,
+  busy,
+  todayYmd,
+  selectedIds,
+  collapsed,
+  onToggleRowSelected,
+  onToggleSectionSelected,
+  onToggleCollapsed,
+  onOpenAssign,
+  onOpenBulkAssign,
+  onToggleReady,
+}: {
+  // `group.rows` is typed as `CollectionPoolViewRow[]` in the helper, but
+  // `PoolRow` (this page's existing row component) expects the richer
+  // `CollectionPoolVisibleRow` (which extends `OrderItem`). The widening is
+  // sound because `buildSupplierGroups` is fed `CollectionPoolVisibleRow[]`
+  // — see Task 7 wiring.
+  group: Omit<CollectionPoolGroup, "rows"> & { rows: CollectionPoolVisibleRow[] };
+  busy: boolean;
+  todayYmd: string;
+  selectedIds: Set<string>;
+  collapsed: boolean;
+  onToggleRowSelected: (rowId: string) => void;
+  onToggleSectionSelected: (rowIds: string[]) => void;
+  onToggleCollapsed: (supplierId: string) => void;
+  onOpenAssign: (row: CollectionPoolVisibleRow) => void;
+  onOpenBulkAssign: (supplierId: string, supplierName: string, rowIds: string[]) => void;
+  onToggleReady: (row: CollectionPoolVisibleRow, ready: boolean) => void;
+}) {
+  const rowIds = group.rows.map((r) => r.id);
+  const selectedCount = rowIds.filter((id) => selectedIds.has(id)).length;
+  const allSelected = selectedCount === rowIds.length && rowIds.length > 0;
+  const someSelected = selectedCount > 0 && !allSelected;
+  const allAssigned = group.rows.every(
+    (r) => getAssignmentState(r, todayYmd) !== "unassigned",
+  );
+
+  const eyebrowText = (() => {
+    if (group.topPoNumbers.length === 0) return null;
+    const head = group.topPoNumbers.map((p) => `PO ${p}`).join(", ");
+    return group.remainingPoCount > 0
+      ? `${head} (+${group.remainingPoCount} more)`
+      : head;
+  })();
+
+  const assignLabel = allSelected
+    ? `Assign ${rowIds.length} stops`
+    : selectedCount > 0
+      ? `Assign ${selectedCount} selected`
+      : `Assign all ${rowIds.length}`;
+
+  const onAssignClick = () => {
+    const ids = allSelected || selectedCount === 0 ? rowIds : rowIds.filter((id) => selectedIds.has(id));
+    onOpenBulkAssign(group.supplierId, group.supplierName, ids);
+  };
+
+  return (
+    <section
+      aria-labelledby={`supplier-${group.supplierId}`}
+      data-od-id={`collection-pool-supplier-${group.supplierId}`}
+      className="border-b last:border-b-0"
+    >
+      <header className="sticky top-0 z-10 flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5">
+        <span
+          className={cn("size-2.5 shrink-0 rounded-full", markerTokenToClassName(group.markerToken))}
+          aria-hidden
+        />
+        <h3
+          id={`supplier-${group.supplierId}`}
+          className="text-sm font-semibold text-foreground"
+        >
+          {group.supplierName || "Unknown supplier"}
+        </h3>
+        <span className="text-xs text-muted-foreground">
+          · {group.rows.length} {group.rows.length === 1 ? "stop" : "stops"}
+          {eyebrowText ? <> · {eyebrowText}</> : null}
+        </span>
+        <div className="ml-auto flex items-center gap-2">
+          <label className="inline-flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
+            <input
+              type="checkbox"
+              checked={allSelected}
+              ref={(el) => {
+                if (el) el.indeterminate = someSelected;
+              }}
+              onChange={() => onToggleSectionSelected(rowIds)}
+              disabled={busy}
+              className="size-4 cursor-pointer accent-primary disabled:cursor-not-allowed"
+              aria-label={`Select all ${group.rows.length} stops at ${group.supplierName || "unknown supplier"}`}
+            />
+            Select all
+          </label>
+          <Button
+            size="sm"
+            onClick={onAssignClick}
+            disabled={busy || allAssigned}
+            title={allAssigned ? "Every stop at this supplier is already assigned" : undefined}
+          >
+            <Truck className="mr-1.5 size-3.5" />
+            {assignLabel}
+          </Button>
+          <button
+            type="button"
+            onClick={() => onToggleCollapsed(group.supplierId)}
+            aria-expanded={!collapsed}
+            aria-controls={`supplier-${group.supplierId}-body`}
+            className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          >
+            <ChevronDown className={cn("size-4 transition-transform", collapsed && "-rotate-90")} />
+          </button>
+        </div>
+      </header>
+      <div
+        id={`supplier-${group.supplierId}-body`}
+        className={cn(
+          "grid overflow-hidden transition-[grid-template-rows] duration-150 ease-out",
+          collapsed ? "grid-rows-[0fr]" : "grid-rows-[1fr]",
+        )}
+      >
+        <ul className="divide-y min-h-0">
+          {group.rows.map((row) => (
+            <PoolRow
+              key={row.id}
+              row={row}
+              busy={busy}
+              markerToken={group.markerToken}
+              todayYmd={todayYmd}
+              selected={selectedIds.has(row.id)}
+              onToggleSelected={onToggleRowSelected}
+              onOpenAssign={onOpenAssign}
+              onToggleReady={onToggleReady}
+            />
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/(app)/collection-pool/page.tsx b/src/app/(app)/collection-pool/page.tsx
index a427f4f..4be236b 100644
--- a/src/app/(app)/collection-pool/page.tsx
+++ b/src/app/(app)/collection-pool/page.tsx
@@ -1,14 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  AlertTriangle,
-  ChevronDown,
-  Loader2,
-  Search,
-  Truck,
-} from "lucide-react";
-import Link from "next/link";
+import { Search, Truck } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -34,6 +27,8 @@ import {
   getPoolAgeLabel,
 } from "./view-model";
 
+import { PoolRow, SupplierGroup, type CollectionPoolVisibleRow } from "./components";
+
 type CollectionPoolRow = OrderItem & {
   ready_for_collection?: boolean | null;
   expand?: {
@@ -57,15 +52,6 @@ type CollectionPoolRow = OrderItem & {
   };
 };
 
-type CollectionPoolVisibleRow = CollectionPoolRow & {
-  supplierId: string;
-  supplierName: string;
-  companyName: string;
-  customerName: string;
-  poNumber: string;
-  orderNumber: string;
-};
-
 type CollectionPoolAssignDialogState = {
   row: CollectionPoolVisibleRow;
   initialDriverId: string;
@@ -81,21 +67,6 @@ function assignedAtToYmd(iso: string | undefined | null): string | undefined {
   return d.toISOString().slice(0, 10);
 }
 
-function markerTokenToClassName(token?: string): string {
-  switch (token) {
-    case "marker-blue":
-      return "bg-blue-500";
-    case "marker-emerald":
-      return "bg-emerald-500";
-    case "marker-violet":
-      return "bg-violet-500";
-    case "marker-amber":
-      return "bg-amber-500";
-    default:
-      return "bg-slate-300";
-  }
-}
-
 function EmptyState({ message }: { message: string }) {
   return (
     <div className="flex flex-col items-center justify-center rounded-md border border-dashed py-16 text-center">
@@ -683,289 +654,3 @@ export default function CollectionPoolPage() {
     </div>
   );
 }
-
-function PoolRow({
-  row,
-  busy,
-  markerToken,
-  todayYmd,
-  selected,
-  onToggleSelected,
-  onOpenAssign,
-  onToggleReady,
-}: {
-  row: CollectionPoolVisibleRow;
-  busy: boolean;
-  markerToken?: string;
-  todayYmd: string;
-  selected: boolean;
-  onToggleSelected: (rowId: string) => void;
-  onOpenAssign: (row: CollectionPoolVisibleRow) => void;
-  onToggleReady: (row: CollectionPoolVisibleRow, ready: boolean) => void;
-}) {
-  const assignmentState = getAssignmentState(row, todayYmd);
-  const assignmentBadge = getAssignmentBadge(assignmentState);
-  const isAssigned = assignmentState !== "unassigned";
-  const readyLabel = row.ready_for_collection ? "Ready" : "Pending";
-  const assignedDateLabel = row.assigned_at
-    ? new Date(row.assigned_at).toLocaleDateString(undefined, {
-        weekday: "short",
-        day: "numeric",
-        month: "short",
-      })
-    : null;
-
-  return (
-    <li
-      className={cn(
-        "grid grid-cols-[6px_minmax(0,1fr)]",
-        selected && "bg-primary/5",
-      )}
-      aria-busy={busy}
-    >
-      <span className={cn("min-h-full", markerTokenToClassName(markerToken))} aria-hidden />
-
-      <div className="grid gap-4 p-4 lg:grid-cols-[minmax(0,1.35fr)_minmax(0,0.95fr)_auto_auto] lg:items-center">
-        <div className="flex min-w-0 items-start gap-2">
-          <input
-            type="checkbox"
-            checked={selected}
-            onChange={() => onToggleSelected(row.id)}
-            disabled={busy}
-            aria-label={`Select ${row.description ?? "item"} at ${row.supplierName ?? "unknown supplier"}`}
-            className="mt-1 size-4 shrink-0 cursor-pointer accent-primary disabled:cursor-not-allowed"
-          />
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold text-foreground">{row.supplierName}</p>
-            <p className="mt-1 truncate text-sm text-foreground">{row.description || "(no description)"}</p>
-            <div className="mt-1 flex flex-wrap gap-x-2 gap-y-1 text-xs text-muted-foreground">
-              <span>{row.customerName || "No customer"}</span>
-              <span className="text-border">/</span>
-              <span>{row.companyName || "No company"}</span>
-            </div>
-            {!row.purchase_order && (
-              <div className="mt-2 flex items-start gap-2 rounded-md border border-amber-200/80 bg-amber-50/70 px-2.5 py-2 text-[11px] leading-5 text-amber-900">
-                <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-                <span>This row has no purchase order link. The PO may have been deleted.</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="min-w-0 text-sm">
-          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-            <span className="font-medium uppercase tracking-wide">Order</span>
-            <Link href={`/orders/${row.order}`} className="min-w-0 truncate text-foreground hover:underline">
-              {row.orderNumber || row.order}
-            </Link>
-          </div>
-          <div className="mt-1 font-mono text-xs text-muted-foreground">{row.poNumber || "No PO"}</div>
-          <div className="mt-1 text-base font-semibold text-primary">
-            {getPoolAgeLabel(row.updated)}
-          </div>
-          {row.updated && (
-            <div className="mt-0.5 text-[11px] text-muted-foreground">
-              In pool since {new Date(row.updated).toLocaleDateString(undefined, {
-                day: "numeric",
-                month: "short",
-              })}
-            </div>
-          )}
-          {assignedDateLabel && <div className="mt-1 text-xs text-muted-foreground">Scheduled {assignedDateLabel}</div>}
-        </div>
-
-        <div className="flex flex-wrap items-center gap-2 lg:flex-col lg:items-start">
-          <span className={cn("inline-flex rounded-full px-2 py-0.5 text-xs font-medium", assignmentBadge.className)}>
-            {assignmentBadge.label}
-          </span>
-          <span
-            className={cn(
-              "inline-flex rounded-full px-2 py-0.5 text-xs font-medium",
-              row.ready_for_collection
-                ? "bg-emerald-100 text-emerald-800 ring-1 ring-emerald-200/60"
-                : "bg-amber-100 text-amber-800 ring-1 ring-amber-200/60",
-            )}
-          >
-            {readyLabel}
-          </span>
-          {row.notes && row.notes.trim().length > 0 && (
-            <span className="group/notes relative inline-flex items-center rounded-md border bg-muted/30 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-              Notes
-              <span
-                role="tooltip"
-                className="pointer-events-none absolute left-0 top-full z-20 mt-1 hidden w-72 rounded-md border bg-popover px-3 py-2 text-xs font-normal normal-case tracking-normal text-popover-foreground shadow-md group-hover/notes:block group-focus-within/notes:block"
-              >
-                {row.notes.length > 280 ? `${row.notes.slice(0, 280)}…` : row.notes}
-              </span>
-            </span>
-          )}
-        </div>
-
-        <div className="flex flex-col items-stretch gap-2 lg:min-w-[11rem]">
-          <Button size="sm" variant={isAssigned ? "outline" : "default"} onClick={() => onOpenAssign(row)} disabled={busy}>
-            {isAssigned ? "Reschedule" : "Assign Driver"}
-          </Button>
-          <Button
-            size="sm"
-            variant={row.ready_for_collection ? "outline" : "default"}
-            onClick={() => onToggleReady(row, !row.ready_for_collection)}
-            disabled={busy}
-            className={
-              row.ready_for_collection
-                ? undefined
-                : "border-emerald-600 bg-emerald-600 text-white shadow-sm shadow-emerald-900/10 hover:border-emerald-700 hover:bg-emerald-700"
-            }
-          >
-            {row.ready_for_collection ? "Mark Pending" : "Mark Ready"}
-          </Button>
-          {busy && (
-            <span className="inline-flex items-center justify-end gap-1 text-[11px] text-muted-foreground">
-              <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
-              Updating...
-            </span>
-          )}
-        </div>
-      </div>
-    </li>
-  );
-}
-
-function SupplierGroup({
-  group,
-  busy,
-  todayYmd,
-  selectedIds,
-  collapsed,
-  onToggleRowSelected,
-  onToggleSectionSelected,
-  onToggleCollapsed,
-  onOpenAssign,
-  onOpenBulkAssign,
-  onToggleReady,
-}: {
-  // `group.rows` is typed as `CollectionPoolViewRow[]` in the helper, but
-  // `PoolRow` (this page's existing row component) expects the richer
-  // `CollectionPoolVisibleRow` (which extends `OrderItem`). The widening is
-  // sound because `buildSupplierGroups` is fed `CollectionPoolVisibleRow[]`
-  // — see Task 7 wiring.
-  group: Omit<CollectionPoolGroup, "rows"> & { rows: CollectionPoolVisibleRow[] };
-  busy: boolean;
-  todayYmd: string;
-  selectedIds: Set<string>;
-  collapsed: boolean;
-  onToggleRowSelected: (rowId: string) => void;
-  onToggleSectionSelected: (rowIds: string[]) => void;
-  onToggleCollapsed: (supplierId: string) => void;
-  onOpenAssign: (row: CollectionPoolVisibleRow) => void;
-  onOpenBulkAssign: (supplierId: string, supplierName: string, rowIds: string[]) => void;
-  onToggleReady: (row: CollectionPoolVisibleRow, ready: boolean) => void;
-}) {
-  const rowIds = group.rows.map((r) => r.id);
-  const selectedCount = rowIds.filter((id) => selectedIds.has(id)).length;
-  const allSelected = selectedCount === rowIds.length && rowIds.length > 0;
-  const someSelected = selectedCount > 0 && !allSelected;
-  const allAssigned = group.rows.every(
-    (r) => getAssignmentState(r, todayYmd) !== "unassigned",
-  );
-
-  const eyebrowText = (() => {
-    if (group.topPoNumbers.length === 0) return null;
-    const head = group.topPoNumbers.map((p) => `PO ${p}`).join(", ");
-    return group.remainingPoCount > 0
-      ? `${head} (+${group.remainingPoCount} more)`
-      : head;
-  })();
-
-  const assignLabel = allSelected
-    ? `Assign ${rowIds.length} stops`
-    : selectedCount > 0
-      ? `Assign ${selectedCount} selected`
-      : `Assign all ${rowIds.length}`;
-
-  const onAssignClick = () => {
-    const ids = allSelected || selectedCount === 0 ? rowIds : rowIds.filter((id) => selectedIds.has(id));
-    onOpenBulkAssign(group.supplierId, group.supplierName, ids);
-  };
-
-  return (
-    <section
-      aria-labelledby={`supplier-${group.supplierId}`}
-      data-od-id={`collection-pool-supplier-${group.supplierId}`}
-      className="border-b last:border-b-0"
-    >
-      <header className="sticky top-0 z-10 flex flex-wrap items-center gap-3 border-b bg-muted/30 px-4 py-2.5">
-        <span
-          className={cn("size-2.5 shrink-0 rounded-full", markerTokenToClassName(group.markerToken))}
-          aria-hidden
-        />
-        <h3
-          id={`supplier-${group.supplierId}`}
-          className="text-sm font-semibold text-foreground"
-        >
-          {group.supplierName || "Unknown supplier"}
-        </h3>
-        <span className="text-xs text-muted-foreground">
-          · {group.rows.length} {group.rows.length === 1 ? "stop" : "stops"}
-          {eyebrowText ? <> · {eyebrowText}</> : null}
-        </span>
-        <div className="ml-auto flex items-center gap-2">
-          <label className="inline-flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
-            <input
-              type="checkbox"
-              checked={allSelected}
-              ref={(el) => {
-                if (el) el.indeterminate = someSelected;
-              }}
-              onChange={() => onToggleSectionSelected(rowIds)}
-              disabled={busy}
-              className="size-4 cursor-pointer accent-primary disabled:cursor-not-allowed"
-              aria-label={`Select all ${group.rows.length} stops at ${group.supplierName || "unknown supplier"}`}
-            />
-            Select all
-          </label>
-          <Button
-            size="sm"
-            onClick={onAssignClick}
-            disabled={busy || allAssigned}
-            title={allAssigned ? "Every stop at this supplier is already assigned" : undefined}
-          >
-            <Truck className="mr-1.5 size-3.5" />
-            {assignLabel}
-          </Button>
-          <button
-            type="button"
-            onClick={() => onToggleCollapsed(group.supplierId)}
-            aria-expanded={!collapsed}
-            aria-controls={`supplier-${group.supplierId}-body`}
-            className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-          >
-            <ChevronDown className={cn("size-4 transition-transform", collapsed && "-rotate-90")} />
-          </button>
-        </div>
-      </header>
-      <div
-        id={`supplier-${group.supplierId}-body`}
-        className={cn(
-          "grid overflow-hidden transition-[grid-template-rows] duration-150 ease-out",
-          collapsed ? "grid-rows-[0fr]" : "grid-rows-[1fr]",
-        )}
-      >
-        <ul className="divide-y min-h-0">
-          {group.rows.map((row) => (
-            <PoolRow
-              key={row.id}
-              row={row}
-              busy={busy}
-              markerToken={group.markerToken}
-              todayYmd={todayYmd}
-              selected={selectedIds.has(row.id)}
-              onToggleSelected={onToggleRowSelected}
-              onOpenAssign={onOpenAssign}
-              onToggleReady={onToggleReady}
-            />
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}