feat: add more filters

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import { useUiStore } from '@/stores/ui/ui.store';
 import useSWR from 'swr';
@@ -26,10 +26,9 @@ import TransferToLayingFilterModal from '@/components/pages/production/transfer-
 import TransferToLayingConfirmationModal from '@/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal';
 import TransferToLayingTableSkeleton from '@/components/pages/production/transfer-to-laying/skeleton/TransferToLayingTableSkeleton';
 
-import {
-  TransferToLaying,
-  TransferToLayingFilter,
-} from '@/types/api/production/transfer-to-laying';
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import { TransferToLayingFilterValues } from '@/components/pages/production/transfer-to-laying/filter/TransferToLayingFilter';
+import { OptionType } from '@/components/input/SelectInput';
 import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
 import { cn, formatDate, formatNumber } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -142,6 +141,8 @@ const TransferToLayingsTable = () => {
       status: '',
       filter_by: '',
       sort_by: '',
+      flockSourceNames: '',
+      flockDestinationNames: '',
     },
     paramMap: {
       page: 'page',
@@ -154,6 +155,9 @@ const TransferToLayingsTable = () => {
       filter_by: 'filter_by',
       sort_by: 'sort_by',
     },
+    excludeKeysFromUrl: ['flockSourceNames', 'flockDestinationNames'],
+    persist: true,
+    storeName: 'transfer-to-laying-table',
   });
 
   const {
@@ -431,12 +435,72 @@ const TransferToLayingsTable = () => {
     updateFilter('search', e.target.value);
   };
 
-  const filterSubmitHandler = (values: TransferToLayingFilter) => {
-    updateFilter('startDate', values.startDate);
-    updateFilter('endDate', values.endDate);
-    updateFilter('flockSource', values.flockSource.join(','));
-    updateFilter('flockDestination', values.flockDestination.join(','));
-    updateFilter('status', values.status.join(','));
+  const STATUS_FILTER_OPTIONS = [
+    { value: 'PENDING', label: 'Pengajuan' },
+    { value: 'APPROVED', label: 'Disetujui' },
+    { value: 'REJECTED', label: 'Ditolak' },
+  ];
+
+  const filterModalInitialValues = useMemo(() => {
+    const flockSourceIds = tableFilterState.flockSource
+      ? tableFilterState.flockSource.split(',')
+      : [];
+    const flockSourceNameList = tableFilterState.flockSourceNames
+      ? tableFilterState.flockSourceNames.split(',')
+      : [];
+    const flockSourceOptions = flockSourceIds.filter(Boolean).map((id, i) => ({
+      value: parseInt(id),
+      label: flockSourceNameList[i] || id,
+    }));
+
+    const flockDestIds = tableFilterState.flockDestination
+      ? tableFilterState.flockDestination.split(',')
+      : [];
+    const flockDestNameList = tableFilterState.flockDestinationNames
+      ? tableFilterState.flockDestinationNames.split(',')
+      : [];
+    const flockDestOptions = flockDestIds.filter(Boolean).map((id, i) => ({
+      value: parseInt(id),
+      label: flockDestNameList[i] || id,
+    }));
+
+    const statusIds = tableFilterState.status
+      ? tableFilterState.status.split(',')
+      : [];
+    const statusOptions = statusIds.filter(Boolean).map((id) => {
+      const found = STATUS_FILTER_OPTIONS.find((opt) => opt.value === id);
+      return found || { value: id, label: id };
+    });
+
+    return {
+      startDate: tableFilterState.startDate || '',
+      endDate: tableFilterState.endDate || '',
+      flockSource: flockSourceOptions,
+      flockDestination: flockDestOptions,
+      status: statusOptions,
+    };
+  }, [
+    tableFilterState.startDate,
+    tableFilterState.endDate,
+    tableFilterState.flockSource,
+    tableFilterState.flockDestination,
+    tableFilterState.status,
+    tableFilterState.flockSourceNames,
+    tableFilterState.flockDestinationNames,
+  ]);
+
+  const filterSubmitHandler = (values: TransferToLayingFilterValues) => {
+    const flockSourceOpts = (values.flockSource as OptionType[]) || [];
+    const flockDestOpts = (values.flockDestination as OptionType[]) || [];
+    const statusOpts = (values.status as OptionType[]) || [];
+
+    updateFilter('startDate', values.startDate || '');
+    updateFilter('endDate', values.endDate || '');
+    updateFilter('flockSource', flockSourceOpts.map((o) => String(o.value)).join(','));
+    updateFilter('flockDestination', flockDestOpts.map((o) => String(o.value)).join(','));
+    updateFilter('status', statusOpts.map((o) => String(o.value)).join(','));
+    updateFilter('flockSourceNames', flockSourceOpts.map((o) => String(o.label)).join(','));
+    updateFilter('flockDestinationNames', flockDestOpts.map((o) => String(o.label)).join(','));
   };
 
   const filterResetHandler = () => {
@@ -445,6 +509,8 @@ const TransferToLayingsTable = () => {
     updateFilter('flockSource', '');
     updateFilter('flockDestination', '');
     updateFilter('status', '');
+    updateFilter('flockSourceNames', '');
+    updateFilter('flockDestinationNames', '');
   };
 
   const exportToExcelHandler = async () => {
@@ -558,6 +624,8 @@ const TransferToLayingsTable = () => {
                 'search',
                 'filter_by',
                 'sort_by',
+                'flockSourceNames',
+                'flockDestinationNames',
               ]}
               fieldGroups={[['startDate', 'endDate']]}
               onClick={filterModal.openModal}
@@ -670,6 +738,7 @@ const TransferToLayingsTable = () => {
 
       <TransferToLayingFilterModal
         ref={filterModal.ref}
+        initialValues={filterModalInitialValues}
         onSubmit={filterSubmitHandler}
         onReset={filterResetHandler}
       />