package-lock.json

@@ -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",
+			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.26.0.tgz",
+			"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.27.0.tgz",
-			"integrity": "sha512-bhSDce1b5MBYYlCdHQJBThe10LGTE3D/u53TDQ41+IRj+iiNCun8jivw3DxKhmoBxlB+hVdkcltpTtIGlPjQZQ==",
+			"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",

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": {

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,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
+			handleCreate(data);
-			handleAdd(
-				data.name,
-				data.email,
-				data.phone,
-				data.registeredAddress
-			);
 		}
 		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,7 +83,6 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 	}, [editRow, setValue, reset]);
 
 	return (
-		<>
 		<Dialog
 			open={open}
 			onClose={handleClose}
@@ -99,13 +93,40 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 				onSubmit: handleSubmit(onSubmit),
 			}}
 		>
-				<DialogTitle>{editRow ? "Edit" : "Add"} Admin</DialogTitle>
+			<DialogTitle
+				sx={{
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+				}}
+			>
+				{editRow ? "Edit Admin" : "Add Admin"}
+				<Box
+					onClick={handleClose}
+					sx={{
+						cursor: "pointer",
+						display: "flex",
+						alignItems: "center",
+					}}
+				>
+					<CloseIcon />
+				</Box>
+			</DialogTitle>
+
 			<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
@@ -128,13 +149,18 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 					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="text"
+							type="email"
 							fullWidth
 							variant="standard"
 							error={!!errors.email}
@@ -142,26 +168,31 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 						/>
 					)}
 				/>
+
 				<Controller
 					name="phone"
 					control={control}
 					rules={{
-							required: "Phone no. is required",
+						required: "Phone number is required",
 						pattern: {
-								value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+							value: /^[0-9]*$/,
-								message: "Invalid Phone Number",
+							message: "Only numbers are allowed",
+						},
+						minLength: {
+							value: 6,
+							message: "Phone number must be exactly 6 digits",
 						},
 						maxLength: {
-								value:10,
+							value: 14,
-								message:"Phone no must be 10 digits"
+							message: "Phone number must be exactly 14 digits",
-							}
+						},
-							
 					}}
 					render={({ field }) => (
 						<TextField
 							{...field}
+							required
 							margin="dense"
-								label="Phone"
+							label="Phone Number"
 							type="tel"
 							fullWidth
 							variant="standard"
@@ -170,15 +201,21 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 						/>
 					)}
 				/>
+
 				<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"
@@ -190,12 +227,12 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 					)}
 				/>
 			</DialogContent>
+
 			<DialogActions>
 				<Button onClick={handleClose}>Cancel</Button>
-					<Button type="submit">Save</Button>
+				<Button type="submit">{editRow ? "Update" : "Create"}</Button>
 			</DialogActions>
 		</Dialog>
-		</>
 	);
 };
 

src/components/AppNavbar/index.tsx

@@ -1,29 +1,30 @@
-import * as React from 'react';
+import * as React from "react";
-import { styled } from '@mui/material/styles';
+import { styled } from "@mui/material/styles";
-import AppBar from '@mui/material/AppBar';
+import AppBar from "@mui/material/AppBar";
-import Box from '@mui/material/Box';
+import Box from "@mui/material/Box";
-import Stack from '@mui/material/Stack';
+import Stack from "@mui/material/Stack";
-import MuiToolbar from '@mui/material/Toolbar';
+import MuiToolbar from "@mui/material/Toolbar";
-import { tabsClasses } from '@mui/material/Tabs';
+import { tabsClasses } from "@mui/material/Tabs";
-import Typography from '@mui/material/Typography';
+import Typography from "@mui/material/Typography";
-import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
+import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
-import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
+import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
-import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
+import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
-import MenuButton from '../MenuButton';
+import MenuButton from "../MenuButton";
-import SideMenuMobile from '../SideMenuMobile';
+import SideMenuMobile from "../SideMenuMobile";
+import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
 
 const Toolbar = styled(MuiToolbar)({
-  width: '100%',
+	width: "100%",
-  padding: '12px',
+	padding: "12px",
-  display: 'flex',
+	display: "flex",
-  flexDirection: 'column',
+	flexDirection: "column",
-  alignItems: 'start',
+	alignItems: "start",
-  justifyContent: 'center',
+	justifyContent: "center",
-  gap: '12px',
+	gap: "12px",
 	flexShrink: 0,
 	[`& ${tabsClasses.flexContainer}`]: {
-    gap: '8px',
+		gap: "8px",
-    p: '8px',
+		p: "8px",
 		pb: 0,
 	},
 });
