mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 23:35:45 +00:00
refactor(FE): Rename payment fields and add initial balance row
This commit is contained in:
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user