Merge branch 'fix/adjustment-pf-report-penjualan' into 'development'

[FIX/FE] Adjustment Project Flock Related, Penjualan Calculation (Both SO/DO) and Report Filter Display Issue

See merge request mbugroup/lti-web-client!332

src/components/pages/closing/ClosingDetailTabs.tsx

@@ -18,7 +18,7 @@ import HppExpeditionClosingTab from '@/components/pages/closing/tab/HppExpeditio
 import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import { useClosingTabStore } from '@/stores/closing/closing-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
@@ -33,7 +33,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
   kandangData,
 }) => {
   const [activeTabId, setActiveTabId] = useState<string>('sapronak');
-  const tabActions = useClosingTabStore((state) => state.tabActions);
+  const tabActions = useTabActionsStore((state) => state.tabActions);
 
   const closingDetailTabs = useMemo(() => {
     const validTabs = [

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -236,6 +236,25 @@ const DeliveryOrderProductForm = ({
     });
   };
 
+  // Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
+  const handleFieldChange = (
+    field: string,
+    value: number | string,
+    callback?: () => void
+  ) => {
+    formik.setFieldValue(field, value);
+
+    setTimeout(() => {
+      handleMarketingCalculation(field, {
+        values: { ...formik.values, [field]: value },
+        setFieldValue: formik.setFieldValue,
+        hasSisaBerat,
+      });
+    }, 0);
+
+    if (callback) callback();
+  };
+
   // Handler khusus untuk toggle sisa berat - langsung pakai nilai baru
   const handleSisaBeratToggle = (newHasSisaBerat: boolean) => {
     setHasSisaBerat(newHasSisaBerat);
@@ -520,13 +539,11 @@ const DeliveryOrderProductForm = ({
                     } per ${formik.values.convertion_unit?.value}`}
                     value={formik.values.weight_per_convertion ?? ''}
                     onChange={(e) => {
-                      formik.setFieldValue(
+                      const value = Number(e.target.value);
-                        'weight_per_convertion',
+                      handleFieldChange('weight_per_convertion', value, () =>
-                        Number(e.target.value)
+                        setCurrentInput(e.target.name)
                       );
-                      setCurrentInput(e.target.name);
                     }}
-                    onBlur={() => handleBlurField('weight_per_convertion')}
                   />
                 </div>
               </div>
@@ -564,10 +581,11 @@ const DeliveryOrderProductForm = ({
               name='total_peti'
               value={formik.values.total_peti ?? undefined}
               onChange={(e) => {
-                formik.handleChange(e);
+                const value = Number(e.target.value);
-                setCurrentInput(e.target.name);
+                handleFieldChange('total_peti', value, () =>
+                  setCurrentInput(e.target.name)
+                );
               }}
-              onBlur={() => handleBlurField('total_peti')}
               isError={
                 formik.touched.total_peti && Boolean(formik.errors.total_peti)
               }
@@ -592,10 +610,11 @@ const DeliveryOrderProductForm = ({
                   name='avg_weight'
                   value={formik.values.avg_weight}
                   onChange={(e) => {
-                    formik.handleChange(e);
+                    const value = Number(e.target.value);
-                    setCurrentInput(e.target.name);
+                    handleFieldChange('avg_weight', value, () =>
+                      setCurrentInput('avg_weight')
+                    );
                   }}
-                  onBlur={() => handleBlurField('avg_weight')}
                   isError={
                     formik.touched.avg_weight &&
                     Boolean(formik.errors.avg_weight)
@@ -613,10 +632,11 @@ const DeliveryOrderProductForm = ({
               name='total_weight'
               value={formik.values.total_weight}
               onChange={(e) => {
-                formik.handleChange(e);
+                const value = Number(e.target.value);
-                setCurrentInput(e.target.name);
+                handleFieldChange('total_weight', value, () =>
+                  setCurrentInput('total_weight')
+                );
               }}
-              onBlur={() => handleBlurField('total_weight')}
               isError={
                 formik.touched.total_weight &&
                 Boolean(formik.errors.total_weight)
@@ -638,10 +658,11 @@ const DeliveryOrderProductForm = ({
             name='qty'
             value={formik.values.qty}
             onChange={(e) => {
-              formik.handleChange(e);
+              const value = Number(e.target.value);
-              setCurrentInput(e.target.name);
+              handleFieldChange('qty', value, () =>
+                setCurrentInput(e.target.name)
+              );
             }}
-            onBlur={() => handleBlurField('qty')}
             isError={Boolean(formik.errors.qty)}
             errorMessage={formik.errors.qty}
             placeholder='Masukan Kuantitas'
@@ -677,10 +698,11 @@ const DeliveryOrderProductForm = ({
               name='price_per_convertion'
               value={formik.values.price_per_convertion ?? undefined}
               onChange={(e) => {
-                formik.handleChange(e);
+                const value = Number(e.target.value);
-                setCurrentInput(e.target.name);
+                handleFieldChange('price_per_convertion', value, () =>
+                  setCurrentInput(e.target.name)
+                );
               }}
-              onBlur={() => handleBlurField('price_per_convertion')}
               isError={
                 formik.touched.price_per_convertion &&
                 Boolean(formik.errors.price_per_convertion)
@@ -699,10 +721,11 @@ const DeliveryOrderProductForm = ({
                 name='price_per_qty'
                 value={formik.values.price_per_qty ?? undefined}
                 onChange={(e) => {
-                  formik.setFieldValue('price_per_qty', Number(e.target.value));
+                  const value = Number(e.target.value);
-                  setCurrentInput('price_per_qty');
+                  handleFieldChange('price_per_qty', value, () =>
+                    setCurrentInput('price_per_qty')
+                  );
                 }}
-                onBlur={() => handleBlurField('price_per_qty')}
                 isError={
                   formik.touched.price_per_qty &&
                   Boolean(formik.errors.price_per_qty)
@@ -721,10 +744,11 @@ const DeliveryOrderProductForm = ({
                 name='unit_price'
                 value={formik.values.unit_price}
                 onChange={(e) => {
-                  formik.handleChange(e);
+                  const value = Number(e.target.value);
-                  setCurrentInput(e.target.name);
+                  handleFieldChange('unit_price', value, () =>
+                    setCurrentInput(e.target.name)
+                  );
                 }}
-                onBlur={() => handleBlurField('unit_price')}
                 isError={Boolean(formik.errors.unit_price)}
                 errorMessage={formik.errors.unit_price}
                 placeholder='Masukan Harga Satuan'
@@ -760,10 +784,11 @@ const DeliveryOrderProductForm = ({
                 name='sisa_berat'
                 value={formik.values.sisa_berat ?? undefined}
                 onChange={(e) => {
-                  formik.handleChange(e);
+                  const value = Number(e.target.value);
-                  setCurrentInput(e.target.name);
+                  handleFieldChange('sisa_berat', value, () =>
+                    setCurrentInput(e.target.name)
+                  );
                 }}
-                onBlur={() => handleBlurField('sisa_berat')}
                 isError={
                   formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
                 }
@@ -776,10 +801,11 @@ const DeliveryOrderProductForm = ({
                 name='price_sisa_berat'
                 value={formik.values.price_sisa_berat ?? undefined}
                 onChange={(e) => {
-                  formik.handleChange(e);
+                  const value = Number(e.target.value);
-                  setCurrentInput(e.target.name);
+                  handleFieldChange('price_sisa_berat', value, () =>
+                    setCurrentInput(e.target.name)
+                  );
                 }}
-                onBlur={() => handleBlurField('price_sisa_berat')}
                 isError={
                   formik.touched.price_sisa_berat &&
                   Boolean(formik.errors.price_sisa_berat)
@@ -797,10 +823,11 @@ const DeliveryOrderProductForm = ({
             name='total_price'
             value={formik.values.total_price}
             onChange={(e) => {
-              formik.handleChange(e);
+              const value = Number(e.target.value);
-              setCurrentInput(e.target.name);
+              handleFieldChange('total_price', value, () =>
+                setCurrentInput('total_price')
+              );
             }}
-            onBlur={() => handleBlurField('total_price')}
             isError={
               formik.touched.total_price && Boolean(formik.errors.total_price)
             }

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -250,6 +250,25 @@ const SalesOrderProductForm = ({
     });
   };
 
+  // Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
+  const handleFieldChange = (
+    field: string,
+    value: number | string,
+    callback?: () => void
+  ) => {
+    formik.setFieldValue(field, value);
+
+    setTimeout(() => {
+      handleMarketingCalculation(field, {
+        values: { ...formik.values, [field]: value },
+        setFieldValue: formik.setFieldValue,
+        hasSisaBerat,
+      });
+    }, 0);
+
+    if (callback) callback();
+  };
+
   // Handler khusus untuk toggle sisa berat - langsung pakai nilai baru
   const handleSisaBeratToggle = (newHasSisaBerat: boolean) => {
     setHasSisaBerat(newHasSisaBerat);
@@ -475,13 +494,11 @@ const SalesOrderProductForm = ({
                     } per ${formik.values.convertion_unit?.value}`}
                     value={formik.values.weight_per_convertion ?? ''}
                     onChange={(e) => {
-                      formik.setFieldValue(
+                      const value = Number(e.target.value);
-                        'weight_per_convertion',
+                      handleFieldChange('weight_per_convertion', value, () =>
-                        Number(e.target.value)
+                        setCurrentInput(e.target.name)
                       );
-                      setCurrentInput(e.target.name);
                     }}
-                    onBlur={() => handleBlurField('weight_per_convertion')}
                   />
                 </div>
               </div>
@@ -519,10 +536,11 @@ const SalesOrderProductForm = ({
               name='total_peti'
               value={formik.values.total_peti ?? undefined}
               onChange={(e) => {
-                formik.handleChange(e);
+                const value = Number(e.target.value);
-                setCurrentInput(e.target.name);
+                handleFieldChange('total_peti', value, () =>
+                  setCurrentInput(e.target.name)
+                );
               }}
-              onBlur={() => handleBlurField('total_peti')}
               isError={
                 formik.touched.total_peti && Boolean(formik.errors.total_peti)
               }
@@ -547,10 +565,11 @@ const SalesOrderProductForm = ({
                   name='avg_weight'
                   value={formik.values.avg_weight}
                   onChange={(e) => {
-                    formik.handleChange(e);
+                    const value = Number(e.target.value);
-                    setCurrentInput(e.target.name);
+                    handleFieldChange('avg_weight', value, () =>
+                      setCurrentInput('avg_weight')
+                    );
                   }}
-                  onBlur={() => handleBlurField('avg_weight')}
                   isError={
                     formik.touched.avg_weight &&
                     Boolean(formik.errors.avg_weight)
@@ -568,10 +587,11 @@ const SalesOrderProductForm = ({
               name='total_weight'
               value={formik.values.total_weight}
               onChange={(e) => {
-                formik.handleChange(e);
+                const value = Number(e.target.value);
-                setCurrentInput(e.target.name);
+                handleFieldChange('total_weight', value, () =>
+                  setCurrentInput('total_weight')
+                );
               }}
-              onBlur={() => handleBlurField('total_weight')}
               isError={
                 formik.touched.total_weight &&
                 Boolean(formik.errors.total_weight)
@@ -593,10 +613,11 @@ const SalesOrderProductForm = ({
             name='qty'
             value={formik.values.qty}
             onChange={(e) => {
-              formik.handleChange(e);
+              const value = Number(e.target.value);
-              setCurrentInput(e.target.name);
+              handleFieldChange('qty', value, () =>
+                setCurrentInput(e.target.name)
+              );
             }}
-            onBlur={() => handleBlurField('qty')}
             isError={formik.touched.qty && Boolean(formik.errors.qty)}
             errorMessage={formik.errors.qty}
             placeholder='Masukan Kuantitas'
@@ -630,10 +651,11 @@ const SalesOrderProductForm = ({
               name='price_per_convertion'
               value={formik.values.price_per_convertion ?? undefined}
               onChange={(e) => {
-                formik.handleChange(e);
+                const value = Number(e.target.value);
-                setCurrentInput(e.target.name);
+                handleFieldChange('price_per_convertion', value, () =>
+                  setCurrentInput(e.target.name)
+                );
               }}
-              onBlur={() => handleBlurField('price_per_convertion')}
               isError={
                 formik.touched.price_per_convertion &&
                 Boolean(formik.errors.price_per_convertion)
@@ -652,10 +674,11 @@ const SalesOrderProductForm = ({
                 name='price_per_qty'
                 value={formik.values.price_per_qty ?? undefined}
                 onChange={(e) => {
-                  formik.setFieldValue('price_per_qty', Number(e.target.value));
+                  const value = Number(e.target.value);
-                  setCurrentInput('price_per_qty');
+                  handleFieldChange('price_per_qty', value, () =>
+                    setCurrentInput('price_per_qty')
+                  );
                 }}
-                onBlur={() => handleBlurField('price_per_qty')}
                 isError={
                   formik.touched.price_per_qty &&
                   Boolean(formik.errors.price_per_qty)
@@ -674,10 +697,11 @@ const SalesOrderProductForm = ({
                 name='unit_price'
                 value={formik.values.unit_price}
                 onChange={(e) => {
-                  formik.handleChange(e);
+                  const value = Number(e.target.value);
-                  setCurrentInput(e.target.name);
+                  handleFieldChange('unit_price', value, () =>
+                    setCurrentInput(e.target.name)
+                  );
                 }}
-                onBlur={() => handleBlurField('unit_price')}
                 isError={
                   formik.touched.unit_price && Boolean(formik.errors.unit_price)
                 }
@@ -715,10 +739,11 @@ const SalesOrderProductForm = ({
                 name='sisa_berat'
                 value={formik.values.sisa_berat ?? undefined}
                 onChange={(e) => {
-                  formik.handleChange(e);
+                  const value = Number(e.target.value);
-                  setCurrentInput(e.target.name);
+                  handleFieldChange('sisa_berat', value, () =>
+                    setCurrentInput(e.target.name)
+                  );
                 }}
-                onBlur={() => handleBlurField('sisa_berat')}
                 isError={
                   formik.touched.sisa_berat && Boolean(formik.errors.sisa_berat)
                 }
@@ -731,10 +756,11 @@ const SalesOrderProductForm = ({
                 name='price_sisa_berat'
                 value={formik.values.price_sisa_berat ?? undefined}
                 onChange={(e) => {
-                  formik.handleChange(e);
+                  const value = Number(e.target.value);
-                  setCurrentInput(e.target.name);
+                  handleFieldChange('price_sisa_berat', value, () =>
+                    setCurrentInput(e.target.name)
+                  );
                 }}
-                onBlur={() => handleBlurField('price_sisa_berat')}
                 isError={
                   formik.touched.price_sisa_berat &&
                   Boolean(formik.errors.price_sisa_berat)
@@ -752,10 +778,11 @@ const SalesOrderProductForm = ({
             name='total_price'
             value={formik.values.total_price}
             onChange={(e) => {
-              formik.handleChange(e);
+              const value = Number(e.target.value);
-              setCurrentInput(e.target.name);
+              handleFieldChange('total_price', value, () =>
+                setCurrentInput('total_price')
+              );
             }}
-            onBlur={() => handleBlurField('total_price')}
             isError={
               formik.touched.total_price && Boolean(formik.errors.total_price)
             }

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,21 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   } = useTableFilter({
     initial: {
       search: '',
-      areaFilter: '',
+      area_id: '',
-      locationFilter: '',
+      location_id: '',
-      kandangFilter: '',
+      kandang_id: '',
-      periodFilter: '',
+      category: '',
+      period: '',
     },
     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',
+      period: 'period',
     },
   });
   const router = useRouter();
@@ -207,6 +219,190 @@ 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,
+      period: 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 || '');
+      updateFilter('period', values.period || '');
+      filterModal.closeModal();
+      setSubmitting(false);
+    },
+    onReset: () => {
+      updateFilter('area_id', '');
+      updateFilter('location_id', '');
+      updateFilter('kandang_id', '');
+      updateFilter('category', '');
+      updateFilter('period', '');
+      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' },
+    ],
+    []
+  );
+
+  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;
+    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]);
+
+  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;
+    if (tableFilterState.area_id) count += 1;
+    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;
+
+  // ===== 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,
+      period: tableFilterState.period || null,
+    });
+
+    setFilterAreaId(areaId || undefined);
+    setFilterLocationId(locationId || undefined);
+
+    filterModal.openModal();
+  };
+
   // ===== Fetch Data =====
   const {
     data: projectFlocks,
@@ -768,26 +964,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 +1202,137 @@ 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}
+            />
+
+            <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 */}
+          <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/detail/ProjectFlockDetail.tsx

@@ -1,6 +1,7 @@
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
+import { useSelect } from '@/components/input/SelectInput';
 import Tooltip from '@/components/Tooltip';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
@@ -37,10 +38,37 @@ const ProjectFlockDetail = ({
     null
   );
 
+  const { rawData: projectFlockRawData } = useSelect<ProjectFlock>(
+    ProjectFlockApi.basePath,
+    'id',
+    'flock_name',
+    'search',
+    selectedKandangId ? { kandang_id: `[${selectedKandangId}]` } : undefined
+  );
+
   const selectedKandang = projectFlock.kandangs?.find(
     (kandang) => kandang.id === Number(selectedKandangId)
   );
 
+  // Cek apakah ada project aktif di kandang yang sama (selain project saat ini)
+  // Hanya boleh 1 kandang aktif, jadi jika ada project lain yang aktif, tidak bisa di-unclose baik kategori growing maupun laying
+  const hasActiveProjectWithSameKandang = isResponseSuccess(projectFlockRawData)
+    ? projectFlockRawData.data.some((pf) =>
+        pf.kandangs?.some(
+          (k) =>
+            k.id === Number(selectedKandangId) &&
+            pf.id !== projectFlock.id &&
+            k.status !== 'NON_ACTIVE'
+        )
+      )
+    : false;
+
+  const isCloseButtonDisabled =
+    !selectedKandangId ||
+    projectFlock?.approval?.step_number == 1 ||
+    (selectedKandang?.status === 'NON_ACTIVE' &&
+      hasActiveProjectWithSameKandang);
+
   const { data: projectFlockApprovalResponse } = useSWR(
     projectFlock.id ? ['approval-project-flock', projectFlock.id] : undefined,
     ([, id]) => ProjectFlockApi.getApprovalLineHistory(Number(id))
@@ -419,10 +447,7 @@ const ProjectFlockDetail = ({
                   className='w-full px-2 py-1 text-sm'
                   variant='outline'
                   color='error'
-                  disabled={
+                  disabled={isCloseButtonDisabled}
-                    !selectedKandangId ||
-                    projectFlock?.approval?.step_number == 1
-                  }
                 >
                   {selectedKandang?.status === 'NON_ACTIVE' ? (
                     <>

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

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

src/components/pages/report/expense/ReportExpenseTabs.tsx

@@ -3,12 +3,12 @@
 import { useState } from 'react';
 import Tabs from '@/components/Tabs';
 
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import ReportExpenseTab from './tab/ReportExpenseTab';
 
 const ReportExpenseTabs = () => {
   const [activeTabId, setActiveTabId] = useState<string>('1');
-  const tabActions = useReportTabStore((state) => state.tabActions);
+  const tabActions = useTabActionsStore((state) => state.tabActions);
 
   const tabs = [
     {

src/components/pages/report/expense/tab/ReportExpenseTab.tsx

@@ -19,7 +19,7 @@ import { cn, formatCurrency, formatDate } from '@/lib/helper';
 import { ReportExpense } from '@/types/api/report/report-expense';
 import { ReportExpenseApi } from '@/services/api/report';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import Modal, { useModal } from '@/components/Modal';
 import Pagination from '@/components/Pagination';
 import ReportExpenseSkeleton from '@/components/pages/report/expense/skeleton/ReportExpenseSkeleton';
@@ -305,8 +305,8 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
   ]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useReportTabStore((state) => state.setTabActions);
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
   useEffect(() => {
     setTabActions(

src/components/pages/report/finance/FinanceTabs.tsx

@@ -4,11 +4,11 @@ import { useState } from 'react';
 import Tabs from '@/components/Tabs';
 import CustomerPaymentTab from '@/components/pages/report/finance/tab/CustomerPaymentTab';
 import DebtSupplierTab from '@/components/pages/report/finance/tab/DebtSupplierTab';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 
 const FinanceTabs = () => {
   const [activeTabId, setActiveTabId] = useState<string>('1');
-  const tabActions = useReportTabStore((state) => state.tabActions);
+  const tabActions = useTabActionsStore((state) => state.tabActions);
 
   const tabs = [
     {

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -34,7 +34,7 @@ import {
 } from '@/components/pages/report/finance/filter/CustomerPaymentFilter';
 import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
 import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
 import { OptionType } from '@/components/table/TableRowSizeSelector';
 import { Color } from '@/types/theme';
@@ -373,8 +373,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   }, [customerPaymentExport, filterParams, customerOptions]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useReportTabStore((state) => state.setTabActions);
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
   useEffect(() => {
     setTabActions(

src/components/pages/report/finance/tab/DebtSupplierTab.tsx

@@ -31,7 +31,7 @@ import { Color } from '@/types/theme';
 import { Supplier } from '@/types/api/master-data/supplier';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import StatusBadge from '@/components/helper/StatusBadge';
 import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
 
@@ -265,8 +265,8 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
   }, [debtSupplierExport]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useReportTabStore((state) => state.setTabActions);
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
   useEffect(() => {
     setTabActions(

src/components/pages/report/logistic-stock/LogisticStockTabs.tsx

@@ -3,11 +3,11 @@
 import { useState } from 'react';
 import Tabs from '@/components/Tabs';
 import PurchasesPerSupplierTab from '@/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 
 const LogisticStockTabs = () => {
   const [activeTabId, setActiveTabId] = useState<string>('1');
-  const tabActions = useReportTabStore((state) => state.tabActions);
+  const tabActions = useTabActionsStore((state) => state.tabActions);
 
   const tabs = [
     {

src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx

@@ -30,7 +30,7 @@ import {
 } from '@/components/pages/report/logistic-stock/filter/PurchasesPerSupplierFilter';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import PurchasePerSupplierSkeleton from '@/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton';
 
 interface PurchasesPerSupplierTabProps {
@@ -479,8 +479,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
   ]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useReportTabStore((state) => state.setTabActions);
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
   useEffect(() => {
     setTabActions(

src/components/pages/report/marketing/MarketingTabs.tsx

@@ -4,11 +4,11 @@ import { useState } from 'react';
 import Tabs from '@/components/Tabs';
 import DailyMarketingReportContent from '@/components/pages/report/marketing/tab/DailyMarketingTab';
 import HppPerKandangTab from '@/components/pages/report/marketing/tab/HppPerKandangTab';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 
 const MarketingReportContent = () => {
   const [activeTabId, setActiveTabId] = useState<string>('1');
-  const tabActions = useReportTabStore((state) => state.tabActions);
+  const tabActions = useTabActionsStore((state) => state.tabActions);
 
   const tabs = [
     {

src/components/pages/report/marketing/tab/DailyMarketingTab.tsx

@@ -37,7 +37,7 @@ import {
 import SelectInput from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
 import { cn } from '@/lib/helper';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import DailyMarketingReportSkeleton from '@/components/pages/report/marketing/skeleton/DailyMarketingSkeleton';
 import { useEffect as useEffectHook } from 'react';
 import { httpClient } from '@/services/http/client';
@@ -390,8 +390,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   }, [dailyMarketingsExport, summaryTotal]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useReportTabStore((state) => state.setTabActions);
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
   useEffectHook(() => {
     setTabActions(

src/components/pages/report/marketing/tab/HppPerKandangTab.tsx

@@ -31,7 +31,7 @@ import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import Modal, { useModal } from '@/components/Modal';
 import { cn } from '@/lib/helper';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import HppPerKandangSkeleton from '@/components/pages/report/marketing/skeleton/HppPerKandangSkeleton';
 import { useEffect as useEffectHook } from 'react';
 
@@ -110,7 +110,7 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
       weight_max: null,
       period: null,
       sort_by: null,
-      show_unrecorded: null,
+      show_unrecorded: false,
     },
     validationSchema: HppPerKandangFilterSchema,
     onSubmit: (values, { setSubmitting }) => {
@@ -122,8 +122,7 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
         weight_max: values.weight_max || undefined,
         period: values.period || undefined,
         sort_by: values.sort_by || undefined,
-        show_unrecorded:
+        show_unrecorded: values.show_unrecorded ?? undefined,
-          values.show_unrecorded !== null ? values.show_unrecorded : undefined,
       });
       filterModal.closeModal();
       setIsSubmitted(true);
@@ -480,8 +479,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
   ]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useReportTabStore((state) => state.setTabActions);
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
   useEffectHook(() => {
     setTabActions(
@@ -1026,7 +1025,11 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
                 if (!Array.isArray(val)) {
                   formik.setFieldValue(
                     'show_unrecorded',
-                    val?.value === 'true' || null
+                    val?.value === 'true'
+                      ? true
+                      : val?.value === 'false'
+                        ? false
+                        : null
                   );
                 }
               }}

src/components/pages/report/production-result/ProductionResultTabs.tsx

@@ -3,11 +3,10 @@
 import { useState } from 'react';
 import Tabs from '@/components/Tabs';
 import ProductionResultTab from '@/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
-
 const ProductionResultTabs = () => {
   const [activeTabId, setActiveTabId] = useState<string>('1');
-  const tabActions = useReportTabStore((state) => state.tabActions);
+  const tabActions = useTabActionsStore((state) => state.tabActions);
 
   const tabs = [
     {

src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx

@@ -34,7 +34,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import { ProductionResult } from '@/types/api/report/production-result';
 import ProductionResultReportPDF from '../export/ProductionResultExportPDF';
 import { pdf } from '@react-pdf/renderer';
-import { useReportTabStore } from '@/stores/report/report-tab.store';
+import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import Modal, { useModal } from '@/components/Modal';
 import { cn, formatNumber } from '@/lib/helper';
 import Pagination from '@/components/Pagination';
@@ -532,8 +532,8 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
   }, [filterParams]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useReportTabStore((state) => state.setTabActions);
+  const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
+  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
   useEffect(() => {
     setTabActions(

src/services/api/report/marketing-sale.ts

@@ -35,7 +35,7 @@ export class MarketingSaleReportService extends BaseApiService<
           weight_max: weight_max,
           period: period,
           sort_by: sort_by,
-          show_unrecorded: show_unrecorded,
+          show_unrecorded: show_unrecorded ?? false,
           page: page,
           limit: limit,
         },

src/stores/closing/closing-tab.store.ts

@@ -1,21 +0,0 @@
-'use client';
-
-import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
-import {
-  createClosingTabSlice,
-  ClosingTabSlice,
-} from '@/stores/closing/slices/closing-tab.slice';
-
-export type ClosingTabStore = ClosingTabSlice;
-
-export const useClosingTabStore = create<ClosingTabStore>()(
-  devtools(
-    (...args) => ({
-      ...createClosingTabSlice(...args),
-    }),
-    {
-      name: 'ClosingTabStore',
-    }
-  )
-);

src/stores/closing/slices/closing-tab.slice.ts

@@ -1,37 +0,0 @@
-import { ReactNode } from 'react';
-import { StateCreator } from 'zustand';
-
-export type ClosingTabSlice = {
-  // State - actions per tab ID
-  tabActions: Record<string, ReactNode>;
-
-  // Actions
-  setTabActions: (tabId: string, actions: ReactNode) => void;
-  clearTabActions: (tabId: string) => void;
-  clearAllTabActions: () => void;
-};
-
-export const createClosingTabSlice: StateCreator<
-  ClosingTabSlice,
-  [],
-  [],
-  ClosingTabSlice
-> = (set) => ({
-  tabActions: {},
-
-  setTabActions: (tabId, actions) =>
-    set((state) => ({
-      tabActions: {
-        ...state.tabActions,
-        [tabId]: actions,
-      },
-    })),
-
-  clearTabActions: (tabId) =>
-    set((state) => {
-      const { [tabId]: _, ...rest } = state.tabActions;
-      return { tabActions: rest };
-    }),
-
-  clearAllTabActions: () => set({ tabActions: {} }),
-});

src/stores/report/report-tab.store.ts

@@ -1,21 +0,0 @@
-'use client';
-
-import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
-import {
-  createReportTabSlice,
-  ReportTabSlice,
-} from '@/stores/report/slices/report-tab.slice';
-
-export type ReportTabStore = ReportTabSlice;
-
-export const useReportTabStore = create<ReportTabStore>()(
-  devtools(
-    (...args) => ({
-      ...createReportTabSlice(...args),
-    }),
-    {
-      name: 'ReportTabStore',
-    }
-  )
-);

src/stores/report/slices/report-tab.slice.ts

@@ -1,37 +0,0 @@
-import { ReactNode } from 'react';
-import { StateCreator } from 'zustand';
-
-export type ReportTabSlice = {
-  // State - actions per tab ID
-  tabActions: Record<string, ReactNode>;
-
-  // Actions
-  setTabActions: (tabId: string, actions: ReactNode) => void;
-  clearTabActions: (tabId: string) => void;
-  clearAllTabActions: () => void;
-};
-
-export const createReportTabSlice: StateCreator<
-  ReportTabSlice,
-  [],
-  [],
-  ReportTabSlice
-> = (set) => ({
-  tabActions: {},
-
-  setTabActions: (tabId, actions) =>
-    set((state) => ({
-      tabActions: {
-        ...state.tabActions,
-        [tabId]: actions,
-      },
-    })),
-
-  clearTabActions: (tabId) =>
-    set((state) => {
-      const { [tabId]: _, ...rest } = state.tabActions;
-      return { tabActions: rest };
-    }),
-
-  clearAllTabActions: () => set({ tabActions: {} }),
-});

src/stores/tab-actions/tab-actions.store.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { ReactNode } from 'react';
+
+export type TabActionsSlice = {
+  // State - actions per tab ID
+  tabActions: Record<string, ReactNode>;
+
+  // Actions
+  setTabActions: (tabId: string, actions: ReactNode) => void;
+  clearTabActions: (tabId: string) => void;
+  clearAllTabActions: () => void;
+};
+
+export const useTabActionsStore = create<TabActionsSlice>()(
+  devtools(
+    (set) => ({
+      tabActions: {},
+
+      setTabActions: (tabId, actions) =>
+        set((state) => ({
+          tabActions: {
+            ...state.tabActions,
+            [tabId]: actions,
+          },
+        })),
+
+      clearTabActions: (tabId) =>
+        set((state) => {
+          const { [tabId]: _, ...rest } = state.tabActions;
+          return { tabActions: rest };
+        }),
+
+      clearAllTabActions: () => set({ tabActions: {} }),
+    }),
+    {
+      name: 'TabActionsStore',
+    }
+  )
+);

src/types/api/production/project-flock.d.ts

@@ -23,6 +23,7 @@ export type BaseProjectFlock = {
   kandang_ids: number[];
   kandangs: (Kandang & {
     project_flock_kandang_id: number;
+    closed_at?: string;
   })[];
   project_budgets?: ProjectFlockBudget[];
   approval: BaseApproval;