From 7f4914c695aabb7a22dfbc08ba8882fa0b71ea50 Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Thu, 24 Apr 2025 11:41:34 +0530
Subject: [PATCH] Updation of Modals Ui for Manager and User panel

---
 .../addmanagerStationModal.tsx                | 179 ++++----
 src/components/AddSlotModal/addSlotModal.tsx  | 402 ++++++++++--------
 .../AddStationLocation/addStationLocation.tsx |   2 +-
 src/components/CustomTable/customTable.tsx    |  60 +--
 .../editManagerStationModal.tsx               | 260 ++++++-----
 .../EditSlotModal/editSlotModal.tsx           | 182 ++++----
 src/components/OptionsMenu/index.tsx          |  24 +-
 src/pages/LandingPage/index.tsx               |  84 ++--
 8 files changed, 695 insertions(+), 498 deletions(-)

diff --git a/src/components/AddManagerStationModal/addmanagerStationModal.tsx b/src/components/AddManagerStationModal/addmanagerStationModal.tsx
index ece8e23..92ab622 100644
--- a/src/components/AddManagerStationModal/addmanagerStationModal.tsx
+++ b/src/components/AddManagerStationModal/addmanagerStationModal.tsx
@@ -30,7 +30,7 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
 
 		const payload = {
 			connectorType,
-			power,    
+			power,
 			price,
 			available,
 		};
@@ -57,10 +57,9 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
 					top: "50%",
 					left: "50%",
 					transform: "translate(-50%, -50%)",
-					width: 400,
-					bgcolor: "background.paper",
+					width: 500,
 					boxShadow: 24,
-					p: 3,
+					p: 0,
 					borderRadius: 2,
 				}}
 			>
@@ -70,6 +69,10 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
+						backgroundColor: "#000000",
+						color: "#D0E1E9",
+						padding: "20px 24px",
+						borderRadius: "10px 10px 0 0",
 					}}
 				>
 					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
@@ -81,78 +84,112 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
 				</Box>
 
 				{/* Divider */}
-				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
-
-				{/* Connector Type */}
-				<Typography variant="body2" fontWeight={500} mb={0.5}>
-					Connector Type
-				</Typography>
-				<TextField
-					{...register("connectorType", {
-						required: "Connector Type is required",
-					})}
-					fullWidth
-					error={!!errors.connectorType}
-					helperText={errors.connectorType?.message}
-				/>
-
-				{/* Power */}
-				<Typography variant="body2" fontWeight={500} mb={0.5}>
-					Power (kW)
-				</Typography>
-				<TextField
-					{...register("power", { required: "Power is required" })}
-					fullWidth
-					error={!!errors.power}
-					helperText={errors.power?.message}
-				/>
-
-				{/* Price */}
-				<Typography variant="body2" fontWeight={500} mb={0.5}>
-					Price (₹)
-				</Typography>
-				<TextField
-					{...register("price", {
-						required: "Price is required",
-						pattern: {
-							value: /^[0-9]+$/,
-							message: "Price must be a number",
-						},
-					})}
-					fullWidth
-					error={!!errors.price}
-					helperText={errors.price?.message}
-				/>
-
-				{/* Availability Switch */}
-				<FormControlLabel
-					control={
-						<Switch
-							checked={available}
-							onChange={() => setavailable((prev) => !prev)}
-						/>
-					}
-					label={available ? "Available" : "Not Available"}
-					sx={{ mt: 2 }}
-				/>
-
-				{/* Submit */}
+				{/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
 				<Box
-					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
+					sx={{
+						backgroundColor: "#b5c4cb", // light background for body
+						padding: "20px",
+						borderRadius: "0 0 10px 10px",
+					}}
 				>
-					<Button
-						type="submit"
+					{/* Connector Type */}
+					<Typography
+						variant="body2"
+						fontWeight={500}
+						mb={0.5}
+						color="#000000"
+						fontSize={"16px"}
+						mt={1}
+					>
+						Connector Type
+					</Typography>
+					<TextField
+						{...register("connectorType", {
+							required: "Connector Type is required",
+						})}
+						fullWidth
+						error={!!errors.connectorType}
+						helperText={errors.connectorType?.message}
+					/>
+
+					{/* Power */}
+					<Typography
+						variant="body2"
+						fontWeight={500}
+						mb={0.5}
+						color="#000000"
+						fontSize={"16px"}
+						mt={1}
+					>
+						Power (kW)
+					</Typography>
+					<TextField
+						{...register("power", {
+							required: "Power is required",
+						})}
+						fullWidth
+						error={!!errors.power}
+						helperText={errors.power?.message}
+					/>
+
+					{/* Price */}
+					<Typography
+						variant="body2"
+						fontWeight={500}
+						mb={0.5}
+						color="#000000"
+						fontSize={"16px"}
+						mt={1}
+					>
+						Price (₹)
+					</Typography>
+					<TextField
+						{...register("price", {
+							required: "Price is required",
+							pattern: {
+								value: /^[0-9]+$/,
+								message: "Price must be a number",
+							},
+						})}
+						fullWidth
+						error={!!errors.price}
+						helperText={errors.price?.message}
+					/>
+
+					{/* Availability Switch */}
+					<FormControlLabel
+						control={
+							<Switch
+								checked={available}
+								onChange={() => setavailable((prev) => !prev)}
+							/>
+						}
+						label={available ? "Available" : "Not Available"}
+						sx={{ mt: 2 }}
+					/>
+
+					{/* Submit */}
+					<Box
 						sx={{
-							backgroundColor: "#52ACDF",
-							color: "white",
-							borderRadius: "8px",
-							fontSize: "16px",
-							width: "117px",
-							"&:hover": { backgroundColor: "#439BC1" },
+							display: "flex",
+							justifyContent: "flex-end",
+							mt: 3,
 						}}
 					>
-						Add Station
-					</Button>
+						<Button
+							type="submit"
+							sx={{
+								backgroundColor: "#000000",
+								color: "#D0E1E9",
+								borderRadius: "8px",
+								fontSize: "16px",
+								width: "117px",
+								"&:hover": { backgroundColor: "#454545" },
+							}}
+						>
+							Add Station
+						</Button>
+					</Box>
 				</Box>
 			</Box>
 		</Modal>
diff --git a/src/components/AddSlotModal/addSlotModal.tsx b/src/components/AddSlotModal/addSlotModal.tsx
index f2d3fc1..6a910f4 100644
--- a/src/components/AddSlotModal/addSlotModal.tsx
+++ b/src/components/AddSlotModal/addSlotModal.tsx
@@ -98,10 +98,10 @@ const AddSlotModal = ({ open, handleClose }: any) => {
 					top: "50%",
 					left: "50%",
 					transform: "translate(-50%, -50%)",
-					width: 400,
-					bgcolor: "background.paper",
+					width: 500,
+
 					boxShadow: 24,
-					p: 3,
+					p: 0,
 					borderRadius: 2,
 				}}
 			>
