feat(FE-355): Add custom row renderer to HppPerKandangTab

src/components/pages/report/sale/tab/HppPerKandangTab.tsx

@@ -13,8 +13,8 @@ import { LocationApi } from '@/services/api/master-data';
 import { KandangApi } from '@/services/api/master-data';
 import { SaleReportApi } from '@/services/api/report/marketing-sale';
 import Table from '@/components/Table';
-import { ColumnDef } from '@tanstack/react-table';
-import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { ColumnDef, Row } from '@tanstack/react-table';
+import { formatCurrency, formatNumber } from '@/lib/helper';
 import { HppPerKandangReport } from '@/types/api/report/hpp-per-kandang';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -684,6 +684,27 @@ const HppPerKandangTab = () => {
     return tableColumns;
   };
 
+  // ===== CUSTOM ROW RENDERER =====
+  const renderCustomRow = useCallback(
+    (row: Row<HppPerKandangReport['rows'][0]>) => {
+      if (row.index === data.length - 1) {
+        return (
+          <tr className='border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'>
+            <td
+              colSpan={15}
+              className='px-4 py-3 text-gray-900 text-center font-semibold'
+            >
+              Rekapitulasi per rentang bobot
+            </td>
+          </tr>
+        );
+      }
+
+      return null;
+    },
+    [data]
+  );
+
   return (
     <div className='w-full p-0 sm:p-4'>
       <Card
@@ -820,6 +841,7 @@ const HppPerKandangTab = () => {
             data={data}
             columns={getTableColumns()}
             renderFooter={data.length > 0}
+            renderCustomRow={renderCustomRow}
             className={{
               containerClassName: 'w-full mt-6',
               tableWrapperClassName: 'overflow-x-auto mt-4',