Implemented Notification feature and made changes in ui of view modal
This commit is contained in:
jaanvi
commit
cadad61747
26
package-lock.json
generated
26
package-lock.json
generated
|
|
@ -11,13 +11,14 @@
|
|||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^6.3.0",
|
||||
"@mui/material": "^6.3.0",
|
||||
"@mui/material": "^6.4.4",
|
||||
"@mui/x-charts": "^7.23.2",
|
||||
"@mui/x-data-grid": "^7.23.5",
|
||||
"@mui/x-date-pickers": "^7.23.3",
|
||||
"@mui/x-date-pickers": "^7.27.0",
|
||||
"@mui/x-tree-view": "^7.23.2",
|
||||
"@react-spring/web": "^9.7.5",
|
||||
"@reduxjs/toolkit": "^2.5.0",
|
||||
"@types/babel__core": "^7.20.5",
|
||||
"AdapterDayjs": "file:@mui/x-date-pickers/AdapterDayjs",
|
||||
"add": "^2.0.6",
|
||||
"AppBar": "file:@mui/material/AppBar",
|
||||
|
|
@ -40,7 +41,6 @@
|
|||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.1.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-toastify": "^11.0.2",
|
||||
"RichTreeView": "file:@mui/x-tree-view/RichTreeView",
|
||||
"sonner": "^1.7.4",
|
||||
"Stack": "file:@mui/material/Stack",
|
||||
|
|
@ -3545,9 +3545,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/x-date-pickers": {
|
||||
"version": "7.26.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.26.0.tgz",
|
||||
"integrity": "sha512-bhSDce1b5MBYYlCdHQJBThe10LGTE3D/u53TDQ41+IRj+iiNCun8jivw3DxKhmoBxlB+hVdkcltpTtIGlPjQZQ==",
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.27.0.tgz",
|
||||
"integrity": "sha512-wSx8JGk4WQ2hTObfQITc+zlmUKNleQYoH1hGocaQlpWpo1HhauDtcQfX6sDN0J0dPT2eeyxDWGj4uJmiSfQKcw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.25.7",
|
||||
|
|
@ -15299,19 +15299,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-toastify": {
|
||||
"version": "11.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.3.tgz",
|
||||
"integrity": "sha512-cbPtHJPfc0sGqVwozBwaTrTu1ogB9+BLLjd4dDXd863qYLj7DGrQ2sg5RAChjFUB4yc3w8iXOtWcJqPK/6xqRQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18 || ^19",
|
||||
"react-dom": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
|
|
@ -17703,6 +17690,7 @@
|
|||
"version": "5.7.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
|
||||
"integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
|
|
|
|||
22
package.json
22
package.json
|
|
@ -6,18 +6,25 @@
|
|||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^6.3.0",
|
||||
"@mui/material": "^6.3.0",
|
||||
"@mui/material": "^6.4.4",
|
||||
"@mui/x-charts": "^7.23.2",
|
||||
"@mui/x-data-grid": "^7.23.5",
|
||||
"@mui/x-date-pickers": "^7.23.3",
|
||||
"@mui/x-date-pickers": "^7.27.0",
|
||||
"@mui/x-tree-view": "^7.23.2",
|
||||
"@react-spring/web": "^9.7.5",
|
||||
"@reduxjs/toolkit": "^2.5.0",
|
||||
"@types/babel__core": "^7.20.5",
|
||||
"AdapterDayjs": "file:@mui/x-date-pickers/AdapterDayjs",
|
||||
"add": "^2.0.6",
|
||||
"AppBar": "file:@mui/material/AppBar",
|
||||
"axios": "^1.7.9",
|
||||
"Box": "file:@mui/material/Box",
|
||||
"PieChart": "file:@mui/x-charts/PieChart",
|
||||
"RichTreeView": "file:@mui/x-tree-view/RichTreeView",
|
||||
"Stack": "file:@mui/material/Stack",
|
||||
"Tabs": "file:@mui/material/Tabs",
|
||||
"Toolbar": "file:@mui/material/Toolbar",
|
||||
"Typography": "file:@mui/material/Typography",
|
||||
"add": "^2.0.6",
|
||||
"axios": "^1.7.9",
|
||||
"clsx": "^2.1.1",
|
||||
"cra-template-typescript": "1.2.0",
|
||||
"dayjs": "^1.11.13",
|
||||
|
|
@ -25,7 +32,6 @@
|
|||
"hooks": "file:@mui/x-charts/hooks",
|
||||
"mui-phone-number": "^3.0.3",
|
||||
"mui-tel-input": "^7.0.0",
|
||||
"PieChart": "file:@mui/x-charts/PieChart",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.0.0",
|
||||
"react-cookie": "^7.2.2",
|
||||
|
|
@ -35,14 +41,8 @@
|
|||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.1.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-toastify": "^11.0.2",
|
||||
"RichTreeView": "file:@mui/x-tree-view/RichTreeView",
|
||||
"sonner": "^1.7.4",
|
||||
"Stack": "file:@mui/material/Stack",
|
||||
"styles": "file:@mui/material/styles",
|
||||
"Tabs": "file:@mui/material/Tabs",
|
||||
"Toolbar": "file:@mui/material/Toolbar",
|
||||
"Typography": "file:@mui/material/Typography",
|
||||
"web-vitals": "^4.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
10953
pnpm-lock.yaml
10953
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
139
src/components/AddAdmin/index.tsx
Normal file
139
src/components/AddAdmin/index.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
// import React from "react";
|
||||
// import {
|
||||
// Button,
|
||||
// Dialog,
|
||||
// DialogActions,
|
||||
// DialogContent,
|
||||
// DialogTitle,
|
||||
// TextField,
|
||||
// } from "@mui/material";
|
||||
// import { useForm, Controller } from "react-hook-form";
|
||||
|
||||
// interface AddAdminModalProps {
|
||||
// open: boolean;
|
||||
// handleClose: () => void;
|
||||
// handleAdd: (name: string, email: string, phone: string, registeredAddress: string) => void;
|
||||
// }
|
||||
|
||||
// interface FormData {
|
||||
// name: string;
|
||||
// email: string;
|
||||
// phone: string;
|
||||
// registeredAddress: string;
|
||||
// }
|
||||
|
||||
// const AddAdminModal: React.FC<AddAdminModalProps> = ({ open, handleClose, handleAdd }) => {
|
||||
// const { control, handleSubmit, reset, formState: { errors } } = useForm<FormData>({
|
||||
// defaultValues: {
|
||||
// name: "",
|
||||
// email: "",
|
||||
// phone: "",
|
||||
// registeredAddress: "",
|
||||
// },
|
||||
// });
|
||||
|
||||
// const onSubmit = (data: FormData) => {
|
||||
// handleAdd(data.name, data.email, data.phone, data.registeredAddress);
|
||||
// handleClose();
|
||||
// reset();
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Dialog
|
||||
// open={open}
|
||||
// onClose={handleClose}
|
||||
// maxWidth="md"
|
||||
// fullWidth
|
||||
// PaperProps={{
|
||||
// component: "form",
|
||||
// onSubmit: handleSubmit(onSubmit),
|
||||
// }}
|
||||
// >
|
||||
// <DialogTitle>Add Admin</DialogTitle>
|
||||
// <DialogContent>
|
||||
// <Controller
|
||||
// name="name"
|
||||
// control={control}
|
||||
// rules={{ required: "Admin Name is required" }}
|
||||
// render={({ field }) => (
|
||||
// <TextField
|
||||
// {...field}
|
||||
// autoFocus
|
||||
// required
|
||||
// margin="dense"
|
||||
// label="Admin Name"
|
||||
// type="text"
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// error={!!errors.name}
|
||||
// helperText={errors.name?.message}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// <Controller
|
||||
// name="email"
|
||||
// control={control}
|
||||
// rules={{ required: "Email is required" }}
|
||||
// render={({ field }) => (
|
||||
// <TextField
|
||||
// {...field}
|
||||
// required
|
||||
// margin="dense"
|
||||
// label="Email"
|
||||
// type="text"
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// error={!!errors.email}
|
||||
// helperText={errors.email?.message}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// <Controller
|
||||
// name="phone"
|
||||
// control={control}
|
||||
// rules={{ required: "Phone number is required" }}
|
||||
// render={({ field }) => (
|
||||
// <TextField
|
||||
// {...field}
|
||||
// required
|
||||
// margin="dense"
|
||||
// label="Phone Number"
|
||||
// type="text"
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// error={!!errors.phone}
|
||||
// helperText={errors.phone?.message}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// <Controller
|
||||
// name="registeredAddress"
|
||||
// control={control}
|
||||
// rules={{ required: "Address is required" }}
|
||||
// render={({ field }) => (
|
||||
// <TextField
|
||||
// {...field}
|
||||
// required
|
||||
// margin="dense"
|
||||
// label="Address"
|
||||
// type="text"
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// error={!!errors.registeredAddress}
|
||||
// helperText={errors.registeredAddress?.message}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
// </DialogContent>
|
||||
// <DialogActions>
|
||||
// <Button onClick={handleClose}>Cancel</Button>
|
||||
// <Button type="submit">Save</Button>
|
||||
// </DialogActions>
|
||||
// </Dialog>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default AddAdminModal;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
|
|
@ -7,12 +8,14 @@ import {
|
|||
DialogTitle,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
|
||||
//By Jaanvi : Edit Model :: 11-feb-25
|
||||
interface AddEditCategoryModalProps {
|
||||
open: boolean;
|
||||
handleClose: () => void;
|
||||
handleCreate: (data: FormData) => void;
|
||||
handleUpdate: (
|
||||
id: string,
|
||||
name: string,
|
||||
|
|
@ -21,7 +24,6 @@ interface AddEditCategoryModalProps {
|
|||
registeredAddress: string
|
||||
) => void;
|
||||
editRow: any;
|
||||
handleAdd: Function;
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
|
|
@ -34,9 +36,9 @@ interface FormData {
|
|||
const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
||||
open,
|
||||
handleClose,
|
||||
editRow,
|
||||
handleCreate,
|
||||
handleUpdate,
|
||||
handleAdd,
|
||||
editRow,
|
||||
}) => {
|
||||
const {
|
||||
control,
|
||||
|
|
@ -63,13 +65,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
|||
data.registeredAddress
|
||||
);
|
||||
} else {
|
||||
// Call handleAdd if adding new admin
|
||||
handleAdd(
|
||||
data.name,
|
||||
data.email,
|
||||
data.phone,
|
||||
data.registeredAddress
|
||||
);
|
||||
handleCreate(data);
|
||||
}
|
||||
handleClose();
|
||||
reset();
|
||||
|
|
@ -78,9 +74,8 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
|||
useEffect(() => {
|
||||
if (editRow) {
|
||||
setValue("name", editRow.name);
|
||||
setValue("email", editRow.role);
|
||||
setValue("phone", editRow.phone);
|
||||
setValue("email", editRow.email);
|
||||
setValue("phone", editRow.phone);
|
||||
setValue("registeredAddress", editRow.registeredAddress);
|
||||
} else {
|
||||
reset();
|
||||
|
|
@ -88,114 +83,156 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
|
|||
}, [editRow, setValue, reset]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
component: "form",
|
||||
onSubmit: handleSubmit(onSubmit),
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
component: "form",
|
||||
onSubmit: handleSubmit(onSubmit),
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<DialogTitle>{editRow ? "Edit" : "Add"} Admin</DialogTitle>
|
||||
<DialogContent>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Admin Name is required",
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
autoFocus
|
||||
required
|
||||
margin="dense"
|
||||
label="Admin Name"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.name}
|
||||
helperText={errors.name?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{editRow ? "Edit Admin" : "Add Admin"}
|
||||
<Box
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Email is required",
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
margin="dense"
|
||||
label="Email"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.email}
|
||||
helperText={errors.email?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="phone"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Phone no. is required",
|
||||
pattern: {
|
||||
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
|
||||
message: "Invalid Phone Number",
|
||||
},
|
||||
maxLength:{
|
||||
value:10,
|
||||
message:"Phone no must be 10 digits"
|
||||
}
|
||||
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
margin="dense"
|
||||
label="Phone"
|
||||
type="tel"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.phone}
|
||||
helperText={errors.phone?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="registeredAddress"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Address is required",
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
margin="dense"
|
||||
label="Address"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.registeredAddress}
|
||||
helperText={errors.registeredAddress?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose}>Cancel</Button>
|
||||
<Button type="submit">Save</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
<DialogContent>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Admin Name is required",
|
||||
minLength: {
|
||||
value: 3,
|
||||
message: "Minimum 3 characters required",
|
||||
},
|
||||
maxLength: {
|
||||
value: 30,
|
||||
message: "Maximum 30 characters allowed",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
autoFocus
|
||||
required
|
||||
margin="dense"
|
||||
label="Admin Name"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.name}
|
||||
helperText={errors.name?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Email is required",
|
||||
pattern: {
|
||||
value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
||||
message: "Invalid email address",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
required
|
||||
margin="dense"
|
||||
label="Email"
|
||||
type="email"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.email}
|
||||
helperText={errors.email?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="phone"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Phone number is required",
|
||||
pattern: {
|
||||
value: /^[0-9]*$/,
|
||||
message: "Only numbers are allowed",
|
||||
},
|
||||
minLength: {
|
||||
value: 6,
|
||||
message: "Phone number must be exactly 6 digits",
|
||||
},
|
||||
maxLength: {
|
||||
value: 14,
|
||||
message: "Phone number must be exactly 14 digits",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
required
|
||||
margin="dense"
|
||||
label="Phone Number"
|
||||
type="tel"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.phone}
|
||||
helperText={errors.phone?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="registeredAddress"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Address is required",
|
||||
maxLength: {
|
||||
value: 100,
|
||||
message: "Address cannot exceed 100 characters",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
{...field}
|
||||
required
|
||||
margin="dense"
|
||||
label="Address"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
error={!!errors.registeredAddress}
|
||||
helperText={errors.registeredAddress?.message}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose}>Cancel</Button>
|
||||
<Button type="submit">{editRow ? "Update" : "Create"}</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,105 +1,112 @@
|
|||
import * as React from 'react';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import MuiToolbar from '@mui/material/Toolbar';
|
||||
import { tabsClasses } from '@mui/material/Tabs';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
|
||||
import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
|
||||
import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
|
||||
import MenuButton from '../MenuButton';
|
||||
import SideMenuMobile from '../SideMenuMobile';
|
||||
import * as React from "react";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import AppBar from "@mui/material/AppBar";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import MuiToolbar from "@mui/material/Toolbar";
|
||||
import { tabsClasses } from "@mui/material/Tabs";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
|
||||
import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
|
||||
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
|
||||
import MenuButton from "../MenuButton";
|
||||
import SideMenuMobile from "../SideMenuMobile";
|
||||
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
|
||||
|
||||
const Toolbar = styled(MuiToolbar)({
|
||||
width: '100%',
|
||||
padding: '12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'start',
|
||||
justifyContent: 'center',
|
||||
gap: '12px',
|
||||
flexShrink: 0,
|
||||
[`& ${tabsClasses.flexContainer}`]: {
|
||||
gap: '8px',
|
||||
p: '8px',
|
||||
pb: 0,
|
||||
},
|
||||
width: "100%",
|
||||
padding: "12px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
justifyContent: "center",
|
||||
gap: "12px",
|
||||
flexShrink: 0,
|
||||
[`& ${tabsClasses.flexContainer}`]: {
|
||||
gap: "8px",
|
||||
p: "8px",
|
||||
pb: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export default function AppNavbar() {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const toggleDrawer = (newOpen: boolean) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
const toggleDrawer = (newOpen: boolean) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
display: { xs: 'auto', md: 'none' },
|
||||
boxShadow: 0,
|
||||
bgcolor: 'background.paper',
|
||||
backgroundImage: 'none',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
top: 'var(--template-frame-height, 0px)',
|
||||
}}
|
||||
>
|
||||
<Toolbar variant="regular">
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
flexGrow: 1,
|
||||
width: '100%',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
sx={{ justifyContent: 'center', mr: 'auto' }}
|
||||
>
|
||||
<CustomIcon />
|
||||
<Typography variant="h4" component="h1" sx={{ color: 'text.primary' }}>
|
||||
Dashboard
|
||||
</Typography>
|
||||
</Stack>
|
||||
<ColorModeIconDropdown />
|
||||
<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
|
||||
<MenuRoundedIcon />
|
||||
</MenuButton>
|
||||
<SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
|
||||
</Stack>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
return (
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
display: { xs: "auto", md: "none" },
|
||||
boxShadow: 0,
|
||||
bgcolor: "background.paper",
|
||||
backgroundImage: "none",
|
||||
borderBottom: "1px solid",
|
||||
borderColor: "divider",
|
||||
top: "var(--template-frame-height, 0px)",
|
||||
}}
|
||||
>
|
||||
<Toolbar variant="regular">
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
flexGrow: 1,
|
||||
width: "100%",
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
sx={{ justifyContent: "center", mr: "auto" }}
|
||||
>
|
||||
<CustomIcon />
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h1"
|
||||
sx={{ color: "text.primary" }}
|
||||
>
|
||||
Dashboard
|
||||
</Typography>
|
||||
</Stack>
|
||||
<ColorModeIconDropdown />
|
||||
<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
|
||||
<MenuRoundedIcon />
|
||||
</MenuButton>
|
||||
|
||||
<SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
|
||||
</Stack>
|
||||
</Toolbar>
|
||||
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
export function CustomIcon() {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: '1.5rem',
|
||||
height: '1.5rem',
|
||||
bgcolor: 'black',
|
||||
borderRadius: '999px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
backgroundImage:
|
||||
'linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)',
|
||||
color: 'hsla(210, 100%, 95%, 0.9)',
|
||||
border: '1px solid',
|
||||
borderColor: 'hsl(210, 100%, 55%)',
|
||||
boxShadow: 'inset 0 2px 5px rgba(255, 255, 255, 0.3)',
|
||||
}}
|
||||
>
|
||||
<DashboardRoundedIcon color="inherit" sx={{ fontSize: '1rem' }} />
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "1.5rem",
|
||||
height: "1.5rem",
|
||||
bgcolor: "black",
|
||||
borderRadius: "999px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
alignSelf: "center",
|
||||
backgroundImage:
|
||||
"linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)",
|
||||
color: "hsla(210, 100%, 95%, 0.9)",
|
||||
border: "1px solid",
|
||||
borderColor: "hsl(210, 100%, 55%)",
|
||||
boxShadow: "inset 0 2px 5px rgba(255, 255, 255, 0.3)",
|
||||
}}
|
||||
>
|
||||
<DashboardRoundedIcon color="inherit" sx={{ fontSize: "1rem" }} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,21 +34,21 @@ function ButtonField(props: ButtonFieldProps) {
|
|||
inputProps: { 'aria-label': ariaLabel } = {},
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outlined"
|
||||
id={id}
|
||||
disabled={disabled}
|
||||
ref={ref}
|
||||
aria-label={ariaLabel}
|
||||
size="small"
|
||||
onClick={() => setOpen?.((prev) => !prev)}
|
||||
startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
|
||||
sx={{ minWidth: 'fit-content' }}
|
||||
>
|
||||
{label ? `${label}` : 'Pick a date'}
|
||||
</Button>
|
||||
);
|
||||
// return (
|
||||
// // <Button
|
||||
// // variant="outlined"
|
||||
// // id={id}
|
||||
// // disabled={disabled}
|
||||
// // ref={ref}
|
||||
// // aria-label={ariaLabel}
|
||||
// // size="small"
|
||||
// // onClick={() => setOpen?.((prev) => !prev)}
|
||||
// // startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
|
||||
// // sx={{ minWidth: 'fit-content' }}
|
||||
// // >
|
||||
// // {label ? `${label}` : 'Pick a date'}
|
||||
// // </Button>
|
||||
// );
|
||||
}
|
||||
|
||||
export default function CustomDatePicker() {
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ import {
|
|||
Menu,
|
||||
} from "@mui/material";
|
||||
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
||||
import DeleteModal from "../Modals/DeleteModal/DeleteModal";
|
||||
import DeleteModal from "../Modals/DeleteModal";
|
||||
import { AppDispatch } from "../../redux/store/store";
|
||||
import ViewModal from "../Modals/ViewModal/ViewModal";
|
||||
import ViewModal from "../Modals/ViewModal";
|
||||
|
||||
// Styled components for customization
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
|
|
@ -77,6 +77,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
const dispatch = useDispatch<AppDispatch>();
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
|
||||
|
|
@ -105,6 +106,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
|
||||
const handleViewButton = (id: string | undefined) => {
|
||||
if (!id) console.error("ID not found", id);
|
||||
|
||||
dispatch(adminList());
|
||||
setViewModal(false);
|
||||
};
|
||||
|
||||
|
|
|
|||
153
src/components/EditAdmin/index.tsx
Normal file
153
src/components/EditAdmin/index.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
// import React, { useEffect } from "react";
|
||||
// import {
|
||||
// Button,
|
||||
// Dialog,
|
||||
// DialogActions,
|
||||
// DialogContent,
|
||||
// DialogTitle,
|
||||
// TextField,
|
||||
// } from "@mui/material";
|
||||
// import { useForm, Controller } from "react-hook-form";
|
||||
|
||||
// interface EditAdminModalProps {
|
||||
// open: boolean;
|
||||
// handleClose: () => void;
|
||||
// handleUpdate: (id: string, name: string, email: string, phone: string, registeredAddress: string) => void;
|
||||
// editRow: any;
|
||||
// }
|
||||
|
||||
// interface FormData {
|
||||
// name: string;
|
||||
// email: string;
|
||||
// phone: string;
|
||||
// registeredAddress: string;
|
||||
// }
|
||||
|
||||
// const EditAdminModal: React.FC<EditAdminModalProps> = ({ open, handleClose, editRow, handleUpdate }) => {
|
||||
// const { control, handleSubmit, setValue, reset, formState: { errors } } = useForm<FormData>({
|
||||
// defaultValues: {
|
||||
// name: "",
|
||||
// email: "",
|
||||
// phone: "",
|
||||
// registeredAddress: "",
|
||||
// },
|
||||
// });
|
||||
|
||||
// useEffect(() => {
|
||||
// if (editRow) {
|
||||
// setValue("name", editRow.name);
|
||||
// setValue("email", editRow.email);
|
||||
// setValue("phone", editRow.phone);
|
||||
// setValue("registeredAddress", editRow.registeredAddress);
|
||||
// } else {
|
||||
// reset();
|
||||
// }
|
||||
// }, [editRow, setValue, reset]);
|
||||
|
||||
// const onSubmit = (data: FormData) => {
|
||||
// if (editRow) {
|
||||
// handleUpdate(editRow.id, data.name, data.email, data.phone, data.registeredAddress);
|
||||
// handleClose();
|
||||
// reset();
|
||||
// }
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Dialog
|
||||
// open={open}
|
||||
// onClose={handleClose}
|
||||
// maxWidth="md"
|
||||
// fullWidth
|
||||
// PaperProps={{
|
||||
// component: "form",
|
||||
// onSubmit: handleSubmit(onSubmit),
|
||||
// }}
|
||||
// >
|
||||
// <DialogTitle>Edit Admin</DialogTitle>
|
||||
// <DialogContent>
|
||||
// <Controller
|
||||
// name="name"
|
||||
// control={control}
|
||||
// rules={{ required: "Admin Name is required" }}
|
||||
// render={({ field }) => (
|
||||
// <TextField
|
||||
// {...field}
|
||||
// autoFocus
|
||||
// required
|
||||
// margin="dense"
|
||||
// label="Admin Name"
|
||||
// type="text"
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// error={!!errors.name}
|
||||
// helperText={errors.name?.message}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// <Controller
|
||||
// name="email"
|
||||
// control={control}
|
||||
// rules={{ required: "Email is required" }}
|
||||
// render={({ field }) => (
|
||||
// <TextField
|
||||
// {...field}
|
||||
// required
|
||||
// margin="dense"
|
||||
// label="Email"
|
||||
// type="text"
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// error={!!errors.email}
|
||||
// helperText={errors.email?.message}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// <Controller
|
||||
// name="phone"
|
||||
// control={control}
|
||||
// rules={{ required: "Phone number is required" }}
|
||||
// render={({ field }) => (
|
||||
// <TextField
|
||||
// {...field}
|
||||
// required
|
||||
// margin="dense"
|
||||
// label="Phone Number"
|
||||
// type="text"
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// error={!!errors.phone}
|
||||
// helperText={errors.phone?.message}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
|
||||
// <Controller
|
||||
// name="registeredAddress"
|
||||
// control={control}
|
||||
// rules={{ required: "Address is required" }}
|
||||
// render={({ field }) => (
|
||||
// <TextField
|
||||
// {...field}
|
||||
// required
|
||||
// margin="dense"
|
||||
// label="Address"
|
||||
// type="text"
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// error={!!errors.registeredAddress}
|
||||
// helperText={errors.registeredAddress?.message}
|
||||
// />
|
||||
// )}
|
||||
// />
|
||||
// </DialogContent>
|
||||
// <DialogActions>
|
||||
// <Button onClick={handleClose}>Cancel</Button>
|
||||
// <Button type="submit">Save</Button>
|
||||
// </DialogActions>
|
||||
// </Dialog>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default EditAdminModal;
|
||||
|
|
@ -1,36 +1,63 @@
|
|||
import * as React from 'react';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
|
||||
import CustomDatePicker from '../CustomDatePicker';
|
||||
import NavbarBreadcrumbs from '../NavbarBreadcrumbs';
|
||||
import MenuButton from '../MenuButton';
|
||||
import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
|
||||
|
||||
import Search from '../Search';
|
||||
import * as React from "react";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
|
||||
import CustomDatePicker from "../CustomDatePicker";
|
||||
import NavbarBreadcrumbs from "../NavbarBreadcrumbs";
|
||||
import MenuButton from "../MenuButton";
|
||||
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Search from "../Search";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
width: '100%',
|
||||
alignItems: { xs: 'flex-start', md: 'center' },
|
||||
justifyContent: 'space-between',
|
||||
maxWidth: { sm: '100%', md: '1700px' },
|
||||
pt: 1.5,
|
||||
}}
|
||||
spacing={2}
|
||||
>
|
||||
<NavbarBreadcrumbs />
|
||||
<Stack direction="row" sx={{ gap: 1 }}>
|
||||
<Search />
|
||||
<CustomDatePicker />
|
||||
<MenuButton showBadge aria-label="Open notifications">
|
||||
<NotificationsRoundedIcon />
|
||||
</MenuButton>
|
||||
<ColorModeIconDropdown />
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
const [showNotifications, setShowNotifications] = React.useState(false);
|
||||
const toggleNotifications = () => {
|
||||
setShowNotifications((prev) => !prev);
|
||||
};
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
display: { xs: "none", md: "flex" },
|
||||
width: "100%",
|
||||
alignItems: { xs: "flex-start", md: "center" },
|
||||
justifyContent: "space-between",
|
||||
maxWidth: { sm: "100%", md: "1700px" },
|
||||
pt: 1.5,
|
||||
}}
|
||||
spacing={2}
|
||||
>
|
||||
<NavbarBreadcrumbs />
|
||||
<Stack direction="row" sx={{ gap: 1 }}>
|
||||
<Search />
|
||||
<CustomDatePicker />
|
||||
<MenuButton
|
||||
showBadge
|
||||
aria-label="Open notifications"
|
||||
onClick={toggleNotifications}
|
||||
>
|
||||
<NotificationsRoundedIcon />
|
||||
</MenuButton>
|
||||
<ColorModeIconDropdown />
|
||||
</Stack>
|
||||
{showNotifications && (
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
position: "absolute",
|
||||
top: "55px", // Adjust this value according to your AppBar height
|
||||
right: "66px",
|
||||
bgcolor: "lightblue",
|
||||
boxShadow: 1,
|
||||
borderRadius: 1,
|
||||
zIndex: 1300,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No notifications yet
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
35
src/components/LogOutFunction/LogOutFunction.tsx
Normal file
35
src/components/LogOutFunction/LogOutFunction.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Logout.tsx
|
||||
import React from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import LogoutModal from "../Modals/LogOutModal";
|
||||
|
||||
interface LogoutProps {
|
||||
setLogoutModal: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
logoutModal: boolean;
|
||||
}
|
||||
|
||||
const Logout: React.FC<LogoutProps> = ({ setLogoutModal, logoutModal }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handlelogout = () => {
|
||||
localStorage.clear();
|
||||
navigate("/auth/login");
|
||||
toast.success("Logged out successfully");
|
||||
setLogoutModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{logoutModal && (
|
||||
<LogoutModal
|
||||
handlelogout={handlelogout}
|
||||
open={logoutModal}
|
||||
setLogoutModal={setLogoutModal}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logout;
|
||||
|
|
@ -74,21 +74,6 @@ export default function MainGrid() {
|
|||
<PageViewsBarChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
||||
Details
|
||||
</Typography>
|
||||
<Grid container spacing={2} columns={12}>
|
||||
<Grid size={{ xs: 12, lg: 9 }}>
|
||||
<CustomizedDataGrid />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, lg: 3 }}>
|
||||
<Stack gap={2} direction={{ xs: 'column', sm: 'row', lg: 'column' }}>
|
||||
<CustomizedTreeView />
|
||||
<ChartUserByCountry />
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Copyright sx={{ my: 4 }} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
import * as React from 'react';
|
||||
import Badge, { badgeClasses } from '@mui/material/Badge';
|
||||
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
|
||||
import * as React from "react";
|
||||
import Badge, { badgeClasses } from "@mui/material/Badge";
|
||||
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
|
||||
|
||||
export interface MenuButtonProps extends IconButtonProps {
|
||||
showBadge?: boolean;
|
||||
showBadge?: boolean;
|
||||
}
|
||||
|
||||
export default function MenuButton({
|
||||
showBadge = false,
|
||||
...props
|
||||
showBadge = false,
|
||||
...props
|
||||
}: MenuButtonProps) {
|
||||
return (
|
||||
<Badge
|
||||
color="error"
|
||||
variant="dot"
|
||||
invisible={!showBadge}
|
||||
sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }}
|
||||
>
|
||||
<IconButton size="small" {...props} />
|
||||
</Badge>
|
||||
);
|
||||
return (
|
||||
<Badge
|
||||
color="error"
|
||||
variant="dot"
|
||||
invisible={!showBadge}
|
||||
sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }}
|
||||
>
|
||||
<IconButton size="small" {...props} />
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
|
|||
import ListItemText from "@mui/material/ListItemText";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
|
||||
import AnalyticsRoundedIcon from "@mui/icons-material/AnalyticsRounded";
|
||||
// import AnalyticsRoundedIcon from "@mui/icons-material/AnalyticsRounded";
|
||||
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
|
|
@ -17,7 +17,6 @@ const baseMenuItems = [
|
|||
icon: <HomeRoundedIcon />,
|
||||
url: "/panel/dashboard",
|
||||
},
|
||||
|
||||
// {
|
||||
// text: "Vehicles",
|
||||
// icon: <AnalyticsRoundedIcon />,
|
||||
|
|
|
|||
98
src/components/Modals/DeleteModal/index.tsx
Normal file
98
src/components/Modals/DeleteModal/index.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { Box, Button, Modal, Typography } from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
setDeleteModal: Function;
|
||||
handleDelete: (id: string | undefined) => void;
|
||||
id?: string | undefined;
|
||||
};
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 330,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: 1.5,
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
};
|
||||
|
||||
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
|
||||
|
||||
export default function DeleteModal({
|
||||
open,
|
||||
setDeleteModal,
|
||||
handleDelete,
|
||||
id,
|
||||
}: Props) {
|
||||
// console.log("DeleteModal opened with ID:", id)
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
align="center"
|
||||
sx={{ flexGrow: 1 }} // This ensures the title takes up available space
|
||||
>
|
||||
Delete Record
|
||||
</Typography>
|
||||
<Box
|
||||
onClick={() => setDeleteModal(false)}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end", // Aligns the close icon to the right
|
||||
marginTop: -3.5
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
<Typography
|
||||
id="modal-modal-description"
|
||||
sx={{ mt: 2 }}
|
||||
align="center"
|
||||
>
|
||||
Are you sure you want to delete this record?
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mt: 4,
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
type="button"
|
||||
sx={btnStyle}
|
||||
onClick={() => setDeleteModal(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="button"
|
||||
color="primary"
|
||||
sx={btnStyle}
|
||||
onClick={() => handleDelete(id || "")}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import { Box, Button, Modal, Typography } from "@mui/material"
|
||||
|
||||
import { Box, Button, Modal, Typography } from "@mui/material";
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
setDeleteModal: Function
|
||||
handleDelete: (id: string | undefined) => void
|
||||
id?: string | undefined
|
||||
}
|
||||
|
||||
open: boolean;
|
||||
setLogoutModal: Function;
|
||||
handlelogout: any;
|
||||
};
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
|
|
@ -17,18 +17,15 @@ const style = {
|
|||
borderRadius: 1.5,
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
}
|
||||
|
||||
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" }
|
||||
|
||||
export default function DeleteModal({
|
||||
};
|
||||
|
||||
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
|
||||
|
||||
export default function LogoutModal({
|
||||
open,
|
||||
setDeleteModal,
|
||||
handleDelete,
|
||||
id,
|
||||
setLogoutModal,
|
||||
handlelogout,
|
||||
}: Props) {
|
||||
// console.log("DeleteModal opened with ID:", id)
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
|
|
@ -36,20 +33,20 @@ export default function DeleteModal({
|
|||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
align="center"
|
||||
>
|
||||
Delete Record
|
||||
</Typography>
|
||||
<Typography id="modal-title" variant="h5" fontWeight="bold" sx={{ width: "100%" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
|
||||
<Box sx={{ flex: 1, textAlign: "center" }}>Logout</Box>
|
||||
<Box onClick={() => setLogoutModal(false)} sx={{ cursor: "pointer", display: "flex", alignItems: "center" }}>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
</Typography>
|
||||
<Typography
|
||||
id="modal-modal-description"
|
||||
sx={{ mt: 2 }}
|
||||
align="center"
|
||||
>
|
||||
Are you sure you want to delete this record?
|
||||
Are you sure you want to Logout?
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -64,7 +61,7 @@ export default function DeleteModal({
|
|||
color="error"
|
||||
type="button"
|
||||
sx={btnStyle}
|
||||
onClick={() => setDeleteModal(false)}
|
||||
onClick={() => setLogoutModal(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
|
@ -73,12 +70,12 @@ export default function DeleteModal({
|
|||
type="button"
|
||||
color="primary"
|
||||
sx={btnStyle}
|
||||
onClick={() => handleDelete(id || "")}
|
||||
onClick={() => handlelogout()}
|
||||
>
|
||||
Delete
|
||||
Logout
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
126
src/components/Modals/ViewModal/index.tsx
Normal file
126
src/components/Modals/ViewModal/index.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { Box, Button, Modal, Typography, Divider } from "@mui/material";
|
||||
import { RootState } from "../../../redux/store/store";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useEffect, useState } from "react";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
setViewModal: Function;
|
||||
id?: string;
|
||||
};
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 400,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: 2,
|
||||
boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
|
||||
p: 4,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: 2,
|
||||
};
|
||||
|
||||
const btnStyle = {
|
||||
mt: 2,
|
||||
px: 5,
|
||||
py: 1.2,
|
||||
width: "100%",
|
||||
textTransform: "capitalize",
|
||||
};
|
||||
|
||||
export default function ViewModal({ open, setViewModal, id }: Props) {
|
||||
const { admins } = useSelector((state: RootState) => state.adminReducer);
|
||||
const [selectedAdmin, setSelectedAdmin] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
const admin = admins.find((admin) => admin.id === id);
|
||||
setSelectedAdmin(admin);
|
||||
}
|
||||
}, [id, admins]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
aria-labelledby="modal-title"
|
||||
aria-describedby="modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography
|
||||
id="modal-title"
|
||||
variant="h5"
|
||||
fontWeight="bold"
|
||||
sx={{ width: "100%" }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: 1, textAlign: "center" }}>
|
||||
{selectedAdmin?.name}'s Details
|
||||
</Box>
|
||||
<Box
|
||||
onClick={() => setViewModal(false)}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
</Typography>
|
||||
|
||||
<Divider sx={{ width: "100%" }} />
|
||||
|
||||
{selectedAdmin ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: "80%",
|
||||
textAlign: "left",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 1.5,
|
||||
whiteSpace: "pre-wrap", // the text wraps properly
|
||||
wordBreak: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
<Typography variant="body1">
|
||||
<b>Name:</b> {selectedAdmin.name}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<strong>Email:</strong> {selectedAdmin.email}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<strong>Phone:</strong> {selectedAdmin.phone}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<strong>Address:</strong>{" "}
|
||||
{selectedAdmin.registeredAddress ?? "N/A"}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography align="center">
|
||||
No admin found with this ID
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{/* <Button variant="contained" color="error" sx={btnStyle} onClick={() => setViewModal(false)}>
|
||||
Close
|
||||
</Button> */}
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -12,108 +12,109 @@ import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
|||
import MenuButton from "../MenuButton";
|
||||
import { Avatar } from "@mui/material";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Logout from "../LogOut/logOutfunc";
|
||||
|
||||
import Logout from "../LogOutFunction/LogOutFunction";
|
||||
|
||||
const MenuItem = styled(MuiMenuItem)({
|
||||
margin: "2px 0",
|
||||
margin: "2px 0",
|
||||
});
|
||||
|
||||
|
||||
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event?.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
//Eknoor singh and jaanvi
|
||||
//date:- 12-Feb-2025
|
||||
//Made a navigation page for the profile page
|
||||
const navigate = useNavigate();
|
||||
const handleProfile = () => {
|
||||
navigate("/panel/profile");
|
||||
};
|
||||
|
||||
//jaanvi
|
||||
//date:- 13-Feb-2025
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<MenuButton
|
||||
aria-label="Open menu"
|
||||
onClick={handleClick}
|
||||
sx={{ borderColor: "transparent" }}
|
||||
>
|
||||
{avatar ? (
|
||||
<MoreVertRoundedIcon />
|
||||
) : (
|
||||
<Avatar
|
||||
sizes="small"
|
||||
alt="Riley Carter"
|
||||
src="/static/images/avatar/7.jpg"
|
||||
sx={{ width: 36, height: 36 }}
|
||||
/>
|
||||
)}
|
||||
</MenuButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
sx={{
|
||||
[`& .${listClasses.root}`]: {
|
||||
padding: "4px",
|
||||
},
|
||||
[`& .${paperClasses.root}`]: {
|
||||
padding: 0,
|
||||
},
|
||||
[`& .${dividerClasses.root}`]: {
|
||||
margin: "4px -4px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleProfile}>Profile</MenuItem>
|
||||
<MenuItem onClick={handleClose}>My account</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem onClick={handleClose}>Add another account</MenuItem>
|
||||
<MenuItem onClick={handleClose}>Settings</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
[`& .${listItemIconClasses.root}`]: {
|
||||
ml: "auto",
|
||||
minWidth: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* //Eknoor singh and jaanvi
|
||||
//date:- 13-Feb-2025
|
||||
//Implemented logout functionality which was static previously */}
|
||||
|
||||
<ListItemText
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setLogoutModal(true);
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</ListItemText>
|
||||
<Logout
|
||||
setLogoutModal={setLogoutModal}
|
||||
logoutModal={logoutModal}
|
||||
/>
|
||||
|
||||
<ListItemIcon>
|
||||
<LogoutRoundedIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</React.Fragment>
|
||||
);
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event?.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
//Eknoor singh and jaanvi
|
||||
//date:- 12-Feb-2025
|
||||
//Made a navigation page for the profile page
|
||||
const navigate = useNavigate();
|
||||
const handleProfile = () => {
|
||||
navigate("/panel/profile");
|
||||
};
|
||||
|
||||
//jaanvi
|
||||
//date:- 13-Feb-2025
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<MenuButton
|
||||
aria-label="Open menu"
|
||||
onClick={handleClick}
|
||||
sx={{ borderColor: "transparent" }}
|
||||
>
|
||||
{avatar ? (
|
||||
<MoreVertRoundedIcon />
|
||||
) : (
|
||||
<Avatar
|
||||
sizes="small"
|
||||
alt="Riley Carter"
|
||||
src="/static/images/avatar/7.jpg"
|
||||
sx={{ width: 36, height: 36 }}
|
||||
/>
|
||||
)}
|
||||
</MenuButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
sx={{
|
||||
[`& .${listClasses.root}`]: {
|
||||
padding: "4px",
|
||||
},
|
||||
[`& .${paperClasses.root}`]: {
|
||||
padding: 0,
|
||||
},
|
||||
[`& .${dividerClasses.root}`]: {
|
||||
margin: "4px -4px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleProfile}>Profile</MenuItem>
|
||||
<MenuItem onClick={handleClose}>My account</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem onClick={handleClose}>Add another account</MenuItem>
|
||||
<MenuItem onClick={handleClose}>Settings</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
[`& .${listItemIconClasses.root}`]: {
|
||||
ml: "auto",
|
||||
minWidth: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* //Eknoor singh and jaanvi
|
||||
//date:- 13-Feb-2025
|
||||
//Implemented logout functionality which was static previously */}
|
||||
|
||||
<ListItemText
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setLogoutModal(true);
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</ListItemText>
|
||||
<Logout
|
||||
setLogoutModal={setLogoutModal}
|
||||
logoutModal={logoutModal}
|
||||
/>
|
||||
|
||||
<ListItemIcon>
|
||||
<LogoutRoundedIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,73 +1,80 @@
|
|||
import * as React from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Drawer, { drawerClasses } from '@mui/material/Drawer';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
|
||||
import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
|
||||
import * as React from "react";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Button from "@mui/material/Button";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Drawer, { drawerClasses } from "@mui/material/Drawer";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
|
||||
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
|
||||
|
||||
import MenuButton from '../MenuButton';
|
||||
import MenuContent from '../MenuContent';
|
||||
import CardAlert from '../CardAlert/CardAlert';
|
||||
import MenuButton from "../MenuButton";
|
||||
import MenuContent from "../MenuContent";
|
||||
import CardAlert from "../CardAlert/CardAlert";
|
||||
|
||||
interface SideMenuMobileProps {
|
||||
open: boolean | undefined;
|
||||
toggleDrawer: (newOpen: boolean) => () => void;
|
||||
open: boolean | undefined;
|
||||
toggleDrawer: (newOpen: boolean) => () => void;
|
||||
}
|
||||
|
||||
export default function SideMenuMobile({ open, toggleDrawer }: SideMenuMobileProps) {
|
||||
return (
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={open}
|
||||
onClose={toggleDrawer(false)}
|
||||
sx={{
|
||||
zIndex: (theme) => theme.zIndex.drawer + 1,
|
||||
[`& .${drawerClasses.paper}`]: {
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: 'background.paper',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
sx={{
|
||||
maxWidth: '70dvw',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{ gap: 1, alignItems: 'center', flexGrow: 1, p: 1 }}
|
||||
>
|
||||
<Avatar
|
||||
sizes="small"
|
||||
alt="Riley Carter"
|
||||
src="/static/images/avatar/7.jpg"
|
||||
sx={{ width: 24, height: 24 }}
|
||||
/>
|
||||
<Typography component="p" variant="h6">
|
||||
Riley Carter
|
||||
</Typography>
|
||||
</Stack>
|
||||
<MenuButton showBadge>
|
||||
<NotificationsRoundedIcon />
|
||||
</MenuButton>
|
||||
</Stack>
|
||||
<Divider />
|
||||
<Stack sx={{ flexGrow: 1 }}>
|
||||
<MenuContent />
|
||||
<Divider />
|
||||
</Stack>
|
||||
<CardAlert />
|
||||
<Stack sx={{ p: 2 }}>
|
||||
<Button variant="outlined" fullWidth startIcon={<LogoutRoundedIcon />}>
|
||||
Logout
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Drawer>
|
||||
);
|
||||
export default function SideMenuMobile({
|
||||
open,
|
||||
toggleDrawer,
|
||||
}: SideMenuMobileProps) {
|
||||
return (
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={open}
|
||||
onClose={toggleDrawer(false)}
|
||||
sx={{
|
||||
zIndex: (theme) => theme.zIndex.drawer + 1,
|
||||
[`& .${drawerClasses.paper}`]: {
|
||||
backgroundImage: "none",
|
||||
backgroundColor: "background.paper",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
sx={{
|
||||
maxWidth: "70dvw",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{ gap: 1, alignItems: "center", flexGrow: 1, p: 1 }}
|
||||
>
|
||||
<Avatar
|
||||
sizes="small"
|
||||
alt="Riley Carter"
|
||||
src="/static/images/avatar/7.jpg"
|
||||
sx={{ width: 24, height: 24 }}
|
||||
/>
|
||||
<Typography component="p" variant="h6">
|
||||
Riley Carter
|
||||
</Typography>
|
||||
</Stack>
|
||||
<MenuButton showBadge>
|
||||
<NotificationsRoundedIcon />
|
||||
</MenuButton>
|
||||
</Stack>
|
||||
<Divider />
|
||||
<Stack sx={{ flexGrow: 1 }}>
|
||||
<MenuContent />
|
||||
<Divider />
|
||||
</Stack>
|
||||
<CardAlert />
|
||||
<Stack sx={{ p: 2 }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
startIcon={<LogoutRoundedIcon />}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,12 @@ root.render(
|
|||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
<Toaster position="top-right" richColors />
|
||||
<Toaster
|
||||
position="top-right"
|
||||
richColors
|
||||
closeButton
|
||||
duration={6000}
|
||||
/>
|
||||
</Provider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
|||
<Box
|
||||
component="main"
|
||||
sx={(theme) => ({
|
||||
display: "flex",
|
||||
height: '100vh',
|
||||
flexGrow: 1,
|
||||
backgroundColor: theme.vars
|
||||
? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
|
||||
|
|
@ -32,6 +34,10 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
|||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
justifyItems: "center",
|
||||
|
||||
alignItems: 'center',
|
||||
mx: 3,
|
||||
pb: 5,
|
||||
|
|
|
|||
|
|
@ -4,54 +4,73 @@ import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
|||
import { useForm } from "react-hook-form";
|
||||
import CustomTable, { Column } from "../../components/CustomTable";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector
|
||||
import ViewModal from "../../components/Modals/ViewModal/ViewModal";
|
||||
export default function AdminList() {
|
||||
const [modalOpen, setModalOpen,] = useState(false);
|
||||
const [viewModal, setViewOpen] = useState(false);
|
||||
import {
|
||||
adminList,
|
||||
updateAdmin,
|
||||
createAdmin,
|
||||
} from "../../redux/slices/adminSlice";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
|
||||
export default function AdminList() {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const { reset } = useForm();
|
||||
|
||||
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
|
||||
const [viewModal, setViewModal] = React.useState<boolean>(false);
|
||||
const [rowData, setRowData] = React.useState<any | null>(null);
|
||||
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
|
||||
// Fetching admin data from the Redux store
|
||||
const admins = useSelector((state: RootState) => state.adminReducer.admins);
|
||||
|
||||
// Dispatching the API call when the component mounts
|
||||
useEffect(() => {
|
||||
dispatch(adminList());
|
||||
}, [dispatch]);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setRowData(null); // Reset row data when opening for new admin
|
||||
setModalOpen(true);
|
||||
setViewOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setModalOpen(false);
|
||||
setViewOpen(false)
|
||||
setRowData(null);
|
||||
reset();
|
||||
};
|
||||
|
||||
const handleCreate = async (data: {
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
}) => {
|
||||
try {
|
||||
await dispatch(createAdmin(data));
|
||||
await dispatch(adminList()); // Refresh the list after creation
|
||||
handleCloseModal();
|
||||
} catch (error) {
|
||||
console.error("Creation failed", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (
|
||||
id: string,
|
||||
name: string,
|
||||
email: string,
|
||||
phone:string,
|
||||
registeredAddress:string
|
||||
phone: string,
|
||||
registeredAddress: string
|
||||
) => {
|
||||
try {
|
||||
await dispatch(
|
||||
updateAdmin({
|
||||
id, name, email, phone, registeredAddress,
|
||||
token: null
|
||||
id,
|
||||
name,
|
||||
email,
|
||||
phone,
|
||||
registeredAddress,
|
||||
})
|
||||
);
|
||||
await dispatch(adminList()); // Fetch updated admins list after update
|
||||
await dispatch(adminList());
|
||||
} catch (error) {
|
||||
console.error("Update failed", error);
|
||||
}
|
||||
|
|
@ -61,13 +80,11 @@ export default function AdminList() {
|
|||
{ id: "srno", label: "Sr No" },
|
||||
{ id: "name", label: "Name" },
|
||||
{ id: "email", label: "Email" },
|
||||
{ id: "phone", label: "Phone No" },
|
||||
{ id: "phone", label: "Phone" },
|
||||
{ id: "registeredAddress", label: "Address" },
|
||||
|
||||
{ id: "action", label: "Action", align: "center" },
|
||||
];
|
||||
|
||||
// If no admins are available, display the sample data
|
||||
const categoryRows = admins?.length
|
||||
? admins?.map(
|
||||
(
|
||||
|
|
@ -103,7 +120,6 @@ export default function AdminList() {
|
|||
},
|
||||
}}
|
||||
>
|
||||
{/* Title and Add Category button */}
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h6"
|
||||
|
|
@ -121,24 +137,23 @@ export default function AdminList() {
|
|||
</Button>
|
||||
</Box>
|
||||
|
||||
<CustomTable
|
||||
columns={categoryColumns}
|
||||
rows={categoryRows}
|
||||
setDeleteModal={setDeleteModal}
|
||||
deleteModal={deleteModal}
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
viewModal={viewModal}
|
||||
setViewModal={setViewOpen}
|
||||
/>
|
||||
|
||||
<CustomTable
|
||||
columns={categoryColumns}
|
||||
rows={categoryRows}
|
||||
setDeleteModal={setDeleteModal}
|
||||
deleteModal={deleteModal}
|
||||
setViewModal={setViewModal}
|
||||
viewModal={viewModal}
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
/>
|
||||
<AddEditCategoryModal
|
||||
open={modalOpen}
|
||||
handleClose={handleCloseModal}
|
||||
editRow={rowData}
|
||||
handleCreate={handleCreate}
|
||||
handleUpdate={handleUpdate}
|
||||
editRow={rowData}
|
||||
/>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -222,18 +222,24 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
</Link> */}
|
||||
</Box>
|
||||
{/* <Divider>or</Divider>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Typography sx={{ textAlign: 'center' }}>
|
||||
Don't have an account?{' '}
|
||||
<Link
|
||||
href="/auth/signup"
|
||||
variant="body2"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box> */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ textAlign: "center" }}>
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
href="/auth/signup"
|
||||
variant="body2"
|
||||
sx={{ alignSelf: "center" }}
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box> */}
|
||||
</Card>
|
||||
</SignInContainer>
|
||||
</AppTheme>
|
||||
|
|
|
|||
|
|
@ -98,8 +98,8 @@ export default function SignUp(props: { disableCustomTheme?: boolean }) {
|
|||
|
||||
const roleOptions = [
|
||||
{ value: "admin", label: "Admin" },
|
||||
{ value: "user", label: "User" }
|
||||
];
|
||||
{ value: "user", label: "User" },
|
||||
];
|
||||
// Enhanced email validation regex
|
||||
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
|
||||
|
||||
|
|
@ -133,8 +133,8 @@ export default function SignUp(props: { disableCustomTheme?: boolean }) {
|
|||
};
|
||||
|
||||
await dispatch(registerUser(payload)).unwrap();
|
||||
toast.success("Registration successful!");
|
||||
navigate("/auth/login");
|
||||
toast.success("Registration successful!");
|
||||
} catch (error: any) {
|
||||
toast.error(error?.message || "Registration failed");
|
||||
console.error("Registration error:", error);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
// src/pages/Dashboard
|
||||
|
||||
import * as React from 'react';
|
||||
import { CssBaseline } from '@mui/material';
|
||||
import { Box, CssBaseline, Typography } from '@mui/material';
|
||||
|
||||
import {
|
||||
chartsCustomizations,
|
||||
dataGridCustomizations,
|
||||
datePickersCustomizations,
|
||||
treeViewCustomizations,
|
||||
} from './theme/customizations/index.ts';
|
||||
} from './theme/customizations';
|
||||
import DashboardLayout from '../../layouts/DashboardLayout';
|
||||
import AppTheme from '../../shared-theme/AppTheme';
|
||||
import MainGrid from '../../components/MainGrid/index.tsx';
|
||||
import MainGrid from '../../components/MainGrid';
|
||||
|
||||
const xThemeComponents = {
|
||||
...chartsCustomizations,
|
||||
|
|
@ -20,18 +20,39 @@ const xThemeComponents = {
|
|||
...treeViewCustomizations,
|
||||
};
|
||||
|
||||
export default function Dashboard(props: { disableCustomTheme?: boolean }) {
|
||||
const disable = true;
|
||||
interface DashboardProps {
|
||||
disableCustomTheme?: boolean;
|
||||
}
|
||||
|
||||
const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
|
||||
return (
|
||||
<AppTheme {...props} themeComponents={xThemeComponents}>
|
||||
{!disable ? (
|
||||
<>
|
||||
<CssBaseline enableColorScheme />
|
||||
<MainGrid />
|
||||
</>
|
||||
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
|
||||
<CssBaseline enableColorScheme />
|
||||
{!disableCustomTheme ? (
|
||||
<MainGrid />
|
||||
) : (
|
||||
'Dashboard'
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
textAlign: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="h6" component="h1" gutterBottom>
|
||||
Dashboard
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ marginTop: 2 }}>
|
||||
No content available on the Dashboard yet.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</AppTheme>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Box, Button, Typography } from '@mui/material';
|
|||
import AddEditCategoryModal from '../../components/AddEditCategoryModal';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import CustomTable from '../../components/CustomTable';
|
||||
import DeleteModal from '../../components/Modals/DeleteModal/DeleteModal';
|
||||
import DeleteModal from '../../components/Modals/DeleteModal';
|
||||
|
||||
// Sample data for categories
|
||||
// const categoryRows = [
|
||||
|
|
@ -75,7 +75,7 @@ export default function Vehicles() {
|
|||
sx={{ textAlign: 'right' }}
|
||||
onClick={handleClickOpen}
|
||||
>
|
||||
Add Category
|
||||
Add Categorywewfw
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,14 +2,12 @@ import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
|||
import http from "../../lib/https";
|
||||
import { toast } from "sonner";
|
||||
|
||||
|
||||
// Interfaces
|
||||
interface User {
|
||||
token: string | null;
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
// role: string;
|
||||
role: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
}
|
||||
|
|
@ -28,7 +26,7 @@ interface AuthState {
|
|||
admins: Admin[];
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
// error: string | null;
|
||||
token: string | null;
|
||||
}
|
||||
|
||||
|
|
@ -42,6 +40,8 @@ export const adminList = createAsyncThunk<
|
|||
const response = await http.get("auth/admin-list");
|
||||
return response?.data?.data;
|
||||
} catch (error: any) {
|
||||
toast.error("Error fetching users list" + error);
|
||||
|
||||
return rejectWithValue(
|
||||
error.response?.data?.message || "An error occurred"
|
||||
);
|
||||
|
|
@ -58,6 +58,28 @@ export const deleteAdmin = createAsyncThunk<
|
|||
const response = await http.delete(`auth/${id}/delete-admin`);
|
||||
toast.success(response.data?.message);
|
||||
return id;
|
||||
} catch (error: any) {
|
||||
toast.error("Error deleting the user" + error);
|
||||
|
||||
return rejectWithValue(
|
||||
error.response?.data?.message || "An error occurred"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export const createAdmin = createAsyncThunk<
|
||||
User,
|
||||
{
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
},
|
||||
{ rejectValue: string }
|
||||
>("auth/signup", async (data, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.post("auth/create-admin", data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
return rejectWithValue(
|
||||
error.response?.data?.message || "An error occurred"
|
||||
|
|
@ -68,11 +90,11 @@ export const deleteAdmin = createAsyncThunk<
|
|||
// Update Admin
|
||||
export const updateAdmin = createAsyncThunk(
|
||||
"updateAdmin",
|
||||
async ({ id, ...data}: User, { rejectWithValue }) => {
|
||||
async ({ id, ...userData }: User, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.put(
|
||||
`auth/${id}/update-admin`,
|
||||
data
|
||||
userData
|
||||
);
|
||||
toast.success("Admin updated successfully");
|
||||
return response?.data;
|
||||
|
|
@ -85,14 +107,12 @@ export const updateAdmin = createAsyncThunk(
|
|||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
const initialState: AuthState = {
|
||||
user: null,
|
||||
admins: [],
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
// error: null,
|
||||
token: null,
|
||||
};
|
||||
|
||||
|
|
@ -104,7 +124,7 @@ const adminSlice = createSlice({
|
|||
builder
|
||||
.addCase(adminList.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
// state.error = null;
|
||||
})
|
||||
.addCase(
|
||||
adminList.fulfilled,
|
||||
|
|
@ -113,13 +133,10 @@ const adminSlice = createSlice({
|
|||
state.admins = action.payload;
|
||||
}
|
||||
)
|
||||
.addCase(
|
||||
adminList.rejected,
|
||||
(state, action: PayloadAction<string | undefined>) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload || "An error occurred";
|
||||
}
|
||||
)
|
||||
.addCase(adminList.rejected, (state) => {
|
||||
state.isLoading = false;
|
||||
// state.error = action.payload || "An error occurred";
|
||||
})
|
||||
.addCase(deleteAdmin.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
})
|
||||
|
|
@ -129,13 +146,11 @@ const adminSlice = createSlice({
|
|||
(admin) => String(admin.id) !== String(action.payload)
|
||||
);
|
||||
})
|
||||
.addCase(deleteAdmin.rejected, (state, action) => {
|
||||
.addCase(deleteAdmin.rejected, (state) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload || "Failed to delete admin";
|
||||
})
|
||||
.addCase(updateAdmin.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(updateAdmin.fulfilled, (state, action) => {
|
||||
const updatedAdmin = action.payload;
|
||||
|
|
@ -144,13 +159,26 @@ const adminSlice = createSlice({
|
|||
);
|
||||
state.isLoading = false;
|
||||
})
|
||||
.addCase(updateAdmin.rejected, (state, action) => {
|
||||
.addCase(updateAdmin.rejected, (state) => {
|
||||
state.isLoading = false;
|
||||
state.error =
|
||||
typeof action.payload === "string"
|
||||
? action.payload
|
||||
: "Something went wrong while updating Admin!";
|
||||
});
|
||||
})
|
||||
.addCase(createAdmin.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
// state.error = null;
|
||||
})
|
||||
.addCase(
|
||||
createAdmin.fulfilled,
|
||||
(state, action: PayloadAction<User>) => {
|
||||
state.isLoading = false;
|
||||
state.admins.push(action.payload);
|
||||
}
|
||||
)
|
||||
.addCase(
|
||||
createAdmin.rejected,
|
||||
(state, action: PayloadAction<string | undefined>) => {
|
||||
state.isLoading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||
import http from "../../lib/https";
|
||||
// import { toast } from "react-toastify";
|
||||
import { toast } from "sonner";
|
||||
|
||||
// Define types for state
|
||||
|
|
@ -30,8 +29,9 @@ interface AuthState {
|
|||
admins: Admin[];
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
error: object | string | null;
|
||||
// error: object | string | null;
|
||||
token: string | null;
|
||||
role: string | null;
|
||||
}
|
||||
|
||||
// Async thunk for login
|
||||
|
|
@ -42,6 +42,9 @@ export const loginUser = createAsyncThunk<
|
|||
>("LoginUser", async ({ email, password }, { rejectWithValue }) => {
|
||||
try {
|
||||
// this is endpoint not action name
|
||||
//use below commented endpoint if using deployed backend........
|
||||
// const response = await http.post("admin/login", {
|
||||
|
||||
const response = await http.post("auth/login", {
|
||||
email,
|
||||
password,
|
||||
|
|
@ -50,6 +53,8 @@ export const loginUser = createAsyncThunk<
|
|||
toast.success(response.data?.message);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
toast.error("Error logging in the user" + error);
|
||||
|
||||
return rejectWithValue(
|
||||
error.response?.data?.message || "An error occurred"
|
||||
);
|
||||
|
|
@ -84,11 +89,12 @@ const initialState: AuthState = {
|
|||
admins: [],
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
// error: null,
|
||||
//Eknoor singh
|
||||
//date:- 12-Feb-2025
|
||||
//initial state of token set to null
|
||||
token: null,
|
||||
role: null, // New field for role
|
||||
};
|
||||
|
||||
const authSlice = createSlice({
|
||||
|
|
@ -100,7 +106,7 @@ const authSlice = createSlice({
|
|||
// Login
|
||||
.addCase(loginUser.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
// state.error = null;
|
||||
})
|
||||
.addCase(loginUser.fulfilled, (state, action) => {
|
||||
state.isLoading = false;
|
||||
|
|
@ -111,15 +117,16 @@ const authSlice = createSlice({
|
|||
|
||||
.addCase(
|
||||
loginUser.rejected,
|
||||
(state, action: PayloadAction<string | undefined>) => {
|
||||
// (state, action: PayloadAction<string | undefined>) => {
|
||||
(state) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload || "An error occurred";
|
||||
// state.error = action.payload || "An error occurred";
|
||||
}
|
||||
)
|
||||
// Register
|
||||
.addCase(registerUser.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
// state.error = null;
|
||||
})
|
||||
.addCase(
|
||||
registerUser.fulfilled,
|
||||
|
|
@ -133,7 +140,7 @@ const authSlice = createSlice({
|
|||
registerUser.rejected,
|
||||
(state, action: PayloadAction<string | undefined>) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload || "An error occurred";
|
||||
// state.error = action.payload || "An error occurred";
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ interface AuthState {
|
|||
user: User | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export const fetchAdminProfile = createAsyncThunk<
|
||||
|
|
@ -27,15 +26,13 @@ export const fetchAdminProfile = createAsyncThunk<
|
|||
const token = localStorage?.getItem("authToken");
|
||||
if (!token) throw new Error("No token found");
|
||||
|
||||
const response = await http.get("/auth/profile", {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
const response = await http.get("/auth/profile");
|
||||
|
||||
if (!response.data?.data) throw new Error("Invalid API response");
|
||||
|
||||
return response.data.data;
|
||||
} catch (error: any) {
|
||||
toast.error("Error fetching Profile");
|
||||
toast.error("Error Fetching Profile" + error);
|
||||
return rejectWithValue(
|
||||
error?.response?.data?.message || "An error occurred"
|
||||
);
|
||||
|
|
@ -46,7 +43,6 @@ const initialState: AuthState = {
|
|||
user: null,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
const profileSlice = createSlice({
|
||||
|
|
@ -57,16 +53,14 @@ const profileSlice = createSlice({
|
|||
builder
|
||||
.addCase(fetchAdminProfile.pending, (state) => {
|
||||
state.isLoading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchAdminProfile.fulfilled, (state, action) => {
|
||||
state.isLoading = false;
|
||||
state.user = action.payload;
|
||||
state.isAuthenticated = true;
|
||||
})
|
||||
.addCase(fetchAdminProfile.rejected, (state, action) => {
|
||||
.addCase(fetchAdminProfile.rejected, (state) => {
|
||||
state.isLoading = false;
|
||||
state.error = action.payload || "Failed to fetch admin profile";
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ export default function AppRouter() {
|
|||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="profile"
|
||||
element={
|
||||
|
|
|
|||
Loading…
Reference in a new issue