@@ -111,6 +111,11 @@ const AddSlotModal = ({ open, handleClose }: any) => {
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
+						backgroundColor: "#000000",
+						color: "#D0E1E9",
+
+						padding: "16px 24px",
+						borderRadius: "10px 10px 0 0",
 					}}
 				>
 					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
@@ -122,182 +127,245 @@ const AddSlotModal = ({ open, handleClose }: any) => {
 				</Box>
 
 				{/* Horizontal Line */}
-				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
+				{/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
 
-				{/* Date Range Toggle */}
-				<FormControlLabel
-					control={
-						<Switch
-							checked={isDateRange}
-							onChange={() => setIsDateRange(!isDateRange)}
-						/>
-					}
-					label="Select Date Range"
+				<Box
 					sx={{
-						fontWeight: 500,
-						fontSize: "16px",
-						margin: 0,
+						backgroundColor: "#b5c4cb",
+						padding: "24px",
+						borderRadius: "0 0 10px 10px",
 					}}
-				/>
-
-				{/* Date Input Fields */}
-				{isDateRange ? (
-					<>
-						<Typography variant="body2" fontWeight={500} mb={0.5}>
-							Start Date
-						</Typography>
-						<TextField
-							{...register("startingDate", {
-								required: "Start date is required",
-								validate: (value) =>
-									value >= today ||
-									"Start date cannot be in the past",
-							})}
-							type="date"
-							fullWidth
-							error={!!errors.startingDate}
-							helperText={errors.startingDate?.message}
-							inputProps={{ min: today }}
-						/>
-						<Typography variant="body2" fontWeight={500} mb={0.5}>
-							End Date
-						</Typography>
-						<TextField
-							{...register("endingDate", {
-								required: "End date is required",
-								validate: (value) =>
-									value >= today ||
-									"End date cannot be in the past",
-							})}
-							type="date"
-							fullWidth
-							error={!!errors.endingDate}
-							helperText={errors.endingDate?.message}
-							inputProps={{ min: today }}
-						/>
-					</>
-				) : (
-					<>
-						<Typography variant="body2" fontWeight={500} mb={0.5}>
-							Date
-						</Typography>
-						<TextField
-							{...register("date", {
-								required: "Date is required",
-								validate: (value) =>
-									value >= today ||
-									"Date cannot be in the past",
-							})}
-							type="date"
-							fullWidth
-							error={!!errors.date}
-							helperText={errors.date?.message}
-							inputProps={{ min: today }}
-						/>
-					</>
-				)}
-
-				{/* Start Hour */}
-				<Typography variant="body2" fontWeight={500} mb={0.5}>
-					Start Hour
-				</Typography>
-				<TextField
-					{...register("startHour", {
-						required: "Start hour is required",
-					})}
-					type="time"
-					fullWidth
-					error={!!errors.startHour}
-					helperText={errors.startHour?.message}
-				/>
-
-				{/* End Hour */}
-				<Typography variant="body2" fontWeight={500} mb={0.5}>
-					End Hour
-				</Typography>
-				<TextField
-					{...register("endHour", {
-						required: "End hour is required",
-						validate: (value) =>
-							value > startHour ||
-							"End hour must be after start hour",
-					})}
-					type="time"
-					fullWidth
-					error={!!errors.endHour}
-					helperText={errors.endHour?.message}
-					inputProps={{ min: minEndTime }}
-				/>
-
-				{/* Duration and Duration Unit */}
-				<Typography variant="body2" fontWeight={500} mb={0.5}>
-					Slot Duration
-				</Typography>
-				<Box display="flex" alignItems="center" gap={2}>
-					<TextField
-						{...register("duration", {
-							required: "Duration is required",
-							pattern: {
-								value: /^[0-9]+$/,
-								message: "Duration must be a number",
-							},
-						})}
-						type="number"
-						fullWidth
-						error={!!errors.duration}
-						helperText={errors.duration?.message}
+				>
+					{/* Date Range Toggle */}
+					<FormControlLabel
+						control={
+							<Switch
+								checked={isDateRange}
+								onChange={() => setIsDateRange(!isDateRange)}
+							/>
+						}
+						label="Select Date Range"
+						sx={{
+							fontWeight: 500,
+							fontSize: "16px",
+							margin: 0,
+							color: "#000000",
+							mb: 1,
+						}}
 					/>
 
-					{/* Dropdown for selecting Minutes/Hours */}
-					<FormControl fullWidth>
-						<InputLabel>Unit</InputLabel>
-						<Select
-							value={durationUnit}
-							onChange={(e) => setDurationUnit(e.target.value)}
-						>
-							<MenuItem value="minutes">Minutes</MenuItem>
-							<MenuItem value="hours">Hours</MenuItem>
-						</Select>
-					</FormControl>
-				</Box>
+					{/* Date Input Fields */}
+					{isDateRange ? (
+						<>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+								mb={1}
+								mt={1}
+								color="#000000"
+								fontSize={"16px"}
+							>
+								Start Date
+							</Typography>
+							<TextField
+								{...register("startingDate", {
+									required: "Start date is required",
+									validate: (value) =>
+										value >= today ||
+										"Start date cannot be in the past",
+								})}
+								type="date"
+								fullWidth
+								error={!!errors.startingDate}
+								helperText={errors.startingDate?.message}
+								inputProps={{ min: today }}
+							/>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+								fontSize={"16px"}
+								mb={1}
+								mt={1}
+								color="#000000"
+							>
+								End Date
+							</Typography>
+							<TextField
+								{...register("endingDate", {
+									required: "End date is required",
+									validate: (value) =>
+										value >= today ||
+										"End date cannot be in the past",
+								})}
+								type="date"
+								fullWidth
+								error={!!errors.endingDate}
+								helperText={errors.endingDate?.message}
+								inputProps={{ min: today }}
+							/>
+						</>
+					) : (
+						<>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+								mb={1}
+								color="#000000"
+								fontSize={"16px"}
+								mt={1}
+							>
+								Date
+							</Typography>
+							<TextField
+								{...register("date", {
+									required: "Date is required",
+									validate: (value) =>
+										value >= today ||
+										"Date cannot be in the past",
+								})}
+								type="date"
+								fullWidth
+								error={!!errors.date}
+								helperText={errors.date?.message}
+								inputProps={{ min: today }}
+							/>
+						</>
+					)}
 
-				{/* Availability Toggle */}
-				<Box
-					display="flex"
-					alignItems="center"
-					justifyContent="space-between"
-					gap={2}
-				>
-					<Button
-						onClick={() => setIsAvailable((prev) => !prev)}
-						variant={isAvailable ? "contained" : "outlined"}
-						color="primary"
-						sx={{ marginTop: 1 }}
+					{/* Start Hour */}
+
+					<Typography
+						variant="body2"
+						fontWeight={500}
+						mb={1}
+						color="#000000"
+						fontSize={"16px"}
+						mt={1}
 					>
-						Check Availability
-					</Button>
-					<Typography>
-						{isAvailable ? "Available" : "Not Available"}
+						Start Hour
 					</Typography>
-				</Box>
+					<TextField
+						{...register("startHour", {
+							required: "Start hour is required",
+						})}
+						type="time"
+						fullWidth
+						error={!!errors.startHour}
+						helperText={errors.startHour?.message}
+					/>
 
-				{/* Submit Button */}
-				<Box
-					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
-				>
-					<Button
-						type="submit"
+					{/* End Hour */}
+					<Typography
+						variant="body2"
+						fontWeight={500}
+						mb={1}
+						color="#000000"
+						fontSize={"16px"}
+						mt={1}
+					>
+						End Hour
+					</Typography>
+					<TextField
+						{...register("endHour", {
+							required: "End hour is required",
+							validate: (value) =>
+								value > startHour ||
+								"End hour must be after start hour",
+						})}
+						type="time"
+						fullWidth
+						error={!!errors.endHour}
+						helperText={errors.endHour?.message}
+						inputProps={{ min: minEndTime }}
+					/>
+
+					{/* Duration and Duration Unit */}
+					<Typography
+						variant="body2"
+						fontWeight={500}
+						mb={1}
+						color="#000000"
+						fontSize={"16px"}
+						mt={1}
+					>
+						Slot Duration
+					</Typography>
+					<Box display="flex" alignItems="center" gap={2}>
+						<TextField
+							{...register("duration", {
+								required: "Duration is required",
+								pattern: {
+									value: /^[0-9]+$/,
+									message: "Duration must be a number",
+								},
+							})}
+							type="number"
+							fullWidth
+							error={!!errors.duration}
+							helperText={errors.duration?.message}
+						/>
+
+						{/* Dropdown for selecting Minutes/Hours */}
+						<FormControl fullWidth>
+							<InputLabel>Unit</InputLabel>
+							<Select
+								value={durationUnit}
+								onChange={(e) =>
+									setDurationUnit(e.target.value)
+								}
+							>
+								<MenuItem value="minutes">Minutes</MenuItem>
+								<MenuItem value="hours">Hours</MenuItem>
+							</Select>
+						</FormControl>
+					</Box>
+
+					{/* Availability Toggle */}
+					<Box
+						display="flex"
+						alignItems="center"
+						justifyContent="space-between"
+						gap={2}
+						mt={1}
+					>
+						<Button
+							onClick={() => setIsAvailable((prev) => !prev)}
+							sx={{
+								marginTop: 1,
+								color: "#D0E1E9",
+								backgroundColor: "#000000",
+								"&:hover": { backgroundColor: "#454545" },
+							}}
+						>
+							Check Availability
+						</Button>
+						<Typography>
+							{isAvailable ? "Available" : "Not Available"}
+						</Typography>
+					</Box>
+
+					{/* Submit Button */}
+					<Box
 						sx={{
-							backgroundColor: "#52ACDF",
-							color: "white",
-							borderRadius: "8px",
-							fontSize: "16px",
-							width: "117px",
-							"&:hover": { backgroundColor: "#439BC1" },
+							display: "flex",
+							justifyContent: "flex-end",
+							mt: 3,
 						}}
 					>
-						Add Slot
-					</Button>
+						<Button
+							type="submit"
+							sx={{
+								backgroundColor: "#000000",
+								color: "#D0E1E9",
+								borderRadius: "8px",
+								fontSize: "16px",
+								width: "117px",
+								"&:hover": { backgroundColor: "#454545" },
+							}}
+						>
+							Add Slot
+						</Button>
+					</Box>
 				</Box>
 			</Box>
 		</Modal>
diff --git a/src/components/AddStationLocation/addStationLocation.tsx b/src/components/AddStationLocation/addStationLocation.tsx
index cce3240..5028724 100644
--- a/src/components/AddStationLocation/addStationLocation.tsx
+++ b/src/components/AddStationLocation/addStationLocation.tsx
@@ -31,7 +31,7 @@ const AddStationLocationModal = ({
 	};
 
 	return (
-		<Dialog open={open} onClose={handleClose}>
+		<Dialog open={open} onClose={handleClose} >
 			<DialogTitle>Search Near By Stations</DialogTitle>
 			<DialogContent>
 				<form onSubmit={handleSubmit(onSubmit)}>
diff --git a/src/components/CustomTable/customTable.tsx b/src/components/CustomTable/customTable.tsx
index 4b92b86..e13cebc 100644
--- a/src/components/CustomTable/customTable.tsx
+++ b/src/components/CustomTable/customTable.tsx
@@ -648,31 +648,39 @@ const CustomTable: React.FC<CustomTableProps> = ({
 															},
 														}}
 													>
-														<MenuItem
-															onClick={() =>
-																handleMenuAction(
-																	"view"
-																)
-															}
-															sx={{
-																color: "#000000",
-																fontSize:
-																	"16px",
-																display: "flex",
-																alignItems:
-																	"center",
-																gap: 1,
-															}}
-														>
-															<VisibilityIcon
-																sx={{
-																	fontSize:
-																		"18px",
-																	color: "#454545",
-																}}
-															/>
-															View
-														</MenuItem>
+														{user?.userType !==
+															"manager" &&
+															user?.userType !==
+																"user" && (
+																<MenuItem
+																	onClick={() =>
+																		handleMenuAction(
+																			"view"
+																		)
+																	}
+																	sx={{
+																		color: "#000000",
+																		fontSize:
+																			"16px",
+																		display:
+																			"flex",
+																		alignItems:
+																			"center",
+																		gap: 1,
+																	}}
+																>
+																	<VisibilityIcon
+																		sx={{
+																			fontSize:
+																				"18px",
+																			color: "#454545",
+																		}}
+																	/>
+																	View
+																</MenuItem>
+															)}
+													{	user?.userType !==
+														"user" && (
 														<MenuItem
 															onClick={() =>
 																handleMenuAction(
@@ -697,7 +705,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 																}}
 															/>
 															Edit
-														</MenuItem>
+														</MenuItem>)}
 														<MenuItem
 															onClick={() =>
 																handleMenuAction(
diff --git a/src/components/EditManagerStationModal/editManagerStationModal.tsx b/src/components/EditManagerStationModal/editManagerStationModal.tsx
index 9e8976b..7050e60 100644
--- a/src/components/EditManagerStationModal/editManagerStationModal.tsx
+++ b/src/components/EditManagerStationModal/editManagerStationModal.tsx
@@ -128,7 +128,7 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
 					width: 400,
 					bgcolor: "background.paper",
 					boxShadow: 24,
-					p: 3,
+					p: 0,
 					borderRadius: 2,
 				}}
 			>
@@ -138,6 +138,10 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
+						backgroundColor: "#000000",
+						color: "#D0E1E9",
+						padding: "20px 24px",
+						borderRadius: "10px 10px 0 0",
 					}}
 				>
 					<Typography variant="h6" fontWeight={600}>
@@ -148,121 +152,157 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
 					</CustomIconButton>
 				</Box>
 
-				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
+				{/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
 
-				{/* Input Fields */}
-				<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
-					{/* Connector Type */}
-					<Box sx={{ flex: "1 1 100%" }}>
-						<Typography variant="body2" fontWeight={500} mb={0.5}>
-							Connector Type
-						</Typography>
-						<Controller
-							name="connectorType"
-							control={control}
-							rules={{ required: "Connector type is required" }}
-							render={({ field }) => (
-								<CustomTextField
-									{...field}
-									fullWidth
-									size="small"
-									error={!!errors.connectorType}
-									helperText={errors.connectorType?.message}
-								/>
-							)}
-						/>
-					</Box>
-
-					{/* Power */}
-					<Box sx={{ flex: "1 1 48%" }}>
-						<Typography variant="body2" fontWeight={500} mb={0.5}>
-							Power
-						</Typography>
-						<Controller
-							name="power"
-							control={control}
-							rules={{ required: "Power is required" }}
-							render={({ field }) => (
-								<CustomTextField
-									{...field}
-									type="number"
-									fullWidth
-									size="small"
-									error={!!errors.power}
-									helperText={errors.power?.message}
-								/>
-							)}
-						/>
-					</Box>
-
-					{/* Price */}
-					<Box sx={{ flex: "1 1 48%" }}>
-						<Typography variant="body2" fontWeight={500} mb={0.5}>
-							Price
-						</Typography>
-						<Controller
-							name="price"
-							control={control}
-							rules={{ required: "Price is required" }}
-							render={({ field }) => (
-								<CustomTextField
-									{...field}
-									type="number"
-									fullWidth
-									size="small"
-									error={!!errors.price}
-									helperText={errors.price?.message}
-								/>
-							)}
-						/>
-					</Box>
-
-					{/* Available Toggle */}
-					<Box
-						display="flex"
-						alignItems="center"
-						justifyContent="space-between"
-						sx={{ flex: "1 1 100%" }}
-					>
-						<FormControlLabel
-							control={
-								<Switch
-									checked={available}
-									onChange={() => {
-										const toggle = !available;
-										setAvailable(toggle);
-										setValue("available", toggle);
-									}}
-								/>
-							}
-							label={available ? "Available" : "Not Available"}
-							sx={{ mt: 1 }}
-						/>
-					</Box>
-				</Box>
-
-				{/* Submit Button */}
 				<Box
-					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
+					sx={{
+						backgroundColor: "#b5c4cb", // light background for body
+						padding: "20px",
+						borderRadius: "0 0 10px 10px",
+					}}
 				>
-					<Button
-						type="submit"
+					{/* Input Fields */}
+					<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
+						{/* Connector Type */}
+						<Box sx={{ flex: "1 1 100%" }}>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+								mb={0.5}
+								color="#000000"
+								fontSize={"16px"}
+							>
+								Connector Type
+							</Typography>
+							<Controller
+								name="connectorType"
+								control={control}
+								rules={{
+									required: "Connector type is required",
+								}}
+								render={({ field }) => (
+									<CustomTextField
+										{...field}
+										fullWidth
+										size="small"
+										error={!!errors.connectorType}
+										helperText={
+											errors.connectorType?.message
+										}
+									/>
+								)}
+							/>
+						</Box>
+
+						{/* Power */}
+						<Box sx={{ flex: "1 1 48%" }}>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+								mb={0.5}
+								color="#000000"
+								fontSize={"16px"}
+							>
+								Power
+							</Typography>
+							<Controller
+								name="power"
+								control={control}
+								rules={{ required: "Power is required" }}
+								render={({ field }) => (
+									<CustomTextField
+										{...field}
+										type="number"
+										fullWidth
+										size="small"
+										error={!!errors.power}
+										helperText={errors.power?.message}
+									/>
+								)}
+							/>
+						</Box>
+
+						{/* Price */}
+						<Box sx={{ flex: "1 1 48%" }}>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+								mb={0.5}
+								color="#000000"
+								fontSize={"16px"}
+							>
+								Price
+							</Typography>
+							<Controller
+								name="price"
+								control={control}
+								rules={{ required: "Price is required" }}
+								render={({ field }) => (
+									<CustomTextField
+										{...field}
+										type="number"
+										fullWidth
+										size="small"
+										error={!!errors.price}
+										helperText={errors.price?.message}
+									/>
+								)}
+							/>
+						</Box>
+
+						{/* Available Toggle */}
+						<Box
+							display="flex"
+							alignItems="center"
+							justifyContent="space-between"
+							sx={{ flex: "1 1 100%" }}
+						>
+							<FormControlLabel
+								control={
+									<Switch
+										checked={available}
+										onChange={() => {
+											const toggle = !available;
+											setAvailable(toggle);
+											setValue("available", toggle);
+										}}
+									/>
+								}
+								label={
+									available ? "Available" : "Not Available"
+								}
+								sx={{ mt: 1 }}
+							/>
+						</Box>
+					</Box>
+
+					{/* Submit Button */}
+					<Box
 						sx={{
-							backgroundColor: "#52ACDF",
-							color: "white",
-							borderRadius: "8px",
-							fontSize: "16px",
-							width: "117px",
-							"&:hover": { backgroundColor: "#439BC1" },
+							display: "flex",
+							justifyContent: "flex-end",
+							mt: 3,
 						}}
-						disabled={loading}
 					>
-						{loading ? (
-							<CircularProgress size={24} color="inherit" />
-						) : (
-							"Update"
-						)}
-					</Button>
+						<Button
+							type="submit"
+							sx={{
+								backgroundColor: "#000000",
+								color: "#D0E1E9",
+								borderRadius: "8px",
+								fontSize: "16px",
+								width: "117px",
+								"&:hover": { backgroundColor: "#454545" },
+							}}
+							disabled={loading}
+						>
+							{loading ? (
+								<CircularProgress size={24} color="inherit" />
+							) : (
+								"Update"
+							)}
+						</Button>
+					</Box>
 				</Box>
 			</Box>
 		</Modal>
diff --git a/src/components/EditSlotModal/editSlotModal.tsx b/src/components/EditSlotModal/editSlotModal.tsx
index 6300345..851483e 100644
--- a/src/components/EditSlotModal/editSlotModal.tsx
+++ b/src/components/EditSlotModal/editSlotModal.tsx
@@ -73,21 +73,20 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 			setLoading(true);
 
 			try {
-
 				await dispatch(
 					updateSlot({
-						id: editRow.id, 
+						id: editRow.id,
 						startTime: data.startTime,
 						endTime: data.endTime,
 					})
 				).unwrap();
 				dispatch(fetchManagersSlots());
-				handleClose(); 
-				reset(); 
+				handleClose();
+				reset();
 			} catch (error) {
 				console.error("Error updating slot:", error);
 			} finally {
-				setLoading(false); 
+				setLoading(false);
 			}
 		}
 	};
