TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pading and pagination on Manage Members

Browse Source
This commit is contained in:
Wikzyy
2025-04-15 19:36:35 +07:00
parent a247afdea3
commit f71b203eb7
1 changed files with 51 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -7,7 +7,7 @@ import axios from 'axios';
import DetailMember from './blocks/DetailMember';
import ConfirmDialog from '@/components/confirm';
import { useAuthContext } from '@/auth';
import { DataGridInner, LoaderTransparant } from '@/components';
import { Container, DataGridInner, LoaderTransparant } from '@/components';
import { DataGridProvider } from '@/components';
import { toast } from 'sonner';
import { Breadcrumbs, Link } from '@mui/material';
@ -188,67 +188,59 @@ const ManageMembers = () => {
<Helmet>
<title>TPAY | Manage Members</title>
</Helmet>
<div>
<div className="container mx-auto w-full">
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
<Container>
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to ${dialogType}?`}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
/>
{member.id !== '' || dialogType === 'create' ? (
<DetailMember
showAddDialog={isDialogOpen}
setShowAddDialog={setShowAddDialog}
handleClose={closeDialog}
handleSubmit={handleSubmit}
initialData={member}
fetchCustomers={fetchCustomers}
profession={profession}
dialogType={dialogType}
/>
{member.id !== '' || dialogType === 'create' ? (
<DetailMember
showAddDialog={isDialogOpen}
setShowAddDialog={setShowAddDialog}
handleClose={closeDialog}
handleSubmit={handleSubmit}
initialData={member}
fetchCustomers={fetchCustomers}
profession={profession}
dialogType={dialogType}
/>
) : (
''
)}
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
Manage Members
</h1>
<div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
<Breadcrumbs>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Members</span>
</Link>
) : (
''
)}
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Manage Members</h1>
<Breadcrumbs>
<Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Members</span>
</Link>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Members</span>
</Link>
</Breadcrumbs>
</div>
<div className="w-full overflow-x-auto px-4">
<div className="min-w-[800px]">
<DataGridProvider
data={members}
columns={getColumns(handleUpdate)}
layout={{ card: true }}
serverSide={false}
toolbar={
<ListToolbar createMember={createMember} />
}
onRowSelectionChange={(selected, table: any) => {
const selectedRow = table.getSelectedRowModel().rows[0];
if (selectedRow) handleUpdate(selectedRow.original);
}}
>
</DataGridProvider>
</div>
</div>
<Link underline="none" color="inherit">
<span className="text-sm">Manage Members</span>
</Link>
</Breadcrumbs>
{/* <div className="w-full overflow-x-auto px-4"> */}
<div className="grid gap-5 lg:gap-7.5 mt-5">
<DataGridProvider
data={members}
pagination={{ size: 25 }}
columns={getColumns(handleUpdate)}
layout={{ card: true }}
serverSide={false}
toolbar={<ListToolbar createMember={createMember} />}
onRowSelectionChange={(selected, table: any) => {
const selectedRow = table.getSelectedRowModel().rows[0];
if (selectedRow) handleUpdate(selectedRow.original);
}}
></DataGridProvider>
</div>
</div>
{/* </div> */}
</Container>
</>
);
};