mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE): Refactor table components for consistent styling and
cleanup
This commit is contained in:
rstubryan
@@ -179,7 +179,7 @@ const SapronakCalculationClosingTable = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-4 p-0 sm:p-3'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
{/* Table DOC jika kategori Project Flock Growing */}
|
||||
<Card
|
||||
title={
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { ChangeEventHandler, useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import { ColumnDef, SortingState } from '@tanstack/react-table';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Table from '@/components/Table';
|
||||
import Card from '@/components/Card';
|
||||
|
||||
@@ -76,10 +75,6 @@ const ClosingIncomingSapronaksSummaryTable = ({
|
||||
},
|
||||
];
|
||||
|
||||
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
updateFilter('search', e.target.value);
|
||||
};
|
||||
|
||||
// track sorting
|
||||
useEffect(() => {
|
||||
const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
|
||||
@@ -92,10 +87,10 @@ const ClosingIncomingSapronaksSummaryTable = ({
|
||||
}, [sorting, updateFilter]);
|
||||
|
||||
return (
|
||||
<div className='w-full p-0 sm:p-3'>
|
||||
<div className='w-full'>
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg border-none',
|
||||
wrapper: 'w-full rounded-lg',
|
||||
body: 'p-0',
|
||||
title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
|
||||
collapsible: 'rounded-lg',
|
||||
@@ -147,15 +142,14 @@ const ClosingIncomingSapronaksSummaryTable = ({
|
||||
rowSelection={rowSelection}
|
||||
setRowSelection={setRowSelection}
|
||||
className={{
|
||||
containerClassName: 'w-full mb-0!',
|
||||
containerClassName: 'w-full mb-5!',
|
||||
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',
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
|
||||
bodyRowClassName: 'hover:bg-gray-50 transition-colors',
|
||||
bodyColumnClassName:
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
||||
}}
|
||||
|
||||
@@ -116,10 +116,10 @@ const ClosingIncomingSapronaksTable = ({
|
||||
}, [sorting, updateFilter]);
|
||||
|
||||
return (
|
||||
<div className='w-full p-0 sm:p-3'>
|
||||
<div className='w-full'>
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg border-none',
|
||||
wrapper: 'w-full rounded-lg',
|
||||
body: 'p-0',
|
||||
title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
|
||||
collapsible: 'rounded-lg',
|
||||
@@ -129,7 +129,7 @@ const ClosingIncomingSapronaksTable = ({
|
||||
collapsible
|
||||
defaultCollapsed={false}
|
||||
>
|
||||
<div className='flex flex-col gap-2 mb-4'>
|
||||
<div className='flex flex-col gap-2 my-4'>
|
||||
<div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
|
||||
<DebouncedTextInput
|
||||
name='search'
|
||||
@@ -195,15 +195,14 @@ const ClosingIncomingSapronaksTable = ({
|
||||
rowSelection={rowSelection}
|
||||
setRowSelection={setRowSelection}
|
||||
className={{
|
||||
containerClassName: 'w-full mb-0!',
|
||||
containerClassName: 'w-full mb-5!',
|
||||
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',
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
|
||||
bodyRowClassName: 'hover:bg-gray-50 transition-colors',
|
||||
bodyColumnClassName:
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
||||
}}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { ChangeEventHandler, useEffect, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import useSWR from 'swr';
|
||||
import { ColumnDef, SortingState } from '@tanstack/react-table';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Table from '@/components/Table';
|
||||
import Card from '@/components/Card';
|
||||
|
||||
@@ -76,10 +75,6 @@ const ClosingOutgoingSapronaksSummaryTable = ({
|
||||
},
|
||||
];
|
||||
|
||||
const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
updateFilter('search', e.target.value);
|
||||
};
|
||||
|
||||
// track sorting
|
||||
useEffect(() => {
|
||||
const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
|
||||
@@ -92,7 +87,7 @@ const ClosingOutgoingSapronaksSummaryTable = ({
|
||||
}, [sorting, updateFilter]);
|
||||
|
||||
return (
|
||||
<div className='w-full p-0 sm:p-3'>
|
||||
<div className='w-full'>
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg border-none',
|
||||
@@ -147,15 +142,14 @@ const ClosingOutgoingSapronaksSummaryTable = ({
|
||||
rowSelection={rowSelection}
|
||||
setRowSelection={setRowSelection}
|
||||
className={{
|
||||
containerClassName: 'w-full mb-0!',
|
||||
containerClassName: 'w-full mb-5!',
|
||||
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',
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
|
||||
bodyRowClassName: 'hover:bg-gray-50 transition-colors',
|
||||
bodyColumnClassName:
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
||||
}}
|
||||
|
||||
@@ -116,10 +116,10 @@ const ClosingOutgoingSapronaksTable = ({
|
||||
}, [sorting, updateFilter]);
|
||||
|
||||
return (
|
||||
<div className='w-full p-0 sm:p-3'>
|
||||
<div className='w-full'>
|
||||
<Card
|
||||
className={{
|
||||
wrapper: 'w-full rounded-lg border-none',
|
||||
wrapper: 'w-full rounded-lg',
|
||||
body: 'p-0',
|
||||
title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
|
||||
collapsible: 'rounded-lg',
|
||||
@@ -129,7 +129,7 @@ const ClosingOutgoingSapronaksTable = ({
|
||||
collapsible
|
||||
defaultCollapsed={false}
|
||||
>
|
||||
<div className='flex flex-col gap-2 mb-4'>
|
||||
<div className='flex flex-col gap-2 my-4'>
|
||||
<div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
|
||||
<DebouncedTextInput
|
||||
name='search'
|
||||
@@ -195,15 +195,14 @@ const ClosingOutgoingSapronaksTable = ({
|
||||
rowSelection={rowSelection}
|
||||
setRowSelection={setRowSelection}
|
||||
className={{
|
||||
containerClassName: 'w-full mb-0!',
|
||||
containerClassName: 'w-full mb-5!',
|
||||
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',
|
||||
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border-b border-gray-200',
|
||||
bodyRowClassName: 'hover:bg-gray-50 transition-colors',
|
||||
bodyColumnClassName:
|
||||
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user