1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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>
)
}
|
