mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
feat(FE-181-179-220-271): adding SO export PDF and adjusting delivery form
This commit is contained in:
randy-ar
@@ -0,0 +1,227 @@
|
||||
import Button from '@/components/Button';
|
||||
import { Marketing } from '@/types/api/marketing/marketing';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
|
||||
import { useMemo, useState } from 'react';
|
||||
import pdfStyles from './styles/MarketingPDFStyles';
|
||||
import { formatDate, formatNumber } from '@/lib/helper';
|
||||
|
||||
interface SalesOrderExportProps {
|
||||
data?: Marketing;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
|
||||
const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
|
||||
const salesData = data;
|
||||
|
||||
const handleDownloadPDF = async () => {
|
||||
if (!salesData) {
|
||||
alert('No sales order data available');
|
||||
return;
|
||||
}
|
||||
setIsGeneratingPDF(true);
|
||||
try {
|
||||
const blob = await pdf(<PDFDocument data={salesData} />).toBlob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `${salesData?.so_number || 'sales-order'}.pdf`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
console.error('Error generating PDF:', error);
|
||||
alert('Failed to generate PDF. Please try again.');
|
||||
} finally {
|
||||
setIsGeneratingPDF(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!salesData) {
|
||||
return (
|
||||
<div className='flex items-center justify-center min-h-screen'>
|
||||
<div className='text-gray-500'>No sales order data available</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
|
||||
<Button
|
||||
color='primary'
|
||||
className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
|
||||
onClick={handleDownloadPDF}
|
||||
isLoading={isGeneratingPDF}
|
||||
>
|
||||
<Icon icon='material-symbols:file-open-outline' width={16} height={16} />
|
||||
{salesData.so_number}
|
||||
</Button>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default SalesOrderExport;
|
||||
const PDFDocument = ({ data }: { data: Marketing }) => {
|
||||
const grandTotal = useMemo(() => {
|
||||
return data?.sales_order?.reduce((a, b) => a + b.total_price, 0) ?? 0;
|
||||
}, [data?.sales_order]);
|
||||
|
||||
return (
|
||||
<Document>
|
||||
<Page size='A4' style={pdfStyles.page}>
|
||||
{/* Header Section */}
|
||||
<View style={pdfStyles.header}>
|
||||
<Image
|
||||
src={'https://placehold.co/120x30/png'}
|
||||
style={pdfStyles.logo}
|
||||
id={'mbu-logo'}
|
||||
/>
|
||||
<Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
|
||||
<Text style={pdfStyles.address}>
|
||||
SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
|
||||
Cipedes, Kec. Sukajadi, Kota Bandung 40162
|
||||
</Text>
|
||||
<View style={pdfStyles.divider} />
|
||||
</View>
|
||||
|
||||
{/* Sales Order Title */}
|
||||
<View style={pdfStyles.titleSection}>
|
||||
<Text style={pdfStyles.title}>SALES ORDER</Text>
|
||||
<View style={pdfStyles.poInfo}>
|
||||
<Text>SO Number: {data?.so_number || '-'}</Text>
|
||||
<Text>
|
||||
Date:{' '}
|
||||
{data?.so_date
|
||||
? formatDate(data.so_date, 'DD MMM YYYY')
|
||||
: formatDate(new Date(), 'DD MMM YYYY')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Customer Table */}
|
||||
<View style={pdfStyles.table}>
|
||||
<View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
|
||||
<View style={pdfStyles.tableCellHeader}>
|
||||
<Text>Customer</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellHeaderLast}>
|
||||
<Text>Sales</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={pdfStyles.tableRow}>
|
||||
<View style={pdfStyles.tableCell}>
|
||||
<Text style={{ fontWeight: 'bold' }}>
|
||||
{data?.customer?.name || '-'} ({data?.customer?.type || '-'})
|
||||
</Text>
|
||||
<Text style={{ marginTop: '2px' }}>
|
||||
{data?.customer.email || ''} - {data?.customer.phone || ''}
|
||||
</Text>
|
||||
<Text></Text>
|
||||
<Text>{data?.customer.address || ''}</Text>
|
||||
<Text style={{ fontSize: '7px', marginTop: '3px' }}></Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellLast}>
|
||||
<Text style={{ fontWeight: 'bold' }}>
|
||||
PT LUMBUNG TELUR INDONESIA
|
||||
</Text>
|
||||
<Text style={{ fontWeight: 'bold', marginTop: '2px' }}>
|
||||
{data?.sales_person?.name || '-'}
|
||||
</Text>
|
||||
<Text>{data?.sales_person.email}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Product Sales Order Table */}
|
||||
<Text style={pdfStyles.sectionTitle}>Product Sold</Text>
|
||||
<View style={pdfStyles.table}>
|
||||
<View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
|
||||
<View style={pdfStyles.tableCellHeader}>
|
||||
<Text>Item Description</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellHeader}>
|
||||
<Text>From</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellHeader}>
|
||||
<Text>Unit Price</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellHeader}>
|
||||
<Text>Quantity</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellHeaderLast}>
|
||||
<Text>Total Amount</Text>
|
||||
</View>
|
||||
</View>
|
||||
{data?.sales_order?.map((item, index) => {
|
||||
const isLastItem = index === (data?.sales_order?.length || 0) - 1;
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
pdfStyles.tableRow,
|
||||
// isLastItem ? {} : pdfStyles.tableBorderBottom,
|
||||
]}
|
||||
>
|
||||
<View style={pdfStyles.tableCell}>
|
||||
<Text>{item.product_warehouse?.product?.name || '-'}</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCell}>
|
||||
<Text>{item.product_warehouse?.warehouse?.name || '-'}</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellRight}>
|
||||
<Text>Rp{formatNumber(item.unit_price || 0)}</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellRight}>
|
||||
<Text>{formatNumber(item.qty || 0)}</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellRightLast}>
|
||||
<Text>Rp{formatNumber(item.total_price || 0)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}) || []}
|
||||
|
||||
{/* Grand Total Row inside table */}
|
||||
<View style={pdfStyles.grandTotalRow}>
|
||||
<View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={[pdfStyles.tableCellRight, { borderRightWidth: 0 }]}>
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View style={pdfStyles.tableCellRight}>
|
||||
<Text style={{ fontWeight: 'bold' }}>Grand Total</Text>
|
||||
</View>
|
||||
<View
|
||||
style={[pdfStyles.tableCellRightLast, { fontWeight: 'bold' }]}
|
||||
>
|
||||
<Text>Rp{formatNumber(grandTotal)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Footer with Special Instructions */}
|
||||
<View style={pdfStyles.footer}>
|
||||
<View style={pdfStyles.specialInstructionTable}>
|
||||
<View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
|
||||
<View style={pdfStyles.tableCellHeaderLast}>
|
||||
<Text>Notes</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={pdfStyles.tableRow}>
|
||||
<View style={pdfStyles.tableCellLast}>
|
||||
<Text>{data?.notes || '-'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={pdfStyles.footerCompany}>
|
||||
<Text>PT LUMBUNG TELUR INDONESIA</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user