From f71b203eb7552f3e2c75178a0b28a96e4a9d4da5 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 15 Apr 2025 19:36:35 +0700
Subject: [PATCH] update pading and pagination on Manage Members

---
 .../members/manage-members/ManageMembers.tsx  | 110 ++++++++----------
 1 file changed, 51 insertions(+), 59 deletions(-)

diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index 0203ab4..8d27979 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -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>
     </>
   );
 };