fix padding and margin table

src/pages/account/manage-account/ManageAccount.tsx

@@ -74,7 +74,7 @@ const ManageAccount = () => {
 
   return (
     <div>
-      <div className="container mx-auto p-5">
+      <div className="container mx-auto">
         <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Account</h1>
         <DataTable
           columns={columns}

src/pages/account/manage-currency/ManageCurrency.tsx

@@ -5,12 +5,13 @@ import AddDialog from './blocks/AddDialog';
 const ManageCurrency = () => {
   return (
     <ManageCurrencyContextProvider>
-      <Container>
+      <div className="container mx-auto">
+        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Currency</h1>
         <div className="grid gap-5 lg:gap-7.5">
           <DataGridInner />
         </div>
         <AddDialog />
-      </Container>
+      </div>
     </ManageCurrencyContextProvider>
   );
 };

src/pages/account/manage-currency/hooks/ManageCurrencyContext.tsx

@@ -220,9 +220,6 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode
   console.log(currencies);
   return (
     <div>
-      <div className="container mx-auto py-5">
-        <h1>Manage Currency</h1>
-      </div>
       <ManageCurrencyContext.Provider
         value={{
           showEditDialog,

src/pages/groups/ManageGroups.tsx

@@ -2,8 +2,19 @@ import { DataTable } from '@/components/ui/DataTable';
 import { columns, Group } from './Column';
 import { apiConfig } from '@/config/api.config';
 import axios, { AxiosResponse } from 'axios';
-import { DialogContent, MenuItem, Radio, RadioGroup, FormControlLabel, FormControl,
+import {
-  Dialog, DialogTitle, Typography, Button, Box } from '@mui/material';
+  DialogContent,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+  FormControl,
+  Dialog,
+  DialogTitle,
+  Typography,
+  Button,
+  Box
+} from '@mui/material';
 import { useState, useEffect } from 'react';
 // import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
@@ -21,7 +32,7 @@ let initGroup = {
   pin_length: '',
   max_pin_attempts: '',
   default_notification: ''
-}
+};
 
 const ManageGroups = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -33,7 +44,7 @@ const ManageGroups = () => {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   useEffect(() => {
-    fetchGroups()
+    fetchGroups();
   }, []);
 
   async function fetchGroups() {
@@ -47,29 +58,29 @@ const ManageGroups = () => {
           order_direction: 'ASC'
         }
       });
-      let temp = 1
+      let temp = 1;
       let resGroups = groups.data.data.list.map((el: any) => {
-        el.no = temp++
+        el.no = temp++;
-        return el
+        return el;
-      })
+      });
-      setDataGroup(resGroups)
+      setDataGroup(resGroups);
     } catch (error: any) {
-      alert(error.message)
+      alert(error.message);
       console.log(error);
     }
   }
 
   const openDialog = () => setIsDialogOpen(true);
   const closeDialog = () => {
-    setIsDialogOpen(false)
+    setIsDialogOpen(false);
-    setFormData(initGroup)
+    setFormData(initGroup);
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({
       ...formData,
       [e.target.name]: e.target.value
-    })
+    });
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -89,9 +100,9 @@ const ManageGroups = () => {
       groupName: group.name,
       status: group.status,
       description: group.description
-    })
+    });
     setDialogType('update');
-    setIsDialogOpen(true)
+    setIsDialogOpen(true);
   };
 
   const handleDelete = (group: any) => {
@@ -101,27 +112,27 @@ const ManageGroups = () => {
       groupName: group.name,
       status: group.status,
       description: group.description
-    })
+    });
     setDialogType('delete');
