refactor(FE-208,213): update PurchaseOrderDetail and PurchaseOrderInvoice components for improved warehouse and supplier details

This commit is contained in:
rstubryan
2025-11-18 14:58:49 +07:00
parent 00c432a918
commit 75e7b9a6de
2 changed files with 67 additions and 50 deletions
@@ -499,7 +499,7 @@ const PurchaseOrderDetail = ({
</span> </span>
<span className='text-gray-900 ml-3 break-all'> <span className='text-gray-900 ml-3 break-all'>
:{' '} :{' '}
{purchaseData.items?.[0]?.warehouse?.type !== 'AREA' && {purchaseData.items?.[0]?.warehouse?.type === 'LOKASI' &&
purchaseData.items?.[0]?.warehouse?.location?.name purchaseData.items?.[0]?.warehouse?.location?.name
? purchaseData.items[0].warehouse.location.name ? purchaseData.items[0].warehouse.location.name
: '-'} : '-'}
@@ -267,7 +267,9 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
style={pdfStyles.logo} style={pdfStyles.logo}
id={'mbu-logo'} id={'mbu-logo'}
/> />
<Text style={pdfStyles.companyInfo}>PT MITRA BERLIAN UNGGAS</Text> <Text style={pdfStyles.companyInfo}>
PT LUMBUNG TELUR INDONESIA
</Text>
<Text style={pdfStyles.address}> <Text style={pdfStyles.address}>
SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel. SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
Cipedes, Kec. Sukajadi, Kota Bandung 40162 Cipedes, Kec. Sukajadi, Kota Bandung 40162
@@ -283,8 +285,8 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
<Text> <Text>
Date:{' '} Date:{' '}
{purchaseData?.po_date {purchaseData?.po_date
? formatDate(purchaseData.po_date, 'DD-MMM-YYYY') ? formatDate(purchaseData.po_date, 'DD MMM YYYY')
: formatDate(new Date(), 'DD-MMM-YYYY')} : formatDate(new Date(), 'DD MMM YYYY')}
</Text> </Text>
</View> </View>
</View> </View>
@@ -302,20 +304,34 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
<View style={pdfStyles.tableRow}> <View style={pdfStyles.tableRow}>
<View style={pdfStyles.tableCell}> <View style={pdfStyles.tableCell}>
<Text style={{ fontWeight: 'bold' }}> <Text style={{ fontWeight: 'bold' }}>
{purchaseData?.supplier?.name || '-'} {purchaseData?.supplier?.name || '-'} (
{purchaseData?.supplier?.alias || ''})
</Text> </Text>
<Text>{purchaseData?.supplier?.pic || '-'}</Text> <Text>{purchaseData?.supplier?.category || '-'}</Text>
<Text> <Text>
{purchaseData?.supplier?.phone || '-'} /{' '} Credit Term: {purchaseData?.credit_term || 0} hari
{purchaseData?.supplier?.email || '-'} </Text>
<Text>
Due Date:{' '}
{purchaseData?.due_date
? formatDate(purchaseData.due_date, 'DD MMM YYYY')
: '-'}
</Text> </Text>
<Text>{purchaseData?.supplier?.address || '-'}</Text>
</View> </View>
<View style={pdfStyles.tableCellLast}> <View style={pdfStyles.tableCellLast}>
<Text style={{ fontWeight: 'bold' }}> <Text style={{ fontWeight: 'bold' }}>
PT MITRA BERLIAN UNGGAS PT LUMBUNG TELUR INDONESIA
</Text>
<Text>
{purchaseData?.items?.[0]?.warehouse.type === 'LOKASI'
? purchaseData.items[0].warehouse.location.name
: '-'}
</Text>
<Text>
{purchaseData?.items?.[0]?.warehouse.type === 'LOKASI'
? purchaseData.items[0].warehouse.location.address
: '-'}
</Text> </Text>
<Text>{purchaseData?.location?.name || '-'}</Text>
</View> </View>
</View> </View>
</View> </View>
@@ -331,7 +347,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
<Text>Unit Price</Text> <Text>Unit Price</Text>
</View> </View>
<View style={pdfStyles.tableCellHeader}> <View style={pdfStyles.tableCellHeader}>
<Text>Total Quantity</Text> <Text>Quantity</Text>
</View> </View>
<View style={pdfStyles.tableCellHeaderLast}> <View style={pdfStyles.tableCellHeaderLast}>
<Text>Total Amount</Text> <Text>Total Amount</Text>
@@ -355,7 +371,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
<Text>Rp{formatNumber(item.price || 0)}</Text> <Text>Rp{formatNumber(item.price || 0)}</Text>
</View> </View>
<View style={pdfStyles.tableCellRight}> <View style={pdfStyles.tableCellRight}>
<Text>{formatNumber(item.total_qty || 0)}</Text> <Text>{formatNumber(item.sub_qty || 0)}</Text>
</View> </View>
<View style={pdfStyles.tableCellRightLast}> <View style={pdfStyles.tableCellRightLast}>
<Text>Rp{formatNumber(item.total_price || 0)}</Text> <Text>Rp{formatNumber(item.total_price || 0)}</Text>
@@ -398,57 +414,58 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
<Text>Warehouse Name</Text> <Text>Warehouse Name</Text>
</View> </View>
<View style={pdfStyles.tableCellHeader}> <View style={pdfStyles.tableCellHeader}>
<Text>PIC</Text> <Text>Area</Text>
</View> </View>
<View style={pdfStyles.tableCellHeader}> <View style={pdfStyles.tableCellHeader}>
<Text>Address Detail</Text> <Text>Location Address</Text>
</View> </View>
<View style={pdfStyles.tableCellHeaderLast}> <View style={pdfStyles.tableCellHeaderLast}>
<Text>Product Allocation</Text> <Text>Product Allocation</Text>
</View> </View>
</View> </View>
<View style={pdfStyles.tableRow}> {purchaseData?.items?.map((item, itemIndex) => (
<View style={pdfStyles.tableCell}> <View key={itemIndex} style={pdfStyles.tableRow}>
<Text>{purchaseData?.warehouse?.name || '-'}</Text> <View style={pdfStyles.tableCell}>
</View> <Text>{item.warehouse?.name || '-'}</Text>
<View style={pdfStyles.tableCell}> </View>
<Text>{purchaseData?.created_user?.name || '-'}</Text> <View style={pdfStyles.tableCell}>
<Text style={{ fontSize: 8 }}> <Text>{item.warehouse?.area?.name || '-'}</Text>
{purchaseData?.created_user?.email || '-'} </View>
</Text> <View style={pdfStyles.tableCell}>
</View> <Text>
<View style={pdfStyles.tableCell}> {item.warehouse?.type === 'LOKASI'
<Text>{purchaseData?.location?.name || '-'}</Text> ? item.warehouse.location.address
</View> : '-'}
<View style={pdfStyles.tableCellLast}> </Text>
{/* Inner table for product allocation */} </View>
<View style={pdfStyles.innerTable}> <View style={pdfStyles.tableCellLast}>
{/* Header for inner table */} {/* Inner table for product allocation */}
<View <View style={pdfStyles.innerTable}>
style={[ {/* Header for inner table */}
pdfStyles.innerRow, <View
{ backgroundColor: '#F5F5F5' }, style={[
]} pdfStyles.innerRow,
> { backgroundColor: '#F5F5F5' },
<Text style={pdfStyles.innerCell}>Item</Text> ]}
<Text style={pdfStyles.innerCellRightLast}> >
Quantity <Text style={pdfStyles.innerCell}>Item</Text>
</Text> <Text style={pdfStyles.innerCellRightLast}>
</View> Quantity
{/* Data rows */} </Text>
{purchaseData?.items?.map((item, index) => ( </View>
<View key={index} style={pdfStyles.innerRow}> {/* Data row */}
<View style={pdfStyles.innerRow}>
<Text style={pdfStyles.innerCell}> <Text style={pdfStyles.innerCell}>
{item.product?.name || '-'} {item.product?.name || '-'}
</Text> </Text>
<Text style={pdfStyles.innerCellRightLast}> <Text style={pdfStyles.innerCellRightLast}>
{formatNumber(item.total_qty || 0)} {formatNumber(item.sub_qty || 0)}
</Text> </Text>
</View> </View>
)) || []} </View>
</View> </View>
</View> </View>
</View> )) || []}
</View> </View>
</View> </View>
@@ -467,7 +484,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
</View> </View>
</View> </View>
<View style={pdfStyles.footerCompany}> <View style={pdfStyles.footerCompany}>
<Text>PT MITRA BERLIAN UNGGAS</Text> <Text>PT LUMBUNG TELUR INDONESIA</Text>
</View> </View>
</View> </View>
</Page> </Page>