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

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>
     </>