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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import { useResultStore } from '@/common/stores/useResultStore'
import { Input, Modal, ModalBody, ModalContent, ModalHeader, Pagination, Select, SelectItem, Skeleton, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
import { Product } from 'prisma/generated/client'
import { useQuery } from '@tanstack/react-query'
import React, { useEffect, useMemo, useState } from 'react'
import { useDebounce } from 'usehooks-ts'
import { SHOWING_SELECTIONS } from '@/common/constants/product'
type Props = {
modal: {
isOpen: boolean,
onOpenChange: () => void
}
}
const ProductModal = ({ modal }: Props) => {
const [page, setPage] = useState(1)
const [search, setSearch] = useState("")
const [show, setShow] = useState("1")
const debouncedSearch = useDebounce(search, 500)
const { filter } = useResultStore()
useEffect(() => {
setPage(1)
}, [debouncedSearch, show, filter.company])
const { data } = useQuery({
queryKey: ['product', page, debouncedSearch, filter.company, show],
queryFn: async () => {
const showValue = SHOWING_SELECTIONS.find((item) => item.key === show)?.value || ''
const searchParams = new URLSearchParams({
page: page.toString(),
search: debouncedSearch,
companyId: filter.company,
show: showValue
})
const response = await fetch(`/api/product?${searchParams}`)
const data: {
products: (Product & { company: { id: number, name: string } })[],
page: number,
totalPage: number
} = await response.json()
return data
}
})
const [totalPage, setTotalPage] = useState(1)
useEffect(() => {
if (data?.totalPage) setTotalPage(data?.totalPage)
}, [data?.totalPage])
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setShow(e.target.value)
}
return (
<Modal isOpen={modal.isOpen} onOpenChange={modal.onOpenChange} size='5xl'>
<ModalContent>
<ModalHeader>Product List</ModalHeader>
<ModalBody className='pb-6'>
<div className="flex flex-wrap gap-3">
<div className="w-10/12">
<Input type='text' label="Search" value={search} onChange={(e) => setSearch(e.target.value)} />
</div>
<div className="flex-1 md:w-2/12">
<Select
label="Tampilkan"
selectedKeys={show}
name="show"
onChange={handleSelectChange}
>
{SHOWING_SELECTIONS.map((selection) => (
<SelectItem key={selection.key}>{selection.label}</SelectItem>
))}
</Select>
</div>
</div>
{!data && (
<Skeleton isLoaded={!!data} className='rounded-lg h-[600px]' />
)}
{!!data && (
<Table className='max-h-[600px]' isHeaderSticky>
<TableHeader>
<TableColumn>NAME</TableColumn>
<TableColumn>ITEM CODE</TableColumn>
<TableColumn>BARCODE</TableColumn>
<TableColumn>ON-HAND QTY</TableColumn>
<TableColumn>DIFFERENCE QTY</TableColumn>
<TableColumn>COMPANY</TableColumn>
</TableHeader>
<TableBody items={data?.products || []}>
{(product) => (
<TableRow key={product.id}>
<TableCell>{product.name}</TableCell>
<TableCell>{product.itemCode}</TableCell>
<TableCell>{product.barcode}</TableCell>
<TableCell>{product.onhandQty}</TableCell>
<TableCell>{product.differenceQty}</TableCell>
<TableCell>{product.company.name}</TableCell>
</TableRow>
)}
</TableBody>
</Table>
)}
<Pagination
initialPage={1}
page={page}
total={totalPage}
onChange={(page) => setPage(page)}
className='mt-2'
/>
</ModalBody>
</ModalContent>
</Modal>
)
}
export default ProductModal
|
