refactor(FE): Refactor tab actions to use memoized components

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

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useRef } from 'react';
 import useSWR from 'swr';
 import { useSelect } from '@/components/input/SelectInput';
 import DateInput from '@/components/input/DateInput';
@@ -83,6 +83,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   const [dateErrorShown, setDateErrorShown] = useState(false);
   const [hasDateError, setHasDateError] = useState(false);
 
+  const handleFilterModalOpenRef = useRef(() => {});
+
   const filterModal = useModal();
 
   // ===== OPTIONS =====
@@ -102,11 +104,6 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   const { options: customerOptions, isLoadingOptions: isLoadingCustomers } =
     useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
   // ===== FORMIK SETUP =====
   const formik = useFormik<DailyMarketingReportFilterType>({
     initialValues: {
@@ -353,9 +350,13 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
     }
   }, [dailyMarketingsExport, summaryTotal]);
 
-  // ===== REGISTER TAB ACTIONS TO STORE =====
+  // ===== TAB ACTIONS COMPONENT =====
+  const TabActions = useMemo(() => {
+    return function TabActionsComponent() {
       const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
+      const clearTabActions = useTabActionsStore(
+        (state) => state.clearTabActions
+      );
 
       useEffectHook(() => {
         setTabActions(
@@ -367,19 +368,24 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               value={searchValue}
               onChange={searchChangeHandler}
               startAdornment={
-            <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
+                <Icon
+                  icon='heroicons:magnifying-glass'
+                  width={20}
+                  height={20}
+                />
               }
               className={{
                 wrapper: 'w-full min-w-48 max-w-3xs',
                 inputWrapper: 'rounded-xl! shadow-button-soft',
-            input: 'placeholder:font-semibold placeholder:text-base-content/50',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
               }}
             />
 
             <ButtonFilter
-          values={formik.values}
+              values={filterParams}
               fieldGroups={[['start_date', 'end_date']]}
-          onClick={handleFilterModalOpen}
+              onClick={() => handleFilterModalOpenRef.current()}
               variant='outline'
               className='px-3 py-2.5'
             />
@@ -409,7 +415,11 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
 
                     <div className='w-px self-stretch bg-base-content/10' />
 
-                <Icon icon='heroicons:chevron-down' width={14} height={14} />
+                    <Icon
+                      icon='heroicons:chevron-down'
+                      width={14}
+                      height={14}
+                    />
                   </div>
                 </Button>
               }
@@ -437,37 +447,29 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
             </Dropdown>
           </div>
         );
-  }, [
+      }, [setTabActions]);
-    tabId,
-    searchValue,
-    formik.values,
-    isAnyExportLoading,
-    filterModal.open,
-    setTabActions,
-  ]);
 
       useEffectHook(() => {
         return () => {
           clearTabActions(tabId);
         };
-  }, [tabId, clearTabActions]);
+      }, [clearTabActions]);
 
-  useEffectHook(() => {
+      return null;
-    return () => {
-      if (dateErrorShown) {
-        toast.dismiss();
-      }
     };
-  }, [dateErrorShown]);
+  }, [
+    tabId,
+    filterParams,
+    searchValue,
+    isAnyExportLoading,
+    handleExportExcel,
+    handleExportPDF,
+    isExcelExportLoading,
+    isPdfExportLoading,
+    searchChangeHandler,
+  ]);
 
-  useEffectHook(() => {
+  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
-    return () => {
-      if (dateErrorShown) {
-        toast.dismiss();
-        setDateErrorShown(false);
-      }
-    };
-  }, [filterModal.open, dateErrorShown]);
 
   const getTableColumns = (): ColumnDef<DailyMarketingRow>[] => {
     const tableColumns: ColumnDef<DailyMarketingRow>[] = [
@@ -639,6 +641,7 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
 
   return (
     <>
+      {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
           <DailyMarketingReportSkeleton

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

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useRef } from 'react';
 import useSWR from 'swr';
 import { useSelect } from '@/components/input/SelectInput';
 import DateInput from '@/components/input/DateInput';
@@ -66,6 +66,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
   // ===== FILTER STATE =====
   const [filterParams, setFilterParams] = useState<FilterParams>({});
 
+  const handleFilterModalOpenRef = useRef(() => {});
+
   const filterModal = useModal();
 
   // ===== OPTIONS =====
@@ -95,11 +97,6 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
     []
   );
 
-  const handleFilterModalOpen = () => {
-    filterModal.openModal();
-    formik.validateForm();
-  };
-
   // ===== FORMIK SETUP =====
   const formik = useFormik<HppPerKandangFilterType>({
     initialValues: {
@@ -140,6 +137,11 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
     },
   });
 
+  handleFilterModalOpenRef.current = () => {
+    filterModal.openModal();
+    formik.validateForm();
+  };
+
   // ===== WEIGHT CHANGE HANDLERS =====
   const handleWeightMinChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -442,17 +444,21 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
     allDocSuppliers,
   ]);
 
