fix(FE): fixing response data debt supplier

This commit is contained in:
randy-ar
2026-01-13 10:46:52 +07:00
parent eb1337292b
commit 6702dd7dc6
6 changed files with 484 additions and 70 deletions
@@ -155,7 +155,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
{/* Title and Supplier Info */}
<View style={pdfStyles.titleSection}>
<Text style={pdfStyles.mainTitle}>
Laporan &gt; Hutang Supplier
Laporan &gt; Rekapitulasi Hutang ke Supplier
</Text>
<Text style={pdfStyles.supplierTitle}>
{supplierReport.supplier.name}
@@ -169,19 +169,19 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
<Text>No</Text>
</View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
<View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
<Text>No. PR</Text>
</View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
<View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
<Text>No. PO</Text>
</View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
<Text>Tgl PR</Text>
<Text>Tgl Terima</Text>
</View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
<Text>Tgl PO</Text>
</View>
<View style={[pdfStyles.tableCellHeader, { flex: 0.8 }]}>
<View style={[pdfStyles.tableCellHeader, { flex: 0.6 }]}>
<Text>Aging</Text>
</View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
@@ -194,15 +194,15 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<Text>Tgl Jatuh Tempo</Text>
</View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
<Text>Status JT</Text>
<Text>Status Jatuh Tempo</Text>
</View>
<View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
<View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
<Text>Total Harga</Text>
</View>
<View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
<View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
<Text>Pembayaran</Text>
</View>
<View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
<View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
<Text>Hutang</Text>
</View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
@@ -227,23 +227,31 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
<Text>{index + 1}</Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
<Text>{item.pr_number || '-'}</Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
<Text>{item.po_number || '-'}</Text>
</View>
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
<Text>
{item.pr_date ? formatDate(item.pr_date, 'DD MMM YY') : '-'}
{item.received_date
? item.received_date != '-'
? formatDate(item.received_date, 'DD MMM YY')
: '-'
: '-'}
</Text>
</View>
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
<Text>
{item.po_date ? formatDate(item.po_date, 'DD MMM YY') : '-'}
{item.po_date
? item.po_date != '-'
? formatDate(item.po_date, 'DD MMM YY')
: '-'
: '-'}
</Text>
</View>
<View style={[pdfStyles.tableCellCenter, { flex: 0.8 }]}>
<View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
<Text>{formatNumber(item.aging)} Hari</Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
@@ -255,20 +263,43 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
<Text>
{item.due_date
? formatDate(item.due_date, 'DD MMM YY')
? item.due_date != '-'
? formatDate(item.due_date, 'DD MMM YY')
: '-'
: '-'}
</Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text>{item.due_status || '-'}</Text>
</View>
<View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
<View
style={[
pdfStyles.tableCellRight,
{
flex: 1.5,
color: item.total_price < 0 ? 'red' : 'black',
},
]}
>
<Text>{formatCurrency(item.total_price)}</Text>
</View>
<View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
<View
style={[
pdfStyles.tableCellRight,
{
flex: 1.5,
color: item.payment_price < 0 ? 'red' : 'black',
},
]}
>
<Text>{formatCurrency(item.payment_price)}</Text>
</View>
<View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
<View
style={[
pdfStyles.tableCellRight,
{ flex: 1.5, color: item.debt_price < 0 ? 'red' : 'black' },
]}
>
<Text>{formatCurrency(item.debt_price)}</Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
@@ -286,7 +317,10 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
<Text>Total</Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
<Text></Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
<Text></Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
@@ -295,10 +329,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text></Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text></Text>
</View>
<View style={[pdfStyles.tableCellCenter, { flex: 0.8 }]}>
<View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
<Text>{formatNumber(supplierReport.total.aging)} Hari</Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
@@ -313,17 +344,46 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text></Text>
</View>
<View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
<View
style={[
pdfStyles.tableCellRight,
{
flex: 1.5,
color:
supplierReport.total.total_price < 0 ? 'red' : 'black',
},
]}
>
<Text>
{formatCurrency(supplierReport.total.total_price)}
</Text>
</View>
<View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
<View
style={[
pdfStyles.tableCellRight,
{
flex: 1.5,
color:
supplierReport.total.payment_price < 0
? 'red'
: 'black',
},
]}
>
<Text>
{formatCurrency(supplierReport.total.payment_price)}
</Text>
</View>
<View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
<View
style={[
pdfStyles.tableCellRight,
{
flex: 1.5,
color:
supplierReport.total.debt_price < 0 ? 'red' : 'black',
},
]}
>
<Text>{formatCurrency(supplierReport.total.debt_price)}</Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}>
@@ -1,7 +1,7 @@
'use client';
import * as XLSX from 'xlsx';
import { formatDate, formatCurrency, formatNumber } from '@/lib/helper';
import { formatDate } from '@/lib/helper';
import { DebtSupplier } from '@/types/api/report/debt-supplier';
interface DebtSupplierExportExcelParams {
@@ -26,22 +26,28 @@ export const generateDebtSupplierExcel = (
No: index + 1,
'Nomor PR': item.pr_number || '',
'Nomor PO': item.po_number || '',
'Tanggal PR': item.pr_date
? formatDate(item.pr_date, 'DD MMM YYYY')
: '',
'Tanggal Terima': item.received_date
? item.received_date != '-'
? formatDate(item.received_date, 'MM/DD/YYYY')
: '-'
: '-',
'Tanggal PO': item.po_date
? formatDate(item.po_date, 'DD MMM YYYY')
: '',
'Aging (Hari)': formatNumber(item.aging || 0),
? item.po_date != '-'
? formatDate(item.po_date, 'MM/DD/YYYY')
: '-'
: '-',
'Aging (Hari)': item.aging || 0,
Area: item.area?.name || '',
Gudang: item.warehouse?.name || '',
'Tanggal Jatuh Tempo': item.due_date
? formatDate(item.due_date, 'DD MMM YYYY')
: '',
? item.due_date != '-'
? formatDate(item.due_date, 'MM/DD/YYYY')
: '-'
: '-',
'Status Jatuh Tempo': item.due_status || '',
'Total Harga': formatCurrency(item.total_price || 0),
'Harga Pembayaran': formatCurrency(item.payment_price || 0),
'Harga Hutang': formatCurrency(item.debt_price || 0),
'Total Harga': item.total_price || 0,
'Harga Pembayaran': item.payment_price || 0,
'Harga Hutang': item.debt_price || 0,
Status: item.status || '',
'Nomor Perjalanan': item.travel_number || '',
})
@@ -52,18 +58,16 @@ export const generateDebtSupplierExcel = (
No: 'Total',
'Nomor PR': '',
'Nomor PO': '',
'Tanggal PR': '',
'Tanggal Terima': '',
'Tanggal PO': '',
'Aging (Hari)': formatNumber(supplierReport.total.aging || 0),
'Aging (Hari)': supplierReport.total.aging || 0,
Area: '',
Gudang: '',
'Tanggal Jatuh Tempo': '',
'Status Jatuh Tempo': '',
'Total Harga': formatCurrency(supplierReport.total.total_price || 0),
'Harga Pembayaran': formatCurrency(
supplierReport.total.payment_price || 0
),
'Harga Hutang': formatCurrency(supplierReport.total.debt_price || 0),
'Total Harga': supplierReport.total.total_price || 0,
'Harga Pembayaran': supplierReport.total.payment_price || 0,
'Harga Hutang': supplierReport.total.debt_price || 0,
Status: '',
'Nomor Perjalanan': '',
});
@@ -256,12 +256,16 @@ const DebtSupplierTab = () => {
},
},
{
id: 'pr_date',
header: 'Tanggal PR',
accessorKey: 'pr_date',
id: 'received_date',
header: 'Tanggal Terima',
accessorKey: 'received_date',
cell: (props) => {
const value = props.row.original.pr_date;
return formatDate(value, 'DD MMM YYYY');
const value = props.row.original.received_date;
return value
? value != '-'
? formatDate(value, 'DD MMM YYYY')
: '-'
: '-';
},
},
{
@@ -270,7 +274,11 @@ const DebtSupplierTab = () => {
accessorKey: 'po_date',
cell: (props) => {
const value = props.row.original.po_date;
return formatDate(value, 'DD MMM YYYY');
return value
? value != '-'
? formatDate(value, 'DD MMM YYYY')
: '-'
: '-';
},
},
{
@@ -310,7 +318,11 @@ const DebtSupplierTab = () => {
accessorKey: 'due_date',
cell: (props) => {
const value = props.row.original.due_date;
return formatDate(value, 'DD MMM YYYY');
return value
? value != '-'
? formatDate(value, 'DD MMM YYYY')
: '-'
: '-';
},
},
{
@@ -328,11 +340,19 @@ const DebtSupplierTab = () => {
accessorKey: 'total_price',
cell: (props) => {
const value = props.row.original.total_price;
return <div className='text-right'>{formatCurrency(value)}</div>;
return (
<div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
{formatCurrency(value)}
</div>
);
},
footer: () => {
const value = supplier.total.total_price;
return <div className='text-right'>{formatCurrency(value)}</div>;
return (
<div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
{formatCurrency(value)}
</div>
);
},
},
{
@@ -341,11 +361,19 @@ const DebtSupplierTab = () => {
accessorKey: 'payment_price',
cell: (props) => {
const value = props.row.original.payment_price;
return <div className='text-right'>{formatCurrency(value)}</div>;
return (
<div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
{formatCurrency(value)}
</div>
);
},
footer: () => {
const value = supplier.total.payment_price;
return <div className='text-right'>{formatCurrency(value)}</div>;
return (
<div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
{formatCurrency(value)}
</div>
);
},
},
{
@@ -392,7 +420,7 @@ const DebtSupplierTab = () => {
<>
<div className='w-full p-0 sm:p-4 flex flex-col gap-4'>
<Card
subtitle='Laporan > Kontrol Hutang Supplier'
subtitle='Laporan > Rekapitulasi Hutang ke Supplier'
className={{ wrapper: 'w-full', body: 'p-1!' }}
>
<div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>