-    setDialogOpen(true)
+    setDialogOpen(true);
   };
 
   const handleYes = async () => {
     try {
       if (dialogType === 'create') {
         await axios.post(`${BASE_URL}/groups/create`, {
-          "name": formData.groupName,
+          name: formData.groupName,
-          "status": formData.status,
+          status: formData.status,
-          "created_at": new Date()
+          created_at: new Date()
-        })
+        });
       } else if (dialogType === 'update') {
         await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
-          "name": formData.groupName,
+          name: formData.groupName,
-          "status": formData.status,
+          status: formData.status,
-          "updated_at": new Date()
+          updated_at: new Date()
-        })
+        });
       } else if (dialogType === 'delete') {
-        await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`)
+        await axios.delete(`${BASE_URL}/groups/delete/${formData.id}/true`);
       }
       await fetchGroups();
       closeDialog();
@@ -135,26 +146,41 @@ const ManageGroups = () => {
 
   return (
     <div>
-      <div className="container mx-auto pt-2">
+      <div className="container mx-auto">
-      <ConfirmDialog
+        <ConfirmDialog
-        open={dialogOpen}
+          open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
+          onClose={() => setDialogOpen(false)}
-        title="Confirm Action"
+          title="Confirm Action"
-        content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
+          content={
-        onYes={handleYes}
+            `Are you sure you want to ` +
-        onNo={() => setDialogOpen(false)}
+            (dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
-      />
+          }
-        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
+          onYes={handleYes}
-        <DataTable data={dataGroup} columns={columns} createData={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
+          onNo={() => setDialogOpen(false)}
+        />
+        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Groups</h1>
+        <DataTable
+          data={dataGroup}
+          columns={columns}
+          createData={createGroup}
+          onUpdate={handleUpdate}
+          onDelete={handleDelete}
+        />
         <Dialog open={isDialogOpen} onClose={closeDialog}>
           <DialogContent className="w-[600px]">
             <div className="flex justify-between">
               <DialogTitle>Create New Group</DialogTitle>
               <Box display="flex" justifyContent="flex-end">
-                <Button variant="outlined" sx={{ borderColor: "white", color: 'grey' }} onClick={closeDialog}><CloseIcon/></Button>
+                <Button
+                  variant="outlined"
+                  sx={{ borderColor: 'white', color: 'grey' }}
+                  onClick={closeDialog}
+                >
+                  <CloseIcon />
+                </Button>
               </Box>
             </div>
-            <Divider/>
+            <Divider />
             <div className="p-5 mt-5">
               <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full">
                 <div className="grid grid-cols-4 items-center gap-4 w-full">
@@ -174,9 +200,19 @@ const ManageGroups = () => {
                     <span className="text-red-500">*</span>Active Status:
                   </label>
                   <FormControl>
-                    <RadioGroup name='status' row value={formData.status} onChange={handleChange}>
+                    <RadioGroup name="status" row value={formData.status} onChange={handleChange}>
-                      <FormControlLabel value="Y" checked={formData.status === 'Y'} control={<Radio />} label="Yes" />
+                      <FormControlLabel
-                      <FormControlLabel value="N" checked={formData.status === 'N'} control={<Radio />} label="No" />
+                        value="Y"
+                        checked={formData.status === 'Y'}
+                        control={<Radio />}
+                        label="Yes"
+                      />
+                      <FormControlLabel
+                        value="N"
+                        checked={formData.status === 'N'}
+                        control={<Radio />}
+                        label="No"
+                      />
                     </RadioGroup>
                   </FormControl>
                 </div>

src/pages/master/aldeias/AldeiasMaster.tsx

@@ -9,7 +9,7 @@ const AldeiasMaster = () => {
   return (
     <ManageAldeiasContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Aldeias</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Aldeias</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>

src/pages/master/sucos/SucosMaster.tsx

@@ -10,7 +10,7 @@ const SucosMaster = () => {
   return (
     <ManageSucosContextProvider>
       <Container>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Sucos</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">Sucos</h1>
         <Breadcrumbs sx={{ mb: 2 }}>
           <Link underline="none" color="inherit" href="/">
             <span className="text-sm hover:underline">Dashboard</span>

src/pages/members/kyc/Kyc.tsx

@@ -140,7 +140,7 @@ const Kyc = () => {
 
   return (
     <div>
-      <div className="container mx-auto py-5">
+      <div className="container mx-auto">
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
@@ -151,7 +151,7 @@ const Kyc = () => {
         />
         <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleReject={handleReject}
         handleSubmit={handleSubmit} initialData={member} viewStats={true} page={"kyc"}/>
-        <h1 className="text-xl font-medium leading-none text-gray-900 mb-7">Manage Member KYC</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Member KYC</h1>
         <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
       </div>
     </div>

src/pages/members/manage-members/ManageMembers.tsx

@@ -113,7 +113,7 @@ const ManageMembers = () => {
 
   return (
     <div>
-      <div className="container mx-auto p-5">
+      <div className="container mx-auto">
       <ConfirmDialog
         open={dialogOpen}
         onClose={() => setDialogOpen(false)}
@@ -123,7 +123,7 @@ const ManageMembers = () => {
         onNo={() => setDialogOpen(false)}
       />
         <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member}/>
-        <h1 className="text-xl font-medium leading-none text-gray-900">Manage Members</h1>
+        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Members</h1>
         <DataTable data={members} createData={createMember} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
       </div>
     </div>