refactor(FE-355): Use flexRender and prepend default row in table

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

@@ -13,7 +13,7 @@ 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, Row } from '@tanstack/react-table';
+import { ColumnDef, Row, flexRender } from '@tanstack/react-table';
 import { formatCurrency, formatNumber } from '@/lib/helper';
 import {
   HppPerKandangReport,
@@ -739,7 +739,23 @@ const HppPerKandangTab = () => {
   const renderCustomRow = useCallback(
     (row: Row<HppPerKandangReport['rows'][0]>) => {
       if (row.index === data.length - 1) {
-        const rows = [
+        const defaultRow = (
+          <tr
+            key={row.id}
+            className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
+          >
+            {row.getVisibleCells().map((cell) => (
+              <td
+                key={cell.id}
+                className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap border border-gray-200'
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        );
+
+        const customRows = [
           <tr
             className='border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
             key={'rekapitulasi-row'}
@@ -754,7 +770,7 @@ const HppPerKandangTab = () => {
         ];
 
         if (perWeightRangeSummary.length > 0) {
-          rows.push(
+          customRows.push(
             <tr key={'summary-table-row'}>
               <td
                 colSpan={15}
@@ -812,7 +828,7 @@ const HppPerKandangTab = () => {
           );
         }
 
-        return rows;
+        return [defaultRow, ...customRows];
       }
 
       return null;