@@ -39,32 +40,36 @@ export default function AppNavbar() {
 		<AppBar
 			position="fixed"
 			sx={{
-        display: { xs: 'auto', md: 'none' },
+				display: { xs: "auto", md: "none" },
 				boxShadow: 0,
-        bgcolor: 'background.paper',
+				bgcolor: "background.paper",
-        backgroundImage: 'none',
+				backgroundImage: "none",
-        borderBottom: '1px solid',
+				borderBottom: "1px solid",
-        borderColor: 'divider',
+				borderColor: "divider",
-        top: 'var(--template-frame-height, 0px)',
+				top: "var(--template-frame-height, 0px)",
 			}}
 		>
 			<Toolbar variant="regular">
 				<Stack
 					direction="row"
 					sx={{
-            alignItems: 'center',
+						alignItems: "center",
 						flexGrow: 1,
-            width: '100%',
+						width: "100%",
 						gap: 1,
 					}}
 				>
 					<Stack
 						direction="row"
 						spacing={1}
-            sx={{ justifyContent: 'center', mr: 'auto' }}
+						sx={{ justifyContent: "center", mr: "auto" }}
 					>
 						<CustomIcon />
-            <Typography variant="h4" component="h1" sx={{ color: 'text.primary' }}>
+						<Typography
+							variant="h4"
+							component="h1"
+							sx={{ color: "text.primary" }}
+						>
 							Dashboard
 						</Typography>
 					</Stack>
@@ -72,9 +77,11 @@ export default function AppNavbar() {
 					<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
 						<MenuRoundedIcon />
 					</MenuButton>
+
 					<SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
 				</Stack>
 			</Toolbar>
+	
 		</AppBar>
 	);
 }
@@ -83,23 +90,23 @@ export function CustomIcon() {
 	return (
 		<Box
 			sx={{
-        width: '1.5rem',
+				width: "1.5rem",
-        height: '1.5rem',
+				height: "1.5rem",
-        bgcolor: 'black',
+				bgcolor: "black",
-        borderRadius: '999px',
+				borderRadius: "999px",
-        display: 'flex',
+				display: "flex",
-        justifyContent: 'center',
+				justifyContent: "center",
-        alignItems: 'center',
+				alignItems: "center",
-        alignSelf: 'center',
+				alignSelf: "center",
 				backgroundImage:
-          'linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)',
+					"linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)",
-        color: 'hsla(210, 100%, 95%, 0.9)',
+				color: "hsla(210, 100%, 95%, 0.9)",
-        border: '1px solid',
+				border: "1px solid",
-        borderColor: 'hsl(210, 100%, 55%)',
+				borderColor: "hsl(210, 100%, 55%)",
-        boxShadow: 'inset 0 2px 5px rgba(255, 255, 255, 0.3)',
+				boxShadow: "inset 0 2px 5px rgba(255, 255, 255, 0.3)",
 			}}
 		>
-      <DashboardRoundedIcon color="inherit" sx={{ fontSize: '1rem' }} />
+			<DashboardRoundedIcon color="inherit" sx={{ fontSize: "1rem" }} />
 		</Box>
 	);
 }

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

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

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/Header/index.tsx

