From f75c1b2bbd3193f62d2aebf2b84c7e0a329b1417 Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Fri, 7 Aug 2026 02:55:14 +0200
Subject: [PATCH] =?UTF-8?q?feat(context):=20OrderItemContextPopoverTrigger?=
 =?UTF-8?q?=20(=E2=93=98=20on=20orders=20page)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Orca <help@stably.ai>
---
 .../order-item-context-popover-trigger.tsx    | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/order-item-context-popover-trigger.tsx

diff --git a/src/components/order-item-context-popover-trigger.tsx b/src/components/order-item-context-popover-trigger.tsx
new file mode 100644
index 0000000..5476931
--- /dev/null
+++ b/src/components/order-item-context-popover-trigger.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { Info } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { OrderItemContextPanel, type ApplyPayload } from "@/components/order-item-context-panel";
+import type { OrderItemContextResponse } from "@/lib/server/order-item-context-service";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  itemId: string;
+  /** Optional pre-loaded context. Saves a fetch on first open if supplied. */
+  initialData?: OrderItemContextResponse | null;
+  className?: string;
+}
+
+/**
+ * ⓘ popover trigger that renders the deterministic order-item
+ * context inside the orders detail page items table. Fetches lazily
+ * on first open. Hidden entirely if the fetch 404s (e.g. the
+ * endpoint is feature-flagged off).
+ */
+export function OrderItemContextPopoverTrigger({ itemId, initialData, className }: Props) {
+  const [open, setOpen] = useState(false);
+  const [hidden, setHidden] = useState(false);
+
+  const handleOpen = async (next: boolean) => {
+    setOpen(next);
+  };
+
+  if (hidden) return null;
+
+  return (
+    <Popover open={open} onOpenChange={handleOpen}>
+      <PopoverTrigger
+        className={cn(
+          "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full",
+          "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "text-indigo-600 hover:bg-indigo-500/10",
+          className,
+        )}
+        aria-label="View item context"
+        title="Item context"
+      >
+        <Info className="h-3.5 w-3.5" />
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="right"
+        className="w-[420px] p-0"
+      >
+        <OrderItemContextPanel
+          itemId={itemId}
+          defaultOpen
+          onApply={(_p: ApplyPayload) => {
+            // Orders page is read-only at the row level — apply
+            // requires the user to open the process modal. Close
+            // the popover and let the row click target the modal.
+            setOpen(false);
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}