feat: add filter modal

src/components/pages/purchase/PurchaseTable.tsx

@@ -14,6 +14,7 @@ import useSWRInfinite from 'swr/infinite';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
+import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
@@ -25,18 +26,19 @@ import PopoverContent from '@/components/popover/PopoverContent';
 import RequirePermission from '@/components/helper/RequirePermission';
 import StatusBadge from '@/components/helper/StatusBadge';
 import PurchaseTableSkeleton from '@/components/pages/purchase/skeleton/PurchaseTableSkeleton';
+import ButtonFilter from '@/components/helper/ButtonFilter';
+import PurchaseFilterModal from '@/components/pages/purchase/PurchaseFilterModal';
 
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { BaseApiResponse } from '@/types/api/api-general';
 
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { Purchase } from '@/types/api/purchase/purchase';
+import { Purchase, PurchaseFilter } from '@/types/api/purchase/purchase';
 import { PurchaseApi } from '@/services/api/purchase';
 import { ExpenseApi } from '@/services/api/expense';
 import { Expense } from '@/types/api/expense';
 import { Color } from '@/types/theme';
-import Link from 'next/link';
 
 // ===== STATUS BADGE UTILITIES =====
 const statusTextMap: Record<string, string> = {
@@ -165,14 +167,21 @@ const PurchaseTable = () => {
   } = useTableFilter({
     initial: {
       search: '',
+      po_date: '',
+      approval_status: '',
+      product_category_id: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
+      po_date: 'po_date',
+      approval_status: 'approval_status',
+      product_category_id: 'product_category_id',
     },
   });
 
   // ===== MODAL HOOKS =====
+  const filterModal = useModal();
   const deleteModal = useModal();
 
   // ===== API DATA FETCHING =====
@@ -410,13 +419,17 @@ const PurchaseTable = () => {
     [updateFilter, setSearchValue]
   );
 
-  // const pageSizeChangeHandler = useCallback(
+  const filterSubmitHandler = (values: PurchaseFilter) => {
-  //   (val: OptionType | OptionType[] | null) => {
+    updateFilter('po_date', values.poDate);
-  //     const newVal = val as OptionType;
+    updateFilter('product_category_id', values.category.join(','));
-  //     setPageSize(newVal.value as number);
+    updateFilter('approval_status', values.status.join(','));
-  //   },
+  };
-  //   [setPageSize]
+
-  // );
+  const filterResetHandler = () => {
+    updateFilter('po_date', '');
+    updateFilter('product_category_id', '');
+    updateFilter('approval_status', '');
+  };
 
   return (
     <>
@@ -455,6 +468,20 @@ const PurchaseTable = () => {
                   'placeholder:font-semibold placeholder:text-base-content/50',
               }}
             />
+
+            <ButtonFilter
+              values={tableFilterState}
+              excludeFields={[
+                'page',
+                'pageSize',
+                'search',
+                'filter_by',
+                'sort_by',
+              ]}
+              fieldGroups={[['startDate', 'endDate']]}
+              onClick={filterModal.openModal}
+              className='px-3 py-2.5'
+            />
           </div>
         </div>
 
@@ -513,6 +540,13 @@ const PurchaseTable = () => {
       </div>
 
       {/* ===== MODAL COMPONENTS ===== */}
+
+      <PurchaseFilterModal
+        ref={filterModal.ref}
+        onSubmit={filterSubmitHandler}
+        onReset={filterResetHandler}
+      />
+
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'