Create admin with CRUD's

package.json

@@ -15,17 +15,23 @@
     "@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",
+    "highcharts": "^12.1.2",
     "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,13 +41,8 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.1",
     "react-scripts": "5.0.1",
-    "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": {

src/components/AddAdmin/index.tsx

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

src/components/AddEditCategoryModal/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import {
+	Box,
 	Button,
 	Dialog,
 	DialogActions,
@@ -7,26 +8,36 @@ import {
 	DialogTitle,
 	TextField,
 } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import { useForm, Controller } from "react-hook-form";
 
 interface AddEditCategoryModalProps {
 	open: boolean;
 	handleClose: () => void;
-	handleUpdate: (id: string, name: string, role: string) => void;
+	handleCreate: (data: FormData) => void;
+	handleUpdate: (
+		id: string,
+		name: string,
+		email: string,
+		phone: string,
+		registeredAddress: string
+	) => void;
 	editRow: any;
 }
 
 interface FormData {
-	category: string;
-	role: string;
 	name: string;
+	email: string;
+	phone: string;
+	registeredAddress: string;
 }
 
 const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 	open,
 	handleClose,
-	editRow,
+	handleCreate,
 	handleUpdate,
+	editRow,
 }) => {
 	const {
 		control,
@@ -36,15 +47,24 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 		reset,
 	} = useForm<FormData>({
 		defaultValues: {
-			category: "",
 			name: "",
-			role: "",
+			email: "",
+			phone: "",
+			registeredAddress: "",
 		},
 	});
 
 	const onSubmit = (data: FormData) => {
 		if (editRow) {
-			handleUpdate(editRow.id, data.name, data.role);
+			handleUpdate(
+				editRow.id,
+				data.name,
+				data.email,
+				data.phone,
+				data.registeredAddress
+			);
+		} else {
+			handleCreate(data);
 		}
 		handleClose();
 		reset();
@@ -52,74 +72,162 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 
 	useEffect(() => {
 		if (editRow) {
-			setValue("category", editRow.name);
 			setValue("name", editRow.name);
-			setValue("role", editRow.role);
+			setValue("email", editRow.email);
+			setValue("phone", editRow.phone);
+			setValue("registeredAddress", editRow.registeredAddress);
 		} else {
 			reset();
 		}
 	}, [editRow, setValue, reset]);
 
 	return (
-		<>
+		<Dialog
-			<Dialog
+			open={open}
-				open={open}
+			onClose={handleClose}
-				onClose={handleClose}
+			maxWidth="md"
-				maxWidth="md"
+			fullWidth
-				fullWidth
+			PaperProps={{
-				PaperProps={{
+				component: "form",
-					component: "form",
+				onSubmit: handleSubmit(onSubmit),
-					onSubmit: handleSubmit(onSubmit),
+			}}
+		>
+			<DialogTitle
+				sx={{
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
 				}}
 			>
-				<DialogTitle>{editRow ? "Edit" : "Add"} Category</DialogTitle>
+				{editRow ? "Edit Admin" : "Add Admin"}
-				<DialogContent>
+				<Box
-					<Controller
+					onClick={handleClose}
-						name="name"
+					sx={{
-						control={control}
+						cursor: "pointer",
-						rules={{
+						display: "flex",
-							required: "Admin Name is required",
+						alignItems: "center",
-						}}
+					}}
-						render={({ field }) => (
+				>
-							<TextField
+					<CloseIcon />
-								{...field}
+				</Box>
-								autoFocus
+			</DialogTitle>
-								required
-								margin="dense"
-								label="Admin Name"
-								type="text"
-								fullWidth
-								variant="standard"
-								error={!!errors.name}
-								helperText={errors.name?.message}
-							/>
-						)}
-					/>
 
-					<Controller
+			<DialogContent>
-						name="role"
+				<Controller
-						control={control}
+					name="name"
-						render={({ field }) => (
+					control={control}
-							<TextField
+					rules={{
-								{...field}
+						required: "Admin Name is required",
-								margin="dense"
+						minLength: {
-								label="Role"
+							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}
+						/>
+					)}
+				/>
 
-								fullWidth
+				<Controller
-								variant="standard"
+					name="email"
-								error={!!errors.role}
+					control={control}
-								helperText={errors.role?.message}
+					rules={{
-								disabled
+						required: "Email is required",
-							/>
+						pattern: {
-						)}
+							value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-					/>
+							message: "Invalid email address",
-				</DialogContent>
+						},
-				<DialogActions>
+					}}
-					<Button onClick={handleClose}>Cancel</Button>
+					render={({ field }) => (
-					<Button type="submit">Save</Button>
+						<TextField
-				</DialogActions>
+							{...field}
-			</Dialog>
+							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",
+					}}
+					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>
 	);
 };
 

src/components/CustomDatePicker/index.tsx

@@ -34,21 +34,21 @@ function ButtonField(props: ButtonFieldProps) {
     inputProps: { 'aria-label': ariaLabel } = {},
   } = props;
 
-  return (
+  // return (
-    <Button
+  //   // <Button
-      variant="outlined"
+  //   //   variant="outlined"
-      id={id}
+  //   //   id={id}
-      disabled={disabled}
+  //   //   disabled={disabled}
-      ref={ref}
+  //   //   ref={ref}
-      aria-label={ariaLabel}
+  //   //   aria-label={ariaLabel}
-      size="small"
+  //   //   size="small"
-      onClick={() => setOpen?.((prev) => !prev)}
+  //   //   onClick={() => setOpen?.((prev) => !prev)}
-      startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
+  //   //   startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
-      sx={{ minWidth: 'fit-content' }}
+  //   //   sx={{ minWidth: 'fit-content' }}
-    >
+  //   // >
-      {label ? `${label}` : 'Pick a date'}
+  //   //   {label ? `${label}` : 'Pick a date'}
-    </Button>
+  //   // </Button>
-  );
+  // );
 }
 
 export default function CustomDatePicker() {

src/components/CustomTable/index.tsx

@@ -1,225 +1,263 @@
-import * as React from "react"
+import * as React from "react";
-import { styled } from "@mui/material/styles"
+import { styled } from "@mui/material/styles";
-import Table from "@mui/material/Table"
+import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody"
+import TableBody from "@mui/material/TableBody";
-import TableCell, { tableCellClasses } from "@mui/material/TableCell"
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer"
+import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead"
+import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow"
+import TableRow from "@mui/material/TableRow";
-import Paper, { paperClasses } from "@mui/material/Paper"
+import Paper, { paperClasses } from "@mui/material/Paper";
-import { deleteAdmin } from "../../redux/slices/adminSlice"
+import { adminList, deleteAdmin } from "../../redux/slices/adminSlice";
-import { useDispatch } from "react-redux"
+import { useDispatch } from "react-redux";
 import {
-    Box,
+	Box,
-    Button,
+	Button,
-    dividerClasses,
+	dividerClasses,
-    IconButton,
+	IconButton,
-    listClasses,
+	listClasses,
-    Menu,
+	Menu,
-} from "@mui/material"
+} from "@mui/material";
-import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"
+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 { AppDispatch } from "../../redux/store/store";
+import ViewModal from "../Modals/ViewModal";
 
 // Styled components for customization
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
-    [`&.${tableCellClasses.head}`]: {
+	[`&.${tableCellClasses.head}`]: {
-        backgroundColor: " #1565c0",
+		backgroundColor: " #1565c0",
-        color: theme.palette.common.white,
+		color: theme.palette.common.white,
-    },
+	},
-    [`&.${tableCellClasses.body}`]: {
+	[`&.${tableCellClasses.body}`]: {
-        fontSize: 14,
+		fontSize: 14,
-    },
+	},
-}))
+}));
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
-    "&:nth-of-type(odd)": {
+	"&:nth-of-type(odd)": {
-        backgroundColor: theme.palette.action.hover,
+		backgroundColor: theme.palette.action.hover,
-    },
+	},
-    "&:last-child td, &:last-child th": {
+	"&:last-child td, &:last-child th": {
-        border: 0,
+		border: 0,
-    },
+	},
-}))
+}));
 
 export interface Column {
-    id: string
+	id: string;
-    label: string
+	label: string;
-    align?: "left" | "center" | "right"
+	align?: "left" | "center" | "right";
 }
 
 interface Row {
-    [key: string]: any
+	[key: string]: any;
 }
 
 interface CustomTableProps {
-    columns: Column[]
+	columns: Column[];
-    rows: Row[]
+	rows: Row[];
-    setDeleteModal: Function
+	setDeleteModal: Function;
-    setRowData: Function
+	setRowData: Function;
-    setModalOpen: Function
+	setModalOpen: Function;
-    deleteModal: boolean
+	viewModal: boolean;
+	setViewModal: Function;
+	deleteModal: boolean;
 }
 
 const CustomTable: React.FC<CustomTableProps> = ({
-    columns,
+	columns,
-    rows,
+	rows,
-    setDeleteModal,
+	setDeleteModal,
-    deleteModal,
+	deleteModal,
-    setRowData,
+	viewModal,
-    setModalOpen,
+	setRowData,
+	setViewModal,
+	setModalOpen,
 }) => {
-    // console.log("columnsss", columns, rows)
+	// console.log("columnsss", columns, rows)
-    const dispatch = useDispatch<AppDispatch>()
+	const dispatch = useDispatch<AppDispatch>();
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const [selectedRow, setSelectedRow] = React.useState<Row | null>(null)
+	const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
-    const open = Boolean(anchorEl)
+	
+	const open = Boolean(anchorEl);
 
-    const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
+	const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
-        setAnchorEl(event.currentTarget)
+		setAnchorEl(event.currentTarget);
-        setSelectedRow(row) // Ensure the row data is set
+		setSelectedRow(row); // Ensure the row data is set
-    }
+	};
 
