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

refactor(FE): Refactor tables to use Card component

Browse Source
This commit is contained in:
rstubryan
2026-02-07 09:58:00 +07:00
parent 039dfd529e
commit fc4a0a58e2
2 changed files with 88 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
+46 -42
View File
@@ -1,5 +1,6 @@
import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema'; import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
import Button from '@/components/Button'; import Button from '@/components/Button';
import Card from '@/components/Card';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import { useRef } from 'react'; import { useRef } from 'react';
import { formatCurrency, formatDate, formatNumber } from '@/lib/helper'; import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
@@ -49,9 +50,50 @@ const DeliveryOrderProductTable = ({
(doItem) => doItem.do_number === item.do_number (doItem) => doItem.do_number === item.do_number
); );
return ( return (
<div <Card
className='rounded-lg border border-tools-table-outline border-base-content/5'
key={`table-${item.id}`} 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',
}}
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 <table
style={{ style={{
@@ -65,45 +107,7 @@ const DeliveryOrderProductTable = ({
Label Label
</th> </th>
<th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'> <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 mt-2'> Value
<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> </th>
</tr> </tr>
<> <>
@@ -199,7 +203,7 @@ const DeliveryOrderProductTable = ({
</> </>
</tbody> </tbody>
</table> </table>
</div> </Card>
); );
})} })}
</div> </div>
src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
+42 -40
View File
@@ -1,6 +1,7 @@
'use client'; 'use client';
import Button from '@/components/Button'; import Button from '@/components/Button';
import Card from '@/components/Card';
import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema'; import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
import { import {
formatCurrency, formatCurrency,
@@ -146,9 +147,46 @@ const SalesOrderProductTable = ({
<> <>
<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) => (
<div <Card
className='rounded-lg border border-tools-table-outline border-base-content/5'
key={`table-${item.id}`} 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',
}}
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 <table
style={{ style={{
@@ -162,43 +200,7 @@ const SalesOrderProductTable = ({
Label Label
</th> </th>
<th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'> <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 mt-2'> Value
<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> </th>
</tr> </tr>
<> <>
@@ -294,7 +296,7 @@ const SalesOrderProductTable = ({
</> </>
</tbody> </tbody>
</table> </table>
</div> </Card>
))} ))}
{formType != 'add_deliver' && {formType != 'add_deliver' &&
formType != 'edit_deliver' && formType != 'edit_deliver' &&