refactor(FE): Refactor table actions to be part of the "Value" column

This commit is contained in:
rstubryan
2026-02-07 10:04:15 +07:00
parent b85e47f601
commit a8dce9da46
2 changed files with 76 additions and 60 deletions
@@ -64,36 +64,6 @@ const DeliveryOrderProductTable = ({
title: 'px-2 py-1.5 font-normal text-sm',
collapsible: 'rounded-lg',
}}
actions={
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>
<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>
) : undefined
}
>
<table
style={{
@@ -107,7 +77,45 @@ const DeliveryOrderProductTable = ({
Label
</th>
<th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
Value
<div className='flex w-full flex-row gap-1 items-center justify-between h-full'>
<div>Value</div>
{(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>
<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>
<>
@@ -159,34 +159,6 @@ const SalesOrderProductTable = ({
title: 'px-2 py-1.5 font-normal text-sm',
collapsible: 'rounded-lg',
}}
actions={
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>
) : undefined
}
>
<table
style={{
@@ -200,7 +172,43 @@ const SalesOrderProductTable = ({
Label
</th>
<th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
Value
<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>
<>