feat(FE-344,345): Fetch and render HPP Ekspedisi report

src/app/_closing/detail/page.tsx

@@ -2,20 +2,24 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
+import { useId } from 'react';
 import SalesReportTable from '@/components/pages/closing/sale/SalesReportTable';
+import CosExpeditionReportTable from '@/components/pages/closing/hpp-ekspedisi/CosExpeditionReportTable';
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
 
 const ClosingDetailPage = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const penjualanId = useId();
+  const hppEkspedisiId = useId();
 
   const closingId = searchParams.get('closingId');
 
   const { data: closing, isLoading: isLoadingClosing } = useSWR(
-    closingId,
+    closingId ? `${closingId}-${penjualanId}` : null,
     (id: string) => {
-      const numericId = parseInt(id, 10);
+      const numericId = parseInt(id.split('-')[0], 10);
       if (isNaN(numericId) || numericId <= 0) {
         throw new Error('Invalid closing ID');
       }
@@ -23,6 +27,19 @@ const ClosingDetailPage = () => {
     }
   );
 
+  const { data: hpp_ekspedisi, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `${closingId}-${hppEkspedisiId}` : null,
+    (id: string) => {
+      const numericId = parseInt(id.split('-')[0], 10);
+      if (isNaN(numericId) || numericId <= 0) {
+        throw new Error('Invalid closing ID');
+      }
+      return ClosingApi.getHppEkspedisi(numericId);
+    }
+  );
+
+  const isLoading = isLoadingClosing || isLoadingHppEkspedisi;
+
   if (!closingId) {
     router.back();
 
@@ -33,21 +50,33 @@ const ClosingDetailPage = () => {
     );
   }
 
-  if (!isLoadingClosing && (!closing || isResponseError(closing))) {
+  if (
+    !isLoading ||
+    !closing ||
+    isResponseError(closing) ||
+    !hpp_ekspedisi ||
+    isResponseError(hpp_ekspedisi)
+  ) {
     router.replace('/404');
     return;
   }
 
   return (
     <div className='w-full p-4'>
-      {isLoadingClosing && (
+      {isLoading && (
         <div className='w-full flex flex-row justify-center items-center'>
           <span className='loading loading-spinner loading-xl' />
         </div>
       )}
-      {!isLoadingClosing && isResponseSuccess(closing) && (
+      {!isLoading && isResponseSuccess(closing) && (
         <SalesReportTable type='detail' initialValues={closing.data} />
       )}
+      {!isLoading && isResponseSuccess(hpp_ekspedisi) && (
+        <CosExpeditionReportTable
+          type='detail'
+          initialValues={hpp_ekspedisi.data}
+        />
+      )}
     </div>
   );
 };