From 62c9ab014dbd2a5d2cd98a5e8739aaa51e833ffc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 23 Feb 2026 13:51:32 +0700
Subject: [PATCH] refactor(FE): Add period filter to ProjectFlockTable

---
 .../project-flock/ProjectFlockTable.tsx       | 37 +++++++++++++++++++
 .../filter/ProjectFlockFilter.ts              |  2 +
 2 files changed, 39 insertions(+)

diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 7b090c11..dbf1804b 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -168,6 +168,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       location_id: '',
       kandang_id: '',
       category: '',
+      period: '',
     },
     paramMap: {
       page: 'page',
@@ -177,6 +178,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       location_id: 'location_id',
       kandang_id: 'kandang_id',
       category: 'category',
+      period: 'period',
     },
   });
   const router = useRouter();
@@ -235,6 +237,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       location_id: null,
       kandang_id: null,
       category: null,
+      period: null,
     },
     validationSchema: ProjectFlockFilterSchema,
     onSubmit: (values, { setSubmitting }) => {
@@ -242,6 +245,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       updateFilter('location_id', values.location_id || '');
       updateFilter('kandang_id', values.kandang_id || '');
       updateFilter('category', values.category || '');
+      updateFilter('period', values.period || '');
       filterModal.closeModal();
       setSubmitting(false);
     },
@@ -250,6 +254,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       updateFilter('location_id', '');
       updateFilter('kandang_id', '');
       updateFilter('category', '');
+      updateFilter('period', '');
       setFilterAreaId(undefined);
       setFilterLocationId(undefined);
       filterModal.closeModal();
@@ -291,6 +296,14 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     []
   );
 
+  const periodOptions = useMemo(
+    () => [
+      { value: '1', label: 'Periode 1' },
+      { value: '2', label: 'Periode 2' },
+    ],
+    []
+  );
+
   // ===== FILTER HELPERS =====
   const areaValue = useMemo(() => {
     if (!formik.values.area_id) return null;
@@ -326,6 +339,13 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     );
   }, [formik.values.category, categoryOptions]);
 
+  const periodValue = useMemo(() => {
+    if (!formik.values.period) return null;
+    return (
+      periodOptions.find((opt) => opt.value === formik.values.period) || null
+    );
+  }, [formik.values.period, periodOptions]);
+
   // ===== ACTIVE FILTERS COUNT =====
   const activeFiltersCount = useMemo(() => {
     let count = 0;
@@ -333,12 +353,14 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     if (tableFilterState.location_id) count += 1;
     if (tableFilterState.kandang_id) count += 1;
     if (tableFilterState.category) count += 1;
+    if (tableFilterState.period) count += 1;
     return count;
   }, [
     tableFilterState.area_id,
     tableFilterState.location_id,
     tableFilterState.kandang_id,
     tableFilterState.category,
+    tableFilterState.period,
   ]);
 
   const hasFilters = activeFiltersCount > 0;
@@ -372,6 +394,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       location_id: locationId,
       kandang_id: tableFilterState.kandang_id || null,
       category: tableFilterState.category || null,
+      period: tableFilterState.period || null,
     });
 
     setFilterAreaId(areaId || undefined);
@@ -1274,6 +1297,20 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               className={{ wrapper: 'w-full' }}
               isClearable={true}
             />
+
+            <SelectInputRadio
+              label='Periode'
+              placeholder='Pilih Periode'
+              options={periodOptions}
+              value={periodValue}
+              onChange={(val) => {
+                if (!Array.isArray(val)) {
+                  formik.setFieldValue('period', val?.value || null);
+                }
+              }}
+              className={{ wrapper: 'w-full' }}
+              isClearable
+            />
           </div>
 
           {/* Modal Footer */}
diff --git a/src/components/pages/production/project-flock/filter/ProjectFlockFilter.ts b/src/components/pages/production/project-flock/filter/ProjectFlockFilter.ts
index a4f4377b..a31d6680 100644
--- a/src/components/pages/production/project-flock/filter/ProjectFlockFilter.ts
+++ b/src/components/pages/production/project-flock/filter/ProjectFlockFilter.ts
@@ -5,6 +5,7 @@ export type ProjectFlockFilterType = {
   location_id: string | null;
   kandang_id: string | null;
   category: string | null;
+  period: string | null;
 };
 
 export const ProjectFlockFilterSchema = yup.object({
@@ -12,6 +13,7 @@ export const ProjectFlockFilterSchema = yup.object({
   location_id: yup.string().nullable(),
   kandang_id: yup.string().nullable(),
   category: yup.string().nullable(),
+  period: yup.string().nullable(),
 });
 
 export type ProjectFlockFilterValues = yup.InferType<