1 files changed, 29 insertions, 5 deletions
diff --git a/src/modules/result/components/ProductModal.tsx b/src/modules/result/components/ProductModal.tsx
index 1fe4130..0d7a7fc 100644
--- a/src/modules/result/components/ProductModal.tsx
+++ b/src/modules/result/components/ProductModal.tsx
@@ -1,9 +1,10 @@
 import { useResultStore } from '@/common/stores/useResultStore'
-import { Input, Modal, ModalBody, ModalContent, ModalHeader, Pagination, Skeleton, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
+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: {
@@ -15,20 +16,23 @@ type Props = {
 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])
+  }, [debouncedSearch, show, filter.company])
 
   const { data } = useQuery({
-    queryKey: ['product', page, debouncedSearch, filter.company],
+    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
+        companyId: filter.company,
+        show: showValue
       })
       const response = await fetch(`/api/product?${searchParams}`)
       const data: {
@@ -47,12 +51,32 @@ const ProductModal = ({ modal }: Props) => {
     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'>
-          <Input type='text' label="Search" value={search} onChange={(e) => setSearch(e.target.value)} />
+          <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]' />
           )}