src/components/AddBookingModal/addBookingModal.tsx

@@ -373,4 +373,4 @@ export default function AddBookingModal({
 			</Box>
 		</Modal>
 	);
-}
+}

src/components/AddEditAdminModal/addEditAdminModal.tsx

@@ -5,6 +5,7 @@ import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import { useForm, Controller } from "react-hook-form";
 import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";
+import { autofillFix } from "../../shared-theme/customizations/autoFill";
 
 //By Jaanvi : Edit Model :: 11-feb-25
 interface AddEditCategoryModalProps {
@@ -202,6 +203,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 									display: "flex",
 									flexDirection: "column",
 									width: "50%",
+									...autofillFix,
 								}}
 							>
 								<Typography variant="body2" fontWeight={500}>
@@ -226,6 +228,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 											id="email"
 											type="email"
 											placeholder="Email"
+											autoComplete="new-email"
 											required
 											fullWidth
 											color={
@@ -247,6 +250,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 										display: "flex",
 										flexDirection: "column",
 										width: "50%",
+										...autofillFix,
 									}}
 								>
 									<Typography
@@ -276,6 +280,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 												{...field}
 												required
 												placeholder="Enter Password"
+												autoComplete="new-password"
 												type={
 													showPassword
 														? "text"

src/components/AddManagerModal/addManagerModal.tsx

@@ -19,6 +19,7 @@ import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";
 import React, { useEffect, useState } from "react";
 import { RootState } from "../../redux/reducers.ts";
 import { stationList } from "../../redux/slices/stationSlice.ts";
+import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";
 
 export default function AddManagerModal({
 	open,
@@ -197,7 +198,7 @@ export default function AddManagerModal({
 					{/* Email and Password */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
 						{/* Email */}
-						<Box sx={{ flex: 1 }}>
+						<Box sx={{ flex: 1, ...autofillFix }}>
 							<Typography variant="body2" fontWeight={500}>
 								Email
 							</Typography>
@@ -205,6 +206,7 @@ export default function AddManagerModal({
 								fullWidth
 								placeholder="Enter Manager Email"
 								size="small"
+								autoComplete="new-email"
 								error={!!errors.email}
 								helperText={
 									errors.email ? errors.email.message : ""
@@ -220,7 +222,7 @@ export default function AddManagerModal({
 						</Box>
 
 						{/* Password */}
-						<Box sx={{ flex: 1 }}>
+						<Box sx={{ flex: 1, ...autofillFix }}>
 							<Typography variant="body2" fontWeight={500}>
 								Password
 							</Typography>
@@ -244,6 +246,7 @@ export default function AddManagerModal({
 									<CustomTextField
 										{...field}
 										required
+										autoComplete="new-password"
 										placeholder="Enter Password"
 										type={
 											showPassword ? "text" : "password"

src/components/AddStationModal/addStationModal.tsx

@@ -11,6 +11,7 @@ import {
 	Checkbox,
 	ListItemText,
 	InputLabel,
+	Chip,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { useSelector, useDispatch } from "react-redux";
@@ -20,7 +21,7 @@ import {
 	fetchVehicleBrands,
 	vehicleList,
 } from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly
-import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";// Assuming custom styled components
+import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components
 
 export default function AddStationModal({
 	open,
@@ -258,62 +259,79 @@ export default function AddStationModal({
 									width: "100%",
 								}}
 							>
-								<Typography variant="body2" fontWeight={500}>
+								<Typography
+									variant="body2"
+									fontWeight={500}
+									sx={{ mb: 1 }}
+								>
 									Vehicle Brand
 								</Typography>
-								<FormControl fullWidth>
+								<FormControl fullWidth size="small">
-									<InputLabel>Choose Brands</InputLabel>
 									<Select
 										multiple
+										displayEmpty
 										value={selectedBrands}
 										onChange={handleBrandChange}
 										renderValue={(selected) => {
-											const selectedArray =
+											if (selected.length === 0) {
-												selected as string[];
+												return (
-											const displayNames =
+													<Typography color="text.secondary">
-												selectedArray.slice(0, 1); // First 2 brands
+														Choose Brands
+													</Typography>
+												);
+											}
+
+											const displayNames = (
+												selected as string[]
+											).slice(0, 1);
 											const moreCount =
-												selectedArray.length - 1;
+												(selected as string[]).length -
+												1;
 
 											return (
 												<Box
 													sx={{
 														display: "flex",
-														alignItems: "center",
+														flexWrap: "wrap",
-														gap: 1,
+														gap: 0.5,
 													}}
 												>
-													{displayNames.map(
+													{displayNames.map((id) => {
-														(id, index) => {
+														const brand =
-															const brand =
+															vehicleBrands.find(
-																vehicleBrands.find(
+																(b) =>
-																	(b) =>
+																	b.id === id
-																		b.id ===
-																		id
-																);
-															return (
-																<Typography
-																	key={index}
-																	variant="body2"
-																>
-																	{brand
-																		? brand.name
-																		: ""}
-																</Typography>
 															);
-														}
+														return brand ? (
-													)}
+															<Chip
+																key={id}
+																label={
+																	brand.name
+																}
+																size="small"
+																sx={{
+																	height: 24,
+																}}
+															/>
+														) : null;
+													})}
 													{moreCount > 0 && (
-														<Typography
+														<Chip
-															variant="body2"
+															label={`+${moreCount} more`}
-															color="textSecondary"
+															size="small"
-														>
+															sx={{ height: 24 }}
-															+{moreCount} more
+														/>
-														</Typography>
 													)}
 												</Box>
 											);
 										}}
+										MenuProps={{
+											PaperProps: {
+												style: {
+													maxHeight: 224,
+												},
+											},
+										}}
 									>
 										{vehicleBrands.length > 0 ? (
 											vehicleBrands.map((brand) => (
@@ -345,6 +363,7 @@ export default function AddStationModal({
 								</FormControl>
 							</Box>
 
+							{/* Replace the Vehicle Name Dropdown code with this */}
 							<Box
 								sx={{
 									display: "flex",
@@ -352,52 +371,79 @@ export default function AddStationModal({
 									width: "100%",
 								}}
 							>
-								<Typography variant="body2" fontWeight={500}>
+								<Typography
+									variant="body2"
+									fontWeight={500}
+									sx={{ mb: 1 }}
+								>
 									Vehicle Name
 								</Typography>
-								<FormControl fullWidth>
+								<FormControl
-									<InputLabel>Choose Vehicles</InputLabel>
+									fullWidth
+									size="small"
+									disabled={selectedBrands.length === 0}
+								>
 									<Select
 										multiple
+										displayEmpty
 										value={selectedVehicles}
 										onChange={handleVehicleChange}
 										renderValue={(selected) => {
-											const selectedArray =
+											if (selected.length === 0) {
-												selected as string[];
+												return (
-											const displayNames =
+													<Typography color="text.secondary">
-												selectedArray.slice(0, 1); // First 2 vehicles
+														{selectedBrands.length ===
+														0
+															? "Select brand first"
+															: "Choose Vehicles"}
+													</Typography>
+												);
+											}
+
+											const displayNames = (
+												selected as string[]
+											).slice(0, 1);
 											const moreCount =
-												selectedArray.length - 1;
+												(selected as string[]).length -
+												1;
 
 											return (
 												<Box
 													sx={{
 														display: "flex",
-														alignItems: "center",
+														flexWrap: "wrap",
-														gap: 1,
+														gap: 0.5,
 													}}
 												>
 													{displayNames.map(
-														(name, index) => (
+														(name) => (
-															<Typography
+															<Chip
-																key={index}
+																key={name}
-																variant="body2"
+																label={name}
-															>
+																size="small"
-																{name}
+																sx={{
-															</Typography>
+																	height: 24,
+																}}
+															/>
 														)
 													)}
 													{moreCount > 0 && (
-														<Typography
+														<Chip
-															variant="body2"
+															label={`+${moreCount} more`}
-															color="textSecondary"
+															size="small"
-														>
+															sx={{ height: 24 }}
-															+{moreCount} more
+														/>
-														</Typography>
 													)}
 												</Box>
 											);
 										}}
+										MenuProps={{
+											PaperProps: {
+												style: {
+													maxHeight: 224,
+												},
+											},
+										}}
 									>
 										{filteredVehicles.length > 0 ? (
 											filteredVehicles.map((vehicle) => (

src/components/AddUserModal/addUserModal.tsx

@@ -12,6 +12,7 @@ import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import { useForm, Controller } from "react-hook-form";
 import { CustomIconButton, CustomTextField } from "./styled.css.tsx";
+import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";
 
 interface FormData {
 	name: string;
@@ -109,6 +110,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 								display: "flex",
 								flexDirection: "column",
 								flex: 1,
+								...autofillFix,
 							}}
 						>
 							<Typography variant="body2" fontWeight={500}>
@@ -134,6 +136,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 									<CustomTextField
 										{...field}
 										required
+										autoComplete="username"
 										placeholder="Enter User Name"
 										fullWidth
 										size="small"
@@ -149,6 +152,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 								display: "flex",
 								flexDirection: "column",
 								flex: 1,
+								...autofillFix,
 							}}
 						>
 							<Typography variant="body2" fontWeight={500}>
@@ -172,6 +176,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 										helperText={errors.email?.message}
 										type="email"
 										placeholder="Email"
+										autoComplete="new-email"
 										required
 										fullWidth
 										color={
@@ -190,6 +195,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 								display: "flex",
 								flexDirection: "column",
 								flex: 1,
+								...autofillFix,
 							}}
 						>
 							<Typography variant="body2" fontWeight={500}>
@@ -211,6 +217,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 										{...field}
 										required
 										placeholder="Enter Password"
+										autoComplete="new-password"
 										type={
 											showPassword ? "text" : "password"
 										}

src/components/EditStationModal/editSationModal.tsx

@@ -20,10 +20,7 @@ import {
 	fetchVehicleBrands,
 	vehicleList,
 } from "../../redux/slices/VehicleSlice";
-import {
+import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components
-	CustomIconButton,
-	CustomTextField,
-} from "../AddUserModal/styled.css"; // Assuming custom styled components
 
 interface FormData {
 	name: string;
@@ -81,11 +78,33 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 
 	useEffect(() => {
 		dispatch(fetchVehicleBrands());
-		dispatch(vehicleList()); // Fetch vehicles when the component mounts
+		dispatch(vehicleList());
 	}, [dispatch]);
 
 	useEffect(() => {
 		if (editRow) {
+			// Determine the brand based on the first vehicle's company
+			const firstVehicle = vehicles.find(
+				(vehicle) =>
+					editRow.allowedCarIds &&
+					editRow.allowedCarIds.includes(vehicle.name)
+			);
+
+			const brandId = firstVehicle ? firstVehicle.company : "";
+			setSelectedBrands(brandId);
+
+			// Populate selected vehicles
+			const vehicleNames = vehicles
+				.filter(
+					(vehicle) =>
+						editRow.allowedCarIds &&
+						editRow.allowedCarIds.includes(vehicle.name)
+				)
+				.map((vehicle) => vehicle.name);
+
+			setSelectedVehicles(vehicleNames);
+
+			// Set form values
 			setValue("name", editRow.name);
 			setValue("registeredAddress", editRow.registeredAddress);
 			setValue("totalSlots", editRow.totalSlots);
@@ -94,15 +113,13 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 			setSelectedVehicles(editRow.allowedCarIds || []);
 
 			// Set selectedBrands based on the vehicles associated with the station
-		const brands = editRow?.allowedCarIds
+			const brands = editRow?.allowedCarIds
-			? vehicles
+				? vehicles
-					.filter((vehicle) =>
+						.filter((vehicle) =>
-						editRow.allowedCarIds.includes(vehicle.id)
+							editRow.allowedCarIds.includes(vehicle.id)
-					)
+						)
-					.map((vehicle) => vehicle.company)
+						.map((vehicle) => vehicle.company)
-			: [];
+				: [];
-
-				
 
 			setSelectedBrands(brands);
 		} else {
@@ -112,13 +129,11 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 		}
 	}, [editRow, setValue, reset, vehicles]);
 
-
 	// Filter vehicles based on selected brands
 	const filteredVehicles = vehicles.filter((vehicle) =>
 		selectedBrands.includes(vehicle.company)
 	);
 
-
 	// Handle changes in vehicle brand selection
 	const handleBrandChange = (
 		event: React.ChangeEvent<{ value: unknown }>
@@ -133,37 +148,35 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 		setSelectedVehicles(filtered.map((v) => v.name)); // Automatically select vehicles for the selected brands
 	};
 
-
 	// Handle changes in vehicle selection
 	const handleCheckboxChange = (
 		event: React.ChangeEvent<{ value: unknown }>
 	) => {
 		const value = event.target.value as string[];
 		setSelectedVehicles(value);
-		setValue("allowedCarIds", value); // Update allowedCarIds in form state
+		setValue("allowedCarIds", value);
 	};
 
-const onSubmit = (data: FormData) => {
+	const onSubmit = (data: FormData) => {
-	const vehicleIds = vehicles
+		const vehicleIds = vehicles
-		.filter((vehicle) => selectedVehicles.includes(vehicle.name))
+			.filter((vehicle) => selectedVehicles.includes(vehicle.name))
-		.map((vehicle) => Number(vehicle.id));
+			.map((vehicle) => Number(vehicle.id));
 
-	handleUpdate(
+		handleUpdate(
-		editRow.id,
+			editRow.id,
-		data.name,
+			data.name,
-		data.registeredAddress,
+			data.registeredAddress,
-		data.totalSlots,
+			data.totalSlots,
-		vehicleIds
+			vehicleIds
-	);
+		);
-	handleClose();
+		handleClose();
-	reset();
+		reset();
-	setSelectedBrands([]); // Reset brands after submit
+		setSelectedBrands([]); // Reset brands after submit
-	setSelectedVehicles([]); // Reset selected vehicles
+		setSelectedVehicles([]); // Reset selected vehicles
-};
+	};
 
 	console.log("editRow:", editRow);
 
-
 	return (
 		<Modal
 			open={open}

src/components/Header/index.tsx

@@ -30,7 +30,7 @@ export default function Header() {
 				width: "100%",
 				height: "84px",
 				backgroundColor: "#1C1C1C",
-				padding: { xs: "20px 12px", sm: "20px 24px" }, 
+				padding: { xs: "20px 12px", sm: "20px 24px" },
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "space-between",
@@ -78,17 +78,21 @@ export default function Header() {
 					spacing={2}
 					alignItems="center"
 					sx={{
+						pointer: "cursor",
 						display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
 					}}
 				>
-					<NotificationsNoneIcon onClick={toggleNotifications} />
+					<NotificationsNoneIcon
+						sx={{ pointer: "cursor" }}
+						onClick={toggleNotifications}
+					/>
 					<Avatar
 						alt="User Avatar"
 						src="/avatar.png"
 						sx={{ width: 36, height: 36 }}
 					/>
 					<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
-						{user?.name || "No Admin"}
+						{user?.name || "No Adminsss"}
 					</Typography>
 
 					<OptionsMenu />

src/components/MainGrid/mainGrid.tsx

@@ -12,43 +12,37 @@ import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
 import { useEffect } from "react";
 
 export default function MainGrid() {
-  const dispatch = useDispatch<AppDispatch>();
+	const dispatch = useDispatch<AppDispatch>();
-  const {
+	const {
 		totalAdmins,
 		totalManagers,
 		totalUsers,
 		totalStations,
 		loading,
 		error,
-  } = useSelector((state: RootState) => state.dashboardReducer);
+	} = useSelector((state: RootState) => state.dashboardReducer);
 
-
+	const staticData = {
- 
-   const staticData = {
 		totalAdmins: 86,
 		totalManagers: 12,
 		totalUsers: 24,
 		totalStations: 8,
-   };
+	};
 
-    useEffect(() => {
+	useEffect(() => {
-	
+		dispatch(fetchDashboardData());
-				dispatch(fetchDashboardData());
-			
 	}, [dispatch]);
 
-   const data =
+	const data = { totalAdmins, totalManagers, totalUsers, totalStations };
-		 { totalAdmins, totalManagers, totalUsers, totalStations }
-		
 
-  const statCards = [
+	const statCards = [
 		{ title: "Total Admins", value: data.totalAdmins },
 		{ title: "Total Managers", value: data.totalManagers },
 		{ title: "Total Users", value: data.totalUsers },
 		{ title: "Total Stations", value: data.totalStations },
-  ];
+	];
 
-  return (
+	return (
 		<Box
 			sx={{
 				width: "100%",
@@ -86,5 +80,5 @@ export default function MainGrid() {
 				</Grid>
 			</Grid>
 		</Box>
-  );
+	);
 }

src/components/MenuButton/index.tsx

@@ -17,7 +17,7 @@ export default function MenuButton({
 			invisible={!showBadge}
 			sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }}
 		>
-			<IconButton size="small" {...props} />
+			<IconButton  sx={{ marginRight: "60px" }} size="small" {...props} />
 		</Badge>
 	);
 }

src/components/MenuContent/index.tsx

@@ -144,7 +144,9 @@ export default function MenuContent({ hidden }: PropType) {
 										fontSize: "16px",
 										letterSpacing: "0%",
 										lineHeight: "100%",
-										color: "#D9D8D8",
+										whiteSpace: "pre",
+										color: "#FAFAFA",
+										marginTop: "5px",
 									},
 								}}
 								primary={item.text}

src/pages/Auth/Login/index.tsx

@@ -22,6 +22,7 @@ import { Visibility, VisibilityOff } from "@mui/icons-material";
 import { Card, SignInContainer } from "./styled.css.tsx";
 import { CustomIconButton } from "../../../components/AddUserModal/styled.css.tsx";
 import { AppDispatch } from "../../../redux/store/store.ts";
+import { autofillFix } from "../../../shared-theme/customizations/autoFill.tsx";
 
 interface ILoginForm {
 	email: string;
@@ -50,14 +51,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 	};
 
 	const togglePasswordVisibility = (e: React.MouseEvent) => {
-		e.preventDefault(); 
+		e.preventDefault();
 		setShowPassword((prev) => !prev);
 	};
 
 	const onSubmit: SubmitHandler<ILoginForm> = async (data: ILoginForm) => {
-		const isValid = await trigger(); 
+		const isValid = await trigger();
 		if (!isValid) {
-			return; 
+			return;
 		}
 		try {
 			const response = await dispatch(loginUser(data)).unwrap();
@@ -73,7 +74,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 		<AppTheme {...props}>
 			<SignInContainer direction="column" justifyContent="space-between">
 				<Grid container sx={{ minHeight: "100vh" }}>
-					
 					<Grid
 						item
 						xs={0}
@@ -82,11 +82,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						sx={{
 							background: `url('/Login.svg') center/cover no-repeat`,
 							backgroundSize: "cover",
-							display: { xs: "none", md: "block" }, 
+							display: { xs: "none", md: "block" },
-							position: "relative", 
+							position: "relative",
 						}}
 					>
-						
 						<Box
 							sx={{
 								position: "absolute",
@@ -122,7 +121,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 							position: "relative",
 						}}
 					>
-						
 						<Box
 							sx={{
 								display: { xs: "flex", md: "none" },
@@ -164,7 +162,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						<Card
 							variant="outlined"
 							sx={{
-								width: { xs: "100%", sm: "90%", md: "90%", lg: "408px" },
+								width: {
+									xs: "100%",
+									sm: "90%",
+									md: "90%",
+									lg: "408px",
+								},
 								maxWidth: "408px",
 								minHeight: { xs: "auto", md: "428px" },
 								padding: { xs: "16px", sm: "20px", md: "24px" },
@@ -201,7 +204,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									variant="subtitle2"
 									sx={{
 										textAlign: "center",
-										color: "white",
+										color: "#D9D8D8",
 										fontSize: { xs: "14px", md: "16px" },
 										mb: 1,
 									}}
@@ -214,12 +217,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									<FormLabel
 										htmlFor="email"
 										sx={{
+											borderRadius: "8px",
 											fontSize: {
 												xs: "0.875rem",
 												sm: "1rem",
 											},
 											color: "white",
 											mb: 0.5,
+											...autofillFix,
 										}}
 									>
 										Email
@@ -258,7 +263,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												}
 												InputProps={{
 													sx: {
-														height: { xs: "45px", md: "50px" },
+														height: {
+															xs: "45px",
+															md: "50px",
+														},
 														alignItems: "center",
 														backgroundColor:
 															"#1E1F1F",
@@ -269,7 +277,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 														{
 															backgroundColor:
 																"#1E1F1F",
-															borderRadius: "4px",
+															borderRadius: "8px",
 															"& fieldset": {
 																borderColor:
 																	"#4b5255",
@@ -302,6 +310,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 															fontFamily:
 																"Gilroy, sans-serif",
 														},
+													...autofillFix,
 												}}
 											/>
 										)}
@@ -313,6 +322,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									<FormLabel
 										htmlFor="password"
 										sx={{
+											borderRadius: "8px",
 											fontSize: {
 												xs: "0.875rem",
 												sm: "1rem",
@@ -350,13 +360,13 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												}
 												name="password"
 												placeholder="Password"
+												autoComplete="current-password"
 												type={
 													showPassword
 														? "text"
 														: "password"
 												}
 												id="password"
-												autoComplete="current-password"
 												required
 												fullWidth
 												variant="outlined"
@@ -367,15 +377,20 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												}
 												InputProps={{
 													sx: {
-														height: { xs: "45px", md: "50px" },
+														height: {
+															xs: "45px",
+															md: "50px",
+														},
+														...autofillFix,
 													},
+
 													endAdornment: (
 														<InputAdornment position="end">
 															<CustomIconButton
 																aria-label="toggle password visibility"
 																onClick={
 																	togglePasswordVisibility
-																}
+																} // Only the button triggers visibility toggle
 																edge="end"
 															>
 																{showPassword ? (
@@ -392,7 +407,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 														{
 															backgroundColor:
 																"#1E1F1F",
-															borderRadius: "4px",
+															borderRadius: "8px",
 															"& fieldset": {
 																borderColor:
 																	"#4b5255",
@@ -468,11 +483,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										label={
 											<Typography
 												sx={{
-													fontSize: { 
+													fontSize: {
-														xs: "0.75rem", 
+														xs: "0.75rem",
 														sm: "0.875rem",
-														md: "1rem" 
+														md: "1rem",
-													}
+													},
 												}}
 											>
 												Remember me
@@ -489,21 +504,21 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 											alignSelf: "center",
 											color: "#01579b",
 											textDecoration: "none",
-											fontSize: { 
+											fontSize: {
-												xs: "0.75rem", 
+												xs: "0.75rem",
 												sm: "0.875rem",
-												md: "1rem" 
+												md: "1rem",
 											},
 										}}
 									>
 										Forgot password?
 									</Link>
 								</Box>
-								<ForgotPassword
+								{/* <ForgotPassword
 									open={open}
 									handleClose={handleClose}
-								/>
+								/> */}
-								
+
 								{/* Login Button */}
 								<Button
 									type="submit"
@@ -518,7 +533,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										},
 										padding: { xs: "8px 0", md: "10px 0" },
 										mt: { xs: 2, md: 3 },
-										fontSize: { xs: "0.875rem", md: "1rem" },
+										fontSize: {
+											xs: "0.875rem",
+											md: "1rem",
+										},
 									}}
 								>
 									Login
@@ -530,4 +548,4 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 			</SignInContainer>
 		</AppTheme>
 	);
-} 
+}

src/redux/slices/bookSlice.ts

@@ -64,6 +64,7 @@ export const getCarPorts = createAsyncThunk<
 		const response = await http.get("/get-vehicle-port-dropdown");
 
 		return response.data.data; // Adjust based on actual API response
+		
 	} catch (error: any) {
 		return rejectWithValue(
 			error?.response?.data?.message || "An error occurred"
@@ -214,4 +215,4 @@ const bookSlice = createSlice({
 	},
 });
 
-export default bookSlice.reducer;
+export default bookSlice.reducer;

src/redux/slices/stationSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
-import axios from "axios";
+// import axios from "axios";
 import http from "../../lib/https";
 import { toast } from "sonner";
 
@@ -384,4 +384,4 @@ const stationSlice = createSlice({
 	},
 });
 
-export default stationSlice.reducer;
+export default stationSlice.reducer;

src/redux/slices/userSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
-import axios from "axios";
+// import axios from "axios";
 import http from "../../lib/https";
 import { toast } from "sonner";
 

src/shared-theme/customizations/autoFill.tsx

@@ -0,0 +1,27 @@
+export const autofillFix = {
+    "& input:-webkit-autofill": {
+      WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
+      WebkitTextFillColor: "white !important",
+      transition: "background-color 5000s ease-in-out 0s",
+    },
+    "& input:-webkit-autofill:hover": {
+      WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
+    },
+    "& input:-webkit-autofill:focus": {
+      WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
+    },
+    "& input:-webkit-autofill:active": {
+      WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
+    },
+    "& input:-moz-autofill": {
+      boxShadow: "0 0 0 1000px transparent inset !important",
+      MozTextFillColor: "white !important",
+      transition: "background-color 5000s ease-in-out 0s",
+    },
+    "& input:autofill": {
+      boxShadow: "0 0 0 1000px transparent inset !important",
+      textFillColor: "white !important",
+      transition: "background-color 5000s ease-in-out 0s",
+    },
+  };
+  

src/shared-theme/customizations/inputs.js

@@ -8,6 +8,7 @@ import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutline
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
 import { gray, brand } from '../themePrimitives';
+import {autofillFix} from './autoFill';
 
 /* eslint-disable import/prefer-default-export */
 export const inputsCustomizations = {
@@ -379,6 +380,7 @@ export const inputsCustomizations = {
     styleOverrides: {
       input: {
         padding: 0,
+        ...autofillFix,
       },
       root: ({ theme }) => ({
         padding: '8px 12px',

src/shared-theme/customizations/inputs.tsx

@@ -8,6 +8,7 @@ import CheckBoxOutlineBlankRoundedIcon from "@mui/icons-material/CheckBoxOutline
 import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
 import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
 import { gray, brand } from "../themePrimitives";
+import { autofillFix } from "./autoFill";
 
 /* eslint-disable import/prefer-default-export */
 export const inputsCustomizations: Components<Theme> = {
@@ -393,6 +394,7 @@ export const inputsCustomizations: Components<Theme> = {
 		styleOverrides: {
 			input: {
 				padding: 0,
+				...autofillFix,
 			},
 			root: ({ theme }) => ({
 				padding: "8px 12px",