feat(FE): Add filter functionality to ProjectFlockTable

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -3,7 +3,10 @@
 import Button from '@/components/Button';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import { OptionType, useSelect } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
@@ -22,6 +25,7 @@ import { useRouter } from 'next/navigation';
 import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
+import { useFormik } from 'formik';
 
 import RequirePermission from '@/components/helper/RequirePermission';
 import StatusBadge from '@/components/helper/StatusBadge';
@@ -32,6 +36,12 @@ import { useProjectFlockStore } from '@/stores/production/project-flock/project-
 import { ProjectFlockFormValues } from './form/ProjectFlockForm.schema';
 import { useChickinStore } from '@/stores/production/chickin/chickin.store';
 import { useProjectFlockClosingStore } from '@/stores/production/project-flock-closing/project-flock-closing.store';
+import {
+  ProjectFlockFilterSchema,
+  ProjectFlockFilterType,
+} from './filter/ProjectFlockFilter';
+import Modal from '@/components/Modal';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
 
 const RowOptionsMenu = ({
   props,
@@ -154,19 +164,19 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   } = useTableFilter({
     initial: {
       search: '',
-      areaFilter: '',
+      area_id: '',
-      locationFilter: '',
+      location_id: '',
-      kandangFilter: '',
+      kandang_id: '',
-      periodFilter: '',
+      category: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
       search: 'search',
-      areaFilter: 'area_id',
+      area_id: 'area_id',
-      locationFilter: 'location_id',
+      location_id: 'location_id',
-      kandangFilter: 'kandang_id',
+      kandang_id: 'kandang_id',
-      periodFilter: 'period',
+      category: 'category',
     },
   });
   const router = useRouter();
@@ -207,6 +217,169 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     setClosingLoading,
   } = useProjectFlockClosingStore();
 
+  // ===== FILTER MODAL STATE =====
+  const filterModal = useModal();
+
+  // ===== FILTER DEPENDENCIES STATE =====
+  const [filterAreaId, setFilterAreaId] = useState<string | undefined>(
+    undefined
+  );
+  const [filterLocationId, setFilterLocationId] = useState<string | undefined>(
+    undefined
+  );
+
+  // ===== FORMIK SETUP FOR FILTER =====
+  const formik = useFormik<ProjectFlockFilterType>({
+    initialValues: {
+      area_id: null,
+      location_id: null,
+      kandang_id: null,
+      category: null,
+    },
+    validationSchema: ProjectFlockFilterSchema,
+    onSubmit: (values, { setSubmitting }) => {
+      updateFilter('area_id', values.area_id || '');
+      updateFilter('location_id', values.location_id || '');
+      updateFilter('kandang_id', values.kandang_id || '');
+      updateFilter('category', values.category || '');
+      filterModal.closeModal();
+      setSubmitting(false);
+    },
+    onReset: () => {
+      updateFilter('area_id', '');
+      updateFilter('location_id', '');
+      updateFilter('kandang_id', '');
+      updateFilter('category', '');
+      setFilterAreaId(undefined);
+      setFilterLocationId(undefined);
+      filterModal.closeModal();
+    },
+  });
+
+  // ===== FILTER OPTIONS =====
+  const {
+    setInputValue: setAreaInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreaOptions,
+    loadMore: loadMoreAreas,
+  } = useSelect(AreaApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
+    area_id: filterAreaId || '',
+  });
+
+  const {
+    setInputValue: setKandangInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangOptions,
+    loadMore: loadMoreKandangs,
+  } = useSelect(KandangApi.basePath, 'id', 'name', 'search', {
+    area_id: filterAreaId || '',
+    location_id: filterLocationId || '',
+  });
+
+  const categoryOptions = useMemo(
+    () => [
+      { value: 'GROWING', label: 'Growing' },
+      { value: 'LAYING', label: 'Laying' },
+    ],
+    []
+  );
+
+  // ===== FILTER HELPERS =====
+  const areaValue = useMemo(() => {
+    if (!formik.values.area_id) return null;
+    return (
+      areaOptions.find((opt) => String(opt.value) === formik.values.area_id) ||
+      null
+    );
+  }, [formik.values.area_id, areaOptions]);
+
+  const locationValue = useMemo(() => {
+    if (!formik.values.location_id) return null;
+    return (
+      locationOptions.find(
+        (opt) => String(opt.value) === formik.values.location_id
+      ) || null
+    );
+  }, [formik.values.location_id, locationOptions]);
+
+  const kandangValue = useMemo(() => {
+    if (!formik.values.kandang_id) return null;
+    return (
+      kandangOptions.find(
+        (opt) => String(opt.value) === formik.values.kandang_id
+      ) || null
+    );
+  }, [formik.values.kandang_id, kandangOptions]);
+
+  const categoryValue = useMemo(() => {
+    if (!formik.values.category) return null;
+    return (
+      categoryOptions.find((opt) => opt.value === formik.values.category) ||
+      null
+    );
+  }, [formik.values.category, categoryOptions]);
+
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+    if (tableFilterState.area_id) count += 1;
+    if (tableFilterState.location_id) count += 1;
+    if (tableFilterState.kandang_id) count += 1;
+    if (tableFilterState.category) count += 1;
+    return count;
+  }, [
+    tableFilterState.area_id,
+    tableFilterState.location_id,
+    tableFilterState.kandang_id,
+    tableFilterState.category,
+  ]);
+
+  const hasFilters = activeFiltersCount > 0;
+
+  // ===== FILTER DEPENDENCY HANDLERS =====
+  const handleFilterAreaChange = (area: OptionType | null) => {
+    const areaId = area?.value ? String(area.value) : undefined;
+    setFilterAreaId(areaId);
+    if (!areaId) {
+      setFilterLocationId(undefined);
+      formik.setFieldValue('location_id', null);
+      formik.setFieldValue('kandang_id', null);
+    }
+  };
+
+  const handleFilterLocationChange = (location: OptionType | null) => {
+    const locationId = location?.value ? String(location.value) : undefined;
+    setFilterLocationId(locationId);
+    if (!locationId) {
+      formik.setFieldValue('kandang_id', null);
+    }
+  };
+
+  // ===== HANDLE FILTER MODAL OPEN =====
+  const handleFilterModalOpen = () => {
+    const areaId = tableFilterState.area_id || null;
+    const locationId = tableFilterState.location_id || null;
+
+    formik.setValues({
+      area_id: areaId,
+      location_id: locationId,
+      kandang_id: tableFilterState.kandang_id || null,
+      category: tableFilterState.category || null,
+    });
+
+    setFilterAreaId(areaId || undefined);
+    setFilterLocationId(locationId || undefined);
+
+    filterModal.openModal();
+  };
+
   // ===== Fetch Data =====
   const {
     data: projectFlocks,
@@ -768,26 +941,21 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               <Button
                 variant='outline'
                 color='none'
-                // onClick={filterModal.openModal}
+                onClick={handleFilterModalOpen}
                 className={cn(
                   'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
                   {
-                    // 'border-primary-gradient text-primary': isFilterActive,
+                    'border-primary-gradient text-primary': hasFilters,
                   }
                 )}
               >
                 <Icon icon='heroicons:funnel' width={20} height={20} />
                 Filter
-                {/* {isFilterActive && (
+                {hasFilters && (
-                  <Badge
+                  <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
-                    className={{
+                    {activeFiltersCount}
-                      badge:
+                  </span>
-                        'p-1.5 bg-[#FF3535] text-xs text-base-100 border border-base-300 rounded-lg',
+                )}
-                    }}
-                  >
-                    {filterCount}
-                  </Badge>
-                )} */}
               </Button>
 
               <Dropdown
@@ -1011,6 +1179,123 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
         }}
       />
 