@@ -1,23 +1,28 @@
-import * as React from 'react';
+import * as React from "react";
-import Stack from '@mui/material/Stack';
+import Stack from "@mui/material/Stack";
-import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
-import CustomDatePicker from '../CustomDatePicker';
+import CustomDatePicker from "../CustomDatePicker";
-import NavbarBreadcrumbs from '../NavbarBreadcrumbs';
+import NavbarBreadcrumbs from "../NavbarBreadcrumbs";
-import MenuButton from '../MenuButton';
+import MenuButton from "../MenuButton";
-import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
+import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
-
+import Box from "@mui/material/Box";
-import Search from '../Search';
+import Typography from "@mui/material/Typography";
+import Search from "../Search";
 
 export default function Header() {
+	const [showNotifications, setShowNotifications] = React.useState(false);
+	const toggleNotifications = () => {
+		setShowNotifications((prev) => !prev);
+	};
 	return (
 		<Stack
 			direction="row"
 			sx={{
-        display: { xs: 'none', md: 'flex' },
+				display: { xs: "none", md: "flex" },
-        width: '100%',
+				width: "100%",
-        alignItems: { xs: 'flex-start', md: 'center' },
+				alignItems: { xs: "flex-start", md: "center" },
-        justifyContent: 'space-between',
+				justifyContent: "space-between",
-        maxWidth: { sm: '100%', md: '1700px' },
+				maxWidth: { sm: "100%", md: "1700px" },
 				pt: 1.5,
 			}}
 			spacing={2}
@@ -26,11 +31,33 @@ export default function Header() {
 			<Stack direction="row" sx={{ gap: 1 }}>
 				<Search />
 				<CustomDatePicker />
-        <MenuButton showBadge aria-label="Open notifications">
+				<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>
 	);
 }

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/MenuButton/index.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as React from "react";
-import Badge, { badgeClasses } from '@mui/material/Badge';
+import Badge, { badgeClasses } from "@mui/material/Badge";
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 
 export interface MenuButtonProps extends IconButtonProps {
 	showBadge?: boolean;

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,7 +17,6 @@ const baseMenuItems = [
 		icon: <HomeRoundedIcon />,
 		url: "/panel/dashboard",
 	},
-	
 	// {
 	// 	text: "Vehicles",
 	// 	icon: <AnalyticsRoundedIcon />,

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,11 +1,11 @@
-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",
@@ -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
                     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,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>
+	);
+}

src/components/OptionsMenu/index.tsx

@@ -12,7 +12,7 @@ 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",
@@ -117,3 +117,4 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
         </React.Fragment>
     );
 }
+ 

src/components/SideMenuMobile/index.tsx

@@ -1,23 +1,26 @@
-import * as React from 'react';
+import * as React from "react";
-import Avatar from '@mui/material/Avatar';
+import Avatar from "@mui/material/Avatar";
-import Button from '@mui/material/Button';
+import Button from "@mui/material/Button";
-import Divider from '@mui/material/Divider';
+import Divider from "@mui/material/Divider";
-import Drawer, { drawerClasses } from '@mui/material/Drawer';
+import Drawer, { drawerClasses } from "@mui/material/Drawer";
-import Stack from '@mui/material/Stack';
+import Stack from "@mui/material/Stack";
-import Typography from '@mui/material/Typography';
+import Typography from "@mui/material/Typography";
-import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
-import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
 
-import MenuButton from '../MenuButton';
+import MenuButton from "../MenuButton";
-import MenuContent from '../MenuContent';
+import MenuContent from "../MenuContent";
-import CardAlert from '../CardAlert/CardAlert';
+import CardAlert from "../CardAlert/CardAlert";
 
 interface SideMenuMobileProps {
 	open: boolean | undefined;
 	toggleDrawer: (newOpen: boolean) => () => void;
 }
 
