feat(FE-334): Use column footers and fix closing loading check

src/app/_closing/detail/page.tsx

@@ -51,11 +51,9 @@ const ClosingDetailPage = () => {
   }
 
   if (
-    !isLoading ||
-    !closing ||
-    isResponseError(closing) ||
-    !hpp_ekspedisi ||
-    isResponseError(hpp_ekspedisi)
+    !isLoadingClosing &&
+    (!closing || isResponseError(closing)) &&
+    (!hpp_ekspedisi || isResponseError(hpp_ekspedisi))
   ) {
     router.replace('/404');
     return;

src/components/pages/closing/hpp-ekspedisi/CosExpeditionReportTable.tsx

@@ -15,10 +15,6 @@ interface CosExpeditionReportTableProps {
   initialValues?: BaseClosingCosExpedition;
 }
 
-interface FooterCosExpeditionRow extends BaseCosExpedition {
-  _isFooter: true;
-}
-
 const CosExpeditionReportTable = ({
   type = 'detail',
   initialValues,
@@ -44,19 +40,6 @@ const CosExpeditionReportTable = ({
     };
   }, [cosExpeditionData]);
 
-  const footerData = useMemo((): FooterCosExpeditionRow[] => {
-    if (cosExpeditionData.length === 0) return [];
-
-    const footerRow: FooterCosExpeditionRow = {
-      id: -999,
-      expedition_name: 'Total HPP Ekspedisi',
-      hpp: totals.totalHpp,
-      _isFooter: true,
-    };
-
-    return [footerRow];
-  }, [cosExpeditionData, totals]);
-
   const cosExpeditionColumns: ColumnDef<BaseCosExpedition>[] = useMemo(
     () => [
       {
@@ -64,28 +47,17 @@ const CosExpeditionReportTable = ({
         accessorKey: 'id',
         header: 'No',
         cell: (props) => {
-          const isFooter = '_isFooter' in props.row.original;
-          if (isFooter) {
-            return (
-              <div className='font-semibold text-gray-900 col-span-2'>
-                {props.row.original.expedition_name}
-              </div>
-            );
-          }
-          return props.getValue() || '-';
+          return <div>{props.row.index + 1}</div>;
         },
+        footer: () => (
+          <div className='font-semibold text-gray-900'>Total HPP Ekspedisi</div>
+        ),
       },
       {
         id: 'expedition_name',
         accessorKey: 'expedition_name',
         header: 'Nama Ekspedisi',
-        cell: (props) => {
-          const isFooter = '_isFooter' in props.row.original;
-          if (isFooter) {
-            return null;
-          }
-          return props.getValue() || '-';
-        },
+        cell: (props) => props.getValue() || '-',
       },
       {
         id: 'hpp',
@@ -93,22 +65,16 @@ const CosExpeditionReportTable = ({
         header: 'HPP Ekspedisi',
         cell: (props) => {
           const value = props.getValue() as number;
-          const isFooter = '_isFooter' in props.row.original;
-          return (
-            <div
-              className={
-                isFooter
-                  ? 'text-right font-semibold text-gray-900'
-                  : 'text-right'
-              }
-            >
-              {formatCurrency(value)}
-            </div>
-          );
+          return <div className='text-right'>{formatCurrency(value)}</div>;
         },
+        footer: () => (
+          <div className='text-right font-semibold text-gray-900'>
+            {formatCurrency(totals.totalHpp)}
+          </div>
+        ),
       },
     ],
-    []
+    [totals]
   );
 
   return (
@@ -125,7 +91,6 @@ const CosExpeditionReportTable = ({
             <Table
               data={cosExpeditionData}
               columns={cosExpeditionColumns}
-              footerData={footerData}
               renderFooter={cosExpeditionData.length > 0}
               className={{
                 tableWrapperClassName: 'overflow-x-auto',