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
@@ -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
? formatDate(item.realization_date, 'DD MMM YY')
{item.delivery_date
? 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 ? (
<Text>{item.notes}</Text>
) : (
{item.status ? (
<View
style={[
pdfStyles.badge,
item.accounts_receivable === 0
item.status === 'LUNAS'
? pdfStyles.badgeLunas
: pdfStyles.badgeBelumLunas,
]}
>
<Text>
{item.accounts_receivable === 0
? 'Lunas'
: 'Belum Lunas'}
{item.status === '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>
))}
@@ -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
? formatDate(item.do_date, 'DD MMM YYYY')
'Tanggal DO/Bayar': item.trans_date
? formatDate(item.trans_date, 'DD MMM YYYY')
: '',
'Tanggal Realisasi': item.realization_date
? formatDate(item.realization_date, 'DD MMM YYYY')
'Tanggal Realisasi': item.delivery_date
? formatDate(item.delivery_date, 'DD MMM YYYY')
: '',
Aging: formatNumber(item.aging_day || 0),
Referensi: item.reference || '',
'Nomor Polisi': Array.isArray(item.vehicle_plate)
? item.vehicle_plate.join(', ')
: '',
'Nomor Polisi': item.vehicle_numbers || '',
'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),
Pembayaran: formatCurrency(item.payment || 0),
Total: formatCurrency(item.total_price || 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 || '',
})
);
@@ -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',
+11 -9
View File
@@ -2,12 +2,12 @@ import { BaseCustomer } from '@/types/api/master-data/customer';
import { BaseMetadata } from '@/types/api/api-general';
export type CustomerPaymentRow = {
id: number;
do_date: string;
realization_date: string;
aging_day: number | null;
transaction_type: string;
transaction_id: number;
trans_date: string;
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;
payment: number;
total_price: 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;
};