From b52a414eb0543d1d62b8d1ff3e35ff32179e3188 Mon Sep 17 00:00:00 2001 From: randy-ar Date: Wed, 14 Jan 2026 19:11:38 +0700 Subject: [PATCH 1/3] fix(FE): adjust slicing ui debt supplier --- .../finance/export/DebtSupllierExportPDF.tsx | 149 +++++++++++++++--- .../report/finance/tab/DebtSupplierTab.tsx | 108 ++++++++++--- 2 files changed, 209 insertions(+), 48 deletions(-) diff --git a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx index 083904a5..7782b212 100644 --- a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx +++ b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx @@ -18,6 +18,47 @@ Font.register({ src: 'helvetica', }); +// Status color mappings (same as in DebtSupplierTab) +const dueStatusColors: Record< + string, + { bg: string; text: string; border: string } +> = { + 'Sudah Jatuh Tempo': { bg: '#FEE2E2', text: '#991B1B', border: '#F87171' }, // error/red + 'Belum Jatuh Tempo': { bg: '#D1FAE5', text: '#065F46', border: '#34D399' }, // success/green + 'Mendekati Jatuh Tempo': { + bg: '#FEF3C7', + text: '#92400E', + border: '#FBBF24', + }, // warning/yellow +}; + +const paymentStatusColors: Record< + string, + { bg: string; text: string; border: string } +> = { + 'Belum Lunas': { bg: '#FEF3C7', text: '#92400E', border: '#FBBF24' }, // warning/yellow + Lunas: { bg: '#DBEAFE', text: '#1E40AF', border: '#60A5FA' }, // primary/blue + Pembayaran: { bg: '#D1FAE5', text: '#065F46', border: '#34D399' }, // success/green +}; + +/** + * Get badge style for PDF rendering + * @param statusText - The status text + * @param type - Type of status: 'due' or 'payment' + * @returns Style object with background and text colors + */ +const getPDFBadgeStyle = ( + statusText: string, + type: 'due' | 'payment' = 'payment' +) => { + const colors = + type === 'due' + ? dueStatusColors[statusText] + : paymentStatusColors[statusText]; + + return colors || { bg: '#F3F4F6', text: '#374151', border: '#D1D5DB' }; // neutral fallback +}; + const pdfStyles = StyleSheet.create({ page: { fontSize: 10, @@ -136,6 +177,16 @@ const pdfStyles = StyleSheet.create({ backgroundColor: '#F0F0F0', fontWeight: 'bold', }, + badge: { + paddingVertical: 2, + paddingHorizontal: 4, + borderRadius: 12, + fontSize: 5, + fontWeight: 'bold', + borderWidth: 1, + textAlign: 'center', + whiteSpace: 'nowrap', + }, }); interface DebtSupplierExportPDFParams { @@ -193,7 +244,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => { Jatuh Tempo - + Status Jatuh Tempo @@ -205,7 +256,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => { Sisa Saldo Hutang (Rp) - + Status @@ -216,40 +267,40 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => { {/* Initial Balance Row */} - + {/* NO */} - + {/* No. PR */} - + {/* No. PO */} - + {/* Tgl Terima/Bayar */} - + {/* Tgl PO */} - + {/* Aging */} - + {/* Area */} - + {/* Gudang */} - + {/* Jatuh Tempo */} - - + + {/* Status Jatuh Tempo */} - + {/* Nominal Pembelian (Rp) */} - + {/* Pembayaran (Rp) */} { ]} > + {' '} + {/* Sisa Saldo Hutang (Rp) */} {formatCurrency(supplierReport.initial_balance || 0)} - - + + {/* Status */} - + {/* No. Perjalanan */} @@ -328,8 +381,32 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => { : '-'} - - {item.due_status || '-'} + + {item.due_status && item.due_status !== '-' ? ( + + + {item.due_status} + + + ) : ( + - + )} { > {formatCurrency(item.balance)} - - {item.status || '-'} + + {item.status && item.status !== '-' ? ( + + + {item.status} + + + ) : ( + - + )} {item.travel_number || '-'} @@ -400,7 +501,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => { - + { > {formatCurrency(supplierReport.total.debt_price)} - + diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx index 2214ecd6..1f5d79b9 100644 --- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx +++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx @@ -9,9 +9,9 @@ import SelectInput, { import Menu from '@/components/menu/Menu'; import MenuItem from '@/components/menu/MenuItem'; import Modal, { useModal } from '@/components/Modal'; -import Table from '@/components/Table'; +import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table'; import { isResponseSuccess } from '@/lib/api-helper'; -import { formatCurrency, formatDate, formatNumber } from '@/lib/helper'; +import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper'; import { SupplierApi } from '@/services/api/master-data'; import { DebtRow, @@ -31,8 +31,46 @@ import { DebtSupplierFilterSchema, DebtSupplierFilterType, } from '@/components/pages/report/finance/filter/DebtSupplierFilter'; -import { getFilledFormikValuesCount } from '@/lib/formik-helper'; import ButtonFilter from '@/components/helper/ButtonFilter'; +import Badge from '@/components/Badge'; +import { Color } from '@/types/theme'; + +const dueStatus: Record = { + 'Sudah Jatuh Tempo': 'error', + 'Belum Jatuh Tempo': 'success', + 'Mendekati Jatuh Tempo': 'warning', +}; + +const paymentStatus: Record = { + 'Belum Lunas': 'warning', + Lunas: 'primary', + Pembayaran: 'success', +}; + +const getPillBadge = ( + statusText: string, + type: 'due' | 'payment' = 'payment' +) => { + // Get color based on type + const color = + type === 'due' + ? dueStatus[statusText] || 'neutral' + : paymentStatus[statusText] || 'neutral'; + + return ( + + {statusText} + + ); +}; const DebtSupplierTab = () => { // ===== STATE MANAGEMENT ===== @@ -224,6 +262,7 @@ const DebtSupplierTab = () => { header: 'No', enableSorting: false, cell: (props) => props.row.index, + footer: () => 'Total', }, { id: 'pr_number', @@ -328,7 +367,7 @@ const DebtSupplierTab = () => { enableSorting: false, cell: (props) => { const value = props.row.original.due_status; - return value || '-'; + return value ? (value != '-' ? getPillBadge(value, 'due') : '-') : '-'; }, }, { @@ -404,7 +443,11 @@ const DebtSupplierTab = () => { enableSorting: false, cell: (props) => { const value = props.row.original.status; - return value || '-'; + return value + ? value != '-' + ? getPillBadge(value, 'payment') + : '-' + : '-'; }, }, { @@ -472,9 +515,15 @@ const DebtSupplierTab = () => { { renderFooter={supplierReport.rows.length > 0} className={{ containerClassName: 'w-full', - tableWrapperClassName: 'overflow-x-auto mt-4', - tableClassName: 'w-full table-auto text-sm', - headerRowClassName: 'border-b border-b-gray-200 bg-gray-50', - headerColumnClassName: - 'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200', - bodyRowClassName: - 'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200', - bodyColumnClassName: - 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap', - tableFooterClassName: - 'bg-gray-100 font-semibold border border-gray-200', - footerRowClassName: 'border-t-2 border-gray-300', - footerColumnClassName: - 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap', + tableWrapperClassName: 'overflow-x-auto', + headerColumnClassName: cn( + TABLE_DEFAULT_STYLING.headerColumnClassName, + 'whitespace-nowrap' + ), + bodyColumnClassName: cn( + TABLE_DEFAULT_STYLING.bodyColumnClassName, + 'whitespace-nowrap' + ), + footerRowClassName: cn( + TABLE_DEFAULT_STYLING.footerRowClassName, + 'bg-white' + ), + footerColumnClassName: cn( + TABLE_DEFAULT_STYLING.footerColumnClassName, + 'whitespace-nowrap p-3' + ), paginationClassName: 'hidden', }} renderCustomRow={(row) => { if (row.index == 0) { return ( - From 7a6bee57c2aeedde1b0864f4ab3ca437735cb4fb Mon Sep 17 00:00:00 2001 From: randy-ar Date: Wed, 14 Jan 2026 19:20:16 +0700 Subject: [PATCH 2/3] fix(FE): fix report excel debt supplier change debt_price to balance --- .../pages/report/finance/export/DebtSupplierExportXLSX.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/report/finance/export/DebtSupplierExportXLSX.tsx b/src/components/pages/report/finance/export/DebtSupplierExportXLSX.tsx index 3ba96a22..dfd5ee95 100644 --- a/src/components/pages/report/finance/export/DebtSupplierExportXLSX.tsx +++ b/src/components/pages/report/finance/export/DebtSupplierExportXLSX.tsx @@ -64,7 +64,7 @@ export const generateDebtSupplierExcel = ( 'Status Jatuh Tempo': item.due_status || '', 'Nominal Pembelian (Rp)': item.total_price || 0, 'Pembayaran (Rp)': item.payment_price || 0, - 'Sisa Saldo Hutang (Rp)': item.debt_price || 0, + 'Sisa Saldo Hutang (Rp)': item.balance || 0, Status: item.status || '', 'Nomor Perjalanan': item.travel_number || '', })), From 76e15d13ad40eec16236d185417ddbd830d67c51 Mon Sep 17 00:00:00 2001 From: randy-ar Date: Thu, 15 Jan 2026 00:52:29 +0700 Subject: [PATCH 3/3] fix(FE): adding filter information and supplier category on export pdf --- .../finance/export/DebtSupllierExportPDF.tsx | 61 +++++++++++++++++++ .../report/finance/tab/DebtSupplierTab.tsx | 12 +++- 2 files changed, 72 insertions(+), 1 deletion(-) diff --git a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx index 7782b212..869430b0 100644 --- a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx +++ b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx @@ -187,10 +187,30 @@ const pdfStyles = StyleSheet.create({ textAlign: 'center', whiteSpace: 'nowrap', }, + parameterBadge: { + backgroundColor: '#F5F5F5', + color: '#333333', + padding: 4, + borderRadius: 4, + fontSize: 8, + marginRight: 8, + marginBottom: 4, + }, + parameterContainer: { + flexDirection: 'row', + flexWrap: 'wrap', + marginBottom: 8, + }, }); interface DebtSupplierExportPDFParams { data: DebtSupplier[]; + params?: { + supplier_name?: string; + start_date?: string; + end_date?: string; + filter_by?: string; + }; } const createPDFDocument = (params: DebtSupplierExportPDFParams) => { @@ -208,9 +228,50 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => { Laporan > Rekapitulasi Hutang ke Supplier + + + + Periode:{' '} + {params.params?.start_date + ? formatDate(params.params.start_date, 'DD MMM YYYY') + : '-'}{' '} + s.d{' '} + {params.params?.end_date + ? formatDate(params.params.end_date, 'DD MMM YYYY') + : '-'} + + + {params.params?.filter_by && ( + + + Filter Tanggal:{' '} + {params.params.filter_by === 'po_date' + ? 'Tanggal PO' + : params.params.filter_by === 'received_date' + ? 'Tanggal Terima' + : params.params.filter_by === 'due_date' + ? 'Tanggal Jatuh Tempo' + : params.params.filter_by} + + + )} + + + Supplier: {params.params?.supplier_name || 'Semua Supplier'} + + + + + Dicetak: {formatDate(new Date(), 'DD MMM YYYY HH:mm')} + + + {supplierReport.supplier.name} + + {supplierReport.supplier.category} + {/* Table */} diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx index 1f5d79b9..0d53488c 100644 --- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx +++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx @@ -247,7 +247,17 @@ const DebtSupplierTab = () => { return; } - await generateDebtSupplierPDF({ data: allDataForExport }); + await generateDebtSupplierPDF({ + data: allDataForExport, + params: { + supplier_name: formik.values.supplierIds + ?.map((v) => v.label) + .join(', '), + filter_by: formik.values.filterBy?.label, + start_date: formik.values.startDate || undefined, + end_date: formik.values.endDate || undefined, + }, + }); toast.success('PDF berhasil dibuat dan diunduh.'); } catch { toast.error('Gagal membuat PDF. Silakan coba lagi.');
+
@@ -523,7 +581,9 @@ const DebtSupplierTab = () => {