refactor(FE): Refactor HPP Expedition handling in ClosingDetailPage

src/app/closing/detail/page.tsx

@@ -46,21 +46,6 @@ const ClosingDetailPage = () => {
         : ClosingApi.getPenjualan(Number(closingId))
   );
 
-  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
-    kandangId
-      ? `hpp-ekspedisi-${closingId}-${kandangId}`
-      : closingId
-        ? `hpp-ekspedisi-${closingId}`
-        : null,
-    () =>
-      kandangId
-        ? ClosingApi.getHppEkspedisiByKandang(
-            Number(closingId),
-            Number(kandangId)
-          )
-        : ClosingApi.getHppEkspedisi(Number(closingId))
-  );
-
   if (!closingId) {
     router.back();
 
@@ -79,7 +64,6 @@ const ClosingDetailPage = () => {
   const isLoading =
     isLoadingClosing ||
     isLoadingSales ||
-    isLoadingHppEkspedisi ||
     isLoadingProject ||
     isLoadingKandang;
 
@@ -92,11 +76,6 @@ const ClosingDetailPage = () => {
           id={Number(closingId)}
           initialValue={closing.data}
           salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
-          hppExpeditionData={
-            isResponseSuccess(hppEkspedisiData)
-              ? hppEkspedisiData.data
-              : undefined
-          }
           projectData={
             isResponseSuccess(projectData) ? projectData.data : undefined
           }

src/components/pages/closing/ClosingDetailTabs.tsx

@@ -12,13 +12,12 @@ import ProductionDataClosingTab from '@/components/pages/closing/tab/ProductionD
 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 HppExpeditionClosingTab from '@/components/pages/closing/tab/HppExpeditionClosingTab';
 import ClosingKandangList from '@/components/pages/closing/ClosingKandangList';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
@@ -27,7 +26,6 @@ interface ClosingDetailProps {
   id: number;
   initialValue?: ClosingGeneralInformation;
   salesData?: BaseClosingSales;
-  hppExpeditionData?: ClosingHppExpedition;
   projectData?: ProjectFlock;
   kandangData?: ProjectFlockKandang;
 }
@@ -36,7 +34,6 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
   id,
   initialValue,
   salesData,
-  hppExpeditionData,
   projectData,
   kandangData,
 }) => {
@@ -79,9 +76,7 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'hppEkspedisi',
         label: 'HPP Ekspedisi',
-        content: (
+        content: <HppExpeditionClosingTab projectFlockId={id} />,
-          <HppExpeditionClosingTable initialValues={hppExpeditionData} />
-        ),
       },
       {
         id: 'dataProduksi',

src/components/pages/closing/tab/HppExpeditionClosingTab.tsx

@@ -0,0 +1,19 @@
+import HppExpeditionClosingTable from '@/components/pages/closing/table/HppExpeditionClosingTable';
+
+interface HppExpeditionClosingTabProps {
+  projectFlockId: number;
+}
+
+const HppExpeditionClosingTab = ({
+  projectFlockId,
+}: HppExpeditionClosingTabProps) => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {projectFlockId && (
+        <HppExpeditionClosingTable projectFlockId={projectFlockId} />
+      )}
+    </div>
+  );
+};
+
+export default HppExpeditionClosingTab;

src/components/pages/closing/table/HppExpeditionClosingTable.tsx

@@ -5,27 +5,49 @@ import { ColumnDef } from '@tanstack/react-table';
 import Table from '@/components/Table';
 import Card from '@/components/Card';
 import { formatCurrency } from '@/lib/helper';
-import { BaseHppExpedition, BaseExpeditionCost } from '@/types/api/closing';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseExpeditionCost } from '@/types/api/closing';
+import { ClosingApi } from '@/services/api/closing';
+import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 interface HppExpeditionClosingTableProps {
-  type?: 'detail';
+  projectFlockId: number;
-  initialValues?: BaseHppExpedition;
 }
 
 const HppExpeditionClosingTable = ({
-  initialValues,
+  projectFlockId,
 }: HppExpeditionClosingTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  const { data: hppExpedition, isLoading } = useSWR(
+    kandangId
+      ? `/closing/hpp-expedition/${projectFlockId}/${kandangId}`
+      : `/closing/hpp-expedition/${projectFlockId}`,
+    () =>
+      kandangId
+        ? ClosingApi.getHppEkspedisiByKandang(projectFlockId, Number(kandangId))
+        : ClosingApi.getHppEkspedisi(projectFlockId)
+  );
+
   const costOfRevenueExpeditionData: BaseExpeditionCost[] = useMemo(() => {
-    return initialValues?.expedition_costs || [];
+    if (isResponseSuccess(hppExpedition)) {
-  }, [initialValues]);
+      return hppExpedition.data.expedition_costs || [];
+    }
+    return [];
+  }, [hppExpedition]);
 
   const totals = useMemo(() => {
-    const totalHpp = initialValues?.total_hpp_amount || 0;
+    if (isResponseSuccess(hppExpedition)) {
-
+      return {
+        totalHpp: hppExpedition.data.total_hpp_amount || 0,
+      };
+    }
     return {
-      totalHpp,
+      totalHpp: 0,
     };
-  }, [initialValues]);
+  }, [hppExpedition]);
 
   const costOfRevenueExpeditionColumns: ColumnDef<BaseExpeditionCost>[] =
     useMemo(
@@ -81,6 +103,7 @@ const HppExpeditionClosingTable = ({
             <Table
               data={costOfRevenueExpeditionData}
               columns={costOfRevenueExpeditionColumns}
+              isLoading={isLoading}
               renderFooter={costOfRevenueExpeditionData.length > 0}
               className={{
                 tableWrapperClassName: 'overflow-x-auto',