feat: filter improvement

src/components/pages/production/recording/RecordingTable.tsx

@@ -319,15 +319,23 @@ const RecordingTable = () => {
       search: '',
       areaFilter: '',
       locationFilter: '',
+      projectFlockFilter: '',
       kandangFilter: '',
       projectFlockKandangFilter: '',
+      approvalStatusFilter: '',
+      projectFlockCategoryFilter: '',
     },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
       search: 'search',
+      areaFilter: 'area_id',
+      locationFilter: 'location_id',
+      projectFlockFilter: 'project_flock_id',
       kandangFilter: 'kandang_id',
       projectFlockKandangFilter: 'project_flock_kandang_id',
+      approvalStatusFilter: 'approval_status',
+      projectFlockCategoryFilter: 'project_flock_category',
     },
   });
 
@@ -356,26 +364,38 @@ const RecordingTable = () => {
     initialValues: {
       area_id: null,
       location_id: null,
+      project_flock_id: null,
       kandang_id: null,
       project_flock_kandang_id: null,
+      approval_status: null,
+      project_flock_category: null,
     },
     validationSchema: RecordingFilterSchema,
     onSubmit: (values, { setSubmitting }) => {
       updateFilter('areaFilter', values.area_id || '');
       updateFilter('locationFilter', values.location_id || '');
+      updateFilter('projectFlockFilter', values.project_flock_id || '');
       updateFilter('kandangFilter', values.kandang_id || '');
       updateFilter(
         'projectFlockKandangFilter',
         values.project_flock_kandang_id || ''
       );
+      updateFilter('approvalStatusFilter', values.approval_status || '');
+      updateFilter(
+        'projectFlockCategoryFilter',
+        values.project_flock_category || ''
+      );
       filterModal.closeModal();
       setSubmitting(false);
     },
     onReset: () => {
       updateFilter('areaFilter', '');
       updateFilter('locationFilter', '');
+      updateFilter('projectFlockFilter', '');
       updateFilter('kandangFilter', '');
       updateFilter('projectFlockKandangFilter', '');
+      updateFilter('approvalStatusFilter', '');
+      updateFilter('projectFlockCategoryFilter', '');
     },
   });
 
@@ -537,6 +557,7 @@ const RecordingTable = () => {
 
       formik.setFieldValue('area_id', areaId);
       formik.setFieldValue('location_id', null);
+      formik.setFieldValue('project_flock_id', null);
       formik.setFieldValue('kandang_id', null);
       formik.setFieldValue('project_flock_kandang_id', null);
 
@@ -556,6 +577,7 @@ const RecordingTable = () => {
       const locationId = location?.value ? String(location.value) : null;
 
       formik.setFieldValue('location_id', locationId);
+      formik.setFieldValue('project_flock_id', null);
       formik.setFieldValue('kandang_id', null);
       formik.setFieldValue('project_flock_kandang_id', null);
 
@@ -570,7 +592,11 @@ const RecordingTable = () => {
   const handleFilterProjectFlockChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
       const projectFlock = val as OptionType | null;
+      const projectFlockId = projectFlock?.value
+        ? String(projectFlock.value)
+        : null;
 
+      formik.setFieldValue('project_flock_id', projectFlockId);
       formik.setFieldValue('kandang_id', null);
       formik.setFieldValue('project_flock_kandang_id', null);
 
@@ -625,6 +651,36 @@ const RecordingTable = () => {
     );
   }, [formik.values.kandang_id, kandangOptions]);
 
+  const recordingApprovalStatusOptions: OptionType<string>[] = [
+    { value: 'CREATED', label: 'Pengajuan' },
+    { value: 'UPDATED', label: 'Diperbarui' },
+    { value: 'APPROVED', label: 'Disetujui' },
+    { value: 'REJECTED', label: 'Ditolak' },
+  ];
+
+  const projectFlockCategoryOptions: OptionType<string>[] = [
+    { value: 'GROWING', label: 'Growing' },
+    { value: 'LAYING', label: 'Laying' },
+  ];
+
+  const approvalStatusValue = useMemo(() => {
+    if (!formik.values.approval_status) return null;
+    return (
+      recordingApprovalStatusOptions.find(
+        (opt) => opt.value === formik.values.approval_status
+      ) || null
+    );
+  }, [formik.values.approval_status]);
+
+  const projectFlockCategoryValue = useMemo(() => {
+    if (!formik.values.project_flock_category) return null;
+    return (
+      projectFlockCategoryOptions.find(
+        (opt) => opt.value === formik.values.project_flock_category
+      ) || null
+    );
+  }, [formik.values.project_flock_category]);
+
   // ===== HANDLE FILTER MODAL OPEN =====
   const handleFilterModalOpen = () => {
     filterModal.openModal();
@@ -1607,6 +1663,36 @@ const RecordingTable = () => {
               isDisabled={!filterProjectFlock}
               className={{ wrapper: 'w-full' }}
             />
+
+            <SelectInput
+              label='Kategori'
+              placeholder='Pilih Kategori'
+              options={projectFlockCategoryOptions}
+              value={projectFlockCategoryValue}
+              onChange={(val) => {
+                formik.setFieldValue(
+                  'project_flock_category',
+                  !Array.isArray(val) && val ? String(val.value) : null
+                );
+              }}
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
+
+            <SelectInput
+              label='Status Approval'
+              placeholder='Pilih Status Approval'
+              options={recordingApprovalStatusOptions}
+              value={approvalStatusValue}
+              onChange={(val) => {
+                formik.setFieldValue(
+                  'approval_status',
+                  !Array.isArray(val) && val ? String(val.value) : null
+                );
+              }}
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
           </div>
 
           {/* Modal Footer */}
@@ -1631,11 +1717,7 @@ const RecordingTable = () => {
             <Button
               type='submit'
               className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
-              disabled={
-                !formik.isValid ||
-                formik.isSubmitting ||
-                !formik.values.kandang_id
-              }
+              disabled={!formik.isValid || formik.isSubmitting}
             >
               Apply Filter
             </Button>

src/components/pages/production/recording/filter/RecordingFilter.ts

@@ -3,13 +3,19 @@ import { string, object } from 'yup';
 export const RecordingFilterSchema = object().shape({
   area_id: string().nullable(),
   location_id: string().nullable(),
+  project_flock_id: string().nullable(),
   kandang_id: string().nullable(),
   project_flock_kandang_id: string().nullable(),
+  approval_status: string().nullable(),
+  project_flock_category: string().nullable(),
 });
 
 export type RecordingFilterType = {
   area_id: string | null;
   location_id: string | null;
+  project_flock_id: string | null;
   kandang_id: string | null;
   project_flock_kandang_id: string | null;
+  approval_status: string | null;
+  project_flock_category: string | null;
 };