-    const handleClose = () => {
+	const handleClose = () => {
-        setAnchorEl(null)
+		setAnchorEl(null);
-    }
+	};
 
-    const isImage = (value: any) => {
+	const isImage = (value: any) => {
-        if (typeof value === "string") {
+		if (typeof value === "string") {
-            return value.startsWith("http") || value.startsWith("data:image") // Check for URL or base64 image
+			return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image
-        }
+		}
-        return false
+		return false;
-    }
+	};
 
-    const handleDeleteButton = (id: string | undefined) => {
+	const handleDeleteButton = (id: string | undefined) => {
-        if (!id) console.error("ID not found", id)
+		if (!id) console.error("ID not found", id);
 
-        dispatch(deleteAdmin(id || ""))
+		dispatch(deleteAdmin(id || ""));
-        setDeleteModal(false) // Close the modal only after deletion
+		setDeleteModal(false); // Close the modal only after deletion
-        handleClose()
+		handleClose();
-    }
+	};
 
-    return (
+	const handleViewButton = (id: string | undefined) => {
-        <TableContainer component={Paper}>
+		if (!id) console.error("ID not found", id);
-            <Table sx={{ minWidth: 700 }} aria-label="customized table">
-                <TableHead>
-                    <TableRow>
-                        {columns.map((column) => (
-                            <StyledTableCell
-                                key={column.id}
-                                align={column.align || "left"}
-                            >
-                                {column.label}
-                            </StyledTableCell>
-                        ))}
-                    </TableRow>
-                </TableHead>
-                <TableBody>
-                    {rows.map((row, rowIndex) => (
-                        <StyledTableRow key={rowIndex}>
-                            {columns.map((column) => (
-                                <StyledTableCell
-                                    key={column.id}
-                                    align={column.align || "left"}
-                                >
-                                    {isImage(row[column.id]) ? (
-                                        <img
-                                            src={row[column.id]}
-                                            alt="Row "
-                                            style={{
-                                                width: "50px",
-                                                height: "50px",
-                                                objectFit: "cover",
-                                            }}
-                                        />
-                                    ) : column.id !== "action" ? (
-                                        row[column.id]
-                                    ) : (
-                                        <IconButton
-                                            onClick={(e) => {
-                                                handleClick(e, row)
-                                                setRowData(row) // Store the selected row
-                                            }}
-                                        >
-                                            <MoreVertRoundedIcon />
-                                        </IconButton>
-                                    )}
-                                </StyledTableCell>
-                            ))}
-                        </StyledTableRow>
-                    ))}
-                </TableBody>
-            </Table>
-            {open && (
-                <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",
-                        },
-                    }}
-                >
-                    <Box
-                        sx={{
-                            display: "flex",
-                            flexDirection: "column",
-                            justifyContent: "flex-start",
-                        }}
-                    >
-                        <Button
-                            variant="text"
-                            onClick={() => setModalOpen(true)}
-                            color="primary"
-                            sx={{
-                                justifyContent: "flex-start",
-                                py: 0,
-                                textTransform: "capitalize",
-                            }}
-                        >
-                            Edit
-                        </Button>
 
-                        <Button
+		dispatch(adminList());
-                            variant="text"
+		setViewModal(false);
-                            onClick={(e) => {
+	};
-                                e.stopPropagation()
-                                setDeleteModal(true)
-                            }}
-                            color="error"
-                            sx={{
-                                justifyContent: "flex-start",
-                                py: 0,
-                                textTransform: "capitalize",
-                            }}
-                        >
-                            Delete
-                        </Button>
-                        {deleteModal && (
-                            <DeleteModal
-                                handleDelete={() =>
-                                    handleDeleteButton(selectedRow?.id)
-                                }
-                                open={deleteModal}
-                                setDeleteModal={setDeleteModal}
-                                id={selectedRow?.id}
-                            />
-                        )}
-                    </Box>
-                </Menu>
-            )}
-        </TableContainer>
-    )
-}
 
