refactor(FE): Rename payment fields and add initial balance row

src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx

@@ -347,13 +347,15 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 </View>
                 <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
                   <Text>
-                    {item.do_date ? formatDate(item.do_date, 'DD MMM YY') : '-'}
+                    {item.trans_date
+                      ? formatDate(item.trans_date, 'DD MMM YY')
+                      : '-'}
                   </Text>
                 </View>
                 <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
                   <Text>
-                    {item.realization_date
+                    {item.delivery_date
-                      ? formatDate(item.realization_date, 'DD MMM YY')
+                      ? formatDate(item.delivery_date, 'DD MMM YY')
                       : '-'}
                   </Text>
                 </View>
@@ -366,7 +368,7 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   <Text>{item.reference || '-'}</Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                  <Text>{item.vehicle_plate || '-'}</Text>
+                  <Text>{item.vehicle_numbers || '-'}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
                   <Text>{formatNumber(item.qty)}</Text>
@@ -390,10 +392,10 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   <Text>{formatNumber(item.ppn)}%</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.total)}</Text>
+                  <Text>{formatCurrency(item.total_price)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.payment)}</Text>
+                  <Text>{formatCurrency(item.payment_amount)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text style={pdfStyles.textError}>
@@ -401,30 +403,28 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   </Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  {item.notes ? (
+                  {item.status ? (
-                    <Text>{item.notes}</Text>
-                  ) : (
                     <View
                       style={[
                         pdfStyles.badge,
-                        item.accounts_receivable === 0
+                        item.status === 'LUNAS'
                           ? pdfStyles.badgeLunas
                           : pdfStyles.badgeBelumLunas,
                       ]}
                     >
                       <Text>
-                        {item.accounts_receivable === 0
+                        {item.status === 'LUNAS' ? 'Lunas' : 'Belum Lunas'}
-                          ? 'Lunas'
-                          : 'Belum Lunas'}
                       </Text>
                     </View>
+                  ) : (
+                    <Text>-</Text>
                   )}
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text>{item.pickup_info || '-'}</Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text>{item.sales_marketing || '-'}</Text>
+                  <Text>{item.sales_person || '-'}</Text>
                 </View>
               </View>
             ))}

src/components/pages/report/finance/export/CustomerPaymentExportXLSX.tsx

