Merge pull request 'Latest changes as per UI requirement' (#31) from bugfixes into develop

Reviewed-on: DigiMantra/digiev_frontend#31

src/components/AddEditAdminModal/addEditAdminModal.tsx

@@ -158,6 +158,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 									display: "flex",
 									flexDirection: "column",
 									width: "50%",
+									...autofillFix,
 								}}
 							>
 								<Typography variant="body2" fontWeight={500}>
@@ -189,8 +190,11 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 											{...field}
 											required
 											placeholder="Enter Admin Name"
+											// autoComplete="new-username"
+											type="text"
 											fullWidth
 											size="small"
+											sx={{ marginTop: 1 }}
 											error={!!errors.name}
 											helperText={errors.name?.message}
 										/>
@@ -229,6 +233,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 											type="email"
 											placeholder="Email"
 											autoComplete="new-email"
+											sx={{ marginTop: 1 }}
 											required
 											fullWidth
 											color={
@@ -294,6 +299,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 														: "primary"
 												}
 												size="small"
+												sx={{ marginTop: 1 }}
 												slotProps={{
 													input: {
 														endAdornment: (
@@ -329,6 +335,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 									display: "flex",
 									flexDirection: "column",
 									width: "50%",
+									...autofillFix,
 								}}
 							>
 								<Typography variant="body2" fontWeight={500}>
@@ -358,6 +365,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 											required
 											placeholder="Enter Phone Number"
 											size="small"
+											sx={{ marginTop: 1 }}
 											error={!!errors.phone}
 											helperText={errors.phone?.message}
 										/>
@@ -372,6 +380,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 								display: "flex",
 								flexDirection: "column",
 								width: "50%",
+								...autofillFix,
 							}}
 						>
 							<Typography variant="body2" fontWeight={500}>
@@ -392,6 +401,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 									<CustomTextField
 										{...field}
 										required
+										sx={{ marginTop: 1 }}
 										placeholder="Enter Address"
 										fullWidth
 										size="small"

src/components/AddManagerModal/addManagerModal.tsx