-export default CustomTable
+	return (
+		<TableContainer component={Paper}>
+			<Table sx={{ minWidth: 700 }} aria-label="customized table">
+				<TableHead>
+					<TableRow>
+						{columns.map((column) => (
+							<StyledTableCell
+								key={column.id}
+								align={column.align || "left"}
+							>
+								{column.label}
+							</StyledTableCell>
+						))}
+					</TableRow>
+				</TableHead>
+				<TableBody>
+					{rows.map((row, rowIndex) => (
+						<StyledTableRow key={rowIndex}>
+							{columns.map((column) => (
+								<StyledTableCell
+									key={column.id}
+									align={column.align || "left"}
+								>
+									{isImage(row[column.id]) ? (
+										<img
+											src={row[column.id]}
+											alt="Row "
+											style={{
+												width: "50px",
+												height: "50px",
+												objectFit: "cover",
+											}}
+										/>
+									) : column.id !== "action" ? (
+										row[column.id]
+									) : (
+										<IconButton
+											onClick={(e) => {
+												handleClick(e, row);
+												setRowData(row); // Store the selected row
+											}}
+										>
+											<MoreVertRoundedIcon />
+										</IconButton>
+									)}
+								</StyledTableCell>
+							))}
+						</StyledTableRow>
+					))}
+				</TableBody>
+			</Table>
+			{open && (
+				<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",
+						},
+					}}
+				>
+					<Box
+						sx={{
+							display: "flex",
+							flexDirection: "column",
+							justifyContent: "flex-start",
+						}}
+					>
+						<Button
+							variant="text"
+							onClick={(e) => {
+								e.stopPropagation();
+								setViewModal(true);
+							}}
+							color="primary"
+							sx={{
+								justifyContent: "flex-start",
+								py: 0,
+								textTransform: "capitalize",
+							}}
+						>
+							View
+						</Button>
+						{viewModal && (
+							<ViewModal
+								handleView={() =>
+									handleViewButton(selectedRow?.id)
+								}
+								open={viewModal}
+								setViewModal={setViewModal}
+								id={selectedRow?.id}
+							/>
+						)}
+						<Button
+							variant="text"
+							onClick={() => setModalOpen(true)}
+							color="primary"
+							sx={{
+								justifyContent: "flex-start",
+								py: 0,
+								textTransform: "capitalize",
+							}}
+						>
+							Edit
+						</Button>
+
+						<Button
+							variant="text"
+							onClick={(e) => {
+								e.stopPropagation();
+								setDeleteModal(true);
+							}}
+							color="error"
+							sx={{
+								justifyContent: "flex-start",
+								py: 0,
+								textTransform: "capitalize",
+							}}
+						>
+							Delete
+						</Button>
+						{deleteModal && (
+							<DeleteModal
+								handleDelete={() =>
+									handleDeleteButton(selectedRow?.id)
+								}
+								open={deleteModal}
+								setDeleteModal={setDeleteModal}
+								id={selectedRow?.id}
+							/>
+						)}
+					</Box>
+				</Menu>
+			)}
+		</TableContainer>
+	);
+};
+
+export default CustomTable;

