src/components/CustomTable/index.tsx

@@ -257,12 +257,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					? "Slot"
 					: "List"}
 			</Typography>
-
 			{/* Search & Buttons Section */}
 			<Box
 				sx={{
 					display: "flex",
-					gap: "16px",
+
 					marginTop: "16px",
 					alignItems: "center",
 				}}
@@ -277,6 +276,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						backgroundColor: "#272727",
 						"& .MuiOutlinedInput-root": {
 							borderRadius: "12px",
+							width: "422px",
+							height: "44px",
+							borderWidth: "1px",
+							padding: "14px 12px 14px 12px",
+							gap: "16px",
 							"& fieldset": { borderColor: "#FFFFFF" },
 							"&:hover fieldset": { borderColor: "#FFFFFF" },
 							"&.Mui-focused fieldset": {
@@ -312,6 +316,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 								color: "white",
 								borderRadius: "8px",
 								width: "184px",
+								marginRight: "16px",
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
 							onClick={() => handleClickOpen()}
@@ -343,15 +348,17 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						width: "44px",
 						height: "44px",
 						borderRadius: "8px",
-						backgroundColor: "#272727",
+						backgroundColor: "#1C1C1C",
 						color: "#52ACDF",
 						"&:hover": { backgroundColor: "#333333" },
+						"*:where([data-mui-color-scheme='dark']) &": {
+							backgroundColor: "#1C1C1C",
+						},
 					}}
 				>
 					<TuneIcon />
 				</IconButton>
 			</Box>
-
 			{/* Table Section */}
 			<TableContainer
 				component={Paper}
@@ -367,6 +374,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						sx={{
 							backgroundColor: "#272727",
 							borderBottom: "none",
+							".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ":
+								{
+									backgroundColor: "#272727",
+								},
 						}}
 					>
 						{" "}
@@ -384,7 +395,13 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							))}
 						</TableRow>
 					</TableHead>
