ManagerDashboard Ui changes and fontFamily updation

src/App.css

@@ -1,57 +1,50 @@
-html, body {
+@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap");
-  margin: 0;
+/* @import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap"); */
-  padding: 0;
+html,
-  width: 100%;
+body {
-  height: 100%;
+	margin: 0;
-  overflow: hidden; /* Prevents scrolling */
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden; /* Prevents scrolling */
+	font-family: "Fredoka";
 }
 
-
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
+	height: 40vmin;
-  pointer-events: none;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
+	.App-logo {
-    animation: App-logo-spin infinite 20s linear;
+		animation: App-logo-spin infinite 20s linear;
-  }
+	}
-}
-
-
-@font-face {
-  font-family: '"Publica Sans Round Medium", sans-serif';
-
-         src: url('../public/fonts/PublicaSansRound-Md.otf') format('otf');
-      
-  font-weight: 500;
-  font-display: swap;
 }
 
 .App-header {
-  background-color: #282c34;
+	background-color: #282c34;
-  min-height: 100vh;
+	min-height: 100vh;
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  align-items: center;
+	align-items: center;
-  justify-content: center;
+	justify-content: center;
-  font-size: calc(10px + 2vmin);
+	font-size: calc(10px + 2vmin);
-  color: white;
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
+	from {
-    transform: rotate(0deg);
+		transform: rotate(0deg);
-  }
+	}
-  to {
+	to {
-    transform: rotate(360deg);
+		transform: rotate(360deg);
-  }
+	}
 }

src/components/AddManagerStationModal/addmanagerStationModal.tsx

@@ -13,6 +13,7 @@ import { useDispatch } from "react-redux";
 import { addStationDetails } from "../../redux/slices/managerStationSlice"; // Updated import
 import CloseIcon from "@mui/icons-material/Close";
 import { CustomIconButton } from "../AddUserModal/styled.css";
+import { autofillFix } from "../../shared-theme/customizations/autoFill";
 
 const AddManagerStationModal = ({ open, handleClose }: any) => {
 	const dispatch = useDispatch();
@@ -110,6 +111,7 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
 						fullWidth
 						error={!!errors.connectorType}
 						helperText={errors.connectorType?.message}
+						sx={{ ...autofillFix }}
 					/>
 
 					{/* Power */}
@@ -130,6 +132,7 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
 						fullWidth
 						error={!!errors.power}
 						helperText={errors.power?.message}
+						sx={{ ...autofillFix }}
 					/>
 
 					{/* Price */}
@@ -154,6 +157,7 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
 						fullWidth
 						error={!!errors.price}
 						helperText={errors.price?.message}
+						sx={{ ...autofillFix }}
 					/>
 
 					{/* Availability Switch */}

src/components/AppNavbar/index.tsx

@@ -126,10 +126,10 @@ export default function AppNavbar() {
 							display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
 						}}
 					>
-						<NotificationsNoneIcon
+						{/* <NotificationsNoneIcon
 							sx={{ cursor: "pointer" }}
 							onClick={toggleNotifications}
-						/>
+						/> */}
 						<Avatar
 							alt="User Avatar"
 							src="/avatar.png"

src/components/CardAlert/CardAlert.tsx

