58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Info } from "lucide-react";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import { OrderItemContextPanel } from "@/components/order-item-context-panel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Props {
|
|
itemId: string;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* ⓘ popover trigger that renders the deterministic order-item
|
|
* context inside the orders detail page items table. Fetches lazily
|
|
* on first open.
|
|
*/
|
|
export function OrderItemContextPopoverTrigger({ itemId, className }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<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={() => {
|
|
// 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>
|
|
);
|
|
}
|