From 5a08d3651e1f40ed191f0f6d0b75c5fee4502cd1 Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Wed, 29 Jul 2026 20:05:17 +0200
Subject: [PATCH] feat(buyer-tasks): tab strip component

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

diff --git a/src/components/buyer-tasks/buyer-task-tabs.tsx b/src/components/buyer-tasks/buyer-task-tabs.tsx
new file mode 100644
index 0000000..9ce0afc
--- /dev/null
+++ b/src/components/buyer-tasks/buyer-task-tabs.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export type BuyerTaskTab = "needs_po" | "po_draft" | "po_sent";
+
+const TABS: Array<{ value: BuyerTaskTab; label: string }> = [
+  { value: "needs_po", label: "Needs PO" },
+  { value: "po_draft", label: "PO Draft" },
+  { value: "po_sent", label: "PO Sent" },
+];
+
+export function BuyerTaskTabs({
+  active,
+  counts,
+  onChange,
+}: {
+  active: BuyerTaskTab;
+  counts: Record<BuyerTaskTab, number>;
+  onChange: (tab: BuyerTaskTab) => void;
+}) {
+  return (
+    <div className="flex border-b" role="tablist" aria-label="Buyer task tabs">
+      {TABS.map((tab) => (
+        <button
+          key={tab.value}
+          type="button"
+          role="tab"
+          aria-selected={active === tab.value}
+          onClick={() => onChange(tab.value)}
+          data-testid={`buyer-task-tab-${tab.value}`}
+          className={cn(
+            "px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
+            active === tab.value
+              ? "border-primary text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground"
+          )}
+        >
+          {tab.label}
+          <span className="ml-2 text-xs text-muted-foreground">
+            ({counts[tab.value]})
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file