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

2026-05-25 15:55:48 +00:00 · 2026-02-18 16:28:56 +07:00
parent 42cc0f2661
commit 14e1c59a69
5 changed files with 72 additions and 8 deletions
@@ -0,0 +1,150 @@
+'use client';
+
+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/table/ClosingGeneralInformationTable';
+import SapronakClosingTab from '@/components/pages/closing/tab/SapronakClosingTab';
+import ProductionDataClosingTab from '@/components/pages/closing/tab/ProductionDataClosingTab';
+
+import {
+  ClosingGeneralInformation,
+  BaseClosingSales,
+  ClosingHppExpedition,
+} from '@/types/api/closing';
+import SapronakCalculationClosingTab from '@/components/pages/closing/tab/SapronakCalculationClosingTab';
+import OverheadClosingTab from '@/components/pages/closing/tab/OverheadClosingTab';
+import FinanceClosingTab from '@/components/pages/closing/tab/FinanceClosingTab';
+import SalesClosingTable from '@/components/pages/closing/table/SalesClosingTable';
+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;
+  salesData?: BaseClosingSales;
+  hppExpeditionData?: ClosingHppExpedition;
+  projectData?: ProjectFlock;
+  kandangData?: ProjectFlockKandang;
+}
+
+const ClosingDetail: React.FC<ClosingDetailProps> = ({
+  id,
+  initialValue,
+  salesData,
+  hppExpeditionData,
+  projectData,
+  kandangData,
+}) => {
+  const [activeTabId, setActiveTabId] = useState<string>('sapronak');
+  const tabActions = useClosingTabStore((state) => state.tabActions);
+
+  const closingDetailTabs = useMemo(() => {
+    const validTabs = [
+      {
+        id: 'sapronak',
+        label: 'Sapronak',
+        content: <SapronakClosingTab projectFlockId={id} />,
+      },
+      {
+        id: 'perhitunganSapronak',
+        label: 'Perhitungan Sapronak',
+        content: (
+          <SapronakCalculationClosingTab
+            closingGeneralInformation={initialValue}
+            projectFlockId={id}
+          />
+        ),
+      },
+      {
+        id: 'penjualan',
+        label: 'Penjualan',
+        content: <SalesClosingTable initialValues={salesData} />,
+      },
+      {
+        id: 'overhead',
+        label: 'Overhead',
+        content: (
+          <OverheadClosingTab
+            projectFlockId={id}
+            generalInformation={initialValue}
+            kandangData={kandangData}
+          />
+        ),
+      },
+      {
+        id: 'hppEkspedisi',
+        label: 'HPP Ekspedisi',
+        content: (
+          <HppExpeditionClosingTable initialValues={hppExpeditionData} />
+        ),
+      },
+      {
+        id: 'dataProduksi',
+        label: 'Data Produksi',
+        content: <ProductionDataClosingTab projectFlockId={id} />,
+      },
+      {
+        id: 'keuangan',
+        label: 'Keuangan',
+        content: <FinanceClosingTab projectFlockId={id} />,
+      },
+    ];
+
+    return validTabs;
+  }, [initialValue, salesData, kandangData, id]);
+
+  return (
+    <>
+      <section className='w-full'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href={
+              !kandangData ? '/closing' : `/closing/detail/?closingId=${id}`
+            }
+            variant='link'
+            className='w-fit p-0 text-primary'
+          >
+            <Icon icon='uil:arrow-left' width={24} height={24} />
+            Kembali
+          </Button>
+
+          <h1 className='text-2xl font-bold text-center'>Detail Closing</h1>
+        </header>
+
+        <ClosingGeneralInformationTable
+          initialValue={initialValue}
+          projectData={projectData}
+          kandangData={kandangData}
+        />
+
+        {!kandangData && (
+          <ClosingKandangList
+            initialValue={initialValue}
+            projectData={projectData}
+          />
+        )}
+
+        <Tabs
+          activeTabId={activeTabId}
+          onTabChange={setActiveTabId}
+          tabs={closingDetailTabs}
+          variant='boxed'
+          className={{
+            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>
+    </>
+  );
+};
+
+export default ClosingDetail;