refactor(FE): Handle null or undefined values in FinanceDetail component

This commit is contained in:
rstubryan
2026-03-06 09:57:30 +07:00
parent ca0b216ba0
commit 9710998dc6
+17 -13
View File
@@ -25,7 +25,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
const informasiUmum = [ const informasiUmum = [
{ {
label: 'ID', label: 'ID',
value: finance.payment_code, value: finance.payment_code || '-',
}, },
{ {
label: 'Jenis Transaksi', label: 'Jenis Transaksi',
@@ -39,11 +39,13 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
}, },
{ {
label: 'Tanggal', label: 'Tanggal',
value: formatDate(finance.payment_date, 'DD MMM yyyy'), value: finance.payment_date
? formatDate(finance.payment_date, 'DD MMM yyyy')
: '-',
}, },
{ {
label: 'Metode Pembayaran', label: 'Metode Pembayaran',
value: finance.payment_method, value: finance.payment_method || '-',
}, },
{ {
label: 'Catatan', label: 'Catatan',
@@ -62,22 +64,22 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
: '-', : '-',
}, },
{ {
label: `Rekening ${formatTitleCase(finance.party?.type)}`, label: `Rekening ${formatTitleCase(finance.party?.type || '')}`,
value: finance.party?.account_number, value: finance.party?.account_number || '-',
}, },
{ {
label: 'Nominal', label: 'Nominal',
value: formatCurrency( value: formatCurrency(
finance.transaction_type === 'INJECTION' finance.transaction_type === 'INJECTION'
? finance.nominal ? finance.nominal || 0
: Math.abs(finance.nominal) : Math.abs(finance.nominal || 0)
), ),
}, },
].filter((item) => { ].filter((item) => {
// Hide party account number row if transaction type is INJECTION // Hide party account number row if transaction type is INJECTION
if ( if (
FINANCE_INJECTION_STATUS.includes(finance.transaction_type) && FINANCE_INJECTION_STATUS.includes(finance.transaction_type || '') &&
item.label === `Rekening ${formatTitleCase(finance.party?.type)}` item.label === `Rekening ${formatTitleCase(finance.party?.type || '')}`
) { ) {
return false; return false;
} }
@@ -151,7 +153,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
</Card> </Card>
<div className='flex flex-row gap-2 justify-end'> <div className='flex flex-row gap-2 justify-end'>
{FINANCE_TRANSACTION_STATUS.includes(finance.transaction_type) && {FINANCE_TRANSACTION_STATUS.includes(finance.transaction_type || '') &&
finance.party?.type !== 'SUPPLIER' && ( finance.party?.type !== 'SUPPLIER' && (
<RequirePermission permissions='lti.finance.payments.update'> <RequirePermission permissions='lti.finance.payments.update'>
<Button <Button
@@ -164,7 +166,9 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
</Button> </Button>
</RequirePermission> </RequirePermission>
)} )}
{FINANCE_INITIAL_BALANCE_STATUS.includes(finance.transaction_type) && ( {FINANCE_INITIAL_BALANCE_STATUS.includes(
finance.transaction_type || ''
) && (
<RequirePermission permissions='lti.finance.initial_balances.update'> <RequirePermission permissions='lti.finance.initial_balances.update'>
<Button <Button
color='warning' color='warning'
@@ -176,7 +180,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
</Button> </Button>
</RequirePermission> </RequirePermission>
)} )}
{FINANCE_INJECTION_STATUS.includes(finance.transaction_type) && ( {FINANCE_INJECTION_STATUS.includes(finance.transaction_type || '') && (
<RequirePermission permissions='lti.finance.injections.update'> <RequirePermission permissions='lti.finance.injections.update'>
<Button <Button
color='warning' color='warning'
@@ -202,7 +206,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
<ConfirmationModal <ConfirmationModal
ref={deleteModal.ref} ref={deleteModal.ref}
type='error' type='error'
text={`Apakah anda yakin ingin menghapus data Finance ini (${finance?.payment_code})?`} text={`Apakah anda yakin ingin menghapus data Finance ini (${finance?.payment_code || ''})?`}
secondaryButton={{ secondaryButton={{
text: 'Tidak', text: 'Tidak',
}} }}