@@ -112,9 +111,9 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 					left: "50%",
 					transform: "translate(-50%, -50%)",
 					width: 400,
-					bgcolor: "#000000",
+
 					boxShadow: 24,
-					p: 3,
+					p: 0,
 					borderRadius: 2,
 				}}
 			>
@@ -124,6 +123,10 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
+						backgroundColor: "#000000",
+						color: "#D0E1E9",
+						padding: "20px 24px",
+						borderRadius: "10px 10px 0 0",
 					}}
 				>
 					<Typography
@@ -143,87 +146,100 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 				</Box>
 
 				{/* Horizontal Line */}
-				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
-
-				{/* Input Fields */}
-				<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
-					{/* Start Time */}
-					<Box sx={{ flex: "1 1 48%" }}>
-						<Typography
-							variant="body2"
-							fontWeight={500}
-							mb={0.5}
-							color="#D0E1E9"
-						>
-							Start Time
-						</Typography>
-						<Controller
-							name="startTime"
-							control={control}
-							rules={{ required: "Start Time is required" }}
-							render={({ field }) => (
-								<CustomTextField
-									{...field}
-									type="time"
-									fullWidth
-									size="small"
-									error={!!errors.startTime}
-									helperText={errors.startTime?.message}
-								/>
-							)}
-						/>
-					</Box>
-
-					{/* End Time */}
-					<Box sx={{ flex: "1 1 48%" }}>
-						<Typography
-							variant="body2"
-							fontWeight={500}
-							mb={0.5}
-							color="#D0E1E9"
-						>
-							End Time
-						</Typography>
-						<Controller
-							name="endTime"
-							control={control}
-							rules={{ required: "End Time is required" }}
-							render={({ field }) => (
-								<CustomTextField
-									{...field}
-									type="time"
-									fullWidth
-									size="small"
-									error={!!errors.endTime}
-									helperText={errors.endTime?.message}
-								/>
-							)}
-						/>
-					</Box>
-				</Box>
-
-				{/* Submit Button */}
+				{/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
 				<Box
-					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
+					sx={{
+						backgroundColor: "#b5c4cb", // light background for body
+						padding: "20px",
+						borderRadius: "0 0 10px 10px",
+					}}
 				>
-					<Button
-						type="submit"
+					{/* Input Fields */}
+					<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
+						{/* Start Time */}
+						<Box sx={{ flex: "1 1 48%" }}>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+								mb={0.5}
+								color="#000000"
+								fontSize={"16px"}
+							>
+								Start Time
+							</Typography>
+							<Controller
+								name="startTime"
+								control={control}
+								rules={{ required: "Start Time is required" }}
+								render={({ field }) => (
+									<CustomTextField
+										{...field}
+										type="time"
+										fullWidth
+										size="small"
+										error={!!errors.startTime}
+										helperText={errors.startTime?.message}
+									/>
+								)}
+							/>
+						</Box>
+
+						{/* End Time */}
+						<Box sx={{ flex: "1 1 48%" }}>
+							<Typography
+								variant="body2"
+								fontWeight={500}
+								mb={0.5}
+								color="#000000"
+								fontSize={"16px"}
+							>
+								End Time
+							</Typography>
+							<Controller
+								name="endTime"
+								control={control}
+								rules={{ required: "End Time is required" }}
+								render={({ field }) => (
+									<CustomTextField
+										{...field}
+										type="time"
+										fullWidth
+										size="small"
+										error={!!errors.endTime}
+										helperText={errors.endTime?.message}
+									/>
+								)}
+							/>
+						</Box>
+					</Box>
+
+					{/* Submit Button */}
+					<Box
 						sx={{
-							backgroundColor: "#D0E1E9",
-							color: "#000000",
-							borderRadius: "8px",
-							fontSize: "16px",
-							width: "117px",
-							"&:hover": { backgroundColor: "#D0E1E9" },
+							display: "flex",
+							justifyContent: "flex-end",
+							mt: 3,
 						}}
-						disabled={loading} // Disable the button during loading state
 					>
-						{loading ? (
-							<CircularProgress size={24} color="inherit" />
-						) : (
-							"Update Slot"
-						)}
-					</Button>
+						<Button
+							type="submit"
+							sx={{
+								backgroundColor: "#000000",
+								color: "#D0E1E9",
+								borderRadius: "8px",
+								fontSize: "16px",
+								width: "117px",
+								"&:hover": { backgroundColor: "#454545" },
+							}}
+							disabled={loading} // Disable the button during loading state
+						>
+							{loading ? (
+								<CircularProgress size={24} color="inherit" />
+							) : (
+								"Update Slot"
+							)}
+						</Button>
+					</Box>
 				</Box>
 			</Box>
 		</Modal>
diff --git a/src/components/OptionsMenu/index.tsx b/src/components/OptionsMenu/index.tsx
index 29b6c01..3714ee6 100644
--- a/src/components/OptionsMenu/index.tsx
+++ b/src/components/OptionsMenu/index.tsx
@@ -11,9 +11,9 @@ const MenuItem = styled(MuiMenuItem)({
 	margin: "2px 10px",
 
 	borderBottom: "none",
-	"& .MuiButtonBase-root-MuiButton-root":{
-		fontSize:"16px",
-	}
+	"& .MuiButtonBase-root-MuiButton-root": {
+		fontSize: "16px",
+	},
 });
 
 export default function OptionsMenu({
@@ -48,20 +48,21 @@ export default function OptionsMenu({
 					paper: {
 						elevation: 0,
 						sx: {
+							borderRadius: "12px",
 							overflow: "visible",
-							//filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-							mt: 1.5,
-
-							"& .MuiList-root": {
-								background: "#D0E1E9",
-								
-							},
+							// filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+							mt: 1,
+							backgroundColor: "#000000",
+							// "& .MuiList-root": {
+							// 	background: "#000000",
+							// },
 							"& .MuiMenuItem-root": {
-								borderBottom: "none", // Remove any divider under menu items
+								borderBottom: "none", 
 							},
 						},
 					},
 				}}
+			
 				transformOrigin={{ horizontal: "right", vertical: "top" }}
 				anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
 			>
@@ -72,6 +73,7 @@ export default function OptionsMenu({
 						"&::before": {
 							display: "none",
 						},
+						color: "#D0E1E9",
 					}}
 				>
 					<MenuItem onClick={onClose}>Profile</MenuItem>
diff --git a/src/pages/LandingPage/index.tsx b/src/pages/LandingPage/index.tsx
index 0c3db36..ebb9dff 100644
--- a/src/pages/LandingPage/index.tsx
+++ b/src/pages/LandingPage/index.tsx
@@ -56,7 +56,7 @@ const LandingPage = () => {
 					xs: " #000000",
 				},
 				color: "white",
-				fontFamily: "Gilory",
+				fontFamily: '"Publica Sans Round Medium", sans-serif',
 				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: "Gilory",
+					fontFamily: '"Publica Sans Round Medium", sans-serif',
 				}}
 			>
 				<img
@@ -112,7 +112,8 @@ const LandingPage = () => {
 							color: "#FFFFFF",
 							borderRadius: "6px",
 							width: { xs: "90px", sm: "117px" },
-							fontFamily: "Gilory",
+							fontFamily:
+								'"Publica Sans Round Medium", sans-serif',
 							textTransform: "none",
 							"&:hover": { backgroundColor: "#439BC1" },
 							fontWeight: 500,
@@ -129,7 +130,7 @@ const LandingPage = () => {
 				sx={{
 					py: 8,
 					justifyContent: "space-between",
-					fontFamily: "Gilory",
+					fontFamily: '"Publica Sans Round Medium", sans-serif',
 					backgroundImage: {
 						lg: 'url("/bgev.svg")',
 						sm: 'url("/bgev.svg")',
@@ -146,7 +147,7 @@ const LandingPage = () => {
 					sx={{
 						py: { xs: 4, sm: 6, md: 8 },
 						justifyContent: "space-between",
-						fontFamily: "Gilory",
+						fontFamily: '"Publica Sans Round Medium", sans-serif',
 						width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
 					}}
 				>
@@ -176,7 +177,8 @@ const LandingPage = () => {
 						>
 							<Typography
 								sx={{
-									fontFamily: "Gilory",
+									fontFamily:
+										'"Publica Sans Round Medium", sans-serif',
 									fontWeight: 600,
 									fontSize: {
 										xs: "28px",
@@ -196,7 +198,8 @@ const LandingPage = () => {
 							<Typography
 								variant="body1"
 								sx={{
-									fontFamily: "Gilory",
+									fontFamily:
+										'"Publica Sans Round Medium", sans-serif',
 									color: "#CACACA",
 									marginBottom: "24px",
 									fontWeight: 400,
@@ -222,7 +225,8 @@ const LandingPage = () => {
 									width: { xs: "120px", md: "140px" },
 									height: "48px",
 									textTransform: "none",
-									fontFamily: "Gilory",
+									fontFamily:
+										'"Publica Sans Round Medium", sans-serif',
 									"&:hover": { backgroundColor: "#439BC1" },
 									fontSize: { xs: "14px", md: "16px" },
 									fontWeight: 500,
@@ -332,14 +336,18 @@ const LandingPage = () => {
 									sm: "80px",
 									md: "100px",
 								}}
-								fontFamily={"Gilory"}
+								fontFamily={
+									'"Publica Sans Round Medium", sans-serif'
+								}
 							>
 								50+
 							</Typography>
 							<Typography
 								variant="body2"
 								color="#FFFFFF"
-								fontFamily={"Gilory"}
+								fontFamily={
+									'"Publica Sans Round Medium", sans-serif'
+								}
 								fontWeight={400}
 								fontSize={{
 									xs: "12px",
@@ -379,14 +387,18 @@ const LandingPage = () => {
 									sm: "80px",
 									md: "100px",
 								}}
-								fontFamily={"Gilory"}
+								fontFamily={
+									'"Publica Sans Round Medium", sans-serif'
+								}
 							>
 								100%
 							</Typography>
 							<Typography
 								variant="body2"
 								color="#FFFFFF"
-								fontFamily={"Gilory"}
+								fontFamily={
+									'"Publica Sans Round Medium", sans-serif'
+								}
 								fontWeight={400}
 								fontSize={{
 									xs: "12px",
@@ -426,14 +438,18 @@ const LandingPage = () => {
 									sm: "80px",
 									md: "100px",
 								}}
-								fontFamily={"Gilory"}
+								fontFamily={
+									'"Publica Sans Round Medium", sans-serif'
+								}
 							>
 								20+
 							</Typography>
 							<Typography
 								variant="body2"
 								color="#FFFFFF"
-								fontFamily={"Gilory"}
+								fontFamily={
+									'"Publica Sans Round Medium", sans-serif'
+								}
 								fontWeight={400}
 								fontSize={{
 									xs: "12px",
@@ -473,14 +489,18 @@ const LandingPage = () => {
 									sm: "80px",
 									md: "100px",
 								}}
-								fontFamily={"Gilory"}
+								fontFamily={
+									'"Publica Sans Round Medium", sans-serif'
+								}
 							>
 								10+
 							</Typography>
 							<Typography
 								variant="body2"
 								color="#FFFFFF"
-								fontFamily={"Gilory"}
+								fontFamily={
+									'"Publica Sans Round Medium", sans-serif'
+								}
 								fontWeight={400}
 								fontSize={{
 									xs: "12px",
@@ -512,7 +532,7 @@ const LandingPage = () => {
 				<Typography
 					variant="h4"
 					fontWeight={600}
-					fontFamily={"Gilory"}
+					fontFamily={'"Publica Sans Round Medium", sans-serif'}
 					fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
 					lineHeight={"100%"}
 					color="#FFFFFF"
@@ -537,7 +557,7 @@ const LandingPage = () => {
 					mt={2}
 					maxWidth="600px"
 					mx="auto"
-					fontFamily={"Gilory"}
+					fontFamily={'"Publica Sans Round Medium", sans-serif'}
 					fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
 					fontWeight={400}
 					lineHeight={"140%"}
@@ -626,7 +646,8 @@ const LandingPage = () => {
 										variant="h6"
 										sx={{
 											color: "#52ACDF",
-											fontFamily: "Gilory",
+											fontFamily:
+												'"Publica Sans Round Medium", sans-serif',
 											fontWeight: 600,
 											fontSize: {
 												xs: "16px",
@@ -641,7 +662,8 @@ const LandingPage = () => {
 										variant="body2"
 										sx={{
 											color: "#D9D8D8",
-											fontFamily: "Gilory",
+											fontFamily:
+												'"Publica Sans Round Medium", sans-serif',
 											fontWeight: 400,
 											fontSize: {
 												xs: "12px",
@@ -670,7 +692,7 @@ const LandingPage = () => {
 					borderRadius: "16px",
 
 					mt: { xs: 6, md: 10 },
-					fontFamily: "Gilory",
+					fontFamily: '"Publica Sans Round Medium", sans-serif',
 				}}
 			>
 				Key Features
@@ -690,7 +712,7 @@ const LandingPage = () => {
 					py: { xs: 2, md: 5 },
 					px: { xs: 2, md: 3 },
 					mt: { xs: 6, md: 5 },
-					fontFamily: "Gilory",
+					fontFamily: '"Publica Sans Round Medium", sans-serif',
 				}}
 			>
 				<Box
@@ -1184,7 +1206,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: "Gilory",
+					fontFamily: '"Publica Sans Round Medium", sans-serif',
 					borderRadius: "12px",
 				}}
 			>
@@ -1239,7 +1261,9 @@ const LandingPage = () => {
 
 						{/* Text */}
 						<Typography
-							fontFamily={"Gilory"}
+							fontFamily={
+								'"Publica Sans Round Medium", sans-serif'
+							}
 							fontWeight={500}
 							fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
 							lineHeight={"130%"}
@@ -1271,7 +1295,8 @@ const LandingPage = () => {
 									lg: "54px",
 									md: "44px",
 								},
-								fontFamily: "Gilory",
+								fontFamily:
+									'"Publica Sans Round Medium", sans-serif',
 								textTransform: "none",
 								fontWeight: 500,
 								fontSize: {
@@ -1306,7 +1331,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: "Gilory",
+					fontFamily: '"Publica Sans Round Medium", sans-serif',
 					height: "auto",
 					borderRadius: { xs: "8px", lg: "12px" },
 				}}
@@ -1317,13 +1342,13 @@ const LandingPage = () => {
 						py: 4,
 						px: 3,
 						mt: 2,
-						fontFamily: "Gilory",
+						fontFamily: '"Publica Sans Round Medium", sans-serif',
 					}}
 				>
 					<Typography
 						variant="h5"
 						fontWeight={600}
-						fontFamily={"Gilory"}
+						fontFamily={'"Publica Sans Round Medium", sans-serif'}
 						fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
 						lineHeight={"120%"}
 					>
@@ -1338,7 +1363,8 @@ const LandingPage = () => {
 						variant="body2"
 						sx={{
 							my: { xs: 2, sm: 3 },
-							fontFamily: "Gilory",
+							fontFamily:
+								'"Publica Sans Round Medium", sans-serif',
 							fontWeight: 400,
 							fontSize: { xs: "14px", sm: "18px", md: "20px" },
 							color: "#FFFFFF",