refactor(FE): Refactor tab store to use a unified ReportTabStore

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 { useFinanceTabStore } from '@/stores/report/finance-tab/finance-tab.store';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
 
 const FinanceTabs = () => {
   const [activeTabId, setActiveTabId] = useState<string>('1');
-  const tabActions = useFinanceTabStore((state) => state.tabActions);
+  const tabActions = useReportTabStore((state) => state.tabActions);
 
   const tabs = [
     {

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

@@ -36,7 +36,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 { useFinanceTabStore } from '@/stores/report/finance-tab/finance-tab.store';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
 import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
 import { OptionType } from '@/components/table/TableRowSizeSelector';
 import { Color } from '@/types/theme';
@@ -375,8 +375,8 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   }, [customerPaymentExport, filterParams, customerOptions]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useFinanceTabStore((state) => state.setTabActions);
+  const setTabActions = useReportTabStore((state) => state.setTabActions);
-  const clearTabActions = useFinanceTabStore((state) => state.clearTabActions);
+  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
 
   useEffect(() => {
     setTabActions(

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

@@ -33,7 +33,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 { useFinanceTabStore } from '@/stores/report/finance-tab/finance-tab.store';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
 import StatusBadge from '@/components/helper/StatusBadge';
 import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
 
@@ -271,8 +271,8 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
   }, [debtSupplierExport]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useFinanceTabStore((state) => state.setTabActions);
+  const setTabActions = useReportTabStore((state) => state.setTabActions);
-  const clearTabActions = useFinanceTabStore((state) => state.clearTabActions);
+  const clearTabActions = useReportTabStore((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 { useLogisticStockTabStore } from '@/stores/report/logistic-stock-tab/logistic-stock-tab.store';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
 
 const LogisticStockTabs = () => {
   const [activeTabId, setActiveTabId] = useState<string>('1');
-  const tabActions = useLogisticStockTabStore((state) => state.tabActions);
+  const tabActions = useReportTabStore((state) => state.tabActions);
 
   const tabs = [
     {

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

@@ -32,7 +32,7 @@ import {
 } from '@/components/pages/report/logistic-stock/filter/PurchasesPerSupplierFilter';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
-import { useLogisticStockTabStore } from '@/stores/report/logistic-stock-tab/logistic-stock-tab.store';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
 import PurchasePerSupplierSkeleton from '@/components/pages/report/logistic-stock/skeleton/PurchasePerSupplierSkeleton';
 
 interface PurchasesPerSupplierTabProps {
@@ -486,12 +486,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
   ]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useLogisticStockTabStore(
+  const setTabActions = useReportTabStore((state) => state.setTabActions);
-    (state) => state.setTabActions
+  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
-  );
-  const clearTabActions = useLogisticStockTabStore(
-    (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 { useMarketingTabStore } from '@/stores/report/marketing-tab/marketing-tab.store';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
 
 const MarketingReportContent = () => {
   const [activeTabId, setActiveTabId] = useState<string>('1');
-  const tabActions = useMarketingTabStore((state) => state.tabActions);
+  const tabActions = useReportTabStore((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 { useMarketingTabStore } from '@/stores/report/marketing-tab/marketing-tab.store';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
 import DailyMarketingReportSkeleton from '@/components/pages/report/marketing/skeleton/DailyMarketingSkeleton';
 import { useEffect as useEffectHook } from 'react';
 import { httpClient } from '@/services/http/client';
@@ -390,10 +390,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   }, [dailyMarketingsExport, summaryTotal]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useMarketingTabStore((state) => state.setTabActions);
+  const setTabActions = useReportTabStore((state) => state.setTabActions);
-  const clearTabActions = useMarketingTabStore(
+  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
-    (state) => state.clearTabActions
-  );
 
   useEffectHook(() => {
     setTabActions(

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

@@ -33,7 +33,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 { useMarketingTabStore } from '@/stores/report/marketing-tab/marketing-tab.store';
+import { useReportTabStore } from '@/stores/report/report-tab.store';
 import HppPerKandangSkeleton from '@/components/pages/report/marketing/skeleton/HppPerKandangSkeleton';
 import { useEffect as useEffectHook } from 'react';
 
@@ -487,10 +487,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
   ]);
 
   // ===== REGISTER TAB ACTIONS TO STORE =====
-  const setTabActions = useMarketingTabStore((state) => state.setTabActions);
+  const setTabActions = useReportTabStore((state) => state.setTabActions);
-  const clearTabActions = useMarketingTabStore(
+  const clearTabActions = useReportTabStore((state) => state.clearTabActions);
-    (state) => state.clearTabActions
-  );
 
   useEffectHook(() => {
     setTabActions(

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+'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

@@ -0,0 +1,37 @@
+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: {} }),
+});