-					<TableBody>
+					<TableBody
+						sx={{
+							".MuiTableCell-root": {
+								backgroundColor: "#1C1C1C",
+							},
+						}}
+					>
 						{currentRows.map((row, rowIndex) => (
 							<StyledTableRow key={rowIndex}>
 								{columns.map((column) => (
@@ -433,7 +450,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					</TableBody>
 				</Table>
 			</TableContainer>
-
 			{/* Pagination */}
 			<Box
 				sx={{
@@ -467,7 +483,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					}}
 				/>
 			</Box>
-
 			{/* Menu Actions */}
 			{open && (
 				<Menu
@@ -631,7 +646,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					</Box>
 				</Menu>
 			)}
-
 			{/* Modals */}
 			{deleteModal && (
 				<DeleteModal

src/components/LineChartCard/index.tsx

@@ -7,7 +7,7 @@ import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
 import { LineChart } from "@mui/x-charts/LineChart";
 import { Box } from "@mui/material";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 function AreaGradient({ color, id }: { color: string; id: string }) {
 	return (
 		<defs>
@@ -43,7 +43,14 @@ export default function LineChartCard() {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
+			sx={{
+				width: "553px",
+				height: "444px",
+				borderRadius: "16px",
+				"*:where([data-mui-color-scheme='dark']) &": {
+					backgroundColor: "#202020",
+				},
+			}}
 		>
 			<CardContent>
 				<div
@@ -74,29 +81,39 @@ export default function LineChartCard() {
 							marginLeft: "auto",
 							marginRight: "16px",
 							display: "flex",
-							justifyContent: "space-between",
+							justifyContent: "center",
 							alignItems: "center",
 							p: 1.5,
 							borderRadius: "8px",
 							border: "1px solid #454545",
-
-							padding: "4px 8px",
 							color: "#F2F2F2",
+
+							width: "129px",
+							height: "44px",
+							padding: "12px 16px",
+							gap: "8px",
 						}}
 					>
 						<Typography
+							width={"69px"}
+							height={"16px"}
 							sx={{
-								fontFamily: "Gilroy",
 								fontWeight: 500,
 								fontSize: "14px",
 								lineHeight: "24px",
-								color: "#F2F2F2",
+								color: "#D9D8D8",
-								p: "4px",
+
+								textAlign: "center",
 							}}
 						>
 							Weekly
 						</Typography>
-						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
+						<ExpandMoreIcon
+							width="20px"
+							height="20px"
+							
+							sx={{ color: "#F2F2F2" }}
+						/>
 					</Box>
 				</div>
 

src/components/MainGrid/index.tsx

@@ -45,7 +45,7 @@ export default function MainGrid() {
 			</Typography>
 			<Grid
 				container
-				spacing={2}
+				spacing={3}
 				columns={12}
 				
 				// sx={{ mb: (theme) => theme.spacing(2) }}

src/components/MenuContent/index.tsx

@@ -12,7 +12,12 @@ 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";
-
+import EvStationOutlinedIcon from "@mui/icons-material/EvStationOutlined";
+import EvStationIcon from "@mui/icons-material/EvStation";
+import BookOnlineOutlinedIcon from "@mui/icons-material/BookOnlineOutlined";
+import ChecklistSharpIcon from "@mui/icons-material/ChecklistSharp";
+import AnalyticsOutlinedIcon from "@mui/icons-material/AnalyticsOutlined";
+import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined";
 type PropType = {
 	hidden: boolean;
 };
@@ -31,33 +36,33 @@ export default function MenuContent({ hidden }: PropType) {
 		},
 		userRole === "superadmin" && {
 			text: "Admins",
-			icon: <AnalyticsRoundedIcon />,
+			icon: <ManageAccountsOutlinedIcon />,
 			url: "/panel/admin-list",
 		},
 		userRole === "superadmin" && {
 			text: "Roles",
-			icon: <AnalyticsRoundedIcon />,
+			icon: <AnalyticsOutlinedIcon />,
 			url: "/panel/role-list",
 		},
 		userRole === "admin" && {
 			text: "Users",
-			icon: <AnalyticsRoundedIcon />,
+			icon: <PeopleOutlinedIcon />,
 			url: "/panel/user-list",
 		},
 		userRole === "admin" && {
 			text: "Charging Stations",
-			icon: <ManageAccountsOutlinedIcon />,
+			icon: <EvStationIcon />,
 			url: "/panel/station-list", // Placeholder for now
 		},
 		userRole === "admin" && {
 			text: "Managers",
-			icon: <ManageAccountsOutlinedIcon />,
+			icon: <PeopleOutlinedIcon />,
 			url: "/panel/manager-list", // Placeholder for now
 		},
 
 		userRole === "admin" && {
 			text: "Vehicles",
-			icon: <ManageAccountsOutlinedIcon />,
+			icon: <AnalyticsOutlinedIcon />,
 			url: "/panel/vehicle-list", // Placeholder for now
 		},
 		// userRole === "manager" && {
@@ -67,17 +72,17 @@ export default function MenuContent({ hidden }: PropType) {
 		// },
 		userRole === "user" && {
 			text: "Bookings",
-			icon: <ManageAccountsOutlinedIcon />,
+			icon: <BookOnlineOutlinedIcon />,
 			url: "/panel/booking-list", // Placeholder for now
 		},
 		userRole === "manager" && {
 			text: "Available Slots",
-			icon: <ManageAccountsOutlinedIcon />,
+			icon: <ChecklistSharpIcon />,
 			url: "/panel/slot-list", // Placeholder for now
 		},
 		userRole === "user" && {
 			text: "Available Slots",
-			icon: <ManageAccountsOutlinedIcon />,
+			icon: <ChecklistSharpIcon />,
 			url: "/panel/slot-list", // Placeholder for now
 		},
 	];
@@ -85,7 +90,14 @@ export default function MenuContent({ hidden }: PropType) {
 	const filteredMenuItems = baseMenuItems.filter(Boolean);
 
 	return (
-		<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
+		<Stack
+			sx={{
+				flexGrow: 1,
+				p: 1,
+				justifyContent: "space-between",
+				backgroundColor: "#202020",
+			}}
+		>
 			<List dense>
 				{filteredMenuItems.map((item, index) => (
 					<ListItem
@@ -104,6 +116,7 @@ export default function MenuContent({ hidden }: PropType) {
 									minWidth: "fit-content",
 									".MuiSvgIcon-root": {
 										fontSize: 24,
+										color: "#FFFFFF",
 									},
 								}}
 							>
@@ -113,8 +126,14 @@ export default function MenuContent({ hidden }: PropType) {
 								sx={{
 									display: !hidden ? "none" : "",
 									transition: "all 0.5s ease",
+
 									".MuiListItemText-primary": {
+										width: "118px",
+										height: "19px",
 										fontSize: "16px",
+										letterSpacing: "0%",
+										lineHeight: "100%",
+										color: "#D9D8D8",
 									},
 								}}
 								primary={item.text}

src/components/ResourcePieChart/index.tsx

@@ -28,11 +28,15 @@ export default function ResourcePieChart() {
 			sx={{
 				display: "flex",
 				flexDirection: "column",
-				gap: "8px",
+				gap: "12px",
 				flexGrow: 1,
-				width: "100%",
+				width: "553px",
-				height: "100%",
+				height: "324px",
+				padding: "16px",
+				borderRadius: "16px",
+				"*:where([data-mui-color-scheme='dark']) &": {
 					backgroundColor: "#202020",
+				},
 			}}
 		>
 			<CardContent>
@@ -40,11 +44,13 @@ export default function ResourcePieChart() {
 					component="h2"
 					variant="subtitle2"
 					color="#F2F2F2"
+					width="84px"
+					height="24px"
 					sx={{
-						fontFamily: "Gilroy",
 						fontWeight: 500,
 						fontSize: "18px",
 						lineHeight: "24px",
+						color: "#FFFFFF",
 					}}
 				>
 					Resources
@@ -93,7 +99,12 @@ export default function ResourcePieChart() {
 										borderRadius: "50%",
 									}}
 								/>
-								<Typography variant="body2" color="#F2F2F2">
+								<Typography
+									variant="body2"
+									width="100px"
+									height="16px"
+									color="#FFFFFF"
+								>
 									{entry.title}
 								</Typography>
 							</Stack>

src/components/SessionsChart/index.tsx

@@ -5,15 +5,21 @@ import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
+
 export default function SessionsChart() {
 	return (
 		<Card
 			variant="outlined"
 			sx={{
-				width: "100%",
+				width: "553px",
-				height: "100%",
+				height: "324px",
+				gap: "16px",
+				borderRadius: "16px",
+				padding: "20px",
+				"*:where([data-mui-color-scheme='dark']) &": {
 					backgroundColor: "#202020",
-				p: 2,
+				},
+				
 			}}
 		>
 			<CardContent>
@@ -21,11 +27,16 @@ export default function SessionsChart() {
 					variant="h6"
 					align="left"
 					color="#F2F2F2"
+					width="132px"
+					height="24px"
+					gap={"12px"}
 					sx={{
 						fontFamily: "Gilroy",
 						fontWeight: 500,
 						fontSize: "18px",
 						lineHeight: "24px",
+						letterSpacing: "0%",
+						color: "#FAFAFA",
 					}}
 				>
 					Charging prices
@@ -50,13 +61,15 @@ export default function SessionsChart() {
 					}}
 				>
 					<Typography
+						width="134px"
+						height="24px"
 						sx={{
 							fontFamily: "Gilroy",
 							fontWeight: 500,
 							fontSize: "14px",
 							lineHeight: "24px",
-							color: "#F2F2F2",
+							color: "#D9D8D8",
-							p: "4px",
+							
 						}}
 					>
 						Delhi NCR EV Station
@@ -78,7 +91,6 @@ export default function SessionsChart() {
 						mx: "auto",
 					}}
 				>
-					{/* You can map over your data here; for simplicity, we’re using static boxes */}
 					{[1, 2, 3, 4].map((item) => (
 						<Box
 							key={item}
@@ -87,23 +99,47 @@ export default function SessionsChart() {
 								borderRadius: "8px",
 								p: "12px 16px",
 								backgroundColor: "#272727",
-								color: "#F2F2F2",
+								color: "#D9D8D8",
 							}}
 						>
 							<Typography
 								component="h1"
 								variant="body2"
+								width="98px"
+								height="24px"
+								fontWeight={400}
+								fontSize={"14px"}
+								lineHeight={"24px"}
 								gutterBottom
 							>
 								Basic Charging
 							</Typography>
+							<Box display={"flex"} gap={1}>
 								<Typography
 									component="h1"
 									variant="subtitle2"
+									color="#FFFFFF"
+									width="40px"
+									height={"24px"}
+									fontWeight={500}
+									fontSize="18px"
+									lineHeight="24px"
 									gutterBottom
 								>
-								16.83 cents/kWh
+									16.83
 								</Typography>
+
+								<Typography
+									width="71px"
+									height="24px"
+									gap="2px"
+									fontWeight={400}
+									fontSize={"14px"}
+									lineHeight={"24px"}
+								>
+									cents/kWh
+								</Typography>
+							</Box>
 						</Box>
 					))}
 				</Box>

src/components/SideMenu/index.tsx

@@ -64,19 +64,17 @@ export default function SideMenu() {
 					pl: 2,
 				}}
 			>
-		
 				<Avatar
 					alt="Logo"
 					src="/Digilogo.png"
 					sx={{
 						width: "50px",
 						height: "50px",
-						
 					}}
 				/>
 				<Box
 					sx={{
-						display: "flex",
+						display: open ? "flex" : "none",
 						flexDirection: "column",
 						alignItems: "center",
 						pt: 2,
@@ -98,7 +96,6 @@ export default function SideMenu() {
 						{user?.userType || "N/A"}
 					</Typography>
 				</Box>
-				
 			</Box>
 
 			<Box

src/components/StatCard/index.tsx

@@ -18,13 +18,28 @@ export default function StatCard({ title, value }: StatCardProps) {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ height: "100%", backgroundColor: "#202020" }}
+			sx={{
+				width: "264.5px",
+				height: "90px",
+				padding: "16px",
+				borderRadius: "12px",
+				gap: "24px",
+				"*:where([data-mui-color-scheme='dark']) &": {
+					backgroundColor: "#202020",
+				},
+			}}
 		>
 			<CardContent>
 				<Typography
 					component="h2"
 					variant="subtitle2"
 					color="#F2F2F2"
+					width={"118px"}
+					height={"14px"}
+					fontWeight={400}
+					fontSize={"12px"}
+					lineHeight={"14px"}
+					letterSpacing={"0%"}
 					gutterBottom
 				>
 					{title}
@@ -33,8 +48,12 @@ export default function StatCard({ title, value }: StatCardProps) {
 					component="h1"
 					variant="body1"
 					color="#F2F2F2"
-					fontSize={30}
+					width={"36px"}
-					fontWeight={700}
+					height={"36px"}
+					fontSize={"32px"}
+					fontWeight={600}
+					lineHeight={"36px"}
+					letterSpacing={"0%"}
 					gutterBottom
 				>
 					{value}

src/components/barChartCard/index.tsx

@@ -1,20 +1,8 @@
 import * as React from "react";
 import { useTheme } from "@mui/material/styles";
-import {
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from "recharts";
-	BarChart,
+import { Card, CardContent, Typography, Box } from "@mui/material";
-	Bar,
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-	XAxis,
-	YAxis,
-	CartesianGrid,
-} from "recharts";
-import {
-	Card,
-	CardContent,
-	Typography,
-	Box,
-	
-} from "@mui/material";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 const data = [
 	{ name: "Jan", v1: 40 },
 	{ name: "Feb", v1: 50 },
@@ -30,7 +18,14 @@ export default function RoundedBarChart() {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
+			sx={{
+				width: "553px",
+				height: "444px",
+				borderRadius: "16px",
+				"*:where([data-mui-color-scheme='dark']) &": {
+					backgroundColor: "#202020",
+				},
+			}}
 		>
 			<CardContent>
 				<div
@@ -61,29 +56,41 @@ export default function RoundedBarChart() {
 							marginLeft: "auto",
 							marginRight: "16px",
 							display: "flex",
-							justifyContent: "space-between",
+							justifyContent: "center",
 							alignItems: "center",
 							p: 1.5,
 							borderRadius: "8px",
 							border: "1px solid #454545",
 
-							padding: "4px 8px",
+							// padding: "4px 8px",
 							color: "#F2F2F2",
+							width: "129px",
+							height: "44px",
+							padding: "12px 16px",
+							gap: "8px",
 						}}
 					>
 						<Typography
+							width={"69px"}
+							height={"16px"}
 							sx={{
-								fontFamily: "Gilroy",
+								
 								fontWeight: 500,
 								fontSize: "14px",
 								lineHeight: "24px",
-								color: "#F2F2F2",
+								color: "#D9D8D8",
-								p: "4px",
+
+								textAlign: "center",
 							}}
 						>
 							Monthly
 						</Typography>
-						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
+						<ExpandMoreIcon
+							width="20px"
+							height="20px"
+							
+							sx={{ color: "#F2F2F2"  ,textAlign: "center", }}
+						/>
 					</Box>
 				</div>
 				<BarChart

src/lib/https.ts

@@ -14,9 +14,12 @@ http.interceptors.request.use((config) => {
 http.interceptors.response.use(
 	(response) => response, 
 	(error) => {
+		
 		if (error.response && error.response.status === 401) {
 			
-			window.location.href = "/login"; 
+
+			
+			// window.location.href = "/login"; 
 			
 			// const history = useHistory();
 			// history.push("/login");

src/pages/AdminList/index.tsx

@@ -83,6 +83,8 @@ export default function AdminList() {
 		{ id: "email", label: "Email" },
 		{ id: "phone", label: "Phone" },
 		{ id: "registeredAddress", label: "Address" },
+		{ id: "userType", label: "Role" },
+
 		{ id: "action", label: "Action", align: "center" },
 	];
 
@@ -93,7 +95,8 @@ export default function AdminList() {
 				name: string;
 				email: string;
 				phone: string;
-				Admins: { registeredAddress: string }[]; // Adjusted to support array of Admins
+				Admins: { registeredAddress: string }[];
+				userType:string;
 			},
 			index: number
 		) => ({
@@ -103,6 +106,7 @@ export default function AdminList() {
 			email: admin?.email,
 			phone: admin?.phone,
 			registeredAddress: admin?.Admins?.[0]?.registeredAddress || "NA",
+			userType:admin?.userType||"NA",
 		})
 	);
 

src/pages/ManagerList/index.tsx

@@ -146,7 +146,7 @@ export default function ManagerList() {
 
 const categoryRows = filteredManagers?.length
 	? filteredManagers.map((manager, index) => {
-			const station = manager?.ChargingStation; // Correct access to the ChargingStation data
+			const station = manager?.chargingStation; // Correct access to the ChargingStation data
 			return {
 				id: manager.id,
 				srno: index + 1,

src/pages/ProfilePage/index.tsx

@@ -42,14 +42,24 @@ const ProfilePage = () => {
 	}
 
 	return (
-		<Container sx={{ py: 4 }}>
+		<Container
+			sx={{
+				py: 4,
+			}}
+		>
 			<Typography variant="h4" gutterBottom>
 				Account Info
 			</Typography>
 			<Card
 				sx={{
+					width: "1132px",
+					height: "331px",
+					gap: "24px",
+					borderRadius: "12px",
+					padding: "16px",
 					maxWidth: "100%",
 					margin: "0 auto",
+					backgroundColor: "#1C1C1C",
 				}}
 			>
 				<CardContent>
@@ -62,16 +72,29 @@ const ProfilePage = () => {
 							<Avatar
 								alt="User Avatar"
 								src="/avatar.png"
-								sx={{ width: 36, height: 36 }}
+								sx={{ width: "60px", height: "60px" }}
 							/>
 							<Box>
 								<Typography
 									variant="body1"
+									width="1028px"
+									height="24px"
+									fontWeight={500}
+									fontSize={"20px"}
+									lineHeight={"100%"}
 									sx={{ color: "#FFFFFF" }}
 								>
 									{user?.name || "No Admin"}
 								</Typography>
-								<Typography variant="body2" color="#D9D8D8">
+								<Typography
+									variant="body2"
+									color="#D9D8D8"
+									fontWeight={400}
+									fontSize={"16px"}
+									lineHeight={"100%"}
+									width="46px"
+									height="19px"
+								>
 									{user?.userType || "N/A"}
 								</Typography>
 							</Box>
@@ -88,6 +111,11 @@ const ProfilePage = () => {
 						>
 							<Typography
 								variant="body1"
+								width="1048px"
+								height="19px"
+								fontWeight={500}
+								fontSize={"16px"}
+								lineHeight={"100%"}
 								sx={{ color: "#FFFFFF" }}
 							>
 								Personal Information
@@ -95,23 +123,39 @@ const ProfilePage = () => {
 							<Link
 								variant="body1"
 								href="/edit-profile"
-				
 								color="#52ACDF"
-								
 							>
 								Edit
 							</Link>
 						</Stack>
 
-						<Grid container>
+						<Grid
-							<Grid item xs={12} sm={4}>
+							container
+							width="1100px"
+							height="38px"
+							// gap={"100px"}
+						>
+							<Grid
+								item
+								xs={12}
+								sm={4}
+								width="64px"
+								height="16px"
+								fontSize={"14px"}
+								lineHeight={"100%"}
+							>
 								<Typography
 									variant="body1"
+									fontWeight={500}
 									sx={{ color: "#FFFFFF" }}
 								>
 									Full Name:
 								</Typography>
-								<Typography variant="body2" color="#D9D8D8">
+								<Typography
+									variant="body2"
+									fontWeight={400}
+									color="#D9D8D8"
+								>
 									{user?.name || "N/A"}
 								</Typography>
 							</Grid>
@@ -139,10 +183,20 @@ const ProfilePage = () => {
 							</Grid>
 						</Grid>
 
-						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
+						<Typography
+							variant="body1"
+							width="21px"
+							height="16px"
+							sx={{ color: "#FFFFFF" }}
+						>
 							Bio:
 						</Typography>
-						<Typography variant="body2" color="#D9D8D8">
+						<Typography
+							variant="body2"
+							width="1100px"
+							height="32px"
+							color="#D9D8D8"
+						>
 							{user?.bio || "No bio available."}
 						</Typography>
 					</Stack>

src/redux/slices/managerSlice.ts

@@ -11,6 +11,7 @@ interface Manager {
 	email: string;
 	phone: string;
 	stationId: string;
+	chargingStation:string;
 }
 
 interface ManagerState {