diff --git a/src/components/buyer-tasks/buyer-task-group-card.test.tsx b/src/components/buyer-tasks/buyer-task-group-card.test.tsx index a96218d..126981b 100644 --- a/src/components/buyer-tasks/buyer-task-group-card.test.tsx +++ b/src/components/buyer-tasks/buyer-task-group-card.test.tsx @@ -62,4 +62,23 @@ describe("BuyerTaskGroupCard", () => { fireEvent.click(screen.getByTestId("buyer-task-items-toggle")); expect(screen.getByText("HSS drill")).toBeInTheDocument(); }); + + it("shows the PO number prominently at the top when one exists", () => { + render( + , + ); + expect( + screen.getByTestId(`buyer-task-po-number-${baseGroup.groupId}`), + ).toHaveTextContent("PO-2607-001"); + }); + + it("omits the PO number badge on the needs_po tab (no PO yet)", () => { + render(); + expect( + screen.queryByTestId(`buyer-task-po-number-${baseGroup.groupId}`), + ).toBeNull(); + }); }); diff --git a/src/components/buyer-tasks/buyer-task-group-card.tsx b/src/components/buyer-tasks/buyer-task-group-card.tsx index 54e4400..e800cd8 100644 --- a/src/components/buyer-tasks/buyer-task-group-card.tsx +++ b/src/components/buyer-tasks/buyer-task-group-card.tsx @@ -1,9 +1,12 @@ "use client"; +import { FileText } from "lucide-react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { BuyerTaskItemsList, type BuyerTaskItem } from "./buyer-task-items-list"; import type { BuyerTaskGroup } from "@/lib/server/buyer-tasks-service"; +import { supplierColor } from "@/lib/supplier-color"; +import { withAlpha } from "@/lib/item-status-ui"; const ACTION_LABEL: Record = { needs_po: "Generate PO", @@ -26,20 +29,68 @@ export function BuyerTaskGroupCard({ onAction: (group: BuyerTaskGroup) => void; disabled?: boolean; }) { + // Deterministic supplier stripe colour. Same supplier → same colour + // across cards and reloads. + const stripe = supplierColor(group.supplierId); + return ( - - + + {/* Supplier colour stripe — sits along the left edge so the + operator can spot which supplier this card is for at a + glance when many cards are stacked. Pinned full height via + absolute positioning so it lines up with the Card outline. */} +