@@ -7,7 +7,7 @@ import AutoAwesomeRoundedIcon from "@mui/icons-material/AutoAwesomeRounded";
 
 export default function CardAlert() {
 	return (
-		<Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+		<Card variant="outlined" sx={{ m: 1.5, p: 1.5, background: "#DFECF1" }}>
 			<CardContent>
 				<AutoAwesomeRoundedIcon fontSize="small" />
 				<Typography gutterBottom sx={{ fontWeight: 600 }}>
@@ -15,11 +15,22 @@ export default function CardAlert() {
 				</Typography>
 				<Typography
 					variant="body2"
-					sx={{ mb: 2, color: "text.secondary" }}
+					sx={{
+						mb: 2,
+						color: "text.secondary",
+					}}
 				>
 					Enjoy 10% off when renewing your plan today.
 				</Typography>
-				<Button variant="contained" size="small" fullWidth>
+				<Button
+					sx={{
+						background: "#000000",
+						"&:hover": { backgroundColor: "#454545" },
+						color: "#DFECF1",
+					}}
+					size="small"
+					fullWidth
+				>
 					Get the discount
 				</Button>
 			</CardContent>

src/components/CustomTable/customTable.tsx

@@ -80,6 +80,7 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
 		borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
 		color: "#333333",
 		transition: "background-color 0.2s ease",
+		fontWeight:500,
 		// Make the "Action" body cell sticky
 		"&.action-cell": {
 			position: "sticky",
@@ -497,7 +498,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 								backgroundColor: "#000000",
 								color: "#FFFFFF",
 								fontWeight: 600,
-								fontSize: "14px",
+								fontSize: "16px",
 								padding: "8px 16px",
 								borderRadius: "8px",
 								textTransform: "none",
@@ -583,6 +584,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 										sx={{
 											color: "#6B7280",
 											fontSize: "16px",
+											
 										}}
 									>
 										{getEmptyMessage(tableType)}

src/components/LineChartCard/lineChartCard.tsx

@@ -90,7 +90,7 @@ export default function LineChartCard() {
 						align={isXsScreen ? "center" : "left"}
 						sx={{
 							fontWeight: 600,
-							fontSize: { xs: "12px", sm: "14px", md: "16px" },
+							fontSize: { xs: "14px", sm: "16px", md: "20px" },
 							lineHeight: "24px",
 							marginBottom: isXsScreen ? 2 : 0,
 							width: isXsScreen ? "100%" : "auto",

src/components/MainGrid/mainGrid.tsx

@@ -1,120 +1,4 @@
-// import React, { useEffect } from "react";
-// import Grid from "@mui/material/Grid";
-// import Box from "@mui/material/Box";
-// import Typography from "@mui/material/Typography";
-// import SessionsChart from "../SessionsChart/sessionChart";
-// import ResourcesPieChart from "../ResourcePieChart/resourcePieChart";
-// import RoundedBarChart from "../barChartCard/barChartCard";
-// import LineChartCard from "../LineChartCard/lineChartCard";
-// import { AppDispatch, RootState } from "../../redux/store/store";
-// import { useDispatch, useSelector } from "react-redux";
-// import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
-// import AppTheme from "../../shared-theme/AppTheme"; // Import the custom theme
-// import StatCard from "../StatCard/statCard"; // Adjusted import for consistency
 
-// export default function MainGrid() {
-// 	const dispatch = useDispatch<AppDispatch>();
-// 	const {
-// 		totalAdmins,
-// 		totalManagers,
-// 		totalUsers,
-// 		totalStations,
-		
-// 	} = useSelector((state: RootState) => state.dashboardReducer);
-// 	const userType = useSelector(
-// 		(state: RootState) => state.profileReducer.user?.userType
-// 	);
-// 	useEffect(() => {
-// 		dispatch(fetchDashboardData());
-// 	}, [dispatch]);
-
-// 	const data = {
-// 		totalAdmins: totalAdmins ?? 86,
-// 		totalManagers: totalManagers ?? 12,
-// 		totalUsers: totalUsers ?? 24,
-// 		totalStations: totalStations ?? 8,
-// 	};
-	
-// 	const getStatCards = () => {
-// 		switch (userType) {
-// 			case "superadmin":
-// 				return [
-// 					{ title: "Total Admins", value: data.totalAdmins },
-// 					{ title: "Total Managers", value: data.totalManagers },
-// 					{ title: "Total Users", value: data.totalUsers },
-// 					{ title: "Total Stations", value: data.totalStations },
-// 				];
-// 			case "admin":
-// 				return [
-// 					{ title: "Total Managers", value: data.totalManagers },
-// 					{ title: "Total Users", value: data.totalUsers },
-// 					{ title: "Total Stations", value: data.totalStations },
-// 				];
-// 			case "manager":
-// 				return [
-// 					{ title: "Total Users", value: data.totalUsers },
-	
-// 				];
-
-// 			default:
-// 				return [];
-// 		}
-// 	};
-// 	return (
-// 		<AppTheme>
-// 			<Box
-// 				sx={{
-// 					width: "100%",
-// 					maxWidth: "1800px",
-// 					mx: "auto",
-// 					px: { xs: 2, sm: 1, md: 0 },
-// 					background: (theme) => theme.palette.background.default, 
-// 				}}
-// 			>
-// 				{/* Dashboard Header */}
-// 				<Typography
-// 					component="h2"
-// 					variant="h4"
-// 					sx={{
-// 						mb: 3,
-// 					}}
-// 				>
-// 					Dashboard
-// 				</Typography>
-
-// 				{/* Grid Layout */}
-// 				<Grid container spacing={3} columns={12}>
-// 					{/* Statistic Cards */}
-// 					{getStatCards().map((card, index) => (
-// 						<Grid key={index} item xs={12} sm={6} md={3} lg={3}>
-// 							<StatCard {...card} />
-// 						</Grid>
-// 					))}
-
-// 					{/* Charts */}
-// 					{userType !== "user" && (
-// 						<>
-// 							<Grid item xs={12} sm={12} md={6} lg={6}>
-// 								<SessionsChart />
-// 							</Grid>
-// 							<Grid item xs={12} sm={12} md={6} lg={6}>
-// 								<ResourcesPieChart />
-// 							</Grid>
-
-// 							<Grid item xs={12} sm={12} md={6} lg={6}>
-// 								<RoundedBarChart />
-// 							</Grid>
-
-// 							<Grid item xs={12} sm={12} md={6} lg={6}>
-// 								<LineChartCard />
-// 							</Grid>
-// 						</>
-// 					)}
-// 				</Grid>
-// 			</Box>
-// 		</AppTheme>
-// 	);
-// }
 import React, { useEffect } from "react";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";

src/components/MainGrid/managerGrid.tsx

@@ -11,6 +11,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
 import AppTheme from "../../shared-theme/AppTheme";
 import StatCard from "../StatCard/statCard";
+import StaticLineChartCard from "../StaticLineChartCard/staticLineChartCard";
+import StaticResourcePieChart from "../StaticResourcePieChart/staticResourceChart";
+import UtilizationGaugeChart from "../UtilizationGaugeChart/utilizationGaugeChart";
 
 export default function ManagerGrid() {
 	const dispatch = useDispatch<AppDispatch>();
@@ -53,23 +56,32 @@ export default function ManagerGrid() {
 					sx={{ mb: 1 }}
 				>
 					{statCards.map((card, index) => (
-						<Grid key={index} item xs={12} sm={8} md={4} lg={3}>
+						<Grid key={index} item xs={12} sm={12} md={6} lg={6}>
 							<StatCard {...card} />
 						</Grid>
 					))}
+
+					{/* Add the Utilization Chart */}
+					<Grid item xs={12} sm={12} md={6} lg={6}>
+						<UtilizationGaugeChart />
+					</Grid>
 				</Grid>
 
 				{/* Charts */}
 				<Grid container spacing={3} mt={1}>
-					{/* <Grid item xs={12} sm={12} md={6} lg={6}>
-						<SessionsChart />
-					</Grid> */}
 					<Grid item xs={12} sm={12} md={6} lg={6}>
 						<ResourcesPieChart />
 					</Grid>
+					<Grid item xs={12} sm={12} md={6} lg={6}>
+						<StaticLineChartCard />
+					</Grid>
 					<Grid item xs={12} sm={12} md={6} lg={6}>
 						<LineChartCard />
 					</Grid>
+
+					<Grid item xs={12} sm={12} md={6} lg={6}>
+						<StaticResourcePieChart />
+					</Grid>
 				</Grid>
 			</Box>
 		</AppTheme>

src/components/MenuButton/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import Badge, { badgeClasses } from "@mui/material/Badge";
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
+import { CustomIconButton } from "../AddUserModal/styled.css";
 
 export interface MenuButtonProps extends IconButtonProps {
 	showBadge?: boolean;
@@ -17,7 +18,7 @@ export default function MenuButton({
 			invisible={!showBadge}
 			sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }}
 		>
-			<IconButton  sx={{ marginRight: "60px" }} size="small" {...props} />
+			<CustomIconButton  sx={{ marginRight: "60px" }} size="medium" {...props} />
 		</Badge>
 	);
 }

src/components/Modals/LogOutModal/index.tsx

@@ -15,6 +15,7 @@ const style = {
 	transform: "translate(-50%, -50%)",
 	width: 330,
 	bgcolor: "#000000",
+	fontFamily: "Fredoka",
 	borderRadius: 1.5,
 	boxShadow: 24,
 	p: 3,
@@ -24,6 +25,7 @@ const btnStyle = {
 	py: 1,
 	px: 5,
 	width: "50%",
+	fontFamily:"Fredoka",
 	textTransform: "capitalize",
 	backgroundColor: "#D0E1E9",
 	color: "#000000",
@@ -40,7 +42,6 @@ export default function LogoutModal({
 	setLogoutModal,
 	handlelogout,
 }: Props) {
-	// Function to prevent closing the modal when clicking outside
 	const handleClose = (event: React.SyntheticEvent) => {
 		// Close only when clicking the close button, not the backdrop
 		setLogoutModal(false);
@@ -53,6 +54,7 @@ export default function LogoutModal({
 				if (reason !== "backdropClick") {
 					setLogoutModal(false);
 				}
+				handleClose();
 			}}
 			aria-labelledby="modal-modal-title"
 			aria-describedby="modal-modal-description"

src/components/Modals/ViewModal/index.tsx

@@ -16,7 +16,7 @@ const style = {
 	top: "50%",
 	left: "50%",
 	transform: "translate(-50%, -50%)",
-	width: 450,
+	width: 400,
 	borderRadius: 2,
 	boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
 	p: 0,

src/components/ResourcePieChart/resourcePieChart.tsx

@@ -98,7 +98,7 @@ export default function ResourcePieChart() {
 					variant="subtitle2"
 					sx={{
 						fontWeight: 600,
-						fontSize: { xs: "12px", sm: "14px", md: "16px" },
+						fontSize: { xs: "14px", sm: "16px", md: "20px" },
 						lineHeight: "24px",
 						marginBottom: { xs: 1, sm: 1.5, md: 2 },
 					}}

src/components/SessionsChart/sessionChart.tsx

@@ -34,7 +34,7 @@ export default function SessionsChart() {
 	// Set default station when basicPrice loads
 	React.useEffect(() => {
 		if (stationNames.length > 0 && !selectedStation) {
-			setSelectedStation(stationNames[0]); 
+			setSelectedStation(stationNames[0]);
 		}
 	}, [basicPrice, stationNames, selectedStation]);
 
@@ -79,7 +79,7 @@ export default function SessionsChart() {
 					align="left"
 					sx={{
 						fontWeight: 600,
-						fontSize: { xs: "12px", sm: "14px", md: "16px" },
+						fontSize: { xs: "14px", sm: "16px", md: "20px" },
 						lineHeight: "24px",
 						letterSpacing: "0%",
 						marginBottom: { xs: 1, sm: 0.7, md: 1 },
@@ -127,11 +127,10 @@ export default function SessionsChart() {
 				<Box
 					sx={{
 						display: "grid",
-						gridTemplateColumns: {
+						gridTemplateColumns:
-							xs: "repeat(1, 1fr)",
+							selectedBasePrices.length === 1
-							sm: "repeat(2, 1fr)",
+								? "1fr"
-							md: "repeat(2, 1fr)",
+								: "repeat(2, 1fr)",
-						},
 						gap: { xs: 1, sm: 1.5, md: 2 },
 						width: "100%",
 					}}
@@ -206,7 +205,6 @@ export default function SessionsChart() {
 											gutterBottom
 										>
 											{price.price.toFixed(2)}{" "}
-											{/* Ensure consistent decimal places */}
 										</Typography>
 										<Typography
 											sx={{
@@ -223,7 +221,7 @@ export default function SessionsChart() {
 											}}
 											color="#454545"
 										>
-											cents/kWh
+											(₹)/kWh
 										</Typography>
 									</Box>
 								</Box>

src/components/SideMenuMobile/index.tsx

@@ -49,6 +49,7 @@ export default function SideMenuMobile({
 				sx={{
 					maxWidth: "70dvw",
 					height: "100%",
+					background: "#000000",
 				}}
 			>
 				<Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}>
@@ -62,7 +63,11 @@ export default function SideMenuMobile({
 							src="/static/images/avatar/7.jpg"
 							sx={{ width: 24, height: 24 }}
 						/>
-						<Typography component="p" variant="h6">
+						<Typography
+							component="p"
+							variant="h6"
+							sx={{ color: "#DFECF1" }}
+						>
 							Super Admin
 						</Typography>
 					</Stack>
@@ -78,14 +83,17 @@ export default function SideMenuMobile({
 				<CardAlert />
 				<Stack sx={{ p: 2 }}>
 					<Button
-						variant="outlined"
 						fullWidth
 						startIcon={<LogoutRoundedIcon />}
 						onClick={(e) => {
 							e.stopPropagation();
 							setLogoutModal(true);
 						}}
-						
+						sx={{
+							backgroundColor: "rgb(170, 46, 37)",
+							"&:hover": { backgroundColor: "rgb(163, 85, 79)" },
+							color: "#DFECF1",
+						}}
 					>
 						Logout
 					</Button>

src/components/StatCard/statCard.tsx

@@ -36,6 +36,7 @@ export default function StatCard({ title, value, icon }: StatCardProps) {
 		<Card
 			variant="outlined"
 			sx={{
+				height:"100%",
 				width: "100%",
 				borderRadius: "20px",
 				border: "none",

src/components/StaticLineChartCard/staticLineChartCard.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Card, CardContent, Typography } from "@mui/material";
+import { LineChart } from "@mui/x-charts/LineChart";
+
+export default function StaticLineChartCard() {
+	const revenueData = [
+		{ date: "2025-04-01", revenue: 1200 },
+		{ date: "2025-04-02", revenue: 1500 },
+		{ date: "2025-04-03", revenue: 1300 },
+		{ date: "2025-04-04", revenue: 1700 },
+		{ date: "2025-04-05", revenue: 1400 },
+		{ date: "2025-04-06", revenue: 2400 },
+		{ date: "2025-04-08", revenue: 1500 },
+		{ date: "2025-04-09", revenue: 1800 },
+		{ date: "2025-04-10", revenue: 2800 },
+		{ date: "2025-04-11", revenue: 8400 },
+		{ date: "2025-04-13", revenue: 4400 },
+		{ date: "2025-04-15", revenue: 5400 },
+		{ date: "2025-04-16", revenue: 1200 },
+		{ date: "2025-04-17", revenue: 1700 },
+		{ date: "2025-04-19", revenue: 2300 },
+		{ date: "2025-04-20", revenue: 2600 },
+		{ date: "2025-04-21", revenue: 1400 },
+		{ date: "2025-04-22", revenue: 1900 },
+		{ date: "2025-04-23", revenue: 6400 },
+		{ date: "2025-04-24", revenue: 400 },
+		{ date: "2025-04-25", revenue: 7400 },
+		{ date: "2025-04-26", revenue: 4400 },
+		{ date: "2025-04-27", revenue: 1400 },
+		{ date: "2025-04-30", revenue: 1600 },
+	];
+
+	return (
+		<Card
+			sx={{
+				height: "100%",
+				p: 2,
+				background: "#D0E1E9",
+				borderRadius: "30px",
+			}}
+		>
+			<CardContent>
+				<Typography
+					variant="h6"
+					sx={{
+						fontWeight: 600,
+						fontSize: { xs: "14px", sm: "16px", md: "20px" },
+					}}
+					gutterBottom
+				>
+					Total Earnings (April 2025)
+				</Typography>
+				<LineChart
+					xAxis={[
+						{
+							data: revenueData.map((d) => d.date),
+							scaleType: "point",
+						},
+					]}
+					series={[
+						{
+							data: revenueData.map((d) => d.revenue),
+							label: "Revenue ($)",
+							color: "#000000",
+						},
+					]}
+					height={300}
+				/>
+			</CardContent>
+		</Card>
+	);
+}

src/components/StaticResourcePieChart/staticResourceChart.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import { Card, CardContent, Typography, Box, Stack } from "@mui/material";
+import { PieChart } from "@mui/x-charts/PieChart";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+export default function StaticResourcePieChart() {
+	const theme = useTheme();
+	const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
+	const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
+
+	const kwhData = [
+		{ stationId: "Indian Charging Station", kwh: 500 },
+		{ stationId: "Mumbai Charging Station", kwh: 300 },
+		{ stationId: "Delhi Charging Station", kwh: 450 },
+		{ stationId: "Tata Charging Station", kwh: 200 },
+		{ stationId: "PlugIn Charging Station", kwh: 350 },
+	];
+
+	const customColors = [
+		"rgb(11, 13, 14)",
+		"hsl(204, 59.60%, 78.60%)",
+		"hsl(214, 77.50%, 13.90%)",
+		"hsl(222, 4.10%, 52.20%)",
+		"hsl(220, 40.30%, 71.80%)",
+	];
+
+	// Function to determine chart dimensions based on screen size
+	const getChartDimensions = () => {
+		if (isXsScreen) {
+			return {
+				height: 240,
+				width: 240,
+				margin: { left: 20, right: 20, top: 40, bottom: 40 },
+			};
+		} else if (isSmScreen) {
+			return {
+				height: 260,
+				width: 260,
+				margin: { left: 40, right: 40, top: 60, bottom: 60 },
+			};
+		} else {
+			return {
+				height: 350,
+				width: 350,
+				margin: { left: 60, right: 80, top: 80, bottom: 80 },
+			};
+		}
+	};
+
+	const dimensions = getChartDimensions();
+
+	return (
+		<Card
+			variant="outlined"
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				gap: { xs: "8px", sm: "10px", md: "12px" },
+				flexGrow: 1,
+				width: "100%",
+				height: "auto",
+				minHeight: { xs: "320px", sm: "340px", md: "470px" },
+				padding: { xs: "12px", sm: "14px", md: "16px" },
+				borderRadius: "30px",
+				border: "none",
+				background: "#D0E1E9",
+			}}
+		>
+			<CardContent
+				sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}
+			>
+				<Typography
+					component="h2"
+					variant="subtitle2"
+					sx={{
+						fontWeight: 600,
+						fontSize: { xs: "12px", sm: "14px", md: "16px" },
+						lineHeight: "24px",
+						marginBottom: { xs: 1, sm: 1.5, md: 2 },
+					}}
+				>
+					KWh Consumed by Station
+				</Typography>
+				<Box
+					sx={{
+						display: "flex",
+						flexDirection: { xs: "column", sm: "row" },
+						alignItems: "center",
+						justifyContent: "center",
+					}}
+				>
+					<PieChart
+						colors={customColors}
+						margin={dimensions.margin}
+						series={[
+							{
+								data: kwhData.map((d, i) => ({
+									id: i,
+									value: d.kwh,
+									label: d.stationId,
+									color: customColors[
+										i % customColors.length
+									],
+								})),
+
+								paddingAngle: 2,
+								cornerRadius: 8,
+								highlightScope: {
+									faded: "global",
+									highlighted: "item",
+								},
+							},
+						]}
+						height={dimensions.height}
+						width={dimensions.width}
+						slotProps={{
+							legend: { hidden: true }, // Hide default legend
+						}}
+					/>
+					<Stack
+						spacing={1}
+						sx={{
+							mt: { xs: 2, sm: 0 },
+							ml: { xs: 0, sm: 2 },
+						}}
+					>
+						<Typography sx={{ whiteSpace: "pre", fontWeight: 500 }}>
+							Charging Stations:
+						</Typography>
+						{kwhData.map((entry, index) => (
+							<Stack
+								key={index}
+								direction="row"
+								spacing={1}
+								alignItems="center"
+							>
+								<Box
+									sx={{
+										width: { xs: 12, sm: 14, md: 16 },
+										height: { xs: 12, sm: 14, md: 16 },
+										backgroundColor:
+											customColors[
+												index % customColors.length
+											],
+										borderRadius: "50%",
+									}}
+								/>
+								<Typography
+									variant="body2"
+									sx={{
+										fontSize: {
+											xs: "12px",
+											sm: "14px",
+											md: "16px",
+										},
+										color: "#111111",
+									}}
+								>
+									{entry.stationId}
+								</Typography>
+							</Stack>
+						))}
+					</Stack>
+				</Box>
+			</CardContent>
+		</Card>
+	);
+}

src/components/UtilizationGaugeChart/utilizationGaugeChart.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	Typography,
+	Box,
+	LinearProgress,
+} from "@mui/material";
+
+export default function UtilizationGaugeChart() {
+	const utilization = 65;
+
+	return (
+		<Card
+			sx={{
+				height: "100px",
+				display: "flex",
+				flexDirection: "column",
+				padding: 2,
+				background: "#D0E1E9",
+				borderRadius: "30px",
+			}}
+		>
+			<CardContent
+				sx={{
+					flex: 1,
+					display: "flex",
+					flexDirection: "row",
+					justifyContent: "center",
+					alignItems: "center",
+					padding: 0,
+				}}
+			>
+				<Typography
+					sx={{
+						marginRight: 2,
+						fontWeight: 600,
+						fontSize: { xs: "14px", sm: "16px", md: "20px" },
+					}}
+				>
+					Charging Station Utilization
+				</Typography>
+
+				<Box
+					sx={{
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						width: "60%",
+						marginRight: 2,
+					}}
+				>
+					<LinearProgress
+						variant="determinate"
+						value={utilization}
+						sx={{
+							width: "100%",
+							height: 10,
+							borderRadius: 5,
+
+							"& .MuiLinearProgress-bar": {
+								backgroundColor: "#000000",
+							},
+							"& .MuiLinearProgress-root": {
+								backgroundColor: "#DFECF1",
+							},
+						}}
+					/>
+				</Box>
+
+				<Typography variant="h5" sx={{ marginLeft: 2 }}>
+					{utilization}%
+				</Typography>
+			</CardContent>
+		</Card>
+	);
+}

src/components/barChartCard/barChartCard.tsx

@@ -123,7 +123,7 @@ export default function RoundedBarChart() {
 						align={isXsScreen ? "center" : "left"}
 						sx={{
 							fontWeight: 600,
-							fontSize: { xs: "12px", sm: "14px", md: "16px" },
+							fontSize: { xs: "14px", sm: "16px", md: "20px" },
 							lineHeight: "24px",
 							marginBottom: isXsScreen ? 2 : 0,
 							width: isXsScreen ? "100%" : "auto",

src/index.css

@@ -1,6 +1,10 @@
+@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap");
+
+/* @import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap"); */
+/* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); */
 body {
 	margin: 0;
-	font-family: '"Publica Sans Round Medium", sans-serif';
+	font-family: "Fredoka";
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
@@ -11,7 +15,7 @@ code {
 }
 
 .mui-typography {
-	font-family: "Gilroy";
+	font-family: "Fredoka";
 	background-color: rgb(7, 127, 233);
 }
 
@@ -21,11 +25,11 @@ code {
 	rx: 8;
 	ry: 8;
 }
-@font-face {
+/* @font-face {
 	font-family: '"Publica Sans Round Medium", sans-serif';
 	src: url("../public/fonts/PublicaSansRound-Md.otf") format("otf");
 
 	font-weight: 500;
 	font-style: normal;
 	font-display: swap;
-}
+} */

src/pages/Auth/Login/index.tsx

@@ -154,8 +154,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 								width: "100%",
 								mb: { xs: 2, md: 3 },
 								mt: { xs: 0, md: 0 },
-								fontFamily:
+								fontFamily: "Fredoka",
-									'"Publica Sans Round Medium", sans-serif',
 							}}
 						>
 							Welcome Back!
@@ -195,8 +194,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										textAlign: "center",
 										color: "#D0E1E9",
 										fontSize: { xs: "20px", md: "24px" },
-										fontFamily:
+										fontFamily: "Fredoka",
-											'"Publica Sans Round Medium", sans-serif',
 									}}
 								>
 									{" "}
@@ -210,8 +208,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										color: "#D0E1E9", // Use theme's secondary text color (#272727)
 										fontSize: { xs: "14px", md: "16px" },
 										mb: 1,
-										fontFamily:
+										fontFamily: "Fredoka",
-											'"Publica Sans Round Medium", sans-serif',
 									}}
 								>
 									Log in with your email and password
@@ -228,8 +225,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 											},
 											color: "#D0E1E9",
 											mb: 0.5,
-											fontFamily:
+											fontFamily: "Fredoka",
-												'"Publica Sans Round Medium", sans-serif',
 											...autofillFix,
 										}}
 									>
@@ -303,15 +299,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 															xs: "0.875rem",
 															sm: "1rem",
 														},
-														fontFamily:
+														fontFamily: "Fredoka",
-															'"Publica Sans Round Medium", sans-serif',
 													},
 													"& .MuiInputBase-input::placeholder":
 														{
 															color: "text.secondary",
 															opacity: 1,
 															fontFamily:
-																'"Publica Sans Round Medium", sans-serif',
+																"Fredoka",
 														},
 													...autofillFix,
 												}}
@@ -331,8 +326,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 											},
 											color: "#D0E1E9",
 											mb: 0.5,
-											fontFamily:
+											fontFamily: "Fredoka",
-												'"Publica Sans Round Medium", sans-serif',
 										}}
 									>
 										Password
@@ -397,7 +391,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 																	togglePasswordVisibility
 																}
 																edge="end"
-																sx={{color:"#000000"}}
+																sx={{
+																	color: "#000000",
+																}}
 															>
 																{showPassword ? (
 																	<VisibilityOff />
@@ -432,15 +428,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 															xs: "0.875rem",
 															sm: "1rem",
 														},
-														fontFamily:
+														fontFamily: "Fredoka",
-															'"Publica Sans Round Medium", sans-serif',
 													},
 													"& .MuiInputBase-input::placeholder":
 														{
 															color: "text.secondary",
 															opacity: 1,
 															fontFamily:
-																'"Publica Sans Round Medium", sans-serif',
+																"Fredoka",
 														},
 												}}
 											/>
@@ -497,8 +492,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 														md: "1rem",
 													},
 													color: "#D0E1E9",
-													fontFamily:
+													fontFamily: "Fredoka",
-														'"Publica Sans Round Medium", sans-serif',
 												}}
 											>
 												Remember me
@@ -520,8 +514,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												sm: "0.875rem",
 												md: "1rem",
 											},
-											fontFamily:
+											fontFamily: "Fredoka",
-												'"Publica Sans Round Medium", sans-serif',
 										}}
 									>
 										Forgot password?
@@ -546,8 +539,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 											xs: "0.875rem",
 											md: "1rem",
 										},
-										fontFamily:
+										fontFamily: "Fredoka",
-											'"Publica Sans Round Medium", sans-serif',
 									}}
 								>
 									Login

src/pages/LandingPage/index.tsx

@@ -56,7 +56,7 @@ const LandingPage = () => {
 					xs: " #000000",
 				},
 				color: "white",
-				fontFamily: '"Publica Sans Round Medium", sans-serif',
+				fontFamily: "Fredoka",
 				display: "flex",
 				flexDirection: "column",
 			}}