@@ -24,17 +24,15 @@ export const generateCustomerPaymentExcel = (
     const excelData: { [key: string]: string | number }[] = customerData.map(
       (item, index) => ({
         No: index + 1,
-        'Tanggal DO/Bayar': item.do_date
+        'Tanggal DO/Bayar': item.trans_date
-          ? formatDate(item.do_date, 'DD MMM YYYY')
+          ? formatDate(item.trans_date, 'DD MMM YYYY')
           : '',
-        'Tanggal Realisasi': item.realization_date
+        'Tanggal Realisasi': item.delivery_date
-          ? formatDate(item.realization_date, 'DD MMM YYYY')
+          ? formatDate(item.delivery_date, 'DD MMM YYYY')
           : '',
         Aging: formatNumber(item.aging_day || 0),
         Referensi: item.reference || '',
-        'Nomor Polisi': Array.isArray(item.vehicle_plate)
+        'Nomor Polisi': item.vehicle_numbers || '',
-          ? item.vehicle_plate.join(', ')
-          : '',
         'Ekor/Qty': formatNumber(item.qty || 0),
         'Berat (Kg)': formatNumber(item.weight || 0),
         AVG: formatNumber(item.average_weight || 0),
@@ -42,12 +40,12 @@ export const generateCustomerPaymentExcel = (
         CN: formatCurrency(item.credit_note || 0),
         'Harga Akhir': formatCurrency(item.final_price || 0),
         'PPN (%)': formatNumber(item.ppn || 0),
-        Total: formatCurrency(item.total || 0),
+        Total: formatCurrency(item.total_price || 0),
-        Pembayaran: formatCurrency(item.payment || 0),
+        Pembayaran: formatCurrency(item.payment_amount || 0),
         'Saldo Piutang': formatCurrency(item.accounts_receivable || 0),
-        Keterangan: item.notes || '',
+        Keterangan: item.status || '',
         Pengambilan: item.pickup_info || '',
-        'Sales/Marketing': item.sales_marketing || '',
+        'Sales/Marketing': item.sales_person || '',
       })
     );
 

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

@@ -302,24 +302,37 @@ const CustomerPaymentTab = () => {
       {
         id: 'no',
         header: 'No',
-        cell: (props) => props.row.index + 1,
+        cell: (props) => {
+          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: 'do_date',
+        accessorKey: 'trans_date',
         cell: (props) => {
-          const value = props.row.original.do_date;
+          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');
         },
       },
       {
         id: 'realization_date',
         header: 'Tanggal Realisasi',
-        accessorKey: 'realization_date',
+        accessorKey: 'delivery_date',
         cell: (props) => {
-          const value = props.row.original.realization_date;
+          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');
         },
       },
@@ -328,6 +341,10 @@ const CustomerPaymentTab = () => {
         header: 'Aging',
         accessorKey: 'aging_day',
         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'>
@@ -341,6 +358,10 @@ const CustomerPaymentTab = () => {
         header: 'Referensi',
         accessorKey: 'reference',
         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 || '-';
         },
@@ -348,9 +369,13 @@ const CustomerPaymentTab = () => {
       {
         id: 'vehicle_plate',
         header: 'Nomor Polisi',
-        accessorKey: 'vehicle_plate',
+        accessorKey: 'vehicle_numbers',
         cell: (props) => {
-          const value = props.row.original.vehicle_plate;
+          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 || '-';
         },
       },
@@ -359,6 +384,10 @@ const CustomerPaymentTab = () => {
         header: 'Ekor/Qty',
         accessorKey: 'qty',
         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>;
         },
@@ -373,6 +402,10 @@ const CustomerPaymentTab = () => {
         header: 'Berat (Kg)',
         accessorKey: 'weight',
         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>;
         },
@@ -387,6 +420,10 @@ const CustomerPaymentTab = () => {
         header: 'AVG',
         accessorKey: 'average_weight',
         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>;
         },
@@ -399,6 +436,10 @@ const CustomerPaymentTab = () => {
         header: 'Harga Awal',
         accessorKey: 'price',
         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>;
         },
@@ -413,6 +454,10 @@ const CustomerPaymentTab = () => {
         header: 'CN',
         accessorKey: 'credit_note',
         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>;
         },
@@ -427,6 +472,10 @@ const CustomerPaymentTab = () => {
         header: 'Harga Akhir',
         accessorKey: 'final_price',
         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>;
         },
@@ -441,6 +490,10 @@ const CustomerPaymentTab = () => {
         header: 'PPN (%)',
         accessorKey: 'ppn',
         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>;
         },
@@ -451,9 +504,13 @@ const CustomerPaymentTab = () => {
       {
         id: 'total',
         header: 'Total',
-        accessorKey: 'total',
+        accessorKey: 'total_price',
         cell: (props) => {
-          const value = props.row.original.total;
+          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>;
         },
         footer: () => (
@@ -465,9 +522,13 @@ const CustomerPaymentTab = () => {
       {
         id: 'payment',
         header: 'Pembayaran',
-        accessorKey: 'payment',
+        accessorKey: 'payment_amount',
         cell: (props) => {
-          const value = props.row.original.payment;
+          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>;
         },
         footer: () => (
@@ -495,9 +556,13 @@ const CustomerPaymentTab = () => {
       {
         id: 'notes',
         header: 'Keterangan',
-        accessorKey: 'notes',
+        accessorKey: 'status',
         cell: (props) => {
-          const value = props.row.original.notes;
+          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) {
             return '-';
@@ -522,6 +587,10 @@ const CustomerPaymentTab = () => {
         header: 'Pengambilan',
         accessorKey: 'pickup_info',
         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 || '-';
         },
@@ -529,9 +598,13 @@ const CustomerPaymentTab = () => {
       {
         id: 'sales_marketing',
         header: 'Sales/Marketing',
-        accessorKey: 'sales_marketing',
+        accessorKey: 'sales_person',
         cell: (props) => {
-          const value = props.row.original.sales_marketing;
+          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 || '-';
         },
       },
@@ -754,9 +827,14 @@ const CustomerPaymentTab = () => {
                 collapsible={true}
               >
                 <Table
-                  data={customerReport.rows}
+                  data={[
+                    {
+                      accounts_receivable: customerReport.initial_balance,
+                    } as CustomerPaymentReport['rows'][0],
+                    ...customerReport.rows,
+                  ]}
                   columns={tableColumns}
-                  pageSize={10}
+                  pageSize={customerReport.rows.length + 1}
                   renderFooter={customerReport.rows.length > 0}
                   className={{
                     containerClassName: 'w-full',

src/types/api/report/customer-payment.d.ts

@@ -2,12 +2,12 @@ import { BaseCustomer } from '@/types/api/master-data/customer';
 import { BaseMetadata } from '@/types/api/api-general';
 
 export type CustomerPaymentRow = {
-  id: number;
+  transaction_type: string;
-  do_date: string;
+  transaction_id: number;
-  realization_date: string;
+  trans_date: string;
-  aging_day: number | null;
+  delivery_date: string | null;
   reference: string;
-  vehicle_plate: string[];
+  vehicle_numbers: string;
   qty: number;
   weight: number;
   average_weight: number;
@@ -15,12 +15,13 @@ export type CustomerPaymentRow = {
   credit_note: number;
   final_price: number;
   ppn: number;
-  total: number;
+  total_price: number;
-  payment: number;
+  payment_amount: number;
   accounts_receivable: number;
-  notes: string;
+  aging_day: number;
+  status: string;
   pickup_info: string;
-  sales_marketing: string;
+  sales_person: string;
 };
 
 export type CustomerPaymentSummary = {
@@ -37,6 +38,7 @@ export type CustomerPaymentSummary = {
 
 export type CustomerPaymentReport = BaseMetadata & {
   customer: BaseCustomer;
+  initial_balance: number;
   rows: CustomerPaymentRow[];
   summary: CustomerPaymentSummary;
 };