@@ -121,7 +121,7 @@ export default function AddManagerModal({
 				<form onSubmit={handleSubmit(onSubmit)}>
 					{/* Manager Name */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
-						<Box sx={{ flex: 1 }}>
+						<Box sx={{ flex: 1, ...autofillFix }}>
 							<Typography variant="body2" fontWeight={500}>
 								Manager Name
 							</Typography>
@@ -129,6 +129,8 @@ export default function AddManagerModal({
 								fullWidth
 								placeholder="Enter Manager Name"
 								size="small"
+								sx={{ marginTop: 1 }}
+
 								error={!!errors.name}
 								helperText={
 									errors.name ? errors.name.message : ""
@@ -158,17 +160,43 @@ export default function AddManagerModal({
 					{/* Station Dropdown */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
 						<Box sx={{ flex: 1 }}>
-							<Typography variant="body2" fontWeight={500}>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+							>
 								Select Station
 							</Typography>
-							<FormControl fullWidth error={!!errors.stationName}>
+							<FormControl
-								<InputLabel>Select Station</InputLabel>
+								fullWidth
+								size="small"
+								error={!!errors.stationName}
+							>
 								<Select
 									{...register("stationName", {
 										required: "Station Name is required",
 									})}
+									sx={{ marginTop: 1 }}
+
+									displayEmpty
 									defaultValue=""
-									size="small"
+									renderValue={(selected) => {
+										if (!selected) {
+											return (
+												<Typography color="text.secondary">
+													Choose Station
+												</Typography>
+											);
+										}
+
+										return selected;
+									}}
+									MenuProps={{
+										PaperProps: {
+											style: {
+												maxHeight: 224,
+											},
+										},
+									}}
 								>
 									{Array.isArray(stations) &&
 									stations.length > 0 ? (
@@ -187,7 +215,11 @@ export default function AddManagerModal({
 									)}
 								</Select>
 								{errors.stationName && (
-									<Typography color="error" variant="body2">
+									<Typography
+										color="error"
+										variant="body2"
+										sx={{ mt: 0.5 }}
+									>
 										{errors.stationName.message}
 									</Typography>
 								)}
@@ -206,6 +238,8 @@ export default function AddManagerModal({
 								fullWidth
 								placeholder="Enter Manager Email"
 								size="small"
+								sx={{ marginTop: 1 }}
+
 								autoComplete="new-email"
 								error={!!errors.email}
 								helperText={
@@ -246,6 +280,8 @@ export default function AddManagerModal({
 									<CustomTextField
 										{...field}
 										required
+										sx={{ marginTop: 1 }}
+
 										autoComplete="new-password"
 										placeholder="Enter Password"
 										type={
@@ -289,7 +325,7 @@ export default function AddManagerModal({
 
 					{/* Phone Number */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
-						<Box sx={{ flex: 1 }}>
+						<Box sx={{ flex: 1, ...autofillFix }}>
 							<Typography variant="body2" fontWeight={500}>
 								Phone Number
 							</Typography>
@@ -297,6 +333,8 @@ export default function AddManagerModal({
 								fullWidth
 								placeholder="Enter Phone Number"
 								size="small"
+								sx={{ marginTop: 1 }}
+
 								error={!!errors.phone}
 								helperText={
 									errors.phone ? errors.phone.message : ""

src/components/AddSlotModal/addSlotModal.tsx

@@ -38,13 +38,17 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
 			<DialogTitle>Add EV Slot</DialogTitle>
 			<DialogContent>
 				<form onSubmit={handleSubmit(onSubmit)}>
+					<Typography variant="body2" fontWeight={500}>
+						Date
+					</Typography>
 					<TextField
 						{...register("date", {
 							required: "Date is required",
 							validate: (value) =>
 								value >= today || "Date cannot be in the past",
 						})}
-						label="Date"
+						// label="Date"
+						// sx={{ marginTop: 1 }}
 						type="date"
 						fullWidth
 						margin="normal"
@@ -58,12 +62,16 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
 						// Set the min value to today's date
 						inputProps={{ min: today }}
 					/>
+					<Typography variant="body2" fontWeight={500}>
+						Start Hour
+					</Typography>
 					<TextField
 						{...register("startHour", {
 							required: "Start hour is required",
 						})}
-						label="Start Hour"
+						// label="Start Hour"
 						type="time"
+						// sx={{ marginTop: 1 }}
 						fullWidth
 						margin="normal"
 						slotProps={{
@@ -74,12 +82,16 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
 						error={!!errors.startHour}
 						helperText={errors.startHour?.message}
 					/>
+					<Typography variant="body2" fontWeight={500}>
+						End Hour
+					</Typography>
 					<TextField
 						{...register("endHour", {
 							required: "End hour is required",
 						})}
-						label="End Hour"
+						// label="End Hour"
 						type="time"
+						// sx={{ marginTop: 1 }}
 						fullWidth
 						margin="normal"
 						InputLabelProps={{
@@ -95,10 +107,13 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
 						justifyContent="space-between"
 						gap={2}
 					>
+
 						<Button
 							onClick={() => setIsAvailable((prev) => !prev)}
 							variant={isAvailable ? "contained" : "outlined"}
 							color="primary"
+							sx={{ marginTop: 1 }}
+
 						>
 							Check Availability
 						</Button>

src/components/AddStationLocation/addStationLocation.tsx

@@ -44,7 +44,8 @@ const AddStationLocationModal = ({
 									"City name must be at least 2 characters",
 							},
 						})}
-						label="City Name"
+						// label="City Name"
+						placeholder="Enter City Name"
 						fullWidth
 						margin="normal"
 						error={!!errors.city}

src/components/AddStationModal/addStationModal.tsx

@@ -22,6 +22,8 @@ import {
 	vehicleList,
 } from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly
 import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components
+import React from "react";
+import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";
 
 export default function AddStationModal({
 	open,
@@ -158,6 +160,7 @@ export default function AddStationModal({
 									display: "flex",
 									flexDirection: "column",
 									width: "100%",
+									...autofillFix,
 								}}
 							>
 								<Typography variant="body2" fontWeight={500}>
@@ -167,6 +170,7 @@ export default function AddStationModal({
 									fullWidth
 									placeholder="Enter Station Name"
 									size="small"
+									sx={{ marginTop: 1 }}
 									error={!!errors.name}
 									helperText={
 										errors.name ? errors.name.message : ""
@@ -192,6 +196,7 @@ export default function AddStationModal({
 									display: "flex",
 									flexDirection: "column",
 									width: "100%",
+									...autofillFix,
 								}}
 							>
 								<Typography variant="body2" fontWeight={500}>
@@ -201,6 +206,8 @@ export default function AddStationModal({
 									fullWidth
 									placeholder="Enter Charging Station Address"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									error={!!errors.registeredAddress}
 									helperText={
 										errors.registeredAddress
@@ -231,6 +238,8 @@ export default function AddStationModal({
 									fullWidth
 									placeholder="Enter Total Slots"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									type="number"
 									error={!!errors.totalSlots}
 									helperText={
@@ -252,116 +261,118 @@ export default function AddStationModal({
 
 						{/* Vehicle Brand Dropdown with Checkboxes */}
 						<Box sx={{ display: "flex", gap: 2 }}>
-							<Box
+								<Box
-								sx={{
+									sx={{
-									display: "flex",
+										display: "flex",
-									flexDirection: "column",
+										flexDirection: "column",
-									width: "100%",
+										width: "100%",
-								}}
+									}}
-							>
-								<Typography
-									variant="body2"
-									fontWeight={500}
-									sx={{ mb: 1 }}
 								>
-									Vehicle Brand
+									<Typography
-								</Typography>
+										variant="body2"
-								<FormControl fullWidth size="small">
+										fontWeight={500}
-									<Select
+										sx={{ mb: 1 }}
-										multiple
-										displayEmpty
-										value={selectedBrands}
-										onChange={handleBrandChange}
-										renderValue={(selected) => {
-											if (selected.length === 0) {
-												return (
-													<Typography color="text.secondary">
-														Choose Brands
-													</Typography>
-												);
-											}
-
-											const displayNames = (
-												selected as string[]
-											).slice(0, 1);
-											const moreCount =
-												(selected as string[]).length -
-												1;
-
-											return (
-												<Box
-													sx={{
-														display: "flex",
-														flexWrap: "wrap",
-														gap: 0.5,
-													}}
-												>
-													{displayNames.map((id) => {
-														const brand =
-															vehicleBrands.find(
-																(b) =>
-																	b.id === id
-															);
-														return brand ? (
-															<Chip
-																key={id}
-																label={
-																	brand.name
-																}
-																size="small"
-																sx={{
-																	height: 24,
-																}}
-															/>
-														) : null;
-													})}
-													{moreCount > 0 && (
-														<Chip
-															label={`+${moreCount} more`}
-															size="small"
-															sx={{ height: 24 }}
-														/>
-													)}
-												</Box>
-											);
-										}}
-										MenuProps={{
-											PaperProps: {
-												style: {
-													maxHeight: 224,
-												},
-											},
-										}}
 									>
-										{vehicleBrands.length > 0 ? (
+										Vehicle Brand
-											vehicleBrands.map((brand) => (
+									</Typography>
-												<MenuItem
+									<FormControl fullWidth size="small">
-													key={brand.id}
+										<Select
-													value={brand.id}
+											multiple
-												>
+											displayEmpty
-													<Checkbox
+											sx={{ marginTop: 1 }}
-														checked={selectedBrands.includes(
+
-															brand.id
+											value={selectedBrands}
+											onChange={handleBrandChange}
+											renderValue={(selected) => {
+												if (selected.length === 0) {
+													return (
+														<Typography color="text.secondary">
+															Choose Brands
+														</Typography>
+													);
+												}
+
+												const displayNames = (
+													selected as string[]
+												).slice(0, 1);
+												const moreCount =
+													(selected as string[]).length -
+													1;
+
+												return (
+													<Box
+														sx={{
+															display: "flex",
+															flexWrap: "wrap",
+															gap: 0.5,
+														}}
+													>
+														{displayNames.map((id) => {
+															const brand =
+																vehicleBrands.find(
+																	(b) =>
+																		b.id === id
+																);
+															return brand ? (
+																<Chip
+																	key={id}
+																	label={
+																		brand.name
+																	}
+																	size="small"
+																	sx={{
+																		height: 24,
+																	}}
+																/>
+															) : null;
+														})}
+														{moreCount > 0 && (
+															<Chip
+																label={`+${moreCount} more`}
+																size="small"
+																sx={{ height: 24 }}
+															/>
 														)}
-													/>
+													</Box>
-													<ListItemText
+												);
-														primary={brand.name}
+											}}
-													/>
+											MenuProps={{
+												PaperProps: {
+													style: {
+														maxHeight: 224,
+													},
+												},
+											}}
+										>
+											{vehicleBrands.length > 0 ? (
+												vehicleBrands.map((brand) => (
+													<MenuItem
+														key={brand.id}
+														value={brand.id}
+													>
+														<Checkbox
+															checked={selectedBrands.includes(
+																brand.id
+															)}
+														/>
+														<ListItemText
+															primary={brand.name}
+														/>
+													</MenuItem>
+												))
+											) : (
+												<MenuItem disabled>
+													No vehicle brands available
 												</MenuItem>
-											))
+											)}
-										) : (
+										</Select>
-											<MenuItem disabled>
+										<FormHelperText>
-												No vehicle brands available
+											{errors.vehicleBrand
-											</MenuItem>
+												? errors.vehicleBrand.message
-										)}
+												: ""}
-									</Select>
+										</FormHelperText>
-									<FormHelperText>
+									</FormControl>
-										{errors.vehicleBrand
+								</Box>
-											? errors.vehicleBrand.message
-											: ""}
-									</FormHelperText>
-								</FormControl>
-							</Box>
 
 							{/* Replace the Vehicle Name Dropdown code with this */}
 							<Box
@@ -386,6 +397,8 @@ export default function AddStationModal({
 									<Select
 										multiple
 										displayEmpty
+										sx={{ marginTop: 1 }}
+
 										value={selectedVehicles}
 										onChange={handleVehicleChange}
 										renderValue={(selected) => {

src/components/AddUserModal/addUserModal.tsx

@@ -140,6 +140,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 										placeholder="Enter User Name"
 										fullWidth
 										size="small"
+										sx={{ marginTop: 1 }}
 										error={!!errors.name}
 										helperText={errors.name?.message}
 									/>
@@ -177,6 +178,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 										type="email"
 										placeholder="Email"
 										autoComplete="new-email"
+										sx={{ marginTop: 1 }}
 										required
 										fullWidth
 										color={
@@ -228,6 +230,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 												: "primary"
 										}
 										size="small"
+										sx={{ marginTop: 1 }}
 										slotProps={{
 											input: {
 												endAdornment: (
@@ -261,6 +264,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 								display: "flex",
 								flexDirection: "column",
 								flex: 1,
+								...autofillFix,
 							}}
 						>
 							<Typography variant="body2" fontWeight={500}>
@@ -290,6 +294,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 										required
 										placeholder="Enter Phone Number"
 										size="small"
+										sx={{ marginTop: 1 }}
 										error={!!errors.phone}
 										helperText={errors.phone?.message}
 									/>

src/components/AddVehicleModal/addVehicleModal.tsx

@@ -94,6 +94,8 @@ export default function AddVehicleModal({
 									fullWidth
 									placeholder="Enter Company Name"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									error={!!errors.company}
 									helperText={
 										errors.company
@@ -124,6 +126,8 @@ export default function AddVehicleModal({
 									fullWidth
 									placeholder="Enter Vehicle Name"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									error={!!errors.name}
 									helperText={
 										errors.name ? errors.name.message : ""
@@ -166,6 +170,8 @@ export default function AddVehicleModal({
 									fullWidth
 									placeholder="Enter Model Name"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									error={!!errors.modelName}
 									helperText={
 										errors.modelName
@@ -192,6 +198,8 @@ export default function AddVehicleModal({
 									fullWidth
 									placeholder="Enter Charge Type"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									error={!!errors.chargeType}
 									helperText={
 										errors.chargeType
@@ -220,6 +228,8 @@ export default function AddVehicleModal({
 								fullWidth
 								placeholder="Enter Image URL"
 								size="small"
+								sx={{ marginTop: 1 }}
+
 								error={!!errors.imageUrl}
 								helperText={
 									errors.imageUrl

src/components/AppNavbar/index.tsx

@@ -9,8 +9,16 @@ import Typography from "@mui/material/Typography";
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
 import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../../redux/store/store";
+import { fetchAdminProfile } from "../../redux/slices/profileSlice";
+import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
+import InputBase from "@mui/material/InputBase";
+import SearchIcon from "@mui/icons-material/Search";
 import MenuButton from "../MenuButton";
 import SideMenuMobile from "../SideMenuMobile";
+import { Avatar } from "@mui/material";
+import OptionsMenu from "../OptionsMenu";
 
 const Toolbar = styled(MuiToolbar)({
 	width: "100%",
@@ -30,18 +38,28 @@ const Toolbar = styled(MuiToolbar)({
 
 export default function AppNavbar() {
 	const [open, setOpen] = React.useState(false);
+	const [showNotifications, setShowNotifications] = React.useState(false);
+	const toggleNotifications = () => {
+		setShowNotifications((prev) => !prev);
+	};
 
+	const dispatch = useDispatch<AppDispatch>();
+	const { user } = useSelector((state: RootState) => state?.profileReducer);
 	const toggleDrawer = (newOpen: boolean) => () => {
 		setOpen(newOpen);
 	};
 
+	React.useEffect(() => {
+		dispatch(fetchAdminProfile());
+	}, [dispatch]);
+
 	return (
 		<AppBar
 			position="fixed"
 			sx={{
 				display: { xs: "auto", md: "none" },
 				boxShadow: 0,
-				backgroundColor:"#1C1C1C",
+				backgroundColor: "#1C1C1C",
 				backgroundImage: "none",
 				borderBottom: "1px solid",
 				borderColor: "divider",
@@ -64,13 +82,64 @@ export default function AppNavbar() {
 						sx={{ justifyContent: "center", mr: "auto" }}
 					>
 						<CustomIcon />
-						<Typography
+						{/* <Typography
 							variant="h4"
 							component="h1"
 							sx={{ color: "#202020" }}
 						>
 							Dashboard
+						</Typography> */}
+					</Stack>
+					<Box
+						sx={{
+							// width: { xs: "100%", sm: "360px" },
+							height: "40px",
+
+							borderRadius: "8px",
+							border: "1px solid #424242",
+							display: {
+								md: "none",
+								xs: "flex",
+								sm: "flex",
+								lg: "none",
+							},
+							alignItems: "center",
+							padding: "0 12px",
+						}}
+					>
+						<SearchIcon sx={{ color: "#FFFFFF" }} />
+						<InputBase
+							sx={{
+								marginLeft: 1,
+								flex: 1,
+								color: "#FFFFFF",
+								fontSize: { xs: "12px", sm: "14px" },
+							}}
+						/>
+					</Box>
+					<Stack
+						direction="row"
+						spacing={2}
+						alignItems="center"
+						sx={{
+							pointer: "cursor",
+							display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
+						}}
+					>
+						<NotificationsNoneIcon
+							sx={{ cursor: "pointer" }}
+							onClick={toggleNotifications}
+						/>
+						<Avatar
+							alt="User Avatar"
+							src="/avatar.png"
+							sx={{ width: 36, height: 36 }}
+						/>
+						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
+							{user?.name || "No Adminsss"}
 						</Typography>
+
+						<OptionsMenu />
 					</Stack>
 					{/* <ColorModeIconDropdown /> */}
 					<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
@@ -85,26 +154,29 @@ export default function AppNavbar() {
 }
 
 export function CustomIcon() {
+	const [open, setOpen] = React.useState(true);
+
 	return (
 		<Box
 			sx={{
-				width: "1.5rem",
-				height: "1.5rem",
-				bgcolor: "black",
-				borderRadius: "999px",
 				display: "flex",
+				flexDirection: "row",
 				justifyContent: "center",
 				alignItems: "center",
-				alignSelf: "center",
+				pt: 2,
-				backgroundImage:
-					"linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)",
-				color: "hsla(210, 100%, 95%, 0.9)",
-				border: "1px solid",
-				borderColor: "hsl(210, 100%, 55%)",
-				boxShadow: "inset 0 2px 5px rgba(255, 255, 255, 0.3)",
 			}}
 		>
-			<DashboardRoundedIcon color="inherit" sx={{ fontSize: "1rem" }} />
+			<img
+				src="/evLogo.png"
+				alt="Logo"
+				style={{
+					justifyContent: "center",
+					width: open ? "120px" : "60px",
+					height: "auto",
+					transition: "width 0.5s ease",
+					marginBottom: "10px",
+				}}
+			/>
 		</Box>
 	);
 }

src/components/CustomTable/customTable.tsx

@@ -58,9 +58,13 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
 	"&:nth-of-type(odd)": {
 		backgroundColor: theme.palette.action.hover,
 	},
+	"&:nth-of-type(even)": {
+		backgroundColor: theme.palette.action.hover,
+	},
 	"& td, th": {
 		borderColor: "#454545", // Applying border color to both td and th
 		borderWidth: "1px", // Set border width to ensure it appears
+		borderBottom: "1px solid #454545",
 	},
 }));
 
@@ -227,11 +231,16 @@ const CustomTable: React.FC<CustomTableProps> = ({
 	return (
 		<Box
 			sx={{
-				width: "calc(100% - 48px)",
+				width: { xs: "100%", sm: "100%" },
 				margin: "0 auto",
 				padding: "24px",
 				backgroundColor: "#1C1C1C",
 				borderRadius: "12px",
+				overflowX: "auto",
+				boxSizing: "border-box",
+				// Ensure CustomTable doesn't affect layout above it
+				position: "relative",
+				zIndex: 1,
 			}}
 		>
 			<Typography
@@ -276,22 +285,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
 			<Box
 				sx={{
 					display: "flex",
-
+					flexDirection: { xs: "column", sm: "column", md: "row" },
+					gap: { xs: "16px", sm: "16px", md: "0" },
 					marginTop: "16px",
-					alignItems: "center",
+					alignItems: { xs: "stretch", sm: "stretch", md: "center" },
+					width: "100%",
 				}}
 			>
 				<TextField
 					variant="outlined"
 					placeholder="Search"
 					sx={{
-						width: "422px",
+						width: { xs: "100%", sm: "100%", md: "380px" },
 						borderRadius: "12px",
 						input: { color: "#FFFFFF" },
 						backgroundColor: "#272727",
 						"& .MuiOutlinedInput-root": {
 							borderRadius: "12px",
-							width: "422px",
+							width: { xs: "100%", sm: "100%", md: "380px" },
 							height: "44px",
 							borderWidth: "1px",
 							padding: "14px 12px 14px 12px",
@@ -319,6 +330,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					value={searchQuery}
 					onChange={(e) => setSearchQuery(e.target.value)}
 				/>
+
 				<Box
 					sx={{
 						display: "flex",
@@ -374,7 +386,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					)}
 				</Box>
 
-				<IconButton
+				{/* <IconButton
 					sx={{
 						width: "44px",
 						height: "44px",
@@ -388,7 +400,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					}}
 				>
 					<TuneIcon />
-				</IconButton>
+				</IconButton> */}
 			</Box>
 			{/* Table Section */}
 			<TableContainer
@@ -397,10 +409,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					marginTop: "24px",
 					backgroundColor: "#1C1C1C",
 					borderRadius: "12px",
-					overflow: "hidden",
+					overflow: "auto",
+					maxWidth: "100%",
+					"&::-webkit-scrollbar": {
+						height: "3px",
+					},
+					"&::-webkit-scrollbar-track": {
+						background: "#1C1C1C",
+					},
+					"&::-webkit-scrollbar-thumb": {
+						background: "#52ACDF",
+						borderRadius: "4px",
+					},
 				}}
 			>
-				<Table>
+				<Table sx={{ minWidth: "750px", tableLayout: "auto" }}>
 					<TableHead
 						sx={{
 							backgroundColor: "#272727",
@@ -408,6 +431,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ":
 								{
 									backgroundColor: "#272727",
+									borderBottom: "1px solid #454545",
 								},
 						}}
 					>
@@ -419,6 +443,16 @@ const CustomTable: React.FC<CustomTableProps> = ({
 									sx={{
 										color: "#FFFFFF",
 										fontWeight: "600",
+										...(column.id === "action" && {
+											position: "sticky",
+											right: 0,
+											zIndex: 2,
+											backgroundColor: "#272727",
+											boxShadow:
+												"-5px 0 5px -2px rgba(0,0,0,0.15)",
+											borderBottom:
+												"1px solid #454545",
+										}),
 									}}
 								>
 									{column.label}
@@ -433,51 +467,103 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							},
 						}}
 					>
-						{currentRows.map((row, rowIndex) => (
+						{/* This is where the modification starts */}
-							<StyledTableRow key={rowIndex}>
+						{currentRows.length === 0 ? (
-								{columns.map((column) => (
+							<StyledTableRow>
-									<StyledTableCell
+								<StyledTableCell
-										key={column.id}
+									colSpan={columns.length}
-										sx={{
+									sx={{
-											color: "#D9D8D8",
+										color: "#D9D8D8",
-											backgroundColor: "#272727",
+										backgroundColor: "#272727",
-										}}
+										textAlign: "center",
-									>
+										padding: "32px 0",
-										{isImage(row[column.id]) ? (
+									}}
-											<img
+								>
-												src={row[column.id]}
+									{(() => {
-												alt="Row "
+										switch (tableType) {
-												style={{
+											case "admin":
-													width: "50px",
+												return "No admins found";
-													height: "50px",
+											case "role":
-													objectFit: "cover",
+												return "No roles found";
-												}}
+											case "user":
-											/>
+												return "No users found";
-										) : column.id !== "action" ? (
+											case "manager":
-											row[column.id]
+												return "No managers found";
-										) : (
+											case "vehicle":
-											<CustomIconButton
+												return "No vehicles found";
-												onClick={(e) => {
+											case "station":
-													handleClick(e, row);
+												return "No charging stations found";
-													setRowData(row); // Store the selected row
+											case "external-station":
-												}}
+												return "No charging stations found";
-												sx={{
+											case "booking":
-													padding: 0,
+												return "No bookings found";
-													minWidth: 0,
+											case "slots":
-													width: "auto",
+												return "No slots found";
-													height: "auto",
+											case "all-available-slots":
-													color: "#FFFFFF",
+												return "No available slots found";
-												}}
+											default:
-											>
+												return "No data available";
-												<MoreHorizRoundedIcon
+										}
-													sx={{ fontSize: "24px" }}
+									})()}
-												/>
+								</StyledTableCell>
-											</CustomIconButton>
-										)}
-									</StyledTableCell>
-								))}
 							</StyledTableRow>
-						))}
+						) : (
+							currentRows.map((row, rowIndex) => (
+								<StyledTableRow key={rowIndex}>
+									{columns.map((column) => (
+										<StyledTableCell
+											key={column.id}
+											sx={{
+												color: "#D9D8D8",
+												backgroundColor: "#272727",
+												...(column.id === "action" && {
+													position: "sticky",
+													right: 0,
+													zIndex: 2,
+													backgroundColor: "#272727",
+													boxShadow:
+														"-5px 0 5px -2px rgba(0,0,0,0.15)",
+												}),
+											}}
+										>
+											{isImage(row[column.id]) ? (
+												<img
+													src={row[column.id]}
+													alt="Row "
+													style={{
+														width: "50px",
+														height: "50px",
+														objectFit: "cover",
+													}}
+												/>
+											) : column.id !== "action" ? (
+												row[column.id]
+											) : (
+												<CustomIconButton
+													onClick={(e) => {
+														handleClick(e, row);
+														setRowData(row);
+													}}
+													sx={{
+														padding: 0,
+														minWidth: 0,
+														width: "auto",
+														height: "auto",
+														color: "#FFFFFF",
+													}}
+												>
+													<MoreHorizRoundedIcon
+														sx={{
+															fontSize: "24px",
+														}}
+													/>
+												</CustomIconButton>
+											)}
+										</StyledTableCell>
+									))}
+								</StyledTableRow>
+							))
+						)}
 					</TableBody>
 				</Table>
 			</TableContainer>

src/components/EditManagerModal/editManagerModal.tsx

@@ -171,6 +171,8 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
 									fullWidth
 									placeholder="Enter Manager Name"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									error={!!errors.name}
 									helperText={errors.name?.message}
 								/>
@@ -193,6 +195,8 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
 									fullWidth
 									placeholder="Enter Email"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									error={!!errors.email}
 									helperText={errors.email?.message}
 								/>
@@ -229,6 +233,8 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
 									fullWidth
 									placeholder="Enter Phone Number"
 									size="small"
+									sx={{ marginTop: 1 }}
+
 									error={!!errors.phone}
 									helperText={errors.phone?.message}
 								/>
@@ -249,6 +255,7 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
 							borderRadius: "8px",
 							width: "117px",
 							"&:hover": { backgroundColor: "#439BC1" },
+							whiteSpace: "pre",
 						}}
 						disabled={loading}
 					>

src/components/EditStationModal/editSationModal.tsx

@@ -249,6 +249,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 										fullWidth
 										placeholder="Enter Station Name"
 										size="small"
+										sx={{ marginTop: 1 }}
 										error={!!errors.name}
 										helperText={
 											errors.name
@@ -282,6 +283,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 										fullWidth
 										placeholder="Enter Registered Address"
 										size="small"
+										sx={{ marginTop: 1 }}
 										error={!!errors.registeredAddress}
 										helperText={
 											errors.registeredAddress
@@ -320,6 +322,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 										fullWidth
 										placeholder="Enter Total Slots"
 										size="small"
+										sx={{ marginTop: 1 }}
 										type="number"
 										error={!!errors.totalSlots}
 										helperText={
@@ -349,6 +352,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 								<InputLabel>Choose Brand</InputLabel>
 								<Select
 									multiple
+									sx={{ marginTop: 1 }}
 									value={selectedBrands}
 									onChange={handleBrandChange}
 									label="Choose Brands"
@@ -439,6 +443,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 								<InputLabel>Choose Vehicles</InputLabel>
 								<Select
 									multiple
+									sx={{ marginTop: 1 }}
 									value={selectedVehicles}
 									onChange={handleCheckboxChange}
 									renderValue={(selected) => {

src/components/EditUserModal/editUserModal.tsx

@@ -133,6 +133,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
 									fullWidth
 									placeholder="Enter Full Name"
 									size="small"
+									sx={{ marginTop: 1 }}
 									error={!!errors.name}
 									helperText={errors.name?.message}
 								/>
@@ -163,6 +164,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
 									fullWidth
 									placeholder="Enter Email"
 									size="small"
+									sx={{ marginTop: 1 }}
 									error={!!errors.email}
 									helperText={errors.email?.message}
 								/>
@@ -199,6 +201,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
 									fullWidth
 									placeholder="Enter Phone Number"
 									size="small"
+									sx={{ marginTop: 1 }}
 									error={!!errors.phone}
 									helperText={errors.phone?.message}
 								/>

src/components/EditVehicleModal/editVehicleModal.tsx

@@ -174,6 +174,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 										fullWidth
 										placeholder="Enter Vehicle Name"
 										size="small"
+										sx={{ marginTop: 1 }}
 										error={!!errors.name}
 										helperText={errors.name?.message}
 										
@@ -206,6 +207,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 										fullWidth
 										placeholder="Enter Company Name"
 										size="small"
+										sx={{ marginTop: 1 }}
 										error={!!errors.company}
 										helperText={errors.company?.message}
 									/>
@@ -240,6 +242,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 										fullWidth
 										placeholder="Enter Model Name"
 										size="small"
+										sx={{ marginTop: 1 }}
 										error={!!errors.modelName}
 										helperText={errors.modelName?.message}
 									/>
@@ -271,6 +274,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 										fullWidth
 										placeholder="Enter Charge Type"
 										size="small"
+										sx={{ marginTop: 1 }}
 										error={!!errors.chargeType}
 										helperText={errors.chargeType?.message}
 									/>
@@ -300,6 +304,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 									fullWidth
 									placeholder="Enter Image URL"
 									size="small"
+									sx={{ marginTop: 1 }}
 									error={!!errors.imageUrl}
 									helperText={errors.imageUrl?.message}
 								/>

src/components/Header/index.tsx

@@ -26,16 +26,25 @@ export default function Header() {
 	}, [dispatch]);
 	return (
 		<Box
-			sx={{
+		sx={{
-				width: "100%",
+			width: "100%",
-				height: "84px",
+			height: "84px",
-				backgroundColor: "#1C1C1C",
+			minHeight: "84px",
-				padding: { xs: "20px 12px", sm: "20px 24px" },
+			maxHeight: "84px",
-				display: "flex",
+			backgroundColor: "#1C1C1C",
-				alignItems: "center",
+			padding: { xs: "20px 12px", sm: "20px 24px" },
-				justifyContent: "space-between",
+			display: {
-				flexDirection: { xs: "column", sm: "row" },
+				xs: "none",
-			}}
+				md: "flex",
+			},
+			marginTop: { xs: "0px", sm: "0px" },
+			alignItems: "center",
+			justifyContent: "space-between",
+			flexDirection: { xs: "column", sm: "row" },
+			boxSizing: "border-box",
+			overflowX: "hidden",
+			flex: "0 0 84px",
+		}}
 		>
 			<Stack
 				direction="row"
@@ -45,14 +54,17 @@ export default function Header() {
 				sx={{
 					width: "100%",
 					justifyContent: { xs: "center", sm: "flex-end" },
-					marginTop: { xs: 2, sm: 0 },
+					marginTop: { xs: 0, sm: 0 }, // Remove top margin on mobile
+					flexWrap: { xs: "wrap", sm: "nowrap" },
+					maxHeight: "100%", // Ensure content doesn't push height
+					overflow: "hidden", // Prevent overflow
 				}}
 			>
 				{/* Search Bar */}
 				<Box
 					sx={{
 						// width: { xs: "100%", sm: "360px" },
-						height: "44px",
+						height: "40px",
 
 						borderRadius: "8px",
 						border: "1px solid #424242",
@@ -83,7 +95,7 @@ export default function Header() {
 					}}
 				>
 					<NotificationsNoneIcon
-						sx={{ pointer: "cursor" }}
+						sx={{ cursor: "pointer" }}
 						onClick={toggleNotifications}
 					/>
 					<Avatar

src/components/LineChartCard/lineChartCard.tsx

@@ -10,6 +10,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
+import { Box } from "@mui/material";
 
 function AreaGradient({ color, id }: { color: string; id: string }) {
 	return (
@@ -159,12 +160,13 @@ export default function LineChartCard() {
 				</div>
 
 				{/* Line Chart */}
+				<Box sx={{ mt: 7.5 }}>
 				<LineChart
 					colors={[theme.palette.primary.main]}
 					xAxis={[
 						{
 							scaleType: "point",
-							data: chartData.map((data) => data.label), // Use intervals as x-axis labels
+							data: chartData.map((data) => data.label),
 						},
 					]}
 					series={[
@@ -173,7 +175,7 @@ export default function LineChartCard() {
 							showMark: false,
 							curve: "linear",
 							area: true,
-							data: chartData.map((data) => data.value), // Use interval data for y-axis
+							data: chartData.map((data) => data.value),
 							color: theme.palette.primary.main,
 						},
 					]}
@@ -191,6 +193,7 @@ export default function LineChartCard() {
 						id="totalBookings"
 					/>
 				</LineChart>
+				</Box>
 			</CardContent>
 		</Card>
 	);

src/components/ResourcePieChart/resourcePieChart.tsx

@@ -12,10 +12,10 @@ import { useEffect } from "react";
 import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
 
 const colorPalette = [
-  "hsla(202, 69%, 60%, 1)",
+	"hsla(202, 69%, 60%, 1)",
-  "hsl(204, 48.60%, 72.50%)",
+	"hsl(204, 48.60%, 72.50%)",
-  "hsl(214, 56.40%, 30.60%)",
+	"hsl(214, 56.40%, 30.60%)",
-  "hsl(222, 6.80%, 50.80%)",
+	"hsl(222, 6.80%, 50.80%)",
 ];
 
 // const data = [
@@ -26,17 +26,17 @@ const colorPalette = [
 // ];
 
 export default function ResourcePieChart() {
-  const theme = useTheme();
+	const theme = useTheme();
-  const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
+	const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
-  const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
+	const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
-  const dispatch = useDispatch<AppDispatch>();
+	const dispatch = useDispatch<AppDispatch>();
 
 	// // Fetch role and carPortCounts from Redux state
 	// const {user} = useSelector((state: RootState) => state.profileReducer); // Assuming user role is stored in Redux
 	const { carPortCounts } = useSelector(
 		(state: RootState) => state.dashboardReducer
 	);
-  console.log("first",carPortCounts)
+	console.log("first", carPortCounts);
 	// Static data for non-superadmin roles
 	// const staticCarPorts = [
 	// 	{ carPort: "240V", count: 5 },
@@ -45,52 +45,50 @@ export default function ResourcePieChart() {
 	// 	{ carPort: "Other", count: 7 },
 	// ];
 
-useEffect(() => {
+	useEffect(() => {
-
 		dispatch(fetchDashboardData());
-	
+	}, [dispatch]);
-}, [dispatch]);
 
-// console.log("Raw CarPortCounts from API:", carPortCounts);
+	// console.log("Raw CarPortCounts from API:", carPortCounts);
 
-const dataToDisplay =carPortCounts 
+	const dataToDisplay = carPortCounts;
 
-//  const dataToDisplay =
+	//  const dataToDisplay =
-// 		user?.userType === "superadmin"
+	// 		user?.userType === "superadmin"
-// 			? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts
+	// 			? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts
-// 			: staticCarPorts.filter((entry) => entry.count > 0);
+	// 			: staticCarPorts.filter((entry) => entry.count > 0);
-// console.log("Filtered Data to Display:", dataToDisplay);
+	// console.log("Filtered Data to Display:", dataToDisplay);
-  const getChartDimensions = () => {
+	const getChartDimensions = () => {
-    if (isXsScreen) {
+		if (isXsScreen) {
-      return {
+			return {
-        height: 240,
+				height: 240,
-        width: 240,
+				width: 240,
-        innerRadius: 40,
+				innerRadius: 40,
-        outerRadius: 80,
+				outerRadius: 80,
-        margin: { left: 20, right: 20, top: 40, bottom: 40 }
+				margin: { left: 20, right: 20, top: 40, bottom: 40 },
-      };
+			};
-    } else if (isSmScreen) {
+		} else if (isSmScreen) {
-      return {
+			return {
-        height: 260,
+				height: 260,
-        width: 260,
+				width: 260,
-        innerRadius: 50,
+				innerRadius: 50,
-        outerRadius: 90,
+				outerRadius: 90,
-        margin: { left: 40, right: 40, top: 60, bottom: 60 }
+				margin: { left: 40, right: 40, top: 60, bottom: 60 },
-      };
+			};
-    } else {
+		} else {
-      return {
+			return {
-        height: 350,
+				height: 350,
-        width: 350,
+				width: 350,
-        innerRadius: 55,
+				innerRadius: 55,
-        outerRadius: 110,
+				outerRadius: 110,
-        margin: { left: 60, right: 80, top: 80, bottom: 80 }
+				margin: { left: 60, right: 80, top: 80, bottom: 80 },
-      };
+			};
-    }
+		}
-  };
+	};
 
-  const dimensions = getChartDimensions();
+	const dimensions = getChartDimensions();
 
-  return (
+	return (
 		<Card
 			variant="outlined"
 			sx={{
@@ -162,7 +160,6 @@ const dataToDisplay =carPortCounts
 							legend: { hidden: true },
 						}}
 					/>
-
 					<Stack
 						spacing={1}
 						sx={{
@@ -170,6 +167,8 @@ const dataToDisplay =carPortCounts
 							ml: { xs: 0, sm: 2 },
 						}}
 					>
+					<Typography sx={{whiteSpace: "pre"}}>Car Port Types:</Typography>
+
 						{dataToDisplay.map((entry, index) => (
 							<Stack
 								key={index}
@@ -207,5 +206,5 @@ const dataToDisplay =carPortCounts
 				</Box>
 			</CardContent>
 		</Card>
-  );
+	);
-}
+}

src/components/SideMenuMobile/index.tsx

@@ -14,6 +14,7 @@ import CardAlert from "../CardAlert/CardAlert";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchAdminProfile } from "../../redux/slices/profileSlice";
+import Logout from "../LogOutFunction/LogOutFunction";
 
 interface SideMenuMobileProps {
 	open: boolean | undefined;
@@ -25,6 +26,7 @@ export default function SideMenuMobile({
 	toggleDrawer,
 }: SideMenuMobileProps) {
 	const dispatch = useDispatch<AppDispatch>();
+	const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
 	const { user } = useSelector((state: RootState) => state?.profileReducer);
 	// React.useEffect(() => {
 	// 	dispatch(fetchAdminProfile());
@@ -79,9 +81,18 @@ export default function SideMenuMobile({
 						variant="outlined"
 						fullWidth
 						startIcon={<LogoutRoundedIcon />}
+						onClick={(e) => {
+							e.stopPropagation();
+							setLogoutModal(true);
+						}}
+						sx={{ color: "red" }}
 					>
 						Logout
 					</Button>
+					<Logout
+						setLogoutModal={setLogoutModal}
+						logoutModal={logoutModal}
+					/>
 				</Stack>
 			</Stack>
 		</Drawer>

src/layouts/DashboardLayout/index.tsx

@@ -16,9 +16,11 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 			<Box
 				sx={{
 					display: "flex",
-					height: "auto",
+					// height: "auto",
 					flexDirection: { xs: "column", md: "row" },
 					width: "100%",
+						height: "100vh", // Full height from root, not auto
+					overflow: "hidden", 
 					margin: 0,
 					padding: 0,
 				}}
@@ -43,29 +45,32 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 						flexDirection: "column",
 						height: "100vh",
 						flexGrow: 1,
-						// backgroundColor: theme.vars
-						// 	? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
-						// 	: theme.palette.background.default,
 						backgroundColor: theme.palette.background.default,
 						overflow: "auto",
+						overflowX: "hidden",
 						...customStyles,
 						mt: { xs: 8, md: 0 },
 						padding: 0,
 					})}
 				>
+					<Box sx={{ height: "84px", flex: "0 0 84px" }}>
+						<Header />
+					</Box>
 					<Stack
 						spacing={2}
 						sx={{
+							padding: "30px",
 							display: "flex",
 							flex: 1,
 							justifyItems: "center",
 							alignItems: "center",
-							mx: 3,
+							// mx: { xs: 1, sm: 3 },
-							pb: 5,
+							// pb: 5,
 							mt: { xs: 3, md: 0 },
+							width: "100%",
+							boxSizing: "border-box",
 						}}
 					>
-						<Header />
 						<Outlet />
 					</Stack>
 				</Box>

src/pages/ProfilePage/index.tsx

@@ -52,48 +52,40 @@ const ProfilePage = () => {
 			</Typography>
 			<Card
 				sx={{
-					width: "1132px",
+					borderRadius: 2,
-					height: "331px",
+					p: { xs: 2, sm: 3 },
-					gap: "24px",
+					mx: "auto",
-					borderRadius: "12px",
-					padding: "16px",
-					maxWidth: "100%",
-					margin: "0 auto",
 					backgroundColor: "#1C1C1C",
 				}}
+				// sx={{
+				// 	width: "1132px",
+				// 	height: "331px",
+				// 	gap: "24px",
+				// 	borderRadius: "12px",
+				// 	padding: "16px",
+				// 	maxWidth: "100%",
+				// 	margin: "0 auto",
+				// 	backgroundColor: "#1C1C1C",
+				// }}
 			>
 				<CardContent>
 					<Stack direction="column" spacing={2}>
-						<Stack
+						<Stack direction="row" spacing={2} alignItems="center">
-							direction="row"
-							spacing={1.5}
-							alignItems="center"
-						>
 							<Avatar
 								alt="User Avatar"
 								src="/avatar.png"
-								sx={{ width: "60px", height: "60px" }}
+								sx={{ width: 60, height: 60 }}
 							/>
 							<Box>
 								<Typography
 									variant="body1"
-									width="1028px"
+									sx={{ color: "#FFFFFF", fontWeight: 500 }}
-									height="24px"
-									fontWeight={500}
-									fontSize={"20px"}
-									lineHeight={"100%"}
-									sx={{ color: "#FFFFFF" }}
 								>
 									{user?.name || "No Admin"}
 								</Typography>
 								<Typography
 									variant="body2"
-									color="#D9D8D8"
+									sx={{ color: "#D9D8D8" }}
-									fontWeight={400}
-									fontSize={"16px"}
-									lineHeight={"100%"}
-									width="46px"
-									height="19px"
 								>
 									{user?.userType || "N/A"}
 								</Typography>
@@ -105,18 +97,13 @@ const ProfilePage = () => {
 						/>
 
 						<Stack
-							direction="row"
+							direction={{ xs: "column", sm: "row" }}
 							justifyContent="space-between"
-							alignItems="center"
+							alignItems={{ xs: "flex-start", sm: "center" }}
 						>
 							<Typography
 								variant="body1"
-								width="1048px"
+								sx={{ color: "#FFFFFF", fontWeight: 500 }}
-								height="19px"
-								fontWeight={500}
-								fontSize={"16px"}
-								lineHeight={"100%"}
-								sx={{ color: "#FFFFFF" }}
 							>
 								Personal Information
 							</Typography>
@@ -129,40 +116,22 @@ const ProfilePage = () => {
 							</Link> */}
 						</Stack>
 
-						<Grid
+						<Grid container spacing={3} sx={{ overflowX: "auto" }}>
-							container
+							<Grid item xs={12} sm={4}>
-							width="1100px"
-							height="38px"
-							// gap={"100px"}
-						>
-							<Grid
-								item
-								xs={12}
-								sm={4}
-								width="64px"
-								height="16px"
-								fontSize={"14px"}
-								lineHeight={"100%"}
-							>
 								<Typography
-									variant="body1"
+									variant="body2"
-									fontWeight={500}
+									sx={{ color: "#FFFFFF", fontWeight: 500 }}
-									sx={{ color: "#FFFFFF" }}
 								>
 									Full Name:
 								</Typography>
-								<Typography
+								<Typography variant="body2" color="#D9D8D8">
-									variant="body2"
-									fontWeight={400}
-									color="#D9D8D8"
-								>
 									{user?.name || "N/A"}
 								</Typography>
 							</Grid>
 							<Grid item xs={12} sm={4}>
 								<Typography
-									variant="body1"
+									variant="body2"
-									sx={{ color: "#FFFFFF" }}
+									sx={{ color: "#FFFFFF", fontWeight: 500 }}
 								>
 									Phone:
 								</Typography>
@@ -172,8 +141,8 @@ const ProfilePage = () => {
 							</Grid>
 							<Grid item xs={12} sm={4}>
 								<Typography
-									variant="body1"
+									variant="body2"
-									sx={{ color: "#FFFFFF" }}
+									sx={{ color: "#FFFFFF", fontWeight: 500 }}
 								>
 									Email:
 								</Typography>
@@ -181,24 +150,18 @@ const ProfilePage = () => {
 									{user?.email || "N/A"}
 								</Typography>
 							</Grid>
+							<Grid item xs={12} sm={4}>
+								<Typography
+									variant="body2"
+									sx={{ color: "#FFFFFF", fontWeight: 500 }}
+								>
+									Bio:
+								</Typography>
+								<Typography variant="body2" color="#D9D8D8">
+									{user?.bio || "No bio available."}
+								</Typography>
+							</Grid>
 						</Grid>
-
-						<Typography
-							variant="body1"
-							width="21px"
-							height="16px"
-							sx={{ color: "#FFFFFF" }}
-						>
-							Bio:
-						</Typography>
-						<Typography
-							variant="body2"
-							width="1100px"
-							height="32px"
-							color="#D9D8D8"
-						>
-							{user?.bio || "No bio available."}
-						</Typography>
 					</Stack>
 				</CardContent>
 			</Card>

src/router.tsx

@@ -23,7 +23,9 @@ const StationList = lazy(() => import("./pages/StationList"));
 const EVSlotManagement = lazy(() => import("./pages/EVSlotManagement"));
 const BookingList = lazy(() => import("./pages/BookingList"));
 const EvSlotList = lazy(() => import("./pages/EvSlotList"));
-const ExternalStationList = lazy(() => import("./pages/ExternalStationList/externalStationList.tsx"));
+const ExternalStationList = lazy(
+	() => import("./pages/ExternalStationList/externalStationList.tsx")
+);
 const AllManagersList = lazy(() => import("./pages/AllMangersList"));
 const AvailableSlotsList = lazy(() => import("./pages/AvailableSlotsList"));
 interface ProtectedRouteProps {
@@ -32,7 +34,7 @@ interface ProtectedRouteProps {
 }
 
 // Protected Route Component
-const ProtectedRoute: React.FC<ProtectedRouteProps> = ({  component }) => {
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ component }) => {
 	if (!localStorage.getItem("authToken")) {
 		return <Navigate to="/login" replace />;
 	}
@@ -127,7 +129,9 @@ export default function AppRouter() {
 					<Route
 						path="all-available-slots"
 						element={
-							<ProtectedRoute component={<AvailableSlotsList />} />
+							<ProtectedRoute
+								component={<AvailableSlotsList />}
+							/>
 						}
 					/>
 				</Route>