src/components/EditAdmin/index.tsx

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

src/components/LogOutFunction/LogOutFunction.tsx

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

src/components/MainGrid/index.tsx

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

src/components/MenuContent/index.tsx

@@ -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,11 +17,11 @@ const baseMenuItems = [
 		icon: <HomeRoundedIcon />,
 		url: "/panel/dashboard",
 	},
-	{
+	// {
-		text: "Vehicles",
+	// 	text: "Vehicles",
-		icon: <AnalyticsRoundedIcon />,
+	// 	icon: <AnalyticsRoundedIcon />,
-		url: "/panel/vehicles",
+	// 	url: "/panel/vehicles",
-	},
+	// },
 	//created by Eknnor and Jaanvi
 ];
 

src/components/Modals/DeleteModal/index.tsx

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

src/components/Modals/LogOutModal/index.tsx

@@ -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
+    open: boolean;
-    setDeleteModal: Function
+    setLogoutModal: Function;
-    handleDelete: (id: string | undefined) => void
+    handlelogout: any;
-    id?: string | undefined
+};
-}
+ 
-
 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" }
+const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
-
+ 
-export default function DeleteModal({
+export default function LogoutModal({
     open,
-    setDeleteModal,
+    setLogoutModal,
-    handleDelete,
+    handlelogout,
-    id,
 }: 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
+			<Typography id="modal-title" variant="h5" fontWeight="bold" sx={{ width: "100%" }}>
-                    id="modal-modal-title"
+  <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
-                    variant="h6"
+    <Box sx={{ flex: 1, textAlign: "center" }}>Logout</Box>
-                    component="h2"
+    <Box  onClick={() => setLogoutModal(false)} sx={{ cursor: "pointer", display: "flex", alignItems: "center" }}>
-                    align="center"
+      <CloseIcon />
-                >
+    </Box>
-                    Delete Record
+  </Box>
-                </Typography>
+</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>
-    )
+    );
-}
+}

