fix padding and margin table

This commit is contained in:
Wikzyy
2025-03-19 11:23:10 +07:00
parent 0904c612e9
commit cc5332eee8
8 changed files with 89 additions and 55 deletions

View File

@ -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}

View File

@ -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>
);
};

View File

@ -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,

View File

@ -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,
Dialog, DialogTitle, Typography, Button, Box } from '@mui/material';
import {
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);
@ -31,9 +42,9 @@ const ManageGroups = () => {
const [pageSize, setPageSize] = useState(10);
const [dialogType, setDialogType] = useState('');
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++
return el
})
setDataGroup(resGroups)
el.no = temp++;
return el;
});
setDataGroup(resGroups);
} catch (error: any) {
alert(error.message)
alert(error.message);
console.log(error);
}
}
const openDialog = () => setIsDialogOpen(true);
const closeDialog = () => {
setIsDialogOpen(false)
setFormData(initGroup)
setIsDialogOpen(false);
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,
"status": formData.status,
"created_at": new Date()
})
name: formData.groupName,
status: formData.status,
created_at: new Date()
});
} else if (dialogType === 'update') {
await axios.put(`${BASE_URL}/groups/update/${formData.id}`, {
"name": formData.groupName,
"status": formData.status,
"updated_at": new Date()
})
name: formData.groupName,
status: formData.status,
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">
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
onYes={handleYes}
onNo={() => setDialogOpen(false)}
/>
<h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
<DataTable data={dataGroup} columns={columns} createData={createGroup} onUpdate={handleUpdate} onDelete={handleDelete} />
<div className="container mx-auto">
<ConfirmDialog
open={dialogOpen}
onClose={() => setDialogOpen(false)}
title="Confirm Action"
content={
`Are you sure you want to ` +
(dialogType === 'create' ? 'create?' : dialogType === 'update' ? 'update?' : 'delete?')
}
onYes={handleYes}
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}>
<FormControlLabel value="Y" checked={formData.status === 'Y'} control={<Radio />} label="Yes" />
<FormControlLabel value="N" checked={formData.status === 'N'} control={<Radio />} label="No" />
<RadioGroup name="status" row value={formData.status} onChange={handleChange}>
<FormControlLabel
value="Y"
checked={formData.status === 'Y'}
control={<Radio />}
label="Yes"
/>
<FormControlLabel
value="N"
checked={formData.status === 'N'}
control={<Radio />}
label="No"
/>
</RadioGroup>
</FormControl>
</div>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>