refactor(FE): Refactor ClosingDetail component to use tab store

src/app/closing/detail/page.tsx

@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
-import ClosingDetail from '@/components/pages/closing/ClosingDetail';
+import ClosingDetail from '@/components/pages/closing/ClosingDetailTabs';
 
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';

src/components/pages/closing/ClosingDetailTabs.tsx

@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import Tabs from '@/components/Tabs';
-import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+import ClosingGeneralInformationTable from '@/components/pages/closing/table/ClosingGeneralInformationTable';
 import SapronakClosingTab from '@/components/pages/closing/tab/SapronakClosingTab';
 import ProductionDataClosingTab from '@/components/pages/closing/tab/ProductionDataClosingTab';
 
@@ -22,6 +22,7 @@ import HppExpeditionClosingTable from './table/HppExpeditionClosingTable';
 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';
 interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
@@ -39,7 +40,8 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
   projectData,
   kandangData,
 }) => {
-  const [activeTab, setActiveTab] = useState<string>('sapronak');
+  const [activeTabId, setActiveTabId] = useState<string>('sapronak');
+  const tabActions = useClosingTabStore((state) => state.tabActions);
 
   const closingDetailTabs = useMemo(() => {
     const validTabs = [
@@ -94,7 +96,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
     ];
 
     return validTabs;
-  }, [initialValue]);
+  }, [initialValue, salesData, kandangData, id]);
 
   return (
     <>
@@ -128,13 +130,17 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
         )}
 
         <Tabs
-          activeTabId={activeTab}
-          onTabChange={setActiveTab}
+          activeTabId={activeTabId}
+          onTabChange={setActiveTabId}
           tabs={closingDetailTabs}
-          variant='lifted'
+          variant='boxed'
           className={{
-            wrapper: 'w-full mt-4',
+            tabHeaderWrapper:
+              'justify-between items-center p-3 border-b border-base-content/10',
+            tab: 'w-fit',
+            content: 'p-0 m-0',
           }}
+          sideContent={tabActions[activeTabId] || null}
         />
       </section>
     </>

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

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

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