src/components/Modals/ViewModal/index.tsx

@@ -0,0 +1,123 @@
+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: "100%",
+							textAlign: "center",
+							display: "flex",
+							flexDirection: "column",
+							gap: 1.5,
+						}}
+					>
+						<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>
+	);
+}

src/components/OptionsMenu/index.tsx

@@ -12,104 +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 { toast } from "sonner";
+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 [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-	const open = Boolean(anchorEl);
+    const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
-	const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    const open = Boolean(anchorEl);
-		setAnchorEl(event?.currentTarget);
+    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-	};
+        setAnchorEl(event?.currentTarget);
-	const handleClose = () => {
+    };
-		setAnchorEl(null);
+    const handleClose = () => {
-	};
+        setAnchorEl(null);
-	//Eknoor singh and jaanvi
+    };
-	//date:- 12-Feb-2025
+    //Eknoor singh and jaanvi
-	//Made a navigation page for the profile page
+    //date:- 12-Feb-2025
-	const navigate = useNavigate();
+    //Made a navigation page for the profile page
-	const handleProfile = () => {
+    const navigate = useNavigate();
-		navigate("/auth/profile");
+    const handleProfile = () => {
-	};
+        navigate("/panel/profile");
-
+    };
-	//Eknoor singh and jaanvi
+ 
-	//date:- 13-Feb-2025
+    //jaanvi
-	//Implemented logout functionality which was static previously
+    //date:- 13-Feb-2025
-	const handlelogout = () => {
+    
-		localStorage.clear();
+    return (
-		navigate("/auth/login");
+        <React.Fragment>
-		toast.success("Logged out successfully");
+            <MenuButton
-	};
+                aria-label="Open menu"
-	return (
+                onClick={handleClick}
-		<React.Fragment>
+                sx={{ borderColor: "transparent" }}
-			<MenuButton
+            >
-				aria-label="Open menu"
+                {avatar ? (
-				onClick={handleClick}
+                    <MoreVertRoundedIcon />
-				sx={{ borderColor: "transparent" }}
+                ) : (
-			>
+                    <Avatar
-				{avatar ? (
+                        sizes="small"
-					<MoreVertRoundedIcon />
+                        alt="Riley Carter"
-				) : (
+                        src="/static/images/avatar/7.jpg"
-					<Avatar
+                        sx={{ width: 36, height: 36 }}
-						sizes="small"
+                    />
-						alt="Riley Carter"
+                )}
-						src="/static/images/avatar/7.jpg"
+            </MenuButton>
-						sx={{ width: 36, height: 36 }}
+            <Menu
-					/>
+                anchorEl={anchorEl}
-				)}
+                id="menu"
-			</MenuButton>
+                open={open}
-			<Menu
+                onClose={handleClose}
-				anchorEl={anchorEl}
+                onClick={handleClose}
-				id="menu"
+                transformOrigin={{ horizontal: "right", vertical: "top" }}
-				open={open}
+                anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
-				onClose={handleClose}
+                sx={{
-				onClick={handleClose}
+                    [`& .${listClasses.root}`]: {
-				transformOrigin={{ horizontal: "right", vertical: "top" }}
+                        padding: "4px",
-				anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+                    },
-				sx={{
+                    [`& .${paperClasses.root}`]: {
-					[`& .${listClasses.root}`]: {
+                        padding: 0,
-						padding: "4px",
+                    },
-					},
+                    [`& .${dividerClasses.root}`]: {
-					[`& .${paperClasses.root}`]: {
+                        margin: "4px -4px",
-						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={handleProfile}>Profile</MenuItem>
+                <MenuItem onClick={handleClose}>Settings</MenuItem>
-				<MenuItem onClick={handleClose}>My account</MenuItem>
+                <Divider />
-				<Divider />
+                <MenuItem
-				<MenuItem onClick={handleClose}>Add another account</MenuItem>
+                    onClick={handleClose}
-				<MenuItem onClick={handleClose}>Settings</MenuItem>
+                    sx={{
-				<Divider />
+                        [`& .${listItemIconClasses.root}`]: {
-				<MenuItem
+                            ml: "auto",
-					onClick={handleClose}
+                            minWidth: 0,
-					sx={{
+                        },
-						[`& .${listItemIconClasses.root}`]: {
+                    }}
-							ml: "auto",
+                >
-							minWidth: 0,
+                    {/* //Eknoor singh and jaanvi
-						},
+                    //date:- 13-Feb-2025
-					}}
+                    //Implemented logout functionality which was static previously */}
-				>
+ 
-					{/* //Eknoor singh and jaanvi 
+                    <ListItemText
-					//date:- 13-Feb-2025
+                        onClick={(e) => {
-					//Implemented logout functionality which was static previously */}
+                            e.stopPropagation();
-					<ListItemText
+                            setLogoutModal(true);
-						className="toast-button"
+                        }}
-						onClick={handlelogout}
+                    >
-					>
+                        Logout
-						Logout
+                    </ListItemText>
-					</ListItemText>
+                    <Logout
-					<ListItemIcon>
+                        setLogoutModal={setLogoutModal}
-						<LogoutRoundedIcon fontSize="small" />
+                        logoutModal={logoutModal}
-					</ListItemIcon>
+                    />
-				</MenuItem>
+ 
-			</Menu>
+                    <ListItemIcon>
-		</React.Fragment>
+                        <LogoutRoundedIcon fontSize="small" />
-	);
+                    </ListItemIcon>
+                </MenuItem>
+            </Menu>
+        </React.Fragment>
+    );
 }
+ 

src/layouts/DashboardLayout/index.tsx

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

src/pages/AdminList/index.tsx

@@ -4,111 +4,148 @@ 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 { adminList, updateAdmin, createAdmin } from "../../redux/slices/adminSlice";
-import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector
+import { AppDispatch, RootState } from "../../redux/store/store";
 
 export default function AdminList() {
-	const [modalOpen, setModalOpen] = useState(false);
+    const [modalOpen, setModalOpen] = useState(false);
-	const { reset } = useForm();
+    const { reset, handleSubmit } = useForm();
 
-	const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
+    const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
-	const [rowData, setRowData] = React.useState<any | null>(null);
+    const [viewModal, setViewModal] = React.useState<boolean>(false);
+    const [rowData, setRowData] = React.useState<any | null>(null);
 
-	const dispatch = useDispatch<AppDispatch>();
+    const dispatch = useDispatch<AppDispatch>();
 
-	// Fetching admin data from the Redux store
+    const admins = useSelector((state: RootState) => state.adminReducer.admins);
-	const admins = useSelector((state: RootState) => state.adminReducer.admins);
 
-	// Dispatching the API call when the component mounts
+    useEffect(() => {
-	useEffect(() => {
+        dispatch(adminList());
-		dispatch(adminList());
+    }, [dispatch]);
-	}, [dispatch]);
 
-	const handleClickOpen = () => {
+    const handleClickOpen = () => {
-		setModalOpen(true);
+        setRowData(null); // Reset row data when opening for new admin
-	};
+        setModalOpen(true);
+    };
 
-	const handleCloseModal = () => {
+    const handleCloseModal = () => {
-		setModalOpen(false);
+        setModalOpen(false);
-		reset();
+        setRowData(null);
-	};
+        reset();
+    };
 
-	const handleUpdate = async (id: string, name: string, role: string) => {
+    const handleCreate = async (data: {
-		try {
+        name: string;
-			await dispatch(updateAdmin({ id, name, role }));
+        email: string;
-			await dispatch(adminList()); // Fetch updated admins list after update
+        phone: string;
-		} catch (error) {
+        registeredAddress: string;
-			console.error("Update failed", error);
+    }) => {
-		}
+        try {
-	};
+            await dispatch(createAdmin(data));
+            await dispatch(adminList()); // Refresh the list after creation
+            handleCloseModal();
+        } catch (error) {
+            console.error("Creation failed", error);
+        }
+    };
 
-	const categoryColumns: Column[] = [
+    const handleUpdate = async (
-		{ id: "srno", label: "Sr No" },
+        id: string,
-		{ id: "name", label: "Name" },
+        name: string,
-		{ id: "role", label: "Role" },
+        email: string,
-		{ id: "action", label: "Action", align: "center" },
+        phone: string,
-	];
+        registeredAddress: string
+    ) => {
+        try {
+            await dispatch(
+                updateAdmin({
+                    id, name, email, phone, registeredAddress,
+                })
+            );
+            await dispatch(adminList());
+        } catch (error) {
+            console.error("Update failed", error);
+        }
+    };
 
-	// If no admins are available, display the sample data
+    const categoryColumns: Column[] = [
-	const categoryRows = admins?.length
+        { id: "srno", label: "Sr No" },
-		? admins?.map(
+        { id: "name", label: "Name" },
-				(
+        { id: "email", label: "Email" },
-					admin: { id: string; name: string; role: string },
+        { id: "phone", label: "Phone" },
-					index: number
+        { id: "registeredAddress", label: "Address" },
-				) => ({
+        { id: "action", label: "Action", align: "center" },
-					id: admin?.id,
+    ];
-					srno: index + 1,
-					name: admin?.name,
-					role: admin?.role,
-				})
-		  )
-		: [];
 
-	return (
+    const categoryRows = admins?.length
-		<>
+        ? admins?.map(
-			<Box
+            (
-				sx={{
+                admin: {
-					width: "100%",
+                    id: string;
-					maxWidth: {
+                    name: string;
-						sm: "100%",
+                    email: string;
-						display: "flex",
+                    phone: string;
-						justifyContent: "space-between",
+                    registeredAddress: string;
-						alignItems: "center",
+                },
-					},
+                index: number
-				}}
+            ) => ({
-			>
+                id: admin?.id,
-				{/* Title and Add Category button */}
+                srno: index + 1,
-				<Typography
+                name: admin?.name,
-					component="h2"
+                email: admin?.email,
-					variant="h6"
+                phone: admin?.phone,
-					sx={{ mt: 2, fontWeight: 600 }}
+                registeredAddress: admin?.registeredAddress,
-				>
+            })
-					Admins
+        )
-				</Typography>
+        : [];
-				<Button
-					variant="contained"
-					size="medium"
-					sx={{ textAlign: "right" }}
-					onClick={handleClickOpen}
-				>
-					Add Category
-				</Button>
-			</Box>
 
-			<CustomTable
+    return (
-				columns={categoryColumns}
+        <>
-				rows={categoryRows}
+            <Box
-				setDeleteModal={setDeleteModal}
+                sx={{
-				deleteModal={deleteModal}
+                    width: "100%",
-				setRowData={setRowData}
+                    maxWidth: {
-				setModalOpen={setModalOpen}
+                        sm: "100%",
-			/>
+                        display: "flex",
-			<AddEditCategoryModal
+                        justifyContent: "space-between",
-				open={modalOpen}
+                        alignItems: "center",
-				handleClose={handleCloseModal}
+                    },
-				editRow={rowData}
+                }}
-				handleUpdate={handleUpdate}
+            >
-			/>
+                <Typography
-		</>
+                    component="h2"
-	);
+                    variant="h6"
-}
+                    sx={{ mt: 2, fontWeight: 600 }}
+                >
+                    Admins
+                </Typography>
+                <Button
+                    variant="contained"
+                    size="medium"
+                    sx={{ textAlign: "right" }}
+                    onClick={handleClickOpen}
+                >
+                    Add Admin
+                </Button>
+            </Box>
+
+            <CustomTable
+                columns={categoryColumns}
+                rows={categoryRows}
+                setDeleteModal={setDeleteModal}
+                deleteModal={deleteModal}
+                setViewModal={setViewModal}
+                viewModal={viewModal}
+                setRowData={setRowData}
+                setModalOpen={setModalOpen}
+            />
+            <AddEditCategoryModal
+                open={modalOpen}
+                handleClose={handleCloseModal}
+                handleCreate={handleCreate}
+                handleUpdate={handleUpdate}
+                editRow={rowData}
+            />
+        </>
+    );
+}

src/pages/Auth/Login/index.tsx

@@ -211,7 +211,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						<Button type="submit" fullWidth variant="contained">
 							Sign in
 						</Button>
-						<Link
+						{/* <Link
 							component="button"
 							type="button"
 							onClick={handleClickOpen}
@@ -219,9 +219,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 							sx={{ alignSelf: "center" }}
 						>
 							Forgot your password?
-						</Link>
+						</Link> */}
 					</Box>
-					<Divider>or</Divider>
+					{/* <Divider>or</Divider>
 					<Box
 						sx={{
 							display: "flex",
@@ -239,7 +239,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 								Sign up
 							</Link>
 						</Typography>
-					</Box>
+					</Box> */}
 				</Card>
 			</SignInContainer>
 		</AppTheme>

src/pages/Dashboard/index.tsx

@@ -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 }) {
+interface DashboardProps {
-  const disable = true;
+  disableCustomTheme?: boolean;
+}
+
+const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
   return (
-    <AppTheme {...props} themeComponents={xThemeComponents}>
+    <AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
-      {!disable ? (
+      <CssBaseline enableColorScheme />
-        <>
+      {!disableCustomTheme ? (
-          <CssBaseline enableColorScheme />
+        <MainGrid />
-          <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;

src/pages/Vehicles/index.tsx

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

src/redux/slices/adminSlice.ts

@@ -4,12 +4,12 @@ import { toast } from "sonner";
 
 // Interfaces
 interface User {
-	token: string | null;
 	id: string;
 	name: string;
 	email: string;
 	role: string;
 	phone: string;
+	registeredAddress: string;
 }
 
 interface Admin {
@@ -18,6 +18,7 @@ interface Admin {
 	role: string;
 	email: string;
 	phone: string;
+	registeredAddress: string;
 }
 
 interface AuthState {
@@ -66,23 +67,39 @@ export const deleteAdmin = createAsyncThunk<
 	}
 });
 
+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"
+		);
+	}
+});
+
 // Update Admin
 export const updateAdmin = createAsyncThunk(
 	"updateAdmin",
-	async (
+	async ({ id, ...userData }: User, { rejectWithValue }) => {
-		{ id, name, role }: { id: any; name: string; role: string },
-		{ rejectWithValue }
-	) => {
 		try {
-			const response = await http.put(`auth/${id}/update-admin`, {
+			const response = await http.put(
-				name,
+				`auth/${id}/update-admin`,
-				role,
+				userData
-			});
+			);
 			toast.success("Admin updated successfully");
 			return response?.data;
 		} catch (error: any) {
-		toast.error("Error updating the user" + error);
+			toast.error("Error updating the user: " + error);
-
 			return rejectWithValue(
 				error.response?.data?.message || "An error occurred"
 			);
@@ -116,13 +133,10 @@ const adminSlice = createSlice({
 					state.admins = action.payload;
 				}
 			)
-			.addCase(
+			.addCase(adminList.rejected, (state) => {
-				adminList.rejected,
+				state.isLoading = false;
-				(state) => {
+				// state.error = action.payload || "An error occurred";
-					state.isLoading = false;
+			})
-					// state.error = action.payload || "An error occurred";
-				}
-			)
 			.addCase(deleteAdmin.pending, (state) => {
 				state.isLoading = true;
 			})
@@ -147,7 +161,24 @@ const adminSlice = createSlice({
 			})
 			.addCase(updateAdmin.rejected, (state) => {
 				state.isLoading = false;
-			});
+			})
+			.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;
+				}
+			);
 	},
 });
 

src/router.tsx

@@ -64,15 +64,6 @@ export default function AppRouter() {
 					/>
 					<Route path="login" element={<Login />} />
 					<Route path="signup" element={<SignUp />} />
-					<Route
-						path="profile"
-						element={
-							<ProtectedRoute
-								caps={[]}
-								component={<ProfilePage />}
-							/>
-						}
-					/>
 				</Route>
 
 				{/* Dashboard Routes */}
@@ -108,6 +99,16 @@ export default function AppRouter() {
 							/>
 						}
 					/>
+
+					<Route
+						path="profile"
+						element={
+							<ProtectedRoute
+								caps={[]}
+								component={<ProfilePage />}
+							/>
+						}
+					/>
 					<Route path="*" element={<>404</>} />
 				</Route>