refactor(FE-326): Remove custom header rows and simplify Table

src/components/pages/closing/sale/SalesReportTable.tsx

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
-import Table, { CustomHeaderRow } from '@/components/Table';
+import Table from '@/components/Table';
 import Card from '@/components/Card';
 import Badge from '@/components/Badge';
 import { formatCurrency, formatNumber, formatDate } from '@/lib/helper';
@@ -16,101 +16,6 @@ interface SalesReportTableProps {
   initialValues?: BaseClosingSales;
 }
 
-interface HeaderCell {
-  id: string;
-  content: React.ReactNode;
-  colSpan?: number;
-  rowSpan?: number;
-  className: string;
-  field?: string;
-}
-
-const generateCustomHeaders = (template: {
-  groups: Array<{
-    label: string;
-    field?: string;
-    rowSpan?: number;
-    colSpan?: number;
-    subLabels?: string[];
-  }>;
-}): CustomHeaderRow[] => {
-  const mainRow: Array<{
-    id: string;
-    content: React.ReactNode;
-    colSpan?: number;
-    rowSpan?: number;
-    className: string;
-  }> = [];
-  const subRow: Array<{
-    id: string;
-    content: React.ReactNode;
-    colSpan?: number;
-    rowSpan?: number;
-    className: string;
-  }> = [];
-  let subColumnIndex = 0;
-
-  template.groups.forEach((group) => {
-    if (group.subLabels) {
-      const mainCell: HeaderCell = {
-        id: `${group.field || 'group'}-${subColumnIndex}`,
-        content: group.label,
-        colSpan: group.colSpan,
-        className:
-          'px-4 py-3 text-xs font-semibold text-gray-700 text-center whitespace-nowrap border border-gray-200',
-      };
-
-      mainRow.push(mainCell);
-
-      group.subLabels.forEach((subLabel) => {
-        const subCell: HeaderCell = {
-          id: `sub-${subColumnIndex}`,
-          content: subLabel,
-          className:
-            'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap  border border-gray-200',
-        };
-
-        if (group.label === 'Jumlah') {
-          subCell.field = subLabel === 'Kuantitas' ? 'quantity' : 'weight';
-        }
-
-        subRow.push(subCell);
-        subColumnIndex++;
-      });
-    } else {
-      const mainCell: HeaderCell = {
-        id: `${group.field}-header`,
-        content: group.label,
-        rowSpan: group.rowSpan,
-        className:
-          'px-4 py-3 text-xs font-semibold text-gray-700 text-left whitespace-nowrap border border-gray-200',
-      };
-
-      mainCell.field = group.field;
-
-      mainRow.push(mainCell);
-    }
-  });
-
-  const rows: CustomHeaderRow[] = [
-    {
-      id: 'main-header',
-      cells: mainRow,
-      className: 'bg-gray-50',
-    },
-  ];
-
-  if (subRow.length > 0) {
-    rows.push({
-      id: 'sub-header',
-      cells: subRow,
-      className: 'bg-gray-50',
-    });
-  }
-
-  return rows;
-};
-
 const SalesReportTable = ({
   type = 'detail',
   initialValues,
@@ -310,7 +215,7 @@ const SalesReportTable = ({
           };
 
           return (
-            <Badge variant='soft' size='xs' color={getStatusColor(status)}>
+            <Badge variant='soft' size='sm' color={getStatusColor(status)}>
               {status || '-'}
             </Badge>
           );
@@ -320,33 +225,6 @@ const SalesReportTable = ({
     []
   );
 
-  const headerTemplate = {
-    groups: [
-      { label: 'Tanggal Realisasi', field: 'realization_date', rowSpan: 2 },
-      { label: 'Umur', field: 'age', rowSpan: 2 },
-      { label: 'No. DO', field: 'do_number', rowSpan: 2 },
-      { label: 'Produk', field: 'product', rowSpan: 2 },
-      { label: 'Customer', field: 'customer', rowSpan: 2 },
-      {
-        label: 'Jumlah',
-        colSpan: 2,
-        subLabels: ['Qty', 'Kg'],
-      },
-      { label: 'AVG (Kg)', field: 'avg_weight', rowSpan: 2 },
-      { label: 'Harga Mitra (Rp)', field: 'price_partner', rowSpan: 2 },
-      { label: 'Total Mitra (Rp)', field: 'total_mitra', rowSpan: 2 },
-      { label: 'Harga Act (Rp)', field: 'price_act', rowSpan: 2 },
-      { label: 'Total Act (Rp)', field: 'total_act', rowSpan: 2 },
-      { label: 'Kandang', field: 'kandang', rowSpan: 2 },
-      { label: 'Status Pembayaran', field: 'payment_status', rowSpan: 2 },
-    ],
-  };
-
-  const salesCustomHeaderRows = useMemo(
-    () => generateCustomHeaders(headerTemplate),
-    []
-  );
-
   return (
     <>
       <section className='w-full'>
@@ -361,8 +239,6 @@ const SalesReportTable = ({
             <Table
               data={salesData}
               columns={salesColumns}
-              renderCustomHeaders={true}
-              customHeaderRows={salesCustomHeaderRows}
               renderFooter={salesData.length > 0}
               footerContent={
                 <tfoot>
@@ -374,13 +250,13 @@ const SalesReportTable = ({
                     <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
                     <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
                     <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '></td>
-                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '>
                       {formatNumber(totals.totalQuantity)}
                     </td>
-                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '>
                       {formatNumber(totals.totalWeight)}
                     </td>
-                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
+                    <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap '>
                       {formatNumber(totals.avgWeight)}
                     </td>
                     <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap text-right '>
@@ -403,7 +279,9 @@ const SalesReportTable = ({
               className={{
                 tableWrapperClassName: 'overflow-x-auto',
                 tableClassName: 'w-full table-auto text-sm',
-                headerRowClassName: 'hidden',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-4 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end whitespace-nowrap',
                 bodyRowClassName:
                   'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
                 bodyColumnClassName: