refactor(FE): Simplify table cells and render initial balance row

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -302,49 +302,35 @@ const CustomerPaymentTab = () => {
       {
         id: 'no',
         header: 'No',
-        cell: (props) => {
+        cell: (props) => props.row.index,
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          return isInitialBalanceRow ? 'Saldo Awal' : props.row.index;
-        },
         footer: () => <div className='font-semibold text-gray-900'>Total</div>,
       },
       {
         id: 'do_date_or_payment_date',
         header: 'Tanggal DO/Bayar',
         accessorKey: 'trans_date',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return '-';
           const value = props.row.original.trans_date;
-          return formatDate(value, 'DD MMM YYYY');
+          return value ? formatDate(value, 'DD MMM YYYY') : '-';
         },
       },
       {
         id: 'realization_date',
         header: 'Tanggal Realisasi',
         accessorKey: 'delivery_date',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return '-';
           const value = props.row.original.delivery_date;
-          return formatDate(value, 'DD MMM YYYY');
+          return value ? formatDate(value, 'DD MMM YYYY') : '-';
         },
       },
       {
         id: 'aging',
         header: 'Aging',
         accessorKey: 'aging_day',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return '-';
           const value = props.row.original.aging_day;
           return (
             <div className='text-center'>
@@ -357,11 +343,8 @@ const CustomerPaymentTab = () => {
         id: 'reference',
         header: 'Referensi',
         accessorKey: 'reference',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return '-';
           const value = props.row.original.reference;
           return value || '-';
         },
@@ -370,11 +353,8 @@ const CustomerPaymentTab = () => {
         id: 'vehicle_plate',
         header: 'Nomor Polisi',
         accessorKey: 'vehicle_numbers',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return '-';
           const value = props.row.original.vehicle_numbers;
           return value || '-';
         },
@@ -383,11 +363,8 @@ const CustomerPaymentTab = () => {
         id: 'qty',
         header: 'Ekor/Qty',
         accessorKey: 'qty',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.qty;
           return <div className='text-right'>{formatNumber(value)}</div>;
         },
@@ -401,11 +378,8 @@ const CustomerPaymentTab = () => {
         id: 'weight',
         header: 'Berat (Kg)',
         accessorKey: 'weight',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.weight;
           return <div className='text-right'>{formatNumber(value)}</div>;
         },
@@ -419,11 +393,8 @@ const CustomerPaymentTab = () => {
         id: 'average_weight',
         header: 'AVG',
         accessorKey: 'average_weight',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.average_weight;
           return <div className='text-right'>{formatNumber(value)}</div>;
         },
@@ -435,11 +406,8 @@ const CustomerPaymentTab = () => {
         id: 'price',
         header: 'Harga Awal',
         accessorKey: 'price',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
@@ -453,11 +421,8 @@ const CustomerPaymentTab = () => {
         id: 'credit_note',
         header: 'CN',
         accessorKey: 'credit_note',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.credit_note;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
@@ -471,11 +436,8 @@ const CustomerPaymentTab = () => {
         id: 'final_price',
         header: 'Harga Akhir',
         accessorKey: 'final_price',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.final_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
@@ -489,11 +451,8 @@ const CustomerPaymentTab = () => {
         id: 'ppn',
         header: 'PPN (%)',
         accessorKey: 'ppn',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.ppn;
           return <div className='text-right'>{formatNumber(value)}%</div>;
         },
@@ -505,11 +464,8 @@ const CustomerPaymentTab = () => {
         id: 'total',
         header: 'Total',
         accessorKey: 'total_price',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.total_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
@@ -523,11 +479,8 @@ const CustomerPaymentTab = () => {
         id: 'payment',
         header: 'Pembayaran',
         accessorKey: 'payment_amount',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return <div className='text-right'>-</div>;
           const value = props.row.original.payment_amount;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
@@ -541,6 +494,7 @@ const CustomerPaymentTab = () => {
         id: 'accounts_receivable',
         header: 'Saldo Piutang',
         accessorKey: 'accounts_receivable',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.accounts_receivable;
           return (
@@ -557,11 +511,8 @@ const CustomerPaymentTab = () => {
         id: 'notes',
         header: 'Keterangan',
         accessorKey: 'status',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return '-';
           const value = props.row.original.status;
 
           if (!value) {
@@ -586,11 +537,8 @@ const CustomerPaymentTab = () => {
         id: 'pickup_info',
         header: 'Pengambilan',
         accessorKey: 'pickup_info',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return '-';
           const value = props.row.original.pickup_info;
           return value || '-';
         },
@@ -599,11 +547,8 @@ const CustomerPaymentTab = () => {
         id: 'sales_marketing',
         header: 'Sales/Marketing',
         accessorKey: 'sales_person',
+        enableSorting: false,
         cell: (props) => {
-          const isInitialBalanceRow =
-            Object.keys(props.row.original).length === 1 &&
-            'accounts_receivable' in props.row.original;
-          if (isInitialBalanceRow) return '-';
           const value = props.row.original.sales_person;
           return value || '-';
         },
@@ -854,6 +799,30 @@ const CustomerPaymentTab = () => {
                       'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                     paginationClassName: 'hidden',
                   }}
+                  renderCustomRow={(row) => {
+                    if (row.index === 0) {
+                      return (
+                        <tr
+                          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'
+                          key={row.index}
+                        >
+                          <td
+                            className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
+                            colSpan={15}
+                          ></td>
+                          <td className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'>
+                            <div className='text-right text-error'>
+                              {formatCurrency(row.original.accounts_receivable)}
+                            </div>
+                          </td>
+                          <td
+                            className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
+                            colSpan={4}
+                          ></td>
+                        </tr>
+                      );
+                    }
+                  }}
                 />
               </Card>
             );