-  // ===== REGISTER TAB ACTIONS TO STORE =====
+  // ===== TAB ACTIONS COMPONENT =====
+  const TabActions = useMemo(() => {
+    return function TabActionsComponent() {
       const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
+      const clearTabActions = useTabActionsStore(
+        (state) => state.clearTabActions
+      );
 
       useEffectHook(() => {
         setTabActions(
           tabId,
           <div className='flex flex-row gap-3'>
             <ButtonFilter
-          values={formik.values}
+              values={filterParams}
-          onClick={handleFilterModalOpen}
+              onClick={() => handleFilterModalOpenRef.current()}
               variant='outline'
               className='px-3 py-2.5'
             />
@@ -482,7 +488,11 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
 
                     <div className='w-px self-stretch bg-base-content/10' />
 
-                <Icon icon='heroicons:chevron-down' width={14} height={14} />
+                    <Icon
+                      icon='heroicons:chevron-down'
+                      width={14}
+                      height={14}
+                    />
                   </div>
                 </Button>
               }
@@ -510,19 +520,27 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
             </Dropdown>
           </div>
         );
-  }, [
+      }, [setTabActions]);
-    tabId,
-    formik.values,
-    isAnyExportLoading,
-    filterModal.open,
-    setTabActions,
-  ]);
 
       useEffectHook(() => {
         return () => {
           clearTabActions(tabId);
         };
-  }, [tabId, clearTabActions]);
+      }, [clearTabActions]);
+
+      return null;
+    };
+  }, [
+    tabId,
+    filterParams,
+    isAnyExportLoading,
+    handleExportExcel,
+    handleExportPDF,
+    isExcelExportLoading,
+    isPdfExportLoading,
+  ]);
+
+  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
 
   const getTableColumns = (): ColumnDef<HppPerKandangReport['rows'][0]>[] => {
     const tableColumns: ColumnDef<HppPerKandangReport['rows'][0]>[] = [
@@ -767,6 +785,7 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
 
   return (
     <>
+      {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
           <HppPerKandangSkeleton

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

@@ -1,6 +1,12 @@
 'use client';
 
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import useSWR from 'swr';
 import { generateProductionResultExcel } from '../export/ProductionResultExportXLSX';
 import toast from 'react-hot-toast';
@@ -66,6 +72,8 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
+  const handleFilterModalOpenRef = useRef(() => {});
+
   const filterModal = useModal();
 
   // ===== TABLE COLUMNS =====
@@ -242,6 +250,11 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     },
   });
 
+  handleFilterModalOpenRef.current = () => {
+    filterModal.openModal();
+    formik.validateForm();
+  };
+
   // ===== OPTIONS =====
   const {
     setInputValue: setAreaInputValue,
@@ -519,9 +532,13 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     setIsPdfExportLoading(false);
   }, [filterParams]);
 
-  // ===== REGISTER TAB ACTIONS TO STORE =====
+  // ===== TAB ACTIONS COMPONENT =====
+  const TabActions = useMemo(() => {
+    return function TabActionsComponent() {
       const setTabActions = useTabActionsStore((state) => state.setTabActions);
-  const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
+      const clearTabActions = useTabActionsStore(
+        (state) => state.clearTabActions
+      );
 
       useEffect(() => {
         setTabActions(
@@ -529,7 +546,7 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
           <div className='flex flex-row gap-3'>
             <ButtonFilter
               values={filterParams}
-          onClick={() => filterModal.openModal()}
+              onClick={() => handleFilterModalOpenRef.current()}
               variant='outline'
               className='px-3 py-2.5'
             />
@@ -559,7 +576,11 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
 
                     <div className='w-px self-stretch bg-base-content/10' />
 
-                <Icon icon='heroicons:chevron-down' width={14} height={14} />
+                    <Icon
+                      icon='heroicons:chevron-down'
+                      width={14}
+                      height={14}
+                    />
                   </div>
                 </Button>
               }
@@ -587,23 +608,32 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
             </Dropdown>
           </div>
         );
+      }, [setTabActions]);
+
+      useEffect(() => {
+        return () => {
+          clearTabActions(tabId);
+        };
+      }, [clearTabActions]);
+
+      return null;
+    };
   }, [
     tabId,
     filterParams,
     isAnyExportLoading,
     exportToExcelHandler,
     exportToPdfHandler,
-    setTabActions,
+    isExcelExportLoading,
+    isPdfExportLoading,
   ]);
 
-  useEffect(() => {
+  // Render the TabActions component
-    return () => {
+  const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
-      clearTabActions(tabId);
-    };
-  }, [tabId, clearTabActions]);
 
   return (
     <>
+      {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
           <ProductionResultSkeleton