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

refactor(FE): Refactor DeliveryOrderProductTable to improve readability

Browse Source
This commit is contained in:
rstubryan
2026-02-09 11:41:08 +07:00
parent 1dc6ffca5c
commit 862cf38f92
1 changed files with 183 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
+58 -50
View File
@@ -19,6 +19,7 @@ type DeliveryOrderProductTableProps = {
| 'detail'
| 'rejected'
| 'pending'
| 'success'
| string
| null;
marketing?: Marketing;
@@ -41,36 +42,13 @@ const DeliveryOrderProductTable = ({
const approvalStepNumber = marketing?.latest_approval?.step_number;
return (
<>
<div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
{data.map((item) => {
const renderTableContent = (item: DeliveryOrderProductFormValues) => {
const doItem = marketing?.delivery_order?.find(
(doItem) => doItem.do_number === item.do_number
);
return (
<Card
key={`table-${item.id}`}
title={
item.marketing_product?.product_warehouse?.label || 'Produk'
}
collapsible={true}
defaultCollapsed={false}
variant='bordered'
className={{
wrapper: 'w-full rounded-lg',
body: 'p-0',
title: 'px-2 py-1.5 font-normal text-sm',
collapsible: 'rounded-lg',
}}
>
<table
style={{
borderRadius: '0.5rem',
}}
className='border-none w-full'
>
<tbody className='w-full'>
<>
<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
@@ -78,7 +56,8 @@ const DeliveryOrderProductTable = ({
<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 === 'add_delivery' ||
{formType !== 'success' &&
(formType === 'add_delivery' ||
formType === 'edit_delivery' ||
formType === 'detail') && (
<div className='flex flex-row gap-1.5 items-center'>
@@ -91,11 +70,7 @@ const DeliveryOrderProductTable = ({
}}
className='p-0 hover:text-base-content'
>
<Icon
icon='heroicons:pencil'
width={20}
height={20}
/>
<Icon icon='heroicons:pencil' width={20} height={20} />
</Button>
</div>
)}
@@ -107,8 +82,7 @@ const DeliveryOrderProductTable = ({
<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}
item.marketing_product?.product_warehouse_data?.warehouse?.name}
</td>
</tr>
<tr>
@@ -167,9 +141,7 @@ const DeliveryOrderProductTable = ({
<>
{approvalStepNumber !== 1 && (
<tr>
<td className='text-sm px-4 py-3'>
Tanggal Pengiriman
</td>
<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')
@@ -198,29 +170,65 @@ const DeliveryOrderProductTable = ({
)}
<tr>
<td className='text-sm px-4 py-3'>No. Polisi</td>
<td className='text-sm px-4 py-3'>
{item.vehicle_number}
</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'>
Dokumen Pengiriman
</td>
<td className='text-sm px-4 py-3'>
<DeliveryOrderExport
data={marketing}
deliveryOrder={doItem}
/>
<DeliveryOrderExport data={marketing} deliveryOrder={doItem} />
</td>
</tr>
)}
</>
</tbody>
</>
);
};
return (
<>
<div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
{data.map((item) => (
<div key={`table-${item.id}`}>
{formType === 'success' ? (
<div className='rounded-lg border border-tools-table-outline border-base-content/5'>
<table
style={{
borderRadius: '0.5rem',
}}
className='border-none w-full'
>
<tbody className='w-full'>{renderTableContent(item)}</tbody>
</table>
</div>
) : (
<Card
key={`table-${item.id}`}
title={
item.marketing_product?.product_warehouse?.label || 'Produk'
}
collapsible={true}
defaultCollapsed={false}
variant='bordered'
className={{
wrapper: 'w-full rounded-lg',
body: 'p-0',
title: 'px-2 py-1.5 font-normal text-sm',
collapsible: 'rounded-lg',
}}
>
<table
style={{
borderRadius: '0.5rem',
}}
className='border-none w-full'
>
<tbody className='w-full'>{renderTableContent(item)}</tbody>
</table>
</Card>
);
})}
)}
</div>
))}
</div>
</>
);