@@ -79,7 +79,7 @@ const LandingPage = () => {
 					// 	"linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)",
 					background: "#141615",
 					boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
-					fontFamily: '"Publica Sans Round Medium", sans-serif',
+					fontFamily: "Fredoka",
 				}}
 			>
 				<img
@@ -112,8 +112,7 @@ const LandingPage = () => {
 							color: "#FFFFFF",
 							borderRadius: "6px",
 							width: { xs: "90px", sm: "117px" },
-							fontFamily:
+							fontFamily: "Fredoka",
-								'"Publica Sans Round Medium", sans-serif',
 							textTransform: "none",
 							"&:hover": { backgroundColor: "#439BC1" },
 							fontWeight: 500,
@@ -130,7 +129,7 @@ const LandingPage = () => {
 				sx={{
 					py: 8,
 					justifyContent: "space-between",
-					fontFamily: '"Publica Sans Round Medium", sans-serif',
+					fontFamily: "Fredoka",
 					backgroundImage: {
 						lg: 'url("/bgev.svg")',
 						sm: 'url("/bgev.svg")',
@@ -147,7 +146,7 @@ const LandingPage = () => {
 					sx={{
 						py: { xs: 4, sm: 6, md: 8 },
 						justifyContent: "space-between",
-						fontFamily: '"Publica Sans Round Medium", sans-serif',
+						fontFamily: "Fredoka",
 						width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
 					}}
 				>
@@ -177,8 +176,7 @@ const LandingPage = () => {
 						>
 							<Typography
 								sx={{
-									fontFamily:
+									fontFamily: "Fredoka",
-										'"Publica Sans Round Medium", sans-serif',
 									fontWeight: 600,
 									fontSize: {
 										xs: "28px",
@@ -198,8 +196,7 @@ const LandingPage = () => {
 							<Typography
 								variant="body1"
 								sx={{
-									fontFamily:
+									fontFamily: "Fredoka",
-										'"Publica Sans Round Medium", sans-serif',
 									color: "#CACACA",
 									marginBottom: "24px",
 									fontWeight: 400,
@@ -225,8 +222,7 @@ const LandingPage = () => {
 									width: { xs: "120px", md: "140px" },
 									height: "48px",
 									textTransform: "none",
-									fontFamily:
+									fontFamily: "Fredoka",
-										'"Publica Sans Round Medium", sans-serif',
 									"&:hover": { backgroundColor: "#439BC1" },
 									fontSize: { xs: "14px", md: "16px" },
 									fontWeight: 500,
@@ -336,18 +332,14 @@ const LandingPage = () => {
 									sm: "80px",
 									md: "100px",
 								}}
-								fontFamily={
+								fontFamily={"Fredoka"}
-									'"Publica Sans Round Medium", sans-serif'
-								}
 							>
 								50+
 							</Typography>
 							<Typography
 								variant="body2"
 								color="#FFFFFF"
-								fontFamily={
+								fontFamily={"Fredoka"}
-									'"Publica Sans Round Medium", sans-serif'
-								}
 								fontWeight={400}
 								fontSize={{
 									xs: "12px",
@@ -387,18 +379,14 @@ const LandingPage = () => {
 									sm: "80px",
 									md: "100px",
 								}}
-								fontFamily={
+								fontFamily={"Fredoka"}
-									'"Publica Sans Round Medium", sans-serif'
-								}
 							>
 								100%
 							</Typography>
 							<Typography
 								variant="body2"
 								color="#FFFFFF"
-								fontFamily={
+								fontFamily={"Fredoka"}
-									'"Publica Sans Round Medium", sans-serif'
-								}
 								fontWeight={400}
 								fontSize={{
 									xs: "12px",
@@ -438,18 +426,14 @@ const LandingPage = () => {
 									sm: "80px",
 									md: "100px",
 								}}
-								fontFamily={
+								fontFamily={"Fredoka"}
-									'"Publica Sans Round Medium", sans-serif'
-								}
 							>
 								20+
 							</Typography>
 							<Typography
 								variant="body2"
 								color="#FFFFFF"
-								fontFamily={
+								fontFamily={"Fredoka"}
-									'"Publica Sans Round Medium", sans-serif'
-								}
 								fontWeight={400}
 								fontSize={{
 									xs: "12px",
@@ -489,18 +473,14 @@ const LandingPage = () => {
 									sm: "80px",
 									md: "100px",
 								}}
-								fontFamily={
+								fontFamily={"Fredoka"}
-									'"Publica Sans Round Medium", sans-serif'
-								}
 							>
 								10+
 							</Typography>
 							<Typography
 								variant="body2"
 								color="#FFFFFF"
-								fontFamily={
+								fontFamily={"Fredoka"}
-									'"Publica Sans Round Medium", sans-serif'
-								}
 								fontWeight={400}
 								fontSize={{
 									xs: "12px",
@@ -532,7 +512,7 @@ const LandingPage = () => {
 				<Typography
 					variant="h4"
 					fontWeight={600}
-					fontFamily={'"Publica Sans Round Medium", sans-serif'}
+					fontFamily={"Fredoka"}
 					fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
 					lineHeight={"100%"}
 					color="#FFFFFF"
@@ -557,7 +537,7 @@ const LandingPage = () => {
 					mt={2}
 					maxWidth="600px"
 					mx="auto"
-					fontFamily={'"Publica Sans Round Medium", sans-serif'}
+					fontFamily={"Fredoka"}
 					fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
 					fontWeight={400}
 					lineHeight={"140%"}
@@ -646,8 +626,7 @@ const LandingPage = () => {
 										variant="h6"
 										sx={{
 											color: "#52ACDF",
-											fontFamily:
+											fontFamily: "Fredoka",
-												'"Publica Sans Round Medium", sans-serif',
 											fontWeight: 600,
 											fontSize: {
 												xs: "16px",
@@ -662,8 +641,7 @@ const LandingPage = () => {
 										variant="body2"
 										sx={{
 											color: "#D9D8D8",
-											fontFamily:
+											fontFamily: "Fredoka",
-												'"Publica Sans Round Medium", sans-serif',
 											fontWeight: 400,
 											fontSize: {
 												xs: "12px",
@@ -692,7 +670,7 @@ const LandingPage = () => {
 					borderRadius: "16px",
 
 					mt: { xs: 6, md: 10 },
-					fontFamily: '"Publica Sans Round Medium", sans-serif',
+					fontFamily: "Fredoka",
 				}}
 			>
 				Key Features
@@ -712,7 +690,7 @@ const LandingPage = () => {
 					py: { xs: 2, md: 5 },
 					px: { xs: 2, md: 3 },
 					mt: { xs: 6, md: 5 },
-					fontFamily: '"Publica Sans Round Medium", sans-serif',
+					fontFamily: "Fredoka",
 				}}
 			>
 				<Box
@@ -1206,7 +1184,7 @@ const LandingPage = () => {
 					px: { xs: 2, sm: 3, md: 4 },
 					mt: { xs: 6, sm: 8, md: 10 },
 					// height: { xs: "auto", lg: "261px", sm: "208px" },
-					fontFamily: '"Publica Sans Round Medium", sans-serif',
+					fontFamily: "Fredoka",
 					borderRadius: "12px",
 				}}
 			>
@@ -1261,9 +1239,7 @@ const LandingPage = () => {
 
 						{/* Text */}
 						<Typography
-							fontFamily={
+							fontFamily={"Fredoka"}
-								'"Publica Sans Round Medium", sans-serif'
-							}
 							fontWeight={500}
 							fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
 							lineHeight={"130%"}
@@ -1295,8 +1271,7 @@ const LandingPage = () => {
 									lg: "54px",
 									md: "44px",
 								},
-								fontFamily:
+								fontFamily: "Fredoka",
-									'"Publica Sans Round Medium", sans-serif',
 								textTransform: "none",
 								fontWeight: 500,
 								fontSize: {
@@ -1331,7 +1306,7 @@ const LandingPage = () => {
 					px: { xs: 2, sm: 3, md: 4 },
 					mt: { xs: 6, sm: 8, md: 10 },
 					mb: { xs: 6, sm: 8, md: 10 },
-					fontFamily: '"Publica Sans Round Medium", sans-serif',
+					fontFamily: "Fredoka",
 					height: "auto",
 					borderRadius: { xs: "8px", lg: "12px" },
 				}}
@@ -1342,13 +1317,13 @@ const LandingPage = () => {
 						py: 4,
 						px: 3,
 						mt: 2,
-						fontFamily: '"Publica Sans Round Medium", sans-serif',
+						fontFamily: "Fredoka",
 					}}
 				>
 					<Typography
 						variant="h5"
 						fontWeight={600}
-						fontFamily={'"Publica Sans Round Medium", sans-serif'}
+						fontFamily={"Fredoka"}
 						fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
 						lineHeight={"120%"}
 					>
@@ -1363,8 +1338,7 @@ const LandingPage = () => {
 						variant="body2"
 						sx={{
 							my: { xs: 2, sm: 3 },
-							fontFamily:
+							fontFamily: "Fredoka",
-								'"Publica Sans Round Medium", sans-serif',
 							fontWeight: 400,
 							fontSize: { xs: "14px", sm: "18px", md: "20px" },
 							color: "#FFFFFF",

src/pages/ProfilePage/index.tsx

@@ -44,7 +44,8 @@ const ProfilePage = () => {
 	return (
 		<Container
 			sx={{
-				py:1
+				py:1,
+				
 			}}
 		>
 			<Typography
@@ -125,7 +126,7 @@ const ProfilePage = () => {
 							</Link> */}
 						</Stack>
 
-						<Grid container spacing={3} sx={{ overflowX: "auto" }}>
+						<Grid container spacing={3} >
 							<Grid item xs={12} sm={4}>
 								<Typography
 									variant="body2"

src/shared-theme/AppTheme.tsx

@@ -39,7 +39,7 @@ export default function AppTheme(props: AppThemeProps) {
 						divider: "#E0E0E0",
 					},
 					typography: {
-						fontFamily: '"Publica Sans Round Medium", sans-serif',
+						fontFamily: "Fredoka",
 						h4: {
 							fontSize: "2rem",
 							fontWeight: 600,
@@ -54,7 +54,7 @@ export default function AppTheme(props: AppThemeProps) {
 						body2: {
 							fontSize: "0.875rem",
 							color: "#b0b0b0",
-							fontWeight: 300,
+							fontWeight: 400,
 						},
 					},
 					cssVariables: {