src/components/AppNavbar/index.tsx

@@ -68,7 +68,7 @@ export default function AppNavbar() {
 						<Typography
 							variant="h4"
 							component="h1"
-							sx={{ color: "text.primary" }}
+							sx={{ color: "#202020" }}
 						>
 							Dashboard
 						</Typography>
@@ -81,7 +81,6 @@ export default function AppNavbar() {
 					<SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
 				</Stack>
 			</Toolbar>
-	
 		</AppBar>
 	);
 }

src/components/Header/index.tsx

@@ -45,14 +45,19 @@ export default function Header() {
 					sx={{
 						p: 2,
 						position: "absolute",
-					    top: "55px", // Adjust this value according to your AppBar height
+						top: "55px",
 						right: "66px",
-						bgcolor: "lightblue",
+						bgcolor: "background.paper",
 						boxShadow: 1,
 						borderRadius: 1,
 						zIndex: 1300,
+						cursor: "pointer"
+						
 					}}
 				>
+					{/* <Typography variant="h6" color="text.primary">
+						Notifications
+					</Typography> */}
 					<Typography variant="body2" color="text.secondary">
 						No notifications yet
 					</Typography>

src/components/MenuContent/index.tsx

@@ -10,11 +10,13 @@ import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import { Link, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { RootState } from "../../redux/store/store";
+import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
+import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
 
 const baseMenuItems = [
 	{
-		text: "Home",
+		text: "Dashboard",
-		icon: <HomeRoundedIcon />,
+		icon: <DashboardOutlinedIcon />,
 		url: "/panel/dashboard",
 	},
 	// {
@@ -32,7 +34,7 @@ const baseMenuItems = [
 const superAdminOnlyItems = [
 	{
 		text: "Admin List",
-		icon: <FormatListBulletedIcon />,
+		icon: <ManageAccountsOutlinedIcon />,
 		url: "/panel/adminlist",
 	},
 ];

src/components/OptionsMenu/index.tsx

@@ -51,7 +51,7 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 				) : (
 					<Avatar
 						sizes="small"
-                        alt="Riley Carter"
+						alt="Super Admin"
 						src="/static/images/avatar/7.jpg"
 						sx={{ width: 36, height: 36 }}
 					/>
@@ -117,4 +117,3 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 		</React.Fragment>
 	);
 }
- 

src/components/SideMenuMobile/index.tsx

@@ -11,6 +11,9 @@ import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
 import MenuButton from "../MenuButton";
 import MenuContent from "../MenuContent";
 import CardAlert from "../CardAlert/CardAlert";
+import { AppDispatch, RootState } from "../../redux/store/store";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchAdminProfile } from "../../redux/slices/profileSlice";
 
 interface SideMenuMobileProps {
 	open: boolean | undefined;
@@ -21,6 +24,12 @@ export default function SideMenuMobile({
 	open,
 	toggleDrawer,
 }: SideMenuMobileProps) {
+	const dispatch = useDispatch<AppDispatch>();
+	const { user } = useSelector((state: RootState) => state?.profileReducer);
+	React.useEffect(() => {
+		dispatch(fetchAdminProfile());
+	}, [dispatch]);
+
 	return (
 		<Drawer
 			anchor="right"
@@ -47,12 +56,12 @@ export default function SideMenuMobile({
 					>
 						<Avatar
 							sizes="small"
-							alt="Riley Carter"
+							alt={user?.name || "User Avatar"}
 							src="/static/images/avatar/7.jpg"
 							sx={{ width: 24, height: 24 }}
 						/>
 						<Typography component="p" variant="h6">
-							Riley Carter
+							Super Admin
 						</Typography>
 					</Stack>
 					<MenuButton showBadge>
@@ -61,7 +70,7 @@ export default function SideMenuMobile({
 				</Stack>
 				<Divider />
 				<Stack sx={{ flexGrow: 1 }}>
-					<MenuContent />
+					<MenuContent hidden={false} />
 					<Divider />
 				</Stack>
 				<CardAlert />

src/pages/Auth/Login/index.tsx

@@ -1,18 +1,21 @@
 import * as React from "react";
-import Box from "@mui/material/Box";
+import {
-import Button from "@mui/material/Button";
+	Box,
-import Checkbox from "@mui/material/Checkbox";
+	Button,
-import CssBaseline from "@mui/material/CssBaseline";
+	Checkbox,
-import FormControlLabel from "@mui/material/FormControlLabel";
+	CssBaseline,
-import Divider from "@mui/material/Divider";
+	FormControlLabel,
-import FormLabel from "@mui/material/FormLabel";
+	FormLabel,
-import FormControl from "@mui/material/FormControl";
+	FormControl,
-import Link from "@mui/material/Link";
+	TextField,
-import TextField from "@mui/material/TextField";
+	Typography,
-import Typography from "@mui/material/Typography";
+	Stack,
-import Stack from "@mui/material/Stack";
+	Card as MuiCard,
-import MuiCard from "@mui/material/Card";
+	Grid,
-import { styled } from "@mui/material/styles";
+	IconButton,
+	Link,
+} from "@mui/material";
+import { styled, useTheme } from "@mui/material/styles";
 import { useForm, Controller, SubmitHandler } from "react-hook-form";
 import { useDispatch } from "react-redux";
 import { loginUser } from "../../../redux/slices/authSlice.ts";
@@ -21,7 +24,10 @@ import AppTheme from "../../../shared-theme/AppTheme.tsx";
 import ForgotPassword from "./ForgotPassword.tsx";
 import { toast } from "sonner";
 import { useNavigate } from "react-router-dom";
-
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { lime, purple } from "@mui/material/colors";
 const Card = styled(MuiCard)(({ theme }) => ({
 	display: "flex",
 	flexDirection: "column",
@@ -29,25 +35,31 @@ const Card = styled(MuiCard)(({ theme }) => ({
 	width: "100%",
 	padding: theme.spacing(4),
 	gap: theme.spacing(2),
-	margin: "auto",
+	margin: "16px",
+	backgroundColor: "#1E1F1F",
 	[theme.breakpoints.up("sm")]: {
 		maxWidth: "450px",
 	},
-	boxShadow:
+	// boxShadow:
-		"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
+	// 	"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
-	...theme.applyStyles("dark", {
+	// ...theme.applyStyles("dark", {
-		boxShadow:
+	// 	boxShadow:
-			"hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
+	// 		"hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
-	}),
+	// }),
 }));
-
+const theme = createTheme({
+	palette: {
+		primary: lime,
+		secondary: purple,
+	},
+});
 const SignInContainer = styled(Stack)(({ theme }) => ({
 	height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
 	minHeight: "100%",
-	padding: theme.spacing(2),
+	// padding: theme.spacing(2),
-	[theme.breakpoints.up("sm")]: {
+	// [theme.breakpoints.up("sm")]: {
-		padding: theme.spacing(4),
+	// 	padding: theme.spacing(4),
-	},
+	// },
 	"&::before": {
 		content: '""',
 		display: "block",
@@ -69,6 +81,9 @@ interface ILoginForm {
 }
 export default function Login(props: { disableCustomTheme?: boolean }) {
 	const [open, setOpen] = React.useState(false);
+
+	console.log("theme", theme.palette.background);
+	const [showPassword, setShowPassword] = React.useState(false);
 	const {
 		control,
 		handleSubmit,
@@ -98,25 +113,50 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 	};
 
 	return (
+		<ThemeProvider theme={theme}>
 			<AppTheme {...props}>
 				<CssBaseline enableColorScheme />
-			<SignInContainer direction="column" justifyContent="space-between">
+				<SignInContainer
-				<ColorModeSelect
+					direction="column"
+					justifyContent="space-between"
+				>
+					{/* <ColorModeSelect
 					sx={{ position: "fixed", top: "1rem", right: "1rem" }}
-				/>
+				/> */}
-				<Card variant="outlined">
+
-					{/* <SitemarkIcon /> */}
+					<Grid container sx={{ height: "100vh" }}>
-					Digi-EV
+						<Grid
-					<Typography
+							item
-						component="h1"
+							xs={7}
-						variant="h4"
 							sx={{
-							width: "100%",
+								background: `url('/mainPageLogo.png') center/cover no-repeat`,
-							fontSize: "clamp(2rem, 10vw, 2.15rem)",
+							}}
+						/>
+
+						<Grid
+							item
+							xs={5}
+							sx={{
+								backgroundColor: "black",
+								display: "flex",
+								justifyContent: "center",
+								alignItems: "center",
+								flexDirection: "column",
 							}}
 						>
-						Sign in
+							<Typography
+								variant="h3"
+								sx={{
+									color: "white",
+
+									textAlign: "center",
+								}}
+							>
+								Welcome Back!
 							</Typography>
+							<Card variant="outlined">
+								{/* <SitemarkIcon /> */}
+
 								<Box
 									component="form"
 									onSubmit={handleSubmit(onSubmit)}
@@ -128,8 +168,33 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										gap: 2,
 									}}
 								>
+									<Typography
+										component="h1"
+										variant="h4"
+										sx={{
+											width: "100%",
+											textAlign: "center",
+										}}
+									>
+										Login
+									</Typography>
+									<Typography
+										component="h6"
+										variant="subtitle2"
+										sx={{
+											width: "100%",
+											textAlign: "center",
+										}}
+									>
+										Log in with your email and password
+									</Typography>
 									<FormControl>
-							<FormLabel htmlFor="email">Email</FormLabel>
+										<FormLabel
+											htmlFor="email"
+											sx={{ fontSize: "1rem" }}
+										>
+											Email
+										</FormLabel>
 										<Controller
 											name="email"
 											control={control}
@@ -146,17 +211,21 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												<TextField
 													{...field}
 													error={!!errors.email}
-										helperText={errors.email?.message}
+													helperText={
+														errors.email?.message
+													}
 													id="email"
 													type="email"
-										placeholder="your@email.com"
+													placeholder="Email"
 													autoComplete="email"
 													autoFocus
 													required
 													fullWidth
 													variant="outlined"
 													color={
-											errors.email ? "error" : "primary"
+														errors.email
+															? "error"
+															: "primary"
 													}
 												/>
 											)}
@@ -164,13 +233,19 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									</FormControl>
 
 									<FormControl>
-							<FormLabel htmlFor="password">Password</FormLabel>
+										<FormLabel
+											htmlFor="password"
+											sx={{ fontSize: "1rem" }}
+										>
+											Password
+										</FormLabel>
 										<Controller
 											name="password"
 											control={control}
 											defaultValue=""
 											rules={{
-									required: "Password is required",
+												required:
+													"Password is required",
 												minLength: {
 													value: 6,
 													message:
@@ -178,12 +253,22 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												},
 											}}
 											render={({ field }) => (
+												<Box
+													sx={{
+														position: "relative",
+													}}
+												>
 													<TextField
 														{...field}
-										error={!!errors.password}
+														error={
-										helperText={errors.password?.message}
+															!!errors.password
+														}
+														helperText={
+															errors.password
+																?.message
+														}
 														name="password"
-										placeholder="••••••"
+														placeholder="Password"
 														type="password"
 														id="password"
 														autoComplete="current-password"
@@ -197,21 +282,57 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 																: "primary"
 														}
 													/>
+													<IconButton
+														sx={{
+															position:
+																"absolute",
+															top: "50%",
+															right: "10px",
+															background: "none",
+															borderColor:
+																"transparent",
+															transform:
+																"translateY(-50%)",
+															"&:hover": {
+																backgroundColor:
+																	"transparent", // Darker shade on hover
+																borderColor:
+																	"transparent",
+															},
+														}}
+														onClick={() =>
+															setShowPassword(
+																(prev) => !prev
+															)
+														}
+													>
+														{showPassword ? (
+															<VisibilityOff />
+														) : (
+															<Visibility />
+														)}
+													</IconButton>
+												</Box>
 											)}
 										/>
 									</FormControl>
-
+									<Box
+										sx={{
+											display: "flex",
+											justifyContent: "space-between",
+										}}
+									>
 										<FormControlLabel
 											control={
-								<Checkbox value="remember" color="primary" />
+												<Checkbox
+													value="remember"
+													color="primary"
+												/>
 											}
 											label="Remember me"
 										/>
-						<ForgotPassword open={open} handleClose={handleClose} />
+
-						<Button type="submit" fullWidth variant="contained">
+										<Link
-							Sign in
-						</Button>
-						{/* <Link
 											component="button"
 											type="button"
 											onClick={handleClickOpen}
@@ -219,8 +340,21 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 											sx={{ alignSelf: "center" }}
 										>
 											Forgot your password?
-						</Link> */}
+										</Link>
 									</Box>
+									<ForgotPassword
+										open={open}
+										handleClose={handleClose}
+									/>
+									<Button
+										type="submit"
+										fullWidth
+										variant="contained"
+										color="secondary"
+									>
+										Sign in
+									</Button>
+
 									{/* <Divider>or</Divider>
 					<Box
 						sx={{
@@ -240,8 +374,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 							</Link>
 						</Typography>
 					</Box> */}
+								</Box>
 							</Card>
+						</Grid>
+					</Grid>
 				</SignInContainer>
 			</AppTheme>
+		</ThemeProvider>
 	);
 }

src/pages/Dashboard/index.tsx

@@ -12,6 +12,7 @@ import {
 import DashboardLayout from '../../layouts/DashboardLayout';
 import AppTheme from '../../shared-theme/AppTheme';
 import MainGrid from '../../components/MainGrid';
+import AdminList from '../AdminList';
 
 const xThemeComponents = {
   ...chartsCustomizations,
@@ -29,7 +30,7 @@ const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) =>
     <AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
       <CssBaseline enableColorScheme />
       {!disableCustomTheme ? (
-        <MainGrid />
+        <><MainGrid /><AdminList /></>
       ) : (
         <Box
           sx={{