1 files changed, 98 insertions, 0 deletions
diff --git a/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx b/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx
new file mode 100644
index 00000000..49a5d890
--- /dev/null
+++ b/lib/vendors/rfq-history-table/rfq-items-table-dialog.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DataTable } from "@/components/data-table/data-table"
+import { useDataTable } from "@/hooks/use-data-table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header"
+
+interface RfqItem {
+  id: number
+  itemCode: string
+  description: string | null
+  quantity: number | null
+  uom: string | null
+}
+
+interface RfqItemsTableDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  items: RfqItem[]
+}
+
+export function RfqItemsTableDialog({
+  open,
+  onOpenChange,
+  items,
+}: RfqItemsTableDialogProps) {
+  const columns = React.useMemo<ColumnDef<RfqItem>[]>(
+    () => [
+      {
+        accessorKey: "itemCode",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Item Code" />
+        ),
+      },
+      {
+        accessorKey: "description",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Description" />
+        ),
+        cell: ({ row }) => row.getValue("description") || "-",
+      },
+      {
+        accessorKey: "quantity",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Quantity" />
+        ),
+        cell: ({ row }) => {
+          const quantity = row.getValue("quantity") as number | null;
+          return (
+            <div className="text-center">
+              {quantity !== null ? quantity.toLocaleString() : "-"}
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: "uom",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="UoM" />
+        ),
+        cell: ({ row }) => row.getValue("uom") || "-",
+      },
+    ],
+    []
+  )
+
+  const { table } = useDataTable({
+    data: items,
+    columns,
+    pageCount: 1,
+    enablePinning: false,
+    enableAdvancedFilter: false,
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>RFQ Items</DialogTitle>
+          <DialogDescription>
+            Items included in this RFQ
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mt-4">
+          <DataTable table={table} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+} 
+\ No newline at end of file