From 6fa44c55ff5ba705c5354a3ab0a2ee9d0ac1d85c Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Wed, 29 Jul 2026 20:06:10 +0200
Subject: [PATCH] feat(buyer-tasks): collapsible items-list component

Co-authored-by: Orca <help@stably.ai>
---
 .../buyer-tasks/buyer-task-items-list.tsx     | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/components/buyer-tasks/buyer-task-items-list.tsx

diff --git a/src/components/buyer-tasks/buyer-task-items-list.tsx b/src/components/buyer-tasks/buyer-task-items-list.tsx
new file mode 100644
index 0000000..e7432ff
--- /dev/null
+++ b/src/components/buyer-tasks/buyer-task-items-list.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type BuyerTaskItem = {
+  id: string;
+  description: string;
+  quantity: number;
+  costPrice: number;
+  sellingPrice: number;
+};
+
+export function BuyerTaskItemsList({ items }: { items: BuyerTaskItem[] }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="border-t">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center gap-1.5 px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted/50"
+        data-testid="buyer-task-items-toggle"
+      >
+        {open ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        {open ? "Hide" : "Show"} {items.length} item{items.length === 1 ? "" : "s"}
+      </button>
+      {open && (
+        <ul className="divide-y text-xs" data-testid="buyer-task-items-list">
+          {items.map((item) => (
+            <li
+              key={item.id}
+              className={cn("flex items-center justify-between px-3 py-1.5")}
+              data-testid="buyer-task-item"
+            >
+              <span className="truncate flex-1">{item.description || "(no description)"}</span>
+              <span className="ml-2 tabular-nums">
+                {item.quantity} × R{item.costPrice.toFixed(2)}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
\ No newline at end of file