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 table components to improve styling and structure

Browse Source
This commit is contained in:
rstubryan
2026-02-19 10:43:37 +07:00
parent 944db8dba7
commit 4c70ec7cab
9 changed files with 539 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/closing/table/FinanceClosingTable.tsx
+53 -10
View File
@@ -82,7 +82,7 @@ const FinanceClosingTable = ({
}, [finance]);
return (
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-4 p-0 sm:p-3'>
{isLoading ? (
<FinanceClosingSkeleton />
) : !isResponseSuccess(finance) ? (
@@ -96,10 +96,13 @@ const FinanceClosingTable = ({
<Card
variant='bordered'
className={{
wrapper: 'w-full',
wrapper: 'w-full rounded-lg border-none',
body: 'p-0',
title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
collapsible: 'rounded-lg',
}}
>
<div className='grid grid-cols-2 gap-6'>
<div className='p-4 grid grid-cols-2 gap-6'>
<div className='flex flex-col gap-1'>
<div>Laba Rugi Brutto</div>
<div className='text-lg font-bold'>
@@ -127,10 +130,13 @@ const FinanceClosingTable = ({
variant='bordered'
collapsible
className={{
wrapper: 'w-full',
wrapper: 'w-full rounded-lg border-none',
body: 'p-0',
title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
collapsible: 'rounded-lg',
}}
>
<div className='mt-6 p-0 mb-0'>
<div className='p-0'>
<Table<HppItem>
data={hppTableData}
isLoading={isLoading}
@@ -263,6 +269,24 @@ const FinanceClosingTable = ({
],
},
]}
className={{
containerClassName: 'w-full mb-0!',
tableWrapperClassName:
'overflow-x-auto rounded-tr-none rounded-tl-none',
tableClassName: 'w-full table-auto text-sm',
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
headerColumnClassName:
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
bodyRowClassName:
'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
bodyColumnClassName:
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
tableFooterClassName:
'bg-gray-100 font-semibold border border-gray-200',
footerRowClassName: 'border-t-2 border-gray-300',
footerColumnClassName:
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
}}
renderCustomRow={(row) => {
const rowData = row.original;
if (rowData.code === 'custom_row') {
@@ -296,10 +320,13 @@ const FinanceClosingTable = ({
variant='bordered'
collapsible
className={{
wrapper: 'w-full',
wrapper: 'w-full rounded-lg border-none',
body: 'p-0',
title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
collapsible: 'rounded-lg',
}}
>
<div className='mt-6 p-0 mb-0'>
<div className='p-0'>
<Table<ProfitLossItem>
data={profitLossTableData}
isLoading={isLoading}
@@ -363,6 +390,25 @@ const FinanceClosingTable = ({
),
},
]}
className={{
containerClassName: 'w-full mb-0!',
tableWrapperClassName:
'overflow-x-auto rounded-tr-none rounded-tl-none',
tableClassName: 'w-full table-auto text-sm',
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
headerColumnClassName:
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
bodyRowClassName:
'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
bodyColumnClassName:
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
tableFooterClassName:
'bg-gray-100 font-semibold border border-gray-200',
footerRowClassName: 'border-t-2 border-gray-300',
footerColumnClassName:
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
paginationClassName: 'hidden',
}}
renderCustomRow={(row) => {
const rowData = row.original;
if (rowData.code === 'custom_row') {
@@ -404,9 +450,6 @@ const FinanceClosingTable = ({
}
return null;
}}
className={{
paginationClassName: 'hidden',
}}
renderFooter={isResponseSuccess(finance)}
/>
</div>