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

This commit is contained in:
rstubryan
2026-01-14 15:14:33 +07:00
parent 66fa65e4bb
commit 08c28f4077
4 changed files with 129 additions and 51 deletions
@@ -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',