mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE): Refactor SalesOrderProductTable to use renderTableContent
helper
This commit is contained in:
rstubryan
@@ -27,168 +27,168 @@ const SalesOrderProductTable = ({
|
|||||||
const onEditRef = useRef(onEdit);
|
const onEditRef = useRef(onEdit);
|
||||||
onEditRef.current = onEdit;
|
onEditRef.current = onEdit;
|
||||||
|
|
||||||
|
const renderTableContent = (item: SalesOrderProductFormValues) => (
|
||||||
|
<>
|
||||||
|
<tr className='border-b 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' && (
|
||||||
|
<div className='flex flex-row gap-1.5 items-center'>
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
variant='ghost'
|
||||||
|
color='none'
|
||||||
|
onClick={() => {
|
||||||
|
onEditRef.current(item.id as number);
|
||||||
|
}}
|
||||||
|
className='p-0 hover:text-base-content'
|
||||||
|
>
|
||||||
|
<Icon icon='heroicons:pencil' width={20} height={20} />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
variant='ghost'
|
||||||
|
color='none'
|
||||||
|
onClick={() => {
|
||||||
|
onDeleteRef.current(item.id as number);
|
||||||
|
}}
|
||||||
|
className='p-0 text-error hover:text-base-content'
|
||||||
|
>
|
||||||
|
<Icon icon='heroicons:trash' width={20} height={20} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</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>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Gudang</td>
|
||||||
|
<td className='text-sm px-4 py-3'>{item.kandang?.label}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Kategori</td>
|
||||||
|
<td className='text-sm px-4 py-3'>{item.marketing_type?.label}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Produk</td>
|
||||||
|
<td className='text-sm px-4 py-3'>{item.product_warehouse?.label}</td>
|
||||||
|
</tr>
|
||||||
|
{item.marketing_type?.value.toLowerCase() === 'telur' && (
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Tipe Konversi</td>
|
||||||
|
<td className='text-sm px-4 py-3'>{item.convertion_unit?.label}</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
{item.marketing_type?.value.toLowerCase() === 'ayam_pullet' && (
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Tipe Konversi</td>
|
||||||
|
<td className='text-sm px-4 py-3'>Week {item.week}</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
{item.convertion_unit?.value.toLowerCase() === 'peti' && (
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Total Peti</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{item.total_peti} {item.convertion_unit?.label}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
{item.marketing_type?.value.toLowerCase() !== 'trading' && (
|
||||||
|
<>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Total Bobot</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{item.total_weight
|
||||||
|
? formatNumber(parseFloat(item.total_weight as string)) +
|
||||||
|
' Kg'
|
||||||
|
: '0 Kg'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>Avg Bobot</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{item.avg_weight
|
||||||
|
? formatNumber(parseFloat(item.avg_weight as string)) + ' Kg'
|
||||||
|
: '0 Kg'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{item.marketing_type?.value === 'telur'
|
||||||
|
? 'Total Butir Telur'
|
||||||
|
: 'Qty'}
|
||||||
|
</td>
|
||||||
|
<td className='text-sm px-4 py-3'>
|
||||||
|
{`${formatNumber(parseFloat(item.qty as string))} ${item.uom || ''}`}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className='text-sm px-4 py-3'>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>
|
||||||
|
</>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
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) => (
|
||||||
<Card
|
<div key={`table-${item.id}`}>
|
||||||
key={`table-${item.id}`}
|
{formType === 'success' ? (
|
||||||
title={item.product_warehouse?.label || 'Produk'}
|
<div className='rounded-lg border border-tools-table-outline border-base-content/5'>
|
||||||
collapsible={true}
|
<table
|
||||||
defaultCollapsed={false}
|
style={{
|
||||||
variant='bordered'
|
borderRadius: '0.5rem',
|
||||||
className={{
|
}}
|
||||||
wrapper: 'w-full rounded-lg',
|
className='border-none w-full'
|
||||||
body: 'p-0',
|
>
|
||||||
title: 'px-2 py-1.5 font-normal text-sm',
|
<tbody className='w-full'>{renderTableContent(item)}</tbody>
|
||||||
collapsible: 'rounded-lg',
|
</table>
|
||||||
}}
|
</div>
|
||||||
>
|
) : (
|
||||||
<table
|
<Card
|
||||||
style={{
|
title={item.product_warehouse?.label || 'Produk'}
|
||||||
borderRadius: '0.5rem',
|
collapsible={true}
|
||||||
}}
|
defaultCollapsed={false}
|
||||||
className='border-none w-full'
|
variant='bordered'
|
||||||
>
|
className={{
|
||||||
<tbody className='w-full'>
|
wrapper: 'w-full rounded-lg',
|
||||||
<tr className='border-b border-t border-tools-table-outline border-base-content/5'>
|
body: 'p-0',
|
||||||
<th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
|
title: 'px-2 py-1.5 font-normal text-sm',
|
||||||
Label
|
collapsible: 'rounded-lg',
|
||||||
</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'>
|
<table
|
||||||
<div>Value</div>
|
style={{
|
||||||
{formType !== 'success' && (
|
borderRadius: '0.5rem',
|
||||||
<div className='flex flex-row gap-1.5 items-center'>
|
}}
|
||||||
<Button
|
className='border-none w-full'
|
||||||
type='button'
|
>
|
||||||
variant='ghost'
|
<tbody className='w-full'>{renderTableContent(item)}</tbody>
|
||||||
color='none'
|
</table>
|
||||||
onClick={() => {
|
</Card>
|
||||||
onEditRef.current(item.id as number);
|
)}
|
||||||
}}
|
</div>
|
||||||
className='p-0 hover:text-base-content'
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:pencil'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type='button'
|
|
||||||
variant='ghost'
|
|
||||||
color='none'
|
|
||||||
onClick={() => {
|
|
||||||
onDeleteRef.current(item.id as number);
|
|
||||||
}}
|
|
||||||
className='p-0 text-error hover:text-base-content'
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:trash'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</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>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Gudang</td>
|
|
||||||
<td className='text-sm px-4 py-3'>{item.kandang?.label}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Kategori</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.marketing_type?.label}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Produk</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.product_warehouse?.label}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{item.marketing_type?.value.toLowerCase() === 'telur' && (
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Tipe Konversi</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.convertion_unit?.label}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
{item.marketing_type?.value.toLowerCase() ===
|
|
||||||
'ayam_pullet' && (
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Tipe Konversi</td>
|
|
||||||
<td className='text-sm px-4 py-3'>Week {item.week}</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
{item.convertion_unit?.value.toLowerCase() === 'peti' && (
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Total Peti</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.total_peti} {item.convertion_unit?.label}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
{item.marketing_type?.value.toLowerCase() !== 'trading' && (
|
|
||||||
<>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Total Bobot</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.total_weight
|
|
||||||
? formatNumber(
|
|
||||||
parseFloat(item.total_weight as string)
|
|
||||||
) + ' Kg'
|
|
||||||
: '0 Kg'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>Avg Bobot</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.avg_weight
|
|
||||||
? formatNumber(
|
|
||||||
parseFloat(item.avg_weight as string)
|
|
||||||
) + ' Kg'
|
|
||||||
: '0 Kg'}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{item.marketing_type?.value === 'telur'
|
|
||||||
? 'Total Butir Telur'
|
|
||||||
: 'Qty'}
|
|
||||||
</td>
|
|
||||||
<td className='text-sm px-4 py-3'>
|
|
||||||
{`${formatNumber(parseFloat(item.qty as string))} ${item.uom || ''}`}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td className='text-sm px-4 py-3'>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>
|
|
||||||
</>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</Card>
|
|
||||||
))}
|
))}
|
||||||
{formType != 'add_deliver' &&
|
{formType != 'add_deliver' &&
|
||||||
formType != 'edit_deliver' &&
|
formType != 'edit_deliver' &&
|
||||||
|
|||||||
Reference in New Issue
Block a user