From bbd1e1df7c2fa49ea977b5b07a88b1992a9b049a Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Fri, 10 Jul 2026 02:07:25 +0200
Subject: [PATCH] feat(collection-confirm): add per-order color stripe on group
 sections

---
 src/app/(app)/collection-confirm/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/(app)/collection-confirm/page.tsx b/src/app/(app)/collection-confirm/page.tsx
index 84a8d95..ae5e15d 100644
--- a/src/app/(app)/collection-confirm/page.tsx
+++ b/src/app/(app)/collection-confirm/page.tsx
@@ -10,6 +10,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { ModalShell } from "@/components/ui/modal-shell";
 import { getPocketBase } from "@/lib/pocketbase";
 import { getClientIdentity } from "@/lib/dev-identity";
+import { colorForOrder } from "@/lib/order-color";
 import { cn } from "@/lib/utils";
 
 import {
@@ -439,7 +440,7 @@ export default function CollectionConfirmPage() {
               const confirmLabel = selectedInGroup > 0 ? `Confirm ${selectedInGroup} of ${group.rows.length}` : "Confirm this PO";
               const confirmDisabled = busyId !== null || !allProblemResolved || !actor.id || selectedInGroup === 0;
               return (
-                <section key={group.poNumber || "unknown"} className="space-y-3">
+                <section key={group.poNumber || "unknown"} className={cn("space-y-3 border-l-4 pl-3", colorForOrder(group.poNumber).borderClass)}>
                   <header className="flex flex-wrap items-center gap-3 rounded-md border bg-muted/40 px-3 py-2 text-xs">
                     <div className="flex items-center gap-2">
                       <Layers className="h-3.5 w-3.5 text-muted-foreground" />