fix(FE): fix badge and table pdf

This commit is contained in:
randy-ar
2026-01-29 20:18:42 +07:00
parent c7818cefbb
commit 0ed6c246b1
3 changed files with 42 additions and 40 deletions
+2
View File
@@ -27,6 +27,7 @@ const StatusBadge = ({
'bg-success/30': color === 'success', 'bg-success/30': color === 'success',
'bg-error/20': color === 'error', 'bg-error/20': color === 'error',
'bg-primary/20': color === 'info', 'bg-primary/20': color === 'info',
'bg-[#FF9A20]/12': color === 'warning',
}, },
className?.badge className?.badge
), ),
@@ -43,6 +44,7 @@ const StatusBadge = ({
'text-[#008000]': color === 'success', 'text-[#008000]': color === 'success',
'text-error': color === 'error', 'text-error': color === 'error',
'text-primary': color === 'info', 'text-primary': color === 'info',
'text-[#FF9A20]': color === 'warning',
})} })}
> >
<circle r='6' cx='6' cy='6' fill='currentColor' /> <circle r='6' cx='6' cy='6' fill='currentColor' />
@@ -281,16 +281,16 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}> <View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
<Text>No</Text> <Text>No</Text>
</View> </View>
<View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}> <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
<Text>No. PR</Text> <Text>No. PR</Text>
</View> </View>
<View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}> <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
<Text>No. PO</Text> <Text>No. PO</Text>
</View> </View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}> <View style={[pdfStyles.tableCellHeader, { flex: 0.7 }]}>
<Text>Tgl Terima/Bayar</Text> <Text>Tgl Terima/Bayar</Text>
</View> </View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}> <View style={[pdfStyles.tableCellHeader, { flex: 0.7 }]}>
<Text>Tgl PO</Text> <Text>Tgl PO</Text>
</View> </View>
<View style={[pdfStyles.tableCellHeader, { flex: 0.6 }]}> <View style={[pdfStyles.tableCellHeader, { flex: 0.6 }]}>
@@ -320,7 +320,12 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}> <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
<Text>Status</Text> <Text>Status</Text>
</View> </View>
<View style={[pdfStyles.tableCellHeader, { flex: 1 }]}> <View
style={[
pdfStyles.tableCellHeader,
{ flex: 1, borderRight: 'none' },
]}
>
<Text>No. Perjalanan</Text> <Text>No. Perjalanan</Text>
</View> </View>
</View> </View>
@@ -330,16 +335,16 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}> <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
<Text></Text> {/* NO */} <Text></Text> {/* NO */}
</View> </View>
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}> <View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text></Text> {/* No. PR */} <Text></Text> {/* No. PR */}
</View> </View>
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}> <View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text></Text> {/* No. PO */} <Text></Text> {/* No. PO */}
</View> </View>
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}> <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
<Text></Text> {/* Tgl Terima/Bayar */} <Text></Text> {/* Tgl Terima/Bayar */}
</View> </View>
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}> <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
<Text></Text> {/* Tgl PO */} <Text></Text> {/* Tgl PO */}
</View> </View>
<View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}> <View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
@@ -381,8 +386,13 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCell, { flex: 1.2 }]}> <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
<Text></Text> {/* Status */} <Text></Text> {/* Status */}
</View> </View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}> <View
<Text></Text> {/* No. Perjalanan */} style={[
pdfStyles.tableCell, // No. Perjalanan
{ flex: 1, borderRight: 'none' },
]}
>
<Text></Text>
</View> </View>
</View> </View>
@@ -400,13 +410,13 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}> <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
<Text>{index + 1}</Text> <Text>{index + 1}</Text>
</View> </View>
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}> <View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text>{item.pr_number || '-'}</Text> <Text>{item.pr_number || '-'}</Text>
</View> </View>
<View style={[pdfStyles.tableCell, { flex: 1.5 }]}> <View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text>{item.po_number || '-'}</Text> <Text>{item.po_number || '-'}</Text>
</View> </View>
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}> <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
<Text> <Text>
{item.received_date {item.received_date
? item.received_date != '-' ? item.received_date != '-'
@@ -415,7 +425,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
: '-'} : '-'}
</Text> </Text>
</View> </View>
<View style={[pdfStyles.tableCellCenter, { flex: 1 }]}> <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
<Text> <Text>
{item.po_date {item.po_date
? item.po_date != '-' ? item.po_date != '-'
@@ -526,7 +536,12 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<Text>-</Text> <Text>-</Text>
)} )}
</View> </View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}> <View
style={[
pdfStyles.tableCell, // No. Perjalanan
{ flex: 1, borderRight: 'none' },
]}
>
<Text>{item.travel_number || '-'}</Text> <Text>{item.travel_number || '-'}</Text>
</View> </View>
</View> </View>
@@ -538,18 +553,18 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
<View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}> <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
<Text>Total</Text> <Text>Total</Text>
</View> </View>
<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 }]}> <View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text></Text> <Text></Text>
</View> </View>
<View style={[pdfStyles.tableCell, { flex: 1 }]}> <View style={[pdfStyles.tableCell, { flex: 1 }]}>
<Text></Text> <Text></Text>
</View> </View>
<View style={[pdfStyles.tableCell, { flex: 0.7 }]}>
<Text></Text>
</View>
<View style={[pdfStyles.tableCell, { flex: 0.7 }]}>
<Text></Text>
</View>
<View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}> <View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
<Text>{formatNumber(supplierReport.total.aging)} Hari</Text> <Text>{formatNumber(supplierReport.total.aging)} Hari</Text>
</View> </View>
@@ -2,10 +2,7 @@ import Button from '@/components/Button';
import Card from '@/components/Card'; import Card from '@/components/Card';
import Dropdown from '@/components/Dropdown'; import Dropdown from '@/components/Dropdown';
import DateInput from '@/components/input/DateInput'; import DateInput from '@/components/input/DateInput';
import SelectInput, { import { OptionType, useSelect } from '@/components/input/SelectInput';
OptionType,
useSelect,
} from '@/components/input/SelectInput';
import Menu from '@/components/menu/Menu'; import Menu from '@/components/menu/Menu';
import MenuItem from '@/components/menu/MenuItem'; import MenuItem from '@/components/menu/MenuItem';
import Modal, { useModal } from '@/components/Modal'; import Modal, { useModal } from '@/components/Modal';
@@ -32,12 +29,12 @@ import {
DebtSupplierFilterType, DebtSupplierFilterType,
} from '@/components/pages/report/finance/filter/DebtSupplierFilter'; } from '@/components/pages/report/finance/filter/DebtSupplierFilter';
import ButtonFilter from '@/components/helper/ButtonFilter'; import ButtonFilter from '@/components/helper/ButtonFilter';
import Badge from '@/components/Badge';
import { Color } from '@/types/theme'; import { Color } from '@/types/theme';
import { Supplier } from '@/types/api/master-data/supplier'; import { Supplier } from '@/types/api/master-data/supplier';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox'; import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
import SelectInputRadio from '@/components/input/SelectInputRadio'; import SelectInputRadio from '@/components/input/SelectInputRadio';
import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store'; import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
import StatusBadge from '@/components/helper/StatusBadge';
const dueStatus: Record<string, Color> = { const dueStatus: Record<string, Color> = {
'Sudah Jatuh Tempo': 'error', 'Sudah Jatuh Tempo': 'error',
@@ -61,19 +58,7 @@ const getPillBadge = (
? dueStatus[statusText] || 'neutral' ? dueStatus[statusText] || 'neutral'
: paymentStatus[statusText] || 'neutral'; : paymentStatus[statusText] || 'neutral';
return ( return <StatusBadge color={color as Color} text={statusText} />;
<Badge
color={color as Color}
size='sm'
variant='soft'
className={{
badge: `py-2.5 px-2 font-medium text-base-content rounded-full border border-${color}`,
}}
statusIndicator
>
{statusText}
</Badge>
);
}; };
interface DebtSupplierTabProps { interface DebtSupplierTabProps {