gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 21:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Refactor PDF generation for purchases per supplier

Browse Source
This commit is contained in:
rstubryan
2026-02-10 11:43:23 +07:00
parent 4f9401ed34
commit def894e5f4
2 changed files with 162 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/report/logistic-stock/export/PurchasesPerSupplierExportPDF.tsx
+158 -151
View File
@@ -2,7 +2,6 @@
import {
Page,
Text,
View,
Document,
StyleSheet,
@@ -15,7 +14,11 @@ import {
PdfTable,
PdfColumn,
PdfTbodyCell,
PdfTfootCell,
} from '@/components/helper/pdf/table';
import { PdfParamBadge } from '@/components/helper/pdf/badge/PdfParamBadge';
import { PdfStatusBadge } from '@/components/helper/pdf/badge/PdfStatusBadge';
import { PdfTypography } from '@/components/helper/pdf/typography/PdfTypography';
Font.register({
family: 'Helvetica',
@@ -32,53 +35,16 @@ const pdfStyles = StyleSheet.create({
titleSection: {
marginBottom: 10,
},
mainTitle: {
fontSize: 14,
fontWeight: 'bold',
marginBottom: 5,
color: '#1f74bf',
},
supplierTitle: {
fontSize: 12,
fontWeight: 'bold',
marginBottom: 8,
color: '#1f74bf',
},
badge: {
backgroundColor: '#1f74bf',
color: '#FFFFFF',
padding: 2,
borderRadius: 2,
fontSize: 7,
fontWeight: 'bold',
alignSelf: 'center',
marginRight: 4,
},
parameterBadge: {
backgroundColor: '#F5F5F5',
color: '#333333',
padding: 4,
borderRadius: 4,
fontSize: 8,
marginRight: 8,
marginBottom: 4,
},
parameterContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
marginBottom: 8,
},
supplierSection: {
marginBottom: 10,
},
supplierSectionBreak: {
marginBottom: 15,
},
});
interface PurchasesPerSupplierExportParams {
data: LogisticPurchasePerSupplierReport[];
params: {
params?: {
area_name?: string;
supplier_name?: string;
product_name?: string;
@@ -92,73 +58,57 @@ interface PurchasesPerSupplierExportParams {
};
}
const getParameterText = (
params: PurchasesPerSupplierExportParams['params']
) => {
const paramsText = [];
if (params.supplier_name) {
paramsText.push(`Supplier: ${params.supplier_name}`);
} else {
paramsText.push('Semua Supplier');
}
if (params.start_date && params.end_date) {
const startDate = formatDate(params.start_date, 'DD MMM YYYY');
const endDate = formatDate(params.end_date, 'DD MMM YYYY');
paramsText.push(`Periode: ${startDate} - ${endDate}`);
} else if (params.start_date) {
const startDate = formatDate(params.start_date, 'DD MMM YYYY');
paramsText.push(`Tanggal: ${startDate}`);
}
const currentDate = formatDate(new Date(), 'DD MMM YYYY HH:mm');
paramsText.push(`Dicetak: ${currentDate}`);
return paramsText;
};
// Helper functions for PdfTable
const getTableColumns = (): PdfColumn[] => [
{ key: 'no', header: 'No', flex: 0.5, align: 'center' },
{ key: 'receive_date', header: 'Tanggal Terima', flex: 1, align: 'center' },
{ key: 'po_date', header: 'Tanggal PO', flex: 1, align: 'center' },
{ key: 'po_number', header: 'Referensi', flex: 1, align: 'left' },
{ key: 'product', header: 'Produk', flex: 1, align: 'left' },
{ key: 'warehouse', header: 'Tujuan', flex: 1, align: 'left' },
{ key: 'qty', header: 'Qty', flex: 0.8, align: 'right' },
{ key: 'unit_price', header: 'Harga Beli', flex: 1.2, align: 'right' },
{
key: 'receive_date',
header: 'Tanggal Terima',
flex: 1.2,
align: 'center',
},
{ key: 'po_date', header: 'Tanggal PO', flex: 1.2, align: 'center' },
{ key: 'po_number', header: 'No. Referensi', flex: 1.5, align: 'left' },
{ key: 'product', header: 'Nama Produk', flex: 2, align: 'left' },
{ key: 'warehouse', header: 'Tujuan', flex: 1.5, align: 'left' },
{ key: 'qty', header: 'QTY', flex: 0.8, align: 'right' },
{ key: 'unit_price', header: 'Harga Beli (Rp)', flex: 1.5, align: 'right' },
{
key: 'purchase_value',
header: 'Nilai Pembelian',
flex: 1.5,
header: 'Value Harga Beli (Rp)',
flex: 1.8,
align: 'right',
},
{
key: 'transport_price',
header: 'Biaya Transport',
flex: 1.2,
key: 'transport_unit_price',
header: 'Transport (Rp)',
flex: 1.3,
align: 'right',
},
{ key: 'total_amount', header: 'Total', flex: 1.5, align: 'right' },
{ key: 'expedition', header: 'Armada', flex: 1.2, align: 'center' },
{ key: 'delivery_number', header: 'Surat Jalan', flex: 1, align: 'left' },
{
key: 'transport_value',
header: 'Value Transport (Rp)',
flex: 1.8,
align: 'right',
},
{ key: 'total_amount', header: 'Jumlah (Rp)', flex: 1.5, align: 'right' },
{ key: 'expedition', header: 'Ekspedisi', flex: 1.2, align: 'center' },
{ key: 'delivery_number', header: 'Surat Jalan', flex: 1.2, align: 'left' },
];
const getTableData = (
rows: LogisticPurchasePerSupplierReport['rows']
): PdfTbodyCell[][] => {
return rows.map((item, index) => [
{ key: 'no', value: index + 1, align: 'center' },
{ key: 'no', value: index + 1 },
{
key: 'receive_date',
value: formatDate(item.receive_date, 'DD-MMM-YYYY'),
align: 'center',
value: item.receive_date
? formatDate(item.receive_date, 'DD MMM YY')
: '-',
},
{
key: 'po_date',
value: formatDate(item.po_date, 'DD-MMM-YYYY'),
align: 'center',
value: item.po_date ? formatDate(item.po_date, 'DD MMM YY') : '-',
},
{ key: 'po_number', value: item.po_number || '-' },
{ key: 'product', value: item.product?.name || '-' },
@@ -175,10 +125,15 @@ const getTableData = (
align: 'right',
},
{
key: 'transport_price',
key: 'transport_unit_price',
value: formatCurrency(item.transport_unit_price || 0),
align: 'right',
},
{
key: 'transport_value',
value: formatCurrency(item.transport_value || 0),
align: 'right',
},
{
key: 'total_amount',
value: formatCurrency(item.total_amount || 0),
@@ -186,82 +141,134 @@ const getTableData = (
},
{
key: 'expedition',
value: (
<View style={pdfStyles.badge}>
<Text>{item.expedition || '-'}</Text>
value: item.expedition ? (
<View style={{ alignItems: 'center' }}>
<PdfStatusBadge
backgroundColor='#DBEAFE'
textColor='#1E40AF'
borderColor='#60A5FA'
>
{item.expedition}
</PdfStatusBadge>
</View>
) : (
'-'
),
align: 'center',
},
{ key: 'delivery_number', value: item.delivery_number || '-' },
]);
};
const createPDFDocument = (
supplierReports: LogisticPurchasePerSupplierReport[],
params: PurchasesPerSupplierExportParams['params']
) => (
<Document>
<Page size='A3' orientation='landscape' style={pdfStyles.page}>
{/* Title and Parameters */}
<View style={pdfStyles.titleSection}>
<Text style={pdfStyles.mainTitle}>
Laporan &gt; Rekapitulasi Pembelian Per Supplier
</Text>
<View style={pdfStyles.parameterContainer}>
<View style={pdfStyles.parameterBadge}>
<Text>
Jenis Tanggal:{' '}
{params.filter_by === 'received_date'
? 'Tanggal Terima'
: 'Tanggal PO'}
</Text>
const getTableFooter = (
summary: LogisticPurchasePerSupplierReport['summary']
): PdfTfootCell[] => [
{ key: 'no', value: 'Total' },
{ key: 'receive_date', value: '' },
{ key: 'po_date', value: '' },
{ key: 'po_number', value: '' },
{ key: 'product', value: '' },
{ key: 'warehouse', value: '' },
{
key: 'qty',
value: formatNumber(summary?.total_qty || 0),
align: 'right',
},
{ key: 'unit_price', value: '' },
{
key: 'purchase_value',
value: formatCurrency(summary?.total_purchase_value || 0),
align: 'right',
},
{ key: 'transport_unit_price', value: '' },
{
key: 'transport_value',
value: formatCurrency(summary?.total_transport_value || 0),
align: 'right',
},
{
key: 'total_amount',
value: formatCurrency(summary?.total_amount || 0),
align: 'right',
},
{ key: 'expedition', value: '' },
{ key: 'delivery_number', value: '' },
];
const createPDFDocument = (params: PurchasesPerSupplierExportParams) => {
return (
<Document>
{params.data.map((supplierReport, supplierIndex) => (
<Page
key={supplierIndex}
size='A3'
orientation='landscape'
style={pdfStyles.page}
>
{/* Title and Parameters */}
<View style={pdfStyles.titleSection}>
<PdfTypography size='h1' variant='primary'>
Laporan &gt; Rekapitulasi Pembelian Per Supplier
</PdfTypography>
<View style={pdfStyles.parameterContainer}>
<PdfParamBadge>
Jenis Tanggal:{' '}
{params.params?.filter_by === 'received_date'
? 'Tanggal Terima'
: 'Tanggal PO'}
</PdfParamBadge>
<PdfParamBadge>
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')
: '-'}
</PdfParamBadge>
<PdfParamBadge>
Supplier: {params.params?.supplier_name || 'Semua Supplier'}
</PdfParamBadge>
<PdfParamBadge>
Area: {params.params?.area_name || 'Semua Area'}
</PdfParamBadge>
<PdfParamBadge>
Produk: {params.params?.product_name || 'Semua Produk'}
</PdfParamBadge>
<PdfParamBadge>
Dicetak: {formatDate(new Date(), 'DD MMM YYYY HH:mm')}
</PdfParamBadge>
</View>
<PdfTypography size='h2' variant='primary'>
{supplierReport.supplier.name}
</PdfTypography>
{supplierReport.supplier.address && (
<PdfTypography size='label'>
Alamat: {supplierReport.supplier.address}
</PdfTypography>
)}
</View>
{getParameterText(params).map((param, index) => (
<View key={index} style={pdfStyles.parameterBadge}>
<Text>{param}</Text>
</View>
))}
</View>
</View>
{/* Supplier Sections */}
{supplierReports.map(
(
supplierReport: LogisticPurchasePerSupplierReport,
supplierIndex: number
) => {
return (
<View
key={supplierReport.supplier.id}
style={[
pdfStyles.supplierSection,
supplierIndex < supplierReports.length - 1
? pdfStyles.supplierSectionBreak
: {},
]}
>
<Text style={pdfStyles.supplierTitle}>
{supplierReport.supplier.name}
</Text>
<PdfTable
columns={getTableColumns()}
data={getTableData(supplierReport.rows)}
/>
</View>
);
}
)}
</Page>
</Document>
);
{/* Table */}
<PdfTable
columns={getTableColumns()}
data={getTableData(supplierReport.rows)}
footer={
supplierReport.summary
? getTableFooter(supplierReport.summary)
: undefined
}
/>
</Page>
))}
</Document>
);
};
export const generatePurchasesPerSupplierPDF = async (
data: LogisticPurchasePerSupplierReport[],
params: PurchasesPerSupplierExportParams['params']
params: PurchasesPerSupplierExportParams
): Promise<void> => {
const PDFDocument = createPDFDocument(data, params);
const PDFDocument = createPDFDocument(params);
try {
const blob = await pdf(PDFDocument).toBlob();
src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+4 -1
View File
@@ -433,7 +433,10 @@ const PurchasesPerSupplierTab = () => {
end_date: tableFilterState.end_date || '',
};
await generatePurchasesPerSupplierPDF(allDataForExport, exportParams);
await generatePurchasesPerSupplierPDF({
data: allDataForExport,
params: exportParams,
});
toast.success('PDF berhasil dibuat dan diunduh.');
} catch {
toast.error('Gagal membuat PDF. Silakan coba lagi.');