mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
refactor(FE): Refactor DeliveryOrderProductTable to improve readability
This commit is contained in:
rstubryan
@@ -19,6 +19,7 @@ type DeliveryOrderProductTableProps = {
|
|||||||
| 'detail'
|
| 'detail'
|
||||||
| 'rejected'
|
| 'rejected'
|
||||||
| 'pending'
|
| 'pending'
|
||||||
|
| 'success'
|
||||||
| string
|
| string
|
||||||
| null;
|
| null;
|
||||||
marketing?: Marketing;
|
marketing?: Marketing;
|
||||||
@@ -41,186 +42,193 @@ const DeliveryOrderProductTable = ({
|
|||||||
|
|
||||||
const approvalStepNumber = marketing?.latest_approval?.step_number;
|
const approvalStepNumber = marketing?.latest_approval?.step_number;
|
||||||
|
|
||||||
|
const renderTableContent = (item: DeliveryOrderProductFormValues) => {
|
||||||
|
const doItem = marketing?.delivery_order?.find(
|
||||||
|
(doItem) => doItem.do_number === item.do_number
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<tr className='border-b border-t border-tools-table-outline border-base-content/5'>
|
||||||
|
<th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
|
||||||
|
Label
|
||||||
|
</th>
|
||||||
|
<th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
|
||||||
|
<div className='flex w-full flex-row gap-1 items-center justify-between h-full'>
|
||||||
|
<div>Value</div>
|
||||||
|
{formType !== 'success' &&
|
||||||
|
(formType === 'add_delivery' ||
|
||||||
|
formType === 'edit_delivery' ||
|
||||||
|
formType === 'detail') && (
|
||||||
|
<div className='flex flex-row gap-1.5 items-center'>
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
variant='ghost'
|
||||||
|
color='none'
|
||||||
|
onClick={() => {
|
||||||
|
onEditRef.current(item.id as number, item);
|
||||||
|
}}
|
||||||
|
className='p-0 hover:text-base-content'
|
||||||
|
>
|
||||||
|
<Icon icon='heroicons:pencil' width={20} height={20} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Gudang</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{doItem?.warehouse?.name ||
|
||||||
|
item.marketing_product?.product_warehouse_data?.warehouse?.name}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Produk</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{item.marketing_product?.product_warehouse?.label}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Qty</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{item.qty
|
||||||
|
? `${formatNumber(parseFloat(item.qty as string))} ${item.marketing_product?.uom ?? ''}`
|
||||||
|
: '-'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{Number(item.avg_weight ?? 0) > 0 && (
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Avg Bobot</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{formatNumber(Number(item.avg_weight))} Kg
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
{Number(item.total_weight ?? 0) > 0 && (
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Total Bobot</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{formatNumber(Number(item.total_weight))}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Total Harga Satuan</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{formatCurrency(parseFloat(item.unit_price as string))}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Total Penjualan</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{formatCurrency(parseFloat(item.total_price as string))}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</>
|
||||||
|
<tr className='border-b border-t border-tools-table-outline border-base-content/5'>
|
||||||
|
<th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
|
||||||
|
Label
|
||||||
|
</th>
|
||||||
|
<th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
|
||||||
|
<div className='flex w-full flex-row gap-1 items-center justify-between h-full'>
|
||||||
|
<div>Value</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<>
|
||||||
|
{approvalStepNumber !== 1 && (
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Tanggal Pengiriman</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{item.delivery_date ? (
|
||||||
|
formatDate(item.delivery_date, 'DD MMM YYYY')
|
||||||
|
) : formType === 'add_delivery' ||
|
||||||
|
formType === 'edit_delivery' ||
|
||||||
|
formType === 'detail' ? (
|
||||||
|
<span
|
||||||
|
className='text-error hover:text-error/70 cursor-pointer hover:underline underline-offset-4'
|
||||||
|
onClick={() => {
|
||||||
|
onEditRef.current(item.id as number, item);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Belum diisi
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className='text-error'>Belum diisi</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
{item.do_number && (
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>No. Pengiriman</td>
|
||||||
|
<td className='text-sm px-4 py-3'>{item.do_number}</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>No. Polisi</td>
|
||||||
|
<td className='text-sm px-4 py-3'>{item.vehicle_number}</td>
|
||||||
|
</tr>
|
||||||
|
{doItem && (
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Dokumen Pengiriman</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
<DeliveryOrderExport data={marketing} deliveryOrder={doItem} />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
|
<div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
|
||||||
{data.map((item) => {
|
{data.map((item) => (
|
||||||
const doItem = marketing?.delivery_order?.find(
|
<div key={`table-${item.id}`}>
|
||||||
(doItem) => doItem.do_number === item.do_number
|
{formType === 'success' ? (
|
||||||
);
|
<div className='rounded-lg border border-tools-table-outline border-base-content/5'>
|
||||||
return (
|
<table
|
||||||
<Card
|
style={{
|
||||||
key={`table-${item.id}`}
|
borderRadius: '0.5rem',
|
||||||
title={
|
}}
|
||||||
item.marketing_product?.product_warehouse?.label || 'Produk'
|
className='border-none w-full'
|
||||||
}
|
>
|
||||||
collapsible={true}
|
<tbody className='w-full'>{renderTableContent(item)}</tbody>
|
||||||
defaultCollapsed={false}
|
</table>
|
||||||
variant='bordered'
|
</div>
|
||||||
className={{
|
) : (
|
||||||
wrapper: 'w-full rounded-lg',
|
<Card
|
||||||
body: 'p-0',
|
key={`table-${item.id}`}
|
||||||
title: 'px-2 py-1.5 font-normal text-sm',
|
title={
|
||||||
collapsible: 'rounded-lg',
|
item.marketing_product?.product_warehouse?.label || 'Produk'
|
||||||
}}
|
}
|
||||||
>
|
collapsible={true}
|
||||||
<table
|
defaultCollapsed={false}
|
||||||
style={{
|
variant='bordered'
|
||||||
borderRadius: '0.5rem',
|
className={{
|
||||||
|
wrapper: 'w-full rounded-lg',
|
||||||
|
body: 'p-0',
|
||||||
|
title: 'px-2 py-1.5 font-normal text-sm',
|
||||||
|
collapsible: 'rounded-lg',
|
||||||
}}
|
}}
|
||||||
className='border-none w-full'
|
|
||||||
>
|
>
|
||||||
<tbody className='w-full'>
|
<table
|
||||||
<tr className='border-b border-t border-tools-table-outline border-base-content/5'>
|
style={{
|
||||||
<th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
|
borderRadius: '0.5rem',
|
||||||
Label
|
}}
|
||||||
</th>
|
className='border-none w-full'
|
||||||
<th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
|
>
|
||||||
<div className='flex w-full flex-row gap-1 items-center justify-between h-full'>
|
<tbody className='w-full'>{renderTableContent(item)}</tbody>
|
||||||
<div>Value</div>
|
</table>
|
||||||
{(formType === 'add_delivery' ||
|
</Card>
|
||||||
formType === 'edit_delivery' ||
|
)}
|
||||||
formType === 'detail') && (
|
</div>
|
||||||
<div className='flex flex-row gap-1.5 items-center'>
|
))}
|
||||||
<Button
|
|
||||||
type='button'
|
|
||||||
variant='ghost'
|
|
||||||
color='none'
|
|
||||||
onClick={() => {
|
|
||||||
onEditRef.current(item.id as number, item);
|
|
||||||
}}
|
|
||||||
className='p-0 hover:text-base-content'
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:pencil'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
<>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Gudang</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{doItem?.warehouse?.name ||
|
|
||||||
item.marketing_product?.product_warehouse_data
|
|
||||||
?.warehouse?.name}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Produk</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.marketing_product?.product_warehouse?.label}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Qty</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.qty
|
|
||||||
? `${formatNumber(parseFloat(item.qty as string))} ${item.marketing_product?.uom ?? ''}`
|
|
||||||
: '-'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{Number(item.avg_weight ?? 0) > 0 && (
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Avg Bobot</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{formatNumber(Number(item.avg_weight))} Kg
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
{Number(item.total_weight ?? 0) > 0 && (
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Total Bobot</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{formatNumber(Number(item.total_weight))}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Total Harga Satuan</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{formatCurrency(parseFloat(item.unit_price as string))}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Total Penjualan</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{formatCurrency(parseFloat(item.total_price as string))}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</>
|
|
||||||
<tr className='border-b border-t border-tools-table-outline border-base-content/5'>
|
|
||||||
<th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
|
|
||||||
Label
|
|
||||||
</th>
|
|
||||||
<th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
|
|
||||||
<div className='flex w-full flex-row gap-1 items-center justify-between h-full'>
|
|
||||||
<div>Value</div>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
<>
|
|
||||||
{approvalStepNumber !== 1 && (
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
Tanggal Pengiriman
|
|
||||||
</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.delivery_date ? (
|
|
||||||
formatDate(item.delivery_date, 'DD MMM YYYY')
|
|
||||||
) : formType === 'add_delivery' ||
|
|
||||||
formType === 'edit_delivery' ||
|
|
||||||
formType === 'detail' ? (
|
|
||||||
<span
|
|
||||||
className='text-error hover:text-error/70 cursor-pointer hover:underline underline-offset-4'
|
|
||||||
onClick={() => {
|
|
||||||
onEditRef.current(item.id as number, item);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Belum diisi
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className='text-error'>Belum diisi</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
{item.do_number && (
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>No. Pengiriman</td>
|
|
||||||
<td className='text-sm px-4 py-3'>{item.do_number}</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>No. Polisi</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.vehicle_number}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{doItem && (
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
Dokumen Pengiriman
|
|
||||||
</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
<DeliveryOrderExport
|
|
||||||
data={marketing}
|
|
||||||
deliveryOrder={doItem}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user