-export default function SideMenuMobile({ open, toggleDrawer }: SideMenuMobileProps) {
+export default function SideMenuMobile({
+	open,
+	toggleDrawer,
+}: SideMenuMobileProps) {
 	return (
 		<Drawer
 			anchor="right"
@@ -26,21 +29,21 @@ export default function SideMenuMobile({ open, toggleDrawer }: SideMenuMobilePro
 			sx={{
 				zIndex: (theme) => theme.zIndex.drawer + 1,
 				[`& .${drawerClasses.paper}`]: {
-          backgroundImage: 'none',
+					backgroundImage: "none",
-          backgroundColor: 'background.paper',
+					backgroundColor: "background.paper",
 				},
 			}}
 		>
 			<Stack
 				sx={{
-          maxWidth: '70dvw',
+					maxWidth: "70dvw",
-          height: '100%',
+					height: "100%",
 				}}
 			>
 				<Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}>
 					<Stack
 						direction="row"
-            sx={{ gap: 1, alignItems: 'center', flexGrow: 1, p: 1 }}
+						sx={{ gap: 1, alignItems: "center", flexGrow: 1, p: 1 }}
 					>
 						<Avatar
 							sizes="small"
@@ -63,7 +66,11 @@ export default function SideMenuMobile({ open, toggleDrawer }: SideMenuMobilePro
 				</Stack>
 				<CardAlert />
 				<Stack sx={{ p: 2 }}>
-          <Button variant="outlined" fullWidth startIcon={<LogoutRoundedIcon />}>
+					<Button
+						variant="outlined"
+						fullWidth
+						startIcon={<LogoutRoundedIcon />}
+					>
 						Logout
 					</Button>
 				</Stack>

src/index.tsx

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

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,39 +4,55 @@ 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 {
-import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector
+	adminList,
-import ViewModal from "../../components/Modals/ViewModal/ViewModal";
+	updateAdmin,
-export default function AdminList() {
+	createAdmin,
-	const [modalOpen, setModalOpen,] = useState(false);
+} from "../../redux/slices/adminSlice";
-	const [viewModal, setViewOpen] = useState(false);
+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,
@@ -47,11 +63,14 @@ export default function AdminList() {
 		try {
 			await dispatch(
 				updateAdmin({
-					id, name, email, phone, registeredAddress,
+					id,
-					token: null
+					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"
@@ -126,19 +142,18 @@ export default function AdminList() {
 				rows={categoryRows}
 				setDeleteModal={setDeleteModal}
 				deleteModal={deleteModal}
+				setViewModal={setViewModal}
+				viewModal={viewModal}
 				setRowData={setRowData}
 				setModalOpen={setModalOpen}
-                viewModal={viewModal}        
-                setViewModal={setViewOpen}       
 			/>
-
 			<AddEditCategoryModal
 				open={modalOpen}
 				handleClose={handleCloseModal}
-				editRow={rowData}
+				handleCreate={handleCreate}
 				handleUpdate={handleUpdate}
+				editRow={rowData}
 			/>
-			
 		</>
 	);
 }

src/pages/Auth/Login/index.tsx

@@ -222,13 +222,19 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						</Link> */}
 					</Box>
 					{/* <Divider>or</Divider>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+					<Box
-            <Typography sx={{ textAlign: 'center' }}>
+						sx={{
-              Don&apos;t have an account?{' '}
+							display: "flex",
+							flexDirection: "column",
+							gap: 2,
+						}}
+					>
+						<Typography sx={{ textAlign: "center" }}>
+							Don&apos;t have an account?{" "}
 							<Link
 								href="/auth/signup"
 								variant="body2"
-                sx={{ alignSelf: 'center' }}
+								sx={{ alignSelf: "center" }}
 							>
 								Sign up
 							</Link>

src/pages/Auth/SignUp/index.tsx

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

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 ? (
         <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

@@ -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(
+			.addCase(adminList.rejected, (state) => {
-				adminList.rejected,
-				(state, action: PayloadAction<string | undefined>) => {
 				state.isLoading = false;
-					state.error = action.payload || "An error occurred";
+				// 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"
+			.addCase(createAdmin.pending, (state) => {
-						? action.payload
+				state.isLoading = true;
-						: "Something went wrong while updating Admin!";
+				// 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/redux/slices/authSlice.ts

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

src/redux/slices/profileSlice.ts

@@ -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", {
+		const response = await http.get("/auth/profile");
-			headers: { Authorization: `Bearer ${token}` },
-		});
 
 		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";
 			});
 	},
 });

src/router.tsx

@@ -99,6 +99,7 @@ export default function AppRouter() {
 							/>
 						}
 					/>
+
 					<Route
 						path="profile"
 						element={