+      {/* Filter Modal */}
+      <Modal
+        ref={filterModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        {/* Modal Header */}
+        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
+          <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='font-medium text-sm'>Filter Data</h3>
+          </div>
+          <Button
+            variant='link'
+            onClick={filterModal.closeModal}
+            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
+          >
+            <Icon icon='heroicons:x-mark' width={20} height={20} />
+          </Button>
+        </div>
+        <form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
+          <div className='p-4 flex flex-col gap-1.5'>
+            <SelectInput
+              label='Area'
+              placeholder='Pilih Area'
+              options={areaOptions}
+              value={areaValue}
+              onChange={(val) => {
+                if (!Array.isArray(val)) {
+                  const areaValue = val?.value ? String(val.value) : null;
+                  formik.setFieldValue('area_id', areaValue);
+                  handleFilterAreaChange(val || null);
+                }
+              }}
+              onInputChange={setAreaInputValue}
+              isLoading={isLoadingAreaOptions}
+              isClearable
+              onMenuScrollToBottom={loadMoreAreas}
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Lokasi'
+              placeholder='Pilih Lokasi'
+              options={locationOptions}
+              value={locationValue}
+              onChange={(val) => {
+                if (!Array.isArray(val)) {
+                  const locationValue = val?.value ? String(val.value) : null;
+                  formik.setFieldValue('location_id', locationValue);
+                  handleFilterLocationChange(val || null);
+                }
+              }}
+              onInputChange={setLocationInputValue}
+              isLoading={isLoadingLocationOptions}
+              isClearable
+              onMenuScrollToBottom={loadMoreLocations}
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Kandang'
+              placeholder='Pilih Kandang'
+              options={kandangOptions}
+              value={kandangValue}
+              onChange={(val) => {
+                if (!Array.isArray(val)) {
+                  formik.setFieldValue(
+                    'kandang_id',
+                    val?.value ? String(val.value) : null
+                  );
+                }
+              }}
+              onInputChange={setKandangInputValue}
+              isLoading={isLoadingKandangOptions}
+              isClearable
+              onMenuScrollToBottom={loadMoreKandangs}
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInputRadio
+              label='Kategori'
+              placeholder='Pilih Kategori'
+              options={categoryOptions}
+              value={categoryValue}
+              onChange={(val) => {
+                if (!Array.isArray(val)) {
+                  formik.setFieldValue('category', val?.value || null);
+                }
+              }}
+              className={{ wrapper: 'w-full' }}
+              isClearable={true}
+            />
+          </div>
+
+          {/* Modal Footer */}
+          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
+            <Button
+              type='reset'
+              variant='soft'
+              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
+            >
+              Reset Filter
+            </Button>
+            <Button
+              type='submit'
+              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
+              disabled={!formik.isValid || formik.isSubmitting}
+            >
+              Apply Filter
+            </Button>
+          </div>
+        </form>
+      </Modal>
+
       {/* Project Flock Closing Modal */}
       <ConfirmationModal
         ref={closingModal.ref}

src/components/pages/production/project-flock/filter/ProjectFlockFilter.ts

@@ -0,0 +1,17 @@
+import * as yup from 'yup';
+
+export type ProjectFlockFilterType = {
+  area_id: string | null;
+  location_id: string | null;
+  kandang_id: string | null;
+  category: string | null;
+};
+
+export const ProjectFlockFilterSchema = yup.object({
+  area_id: yup.string().nullable(),
+  location_id: yup.string().nullable(),
+  kandang_id: yup.string().nullable(),
+  category: yup.string().nullable(),
+});
+
+export type ProjectFlockFilterValues = yup.InferType<typeof ProjectFlockFilterSchema>;