refactor(FE): Refactor SalesOrderProductTable to use renderTableContent

helper
This commit is contained in:
rstubryan
2026-02-09 11:00:29 +07:00
parent 80c79cc14b
commit 6cbe14b36e
@@ -27,31 +27,9 @@ const SalesOrderProductTable = ({
const onEditRef = useRef(onEdit);
onEditRef.current = onEdit;
return (
const renderTableContent = (item: SalesOrderProductFormValues) => (
<>
<div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
{data.map((item) => (
<Card
key={`table-${item.id}`}
title={item.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'>
<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>
@@ -69,11 +47,7 @@ const SalesOrderProductTable = ({
}}
className='p-0 hover:text-base-content'
>
<Icon
icon='heroicons:pencil'
width={20}
height={20}
/>
<Icon icon='heroicons:pencil' width={20} height={20} />
</Button>
<Button
type='button'
@@ -84,11 +58,7 @@ const SalesOrderProductTable = ({
}}
className='p-0 text-error hover:text-base-content'
>
<Icon
icon='heroicons:trash'
width={20}
height={20}
/>
<Icon icon='heroicons:trash' width={20} height={20} />
</Button>
</div>
)}
@@ -106,26 +76,19 @@ const SalesOrderProductTable = ({
</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>
<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>
<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>
<td className='text-sm px-4 py-3'>{item.convertion_unit?.label}</td>
</tr>
)}
{item.marketing_type?.value.toLowerCase() ===
'ayam_pullet' && (
{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>
@@ -145,9 +108,8 @@ const SalesOrderProductTable = ({
<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'
? formatNumber(parseFloat(item.total_weight as string)) +
' Kg'
: '0 Kg'}
</td>
</tr>
@@ -155,9 +117,7 @@ const SalesOrderProductTable = ({
<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'
? formatNumber(parseFloat(item.avg_weight as string)) + ' Kg'
: '0 Kg'}
</td>
</tr>
@@ -186,9 +146,49 @@ const SalesOrderProductTable = ({
</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
title={item.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>
))}
{formType != 'add_deliver' &&
formType != 'edit_deliver' &&