src/components/AddSlotModal/addSlotModal.tsx

@@ -43,8 +43,15 @@ const AddSlotModal = ({ open, handleClose }: any) => {
 	}, [startHour]);
 
 	const onSubmit = (data: any) => {
-		const { date, startingDate, endingDate, startHour, endHour, duration } =
+		const {
-			data;
+			date,
+			startingDate,
+			endingDate,
+			startHour,
+			endHour,
+			duration,
+			stationId,
+		} = data;
 
 		const payload = isDateRange
 			? {
@@ -55,6 +62,7 @@ const AddSlotModal = ({ open, handleClose }: any) => {
 					duration: parseInt(duration, 10),
 					durationUnit, // Include the duration unit (minutes or hours)
 					isAvailable,
+					stationId,
 			  }
 			: {
 					date,
@@ -63,6 +71,7 @@ const AddSlotModal = ({ open, handleClose }: any) => {
 					duration: parseInt(duration, 10),
 					durationUnit, // Include the duration unit (minutes or hours)
 					isAvailable,
+					stationId,
 			  };
 
 		dispatch(createSlot(payload));

src/components/AddUserModal/styled.css.tsx

@@ -5,7 +5,7 @@ export const CustomIconButton = styled(IconButton)({
 	"&:hover": {
 		backgroundColor: "transparent",
 	},
-	"*:where([data-mui-color-scheme='dark']) &": {
+	"*:where([data-mui-color-scheme='light']) &": {
 		backgroundColor: "transparent",
 		border: "none",
 	},

src/components/CustomTable/customTable.tsx

@@ -22,6 +22,9 @@ import {
 	TextField,
 	Typography,
 } from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
 import DeleteModal from "../Modals/DeleteModal/index.tsx";
 import { AppDispatch, RootState } from "../../redux/store/store.ts";
@@ -51,38 +54,33 @@ import ManagerStationDetails from "../../pages/ManagerStationDetails/index.tsx";
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	[`&.${tableCellClasses.body}`]: {
 		fontSize: "16px",
-		borderBottom: "1px solid #454545",
+		borderBottom: "1px solid rgba(87, 85, 85, 0.53)",
-	
+		color: "#000000",
+		backgroundColor: "#D0E1E9",
 	},
 	[`&.${tableCellClasses.head}`]: {
-		backgroundColor: "#454545", 
+		backgroundColor: "#000000",
-		color: theme.palette.common.white, 
+		color: "#D0E1E9",
 		borderBottom: "none",
-		borderRight: "1px solid rgba(141, 135, 135, 0.51)",
+		//borderRight: "1px solid rgba(141, 135, 135, 0.51)",
-		// transition: "border-color 0.3s ease",
 		position: "sticky",
 		top: 0,
 		zIndex: 10,
-		// "&:hover": {
-		// 	borderRight: "3px solid rgba(112, 109, 109, 0.8)", 
-		// },p
 	},
 }));
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
-	"&:nth-of-type(odd)": {
+	backgroundColor: "#D0E1E9",
-		backgroundColor: theme.palette.action.hover,
-	},
-	"&:nth-of-type(even)": {
-		backgroundColor: theme.palette.action.hover,
-	},
 	"& td, th": {
-		borderColor: "#454545", // Applying border color to both td and th
+		borderColor: "#454545",
-		borderWidth: "1px", // Set border width to ensure it appears
+		borderWidth: "1px",
 		borderBottom: "1px solid #454545",
+		color: "#000000", 
+		backgroundColor: "#D0E1E9",
 	},
 }));
 
+
 export interface Column {
 	id: string;
 	label: string;
@@ -103,9 +101,11 @@ interface CustomTableProps {
 	viewModal: boolean;
 	setViewModal: Function;
 	deleteModal: boolean;
-	handleStatusToggle?: (id: string, currentStatus: number) => void;
+	handleStatusToggle?: (id: string, currentStatus: number | boolean) => void;
 	tableType: string; // Adding tableType prop to change header text dynamically
 	handleClickOpen?: () => void;
+	statusField?: string; // Optional field to indicate the status column
+	statusValue?: boolean; // Optional normalized status value
 	
 }
 
@@ -133,6 +133,69 @@ const CustomTable: React.FC<CustomTableProps> = ({
 	const [sortOrder, setSortOrder] = React.useState<"asc" | "desc" | null>(
 		null
 	);
+	// ... [imports remain the same, no changes needed] ...
+
+	const getTitleByType = (type: string) => {
+		const titles: { [key: string]: string } = {
+			admin: "Admins",
+			role: "Roles",
+			user: "Users",
+			manager: "Managers",
+			"all-managers": "Managers",
+			vehicle: "Vehicles",
+			station: "Charging Station",
+			"external-station": "Charging Station",
+			booking: "Booking",
+			slots: "Slots",
+			"all-available-slots": "Available Slots",
+			"manager-station": "Station Details",
+		};
+		return titles[type] || "List";
+	};
+
+	const getAddButtonLabel = (type: string) => {
+		const labels: { [key: string]: string } = {
+			admin: "Admin",
+			role: "Role",
+			user: "User",
+			manager: "Manager",
+			vehicle: "Vehicle",
+			station: "Charging Station",
+			booking: "Booking",
+			slots: "Slot",
+			"external-station": "Location",
+			"manager-station": "Station Details",
+		};
+		return labels[type] || "Item";
+	};
+
+	const getEmptyMessage = (type: string) => {
+		const messages: { [key: string]: string } = {
+			admin: "No admins found",
+			role: "No roles found",
+			user: "No users found",
+			manager: "No managers found",
+			vehicle: "No vehicles found",
+			station: "No charging stations found",
+			"external-station": "No charging stations found",
+			booking: "No bookings found",
+			slots: "No slots found",
+			"all-available-slots": "No available slots found",
+		};
+		return messages[type] || "No data available";
+	};
+
+	const shouldShowAddButton = (userType: string, tableType: string) => {
+		if (
+			(userType === "user" && tableType === "all-available-slots") ||
+			(userType === "superadmin" && tableType === "all-managers") ||
+			(userType === "superadmin" && tableType === "user")
+		) {
+			return false;
+		}
+		return true;
+	};
+
 	const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
 		setAnchorEl(event.currentTarget);
 		setSelectedRow(row);
@@ -224,21 +287,22 @@ const CustomTable: React.FC<CustomTableProps> = ({
 
 		setViewModal(false);
 	};
-
+const handleToggleStatus = () => {
-	const handleToggleStatus = () => {
 	if (selectedRow) {
-			// Toggle the opposite of current status
+		handleStatusToggle?.(selectedRow.id, !selectedRow.statusValue); // Toggle the boolean statusValue
-			const newStatus = selectedRow.statusValue === 1 ? 0 : 1;
-			handleStatusToggle?.(selectedRow.id, newStatus);
 	}
 	handleClose();
-	};
+};
 
 	const handleSort = () => {
 		setSortOrder((prevSortOrder) =>
 			prevSortOrder === "asc" ? "desc" : "asc"
 		);
 	};
+	const handleEditButton = (row: Row) => {
+		setModalOpen(true);
+		setRowData(row);
+	};
 
 	const sortedRows = React.useMemo(() => {
 		let sorted = [...rows];
@@ -257,15 +321,12 @@ const CustomTable: React.FC<CustomTableProps> = ({
 		return (
 			(row.name && row.name.toLowerCase().includes(lowerCaseQuery)) ||
 			(row.registeredAddress &&
-					row.registeredAddress
+				row.registeredAddress.toLowerCase().includes(lowerCaseQuery)) ||
-						.toLowerCase()
-						.includes(lowerCaseQuery)) ||
 			(row.stationName &&
 				row.stationName.toLowerCase().includes(lowerCaseQuery))
 		);
 	});
 
-
 	const indexOfLastRow = currentPage * usersPerPage;
 	const indexOfFirstRow = indexOfLastRow - usersPerPage;
 	const currentRows = filteredRows.slice(indexOfFirstRow, indexOfLastRow);
@@ -278,194 +339,94 @@ const CustomTable: React.FC<CustomTableProps> = ({
 	};
 
 	return (
+		<Box sx={{ width: "100%", padding: "24px", borderRadius: "12px" }}>
 			<Box
 				sx={{
-				width: { xs: "100%", sm: "100%" },
+					display: "flex",
-				margin: "0 auto",
+					flexDirection: { xs: "column", md: "row" },
-				padding: "24px",
+					justifyContent: "space-between",
-				backgroundColor: "#1C1C1C",
+					alignItems: { xs: "flex-start", md: "center" },
-				borderRadius: "12px",
+					flexWrap: "wrap",
-				overflowX: "auto",
+					mb: 3,
-				boxSizing: "border-box",
+					gap: 2,
-				// Ensure CustomTable doesn't affect layout above it
-				position: "relative",
-				zIndex: 1,
 				}}
 			>
 				<Typography
 					sx={{
-					color: "#FFFFFF",
+						color: "#000000",
 						fontWeight: 600,
 						fontSize: "30px",
 					}}
 				>
-				{/* Dynamic title based on the page type */}
+					{getTitleByType(tableType)}
-				{(() => {
-					switch (tableType) {
-						case "admin":
-							return "Admins";
-						case "role":
-							return "Roles";
-						case "user":
-							return "Users";
-						case "manager":
-							return "Managers";
-						case "all-managers":
-							return "Managers";
-						case "vehicle":
-							return "Vehicles";
-						case "station":
-							return "Charging Station";
-						case "external-station":
-							return "Charging Station";
-						case "booking":
-							return "Booking";
-						case "slots":
-							return "Slots";
-						case "all-available-slots":
-							return "Available Slots";
-						case "manager-station":
-							return "Station Details"
-						default:
-							return "List";
-					}
-				})()}
 				</Typography>
 
-			{/* Search & Buttons Section */}
+				{/* Right Side: Search + Add */}
 				<Box
 					sx={{
 						display: "flex",
-					flexDirection: { xs: "column", sm: "column", md: "row" },
+						alignItems: "center",
-					gap: { xs: "16px", sm: "16px", md: "0" },
+						gap: 2,
-					marginTop: "16px",
+						flexWrap: "wrap",
-					alignItems: { xs: "stretch", sm: "stretch", md: "center" },
+						justifyContent: "flex-end",
-					width: "100%",
-					...autofillFix,
 					}}
 				>
 					<TextField
 						variant="outlined"
 						placeholder="Search"
 						sx={{
-						width: { xs: "100%", sm: "100%", md: "380px" },
+							width: { xs: "100%", sm: "300px", md: "300px" },
-						borderRadius: "12px",
+							input: { color: "#454545" },
-						input: { color: "#FFFFFF" },
-						backgroundColor: "#272727",
 							"& .MuiOutlinedInput-root": {
 								borderRadius: "12px",
-							width: { xs: "100%", sm: "100%", md: "380px" },
 								height: "44px",
-							borderWidth: "1px",
+								"& fieldset": { borderColor: "#454545" },
-							padding: "14px 12px 14px 12px",
+								"&:hover fieldset": { borderColor: "#454545" },
-
-							"& fieldset": { borderColor: "#FFFFFF" },
-							"&:hover fieldset": { borderColor: "#FFFFFF" },
 								"&.Mui-focused fieldset": {
 									borderColor: "#52ACDF",
 								},
 							},
 							"& .MuiInputBase-input::placeholder": {
-							color: "#D9D8D8",
+								color: "#454545",
 								opacity: 1,
 							},
 						}}
-					slotProps={{
+						InputProps={{
-						input: {
 							startAdornment: (
 								<InputAdornment position="start">
-									<SearchIcon sx={{ color: "#52ACDF" }} />
+									<SearchIcon sx={{ color: "#454545" }} />
 								</InputAdornment>
 							),
-						},
 						}}
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
 					/>
 
-				<Box
+					{/* Conditionally show Add Button */}
-					sx={{
+					{shouldShowAddButton(user?.userType, tableType) && (
-						display: "flex",
-						justifyContent: "flex-end",
-						width: "100%",
-					}}
-				>
-					{!(
-						(user?.userType === "user" &&
-							tableType === "all-available-slots") ||
-						(user?.userType === "superadmin" &&
-							tableType === "all-managers") ||
-						(user?.userType === "superadmin" &&
-							tableType === "user")
-					) && (
 						<Button
 							sx={{
-								backgroundColor: "#52ACDF",
+								backgroundColor: "#000000",
 								color: "white",
-								minWidth: "115px", // Start small but allow it to grow
+								minWidth: "115px",
-								maxWidth: "250px", // Optional: limit it from being *too* wide
-								marginRight: "16px",
-								paddingX: "16px",
 								fontSize: "16px",
-								whiteSpace: "nowrap", // Prevents text from wrapping
+								paddingX: 2,
-								"&:hover": { backgroundColor: "#439BC1" },
+								"&:hover": { backgroundColor: "#000000" },
 							}}
 							onClick={handleClickOpen}
-							//startIcon={<AddCircleIcon />} // <-- this adds the icon!
 						>
-							Add{" "}
+							Add {getAddButtonLabel(tableType)}
-							{(() => {
-								switch (tableType) {
-									case "admin":
-										return "Admin";
-									case "role":
-										return "Role";
-									case "user":
-										return "User";
-									case "manager":
-										return "Manager";
-									case "vehicle":
-										return "Vehicle";
-									case "station":
-										return "Charging Station";
-									case "booking":
-										return "Booking";
-									case "slots":
-										return "Slot";
-									case "external-station":
-										return "Location";
-									case "manager-station":
-										return "Station Details"
-									default:
-										return "Item";
-								}
-							})()}
 						</Button>
 					)}
 				</Box>
-
-				{/* <IconButton
-					sx={{
-						width: "44px",
-						height: "44px",
-						borderRadius: "8px",
-						backgroundColor: "#1C1C1C",
-						color: "#52ACDF",
-						"&:hover": { backgroundColor: "#333333" },
-						"*:where([data-mui-color-scheme='dark']) &": {
-							backgroundColor: "#1C1C1C",
-						},
-					}}
-				>
-					<TuneIcon />
-				</IconButton> */}
 			</Box>
+
 			{/* Table Section */}
 			<TableContainer
 				component={Paper}
 				sx={{
 					marginTop: "24px",
-					backgroundColor: "#1C1C1C",
+
 					borderRadius: "12px",
 					overflow: "auto",
 					maxWidth: "100%",
@@ -480,144 +441,157 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						borderRadius: "4px",
 					},
 				}}
-
 			>
 				<Table sx={{ minWidth: "750px", tableLayout: "auto" }}>
-					<TableHead
+					<TableHead>
-						sx={{
-							backgroundColor: "#272727",
-							borderBottom: "none",
-							".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ":
-								{
-									backgroundColor: "#272727",
-									borderBottom: "1px solid #454545",
-								},
-						}}
-						
-					>
 						{" "}
 						<TableRow>
 							{columns.map((column) => (
-								<StyledTableCell
+								<StyledTableCell key={column.id}>
-									key={column.id}
-									sx={{
-										color: "#FFFFFF",
-										fontWeight: "600",
-										...(column.id === "action" && {
-											position: "sticky",
-											right: 0,
-											zIndex: 2,
-											backgroundColor: "#272727",
-											boxShadow:
-												"-5px 0 5px -2px rgba(0,0,0,0.15)",
-											borderBottom: "1px solid #454545",
-										}),
-										fontSize: "16px",
-									}}
-								>
 									{column.label}
-									{column.id === "name" && (
-										<CustomIconButton
-											onClick={handleSort}
-											sx={{
-												marginLeft: "8px",
-												opacity: 0.4, // Initial transparency
-												transition:
-															"0px 0px 0px rgba(255, 255, 255, 0)", 					
-												"&:hover": {
-													opacity: 1, 
-												},
-												"&:active": {
-													opacity: 1,
-												},
-												
-											}}
-										>
-											{sortOrder === "asc" ? (
-												<ArrowUpwardIcon
-													sx={{ color: "#FFFFFF" }}
-												/>
-											) : (
-												<ArrowDownwardIcon
-													sx={{ color: "#FFFFFF" }}
-												/>
-											)}
-										</CustomIconButton>
-									)}
 								</StyledTableCell>
 							))}
 						</TableRow>
 					</TableHead>
-					<TableBody
+					<TableBody>
-						sx={{
-							".MuiTableCell-root": {
-								backgroundColor: "#1C1C1C",
-							},
-						}}
-					>
-						{/* This is where the modification starts */}
 						{currentRows.length === 0 ? (
 							<StyledTableRow>
 								<StyledTableCell
 									colSpan={columns.length}
 									sx={{
-										color: "#D9D8D8",
-										backgroundColor: "#272727",
 										textAlign: "center",
 										padding: "32px 0",
 									}}
 								>
-									{(() => {
+									{getEmptyMessage(tableType)}
-										switch (tableType) {
-											case "admin":
-												return "No admins found";
-											case "role":
-												return "No roles found";
-											case "user":
-												return "No users found";
-											case "manager":
-												return "No managers found";
-											case "vehicle":
-												return "No vehicles found";
-											case "station":
-												return "No charging stations found";
-											case "external-station":
-												return "No charging stations found";
-											case "booking":
-												return "No bookings found";
-											case "slots":
-												return "No slots found";
-											case "all-available-slots":
-												return "No available slots found";
-											default:
-												return "No data available";
-										}
-									})()}
 								</StyledTableCell>
 							</StyledTableRow>
 						) : (
 							currentRows.map((row, rowIndex) => (
 								<StyledTableRow key={rowIndex}>
 									{columns.map((column) => (
+										// In CustomTable.tsx, update the status column rendering logic inside the TableBody
 										<StyledTableCell
 											key={column.id}
 											sx={{
-												color: "#D9D8D8",
+												color: "#000000",
-												backgroundColor: "#272727",
+												backgroundColor: "#D0E1E9",
 												...(column.id === "action" && {
 													position: "sticky",
 													right: 0,
 													zIndex: 2,
-													backgroundColor: "#272727",
 													boxShadow:
 														"-5px 0 5px -2px rgba(0,0,0,0.15)",
 												}),
 											}}
 										>
-											{isImage(row[column.id]) ? (
+											{column.id === "action" ? (
+												<>
+													<CustomIconButton
+														onClick={() => {
+															setSelectedRow(row);
+															setViewModal(true);
+														}}
+													>
+														<VisibilityIcon
+															sx={{
+																color: "#454545",
+																"&:hover": {
+																	color: "#6B7280",
+																},
+															}}
+														/>
+													</CustomIconButton>
+
+													<CustomIconButton
+														onClick={() =>
+															handleEditButton(
+																row
+															)
+														}
+													>
+														<EditIcon
+															sx={{
+																color: "#454545",
+																"&:hover": {
+																	color: "#6B7280",
+																},
+															}}
+														/>
+													</CustomIconButton>
+
+													<CustomIconButton
+														onClick={() => {
+															setDeleteModal(
+																true
+															);
+															setSelectedRow(row);
+														}}
+													>
+														<DeleteIcon
+															sx={{
+																color: "#454545",
+																"&:hover": {
+																	color: "#6B7280",
+																},
+															}}
+														/>
+													</CustomIconButton>
+												</>
+											) : row.statusField &&
+											  column.id === row.statusField ? ( // Check if statusField matches the column
+												<Button
+													variant="outlined"
+													onClick={(e) => {
+														e.stopPropagation();
+														setSelectedRow(row);
+														handleStatusToggle?.(
+															row.id,
+															!row.statusValue
+														); // Toggle the opposite of current statusValue
+													}}
+													color="primary"
+													sx={{
+														justifyContent:
+															"flex-start",
+														py: 0.5,
+														px: 1.5,
+														fontSize: "0.75rem",
+														fontWeight: "600",
+														borderRadius: "4px",
+														color: "#000000",
+														border: "1px solid #000000",
+														backgroundColor:
+															"transparent",
+														"&:hover": {
+															borderColor:
+																"#000000",
+															backgroundColor:
+																"transparent",
+														},
+														"&::before": {
+															content: '""',
+															display:
+																"inline-block",
+															width: "8px",
+															height: "8px",
+															borderRadius: "50%",
+															marginRight: "8px",
+															backgroundColor:
+																row.statusValue
+																	? "#10B981"
+																	: "#EF4444", // Green for true, red for false
+														},
+													}}
+												>
+													{row.statusValue
+														? "Available"
+														: "Not Available"}
+												</Button>
+											) : isImage(row[column.id]) ? (
 												<img
 													src={row[column.id]}
-													alt="Row "
+													alt="Row"
 													style={{
 														width: "50px",
 														height: "50px",
@@ -625,28 +599,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
 														objectFit: "cover",
 													}}
 												/>
-											) : column.id !== "action" ? (
-												row[column.id]
 											) : (
-												<CustomIconButton
+												row[column.id]
-													onClick={(e) => {
-														handleClick(e, row);
-														setRowData(row);
-													}}
-													sx={{
-														padding: 0,
-														minWidth: 0,
-														width: "auto",
-														height: "auto",
-														color: "#FFFFFF",
-													}}
-												>
-													<MoreHorizRoundedIcon
-														sx={{
-															fontSize: "24px",
-														}}
-													/>
-												</CustomIconButton>
 											)}
 										</StyledTableCell>
 									))}
@@ -657,99 +611,26 @@ const CustomTable: React.FC<CustomTableProps> = ({
 				</Table>
 			</TableContainer>
 			{/* Pagination */}
-			<Box
+			<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}>
-				sx={{
-					display: "flex",
-					justifyContent: "flex-end",
-					alignItems: "center",
-					marginTop: "16px",
-				}}
-			>
-				{filteredRows.length > 0 && (
-					<>
-						<Typography
-							sx={{
-								color: "white",
-								fontSize: "16px",
-								fontWeight: 500,
-								marginRight: "8px", // optional spacing
-							}}
-						>
-							Page Number :
-						</Typography>
 				<Pagination
-							count={Math.ceil(
+					count={Math.ceil(filteredRows.length / usersPerPage)}
-								filteredRows.length / usersPerPage
-							)}
 					page={currentPage}
 					onChange={handlePageChange}
-							siblingCount={0}
-							boundaryCount={0}
 					sx={{
 						"& .MuiPaginationItem-root": {
-									color: "white",
+							color: "#000000",
-									borderRadius: "0px",
 						},
-								"& .MuiPaginationItem-page.Mui-selected": {
+						"& .Mui-selected": {
-									backgroundColor: "transparent",
+							backgroundColor: "#000000",
-									fontWeight: "bold",
-									fontSize: "16px",
 							color: "#FFFFFF",
 						},
 					}}
 				/>
-					</>
-				)}
 			</Box>
 
-			{/* Menu Actions */}
-			{open && (
-				<Menu
-					anchorEl={anchorEl}
-					id="menu"
-					open={open}
-					onClose={handleClose}
-					transformOrigin={{ horizontal: "right", vertical: "top" }}
-					anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
-					sx={{
-						[`& .${paperClasses.root}`]: {
-							padding: 0,
-						},
-						"& .MuiList-root": {
-							background: "#272727",
-						},
-					}}
-				>
-					<div
-						style={{
-							display: "flex",
-							flexDirection: "column",
-							width: "80px",
-						}}
-					>
-						<Button
-							variant="text"
-							onClick={(e) => {
-								e.stopPropagation();
-								setViewModal(true);
-							}}
-							color="primary"
-							sx={{
-								justifyContent: "center",
-								py: 1,
-								fontWeight: "bold",
-								color: "#52ACDF",
-								fontSize: "16px",
-							}}
-						>
-							View
-						</Button>
-
 			{viewModal && tableType === "admin" && (
 				<ViewModal
-								handleView={() =>
+					handleView={() => handleViewButton(selectedRow?.id)}
-									handleViewButton(selectedRow?.id)
-								}
 					open={viewModal}
 					setViewModal={setViewModal}
 					id={selectedRow?.id}
@@ -757,9 +638,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 			)}
 			{viewModal && tableType === "manager" && (
 				<ManagerViewModal
-								handleView={() =>
+					handleView={() => handleViewButton(selectedRow?.id)}
-									handleViewButton(selectedRow?.id)
-								}
 					open={viewModal}
 					setViewModal={setViewModal}
 					id={selectedRow?.id}
@@ -768,9 +647,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 
 			{viewModal && tableType === "vehicle" && (
 				<VehicleViewModal
-								handleView={() =>
+					handleView={() => handleViewButton(selectedRow?.id)}
-									handleViewButton(selectedRow?.id)
-								}
 					open={viewModal}
 					setViewModal={setViewModal}
 					id={selectedRow?.id}
@@ -778,9 +655,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 			)}
 			{viewModal && tableType === "station" && (
 				<StationViewModal
-								handleView={() =>
+					handleView={() => handleViewButton(selectedRow?.id)}
-									handleViewButton(selectedRow?.id)
-								}
 					open={viewModal}
 					setViewModal={setViewModal}
 					id={selectedRow?.id}
@@ -788,39 +663,13 @@ const CustomTable: React.FC<CustomTableProps> = ({
 			)}
 			{viewModal && tableType === "user" && (
 				<UserViewModal
-								handleView={() =>
+					handleView={() => handleViewButton(selectedRow?.id)}
-									handleViewButton(selectedRow?.id)
-								}
 					open={viewModal}
 					setViewModal={setViewModal}
 					id={selectedRow?.id}
 				/>
 			)}
 
-						{/* Edit Button */}
-						<Button
-							variant="text"
-							onClick={(e) => {
-								e.stopPropagation();
-								setModalOpen(true);
-								if (selectedRow) {
-									setModalOpen(true); // Only open if a row is selected
-									setRowData(selectedRow);
-								}
-								handleClose();
-							}}
-							color="primary"
-							sx={{
-								justifyContent: "center",
-								py: 1,
-								fontWeight: "bold",
-								textTransform: "capitalize",
-								fontSize: "16px",
-							}}
-						>
-							Edit
-						</Button>
-
 			{tableType === "role" && (
 				<Button
 					variant="text"
@@ -835,54 +684,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						fontWeight: "bold",
 					}}
 				>
-								{selectedRow?.statusValue === 1
+					{selectedRow?.statusValue === 1 ? "Deactivate" : "Activate"}
-									? "Deactivate"
-									: "Activate"}
 				</Button>
 			)}
 
-						{tableType === "station" && (
-							<Button
-								variant="text"
-								onClick={(e) => {
-									e.stopPropagation();
-									handleToggleStatus();
-								}}
-								color="secondary"
-								sx={{
-									justifyContent: "flex-start",
-									py: 0,
-									fontWeight: "bold",
-								}}
-							>
-								{selectedRow?.statusValue === 1
-									? "Not Available"
-									: "Available"}
-							</Button>
-						)}
-
-						{/* Delete Button */}
-						<Button
-							variant="text"
-							// color="error"
-							onClick={(e) => {
-								e.stopPropagation();
-								setDeleteModal(true);
-								handleClose();
-							}}
-							sx={{
-								justifyContent: "center",
-								py: 1,
-								fontWeight: "bold",
-								fontSize: "16px",
-								color: "red !important",
-							}}
-						>
-							Delete
-						</Button>
-					</div>
-				</Menu>
-			)}
 			{/* Modals */}
 			{deleteModal && (
 				<DeleteModal

src/components/EditSlotModal/editSlotModal.tsx

@@ -58,15 +58,11 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 	});
 
 	const [loading, setLoading] = useState(false);
-	const [isAvailable, setIsAvailable] = useState<boolean>(
-		editRow?.isAvailable || false
-	);
 
 	useEffect(() => {
 		if (editRow) {
 			setValue("startTime", editRow.startTime);
 			setValue("endTime", editRow.endTime);
-			setIsAvailable(editRow.isAvailable);
 		} else {
 			reset();
 		}
@@ -77,24 +73,21 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 			setLoading(true);
 
 			try {
-				const availabilityStatus = isAvailable ? true : false;
 
 				await dispatch(
 					updateSlot({
-						id: editRow.id, // Slot ID// date: data.date,
+						id: editRow.id, 
 						startTime: data.startTime,
 						endTime: data.endTime,
-						isAvailable: availabilityStatus,
 					})
 				).unwrap();
 				dispatch(fetchManagersSlots());
-				handleClose(); // Close modal on success
+				handleClose(); 
-				reset(); // Reset form fields after submit
+				reset(); 
 			} catch (error) {
 				console.error("Error updating slot:", error);
-				// Handle the error or show a toast message
 			} finally {
-				setLoading(false); // Stop loading state
+				setLoading(false); 
 			}
 		}
 	};
@@ -106,7 +99,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 				if (reason === "backdropClick") {
 					return;
 				}
-				handleClose(); // Close modal when clicking cross or cancel
+				handleClose();
 			}}
 			aria-labelledby="edit-slot-modal"
 		>
@@ -119,7 +112,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 					left: "50%",
 					transform: "translate(-50%, -50%)",
 					width: 400,
-					bgcolor: "background.paper",
+					bgcolor: "#000000",
 					boxShadow: 24,
 					p: 3,
 					borderRadius: 2,
@@ -133,10 +126,18 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
+					<Typography
+						variant="h6"
+						fontWeight={600}
+						fontSize={"16px"}
+						color="#D0E1E9"
+					>
 						Edit Slot
 					</Typography>
-					<CustomIconButton onClick={handleClose}>
+					<CustomIconButton
+						onClick={handleClose}
+						sx={{ "& .MuiSvgIcon-root": { color: "#FFFFFF" } }}
+					>
 						<CloseIcon />
 					</CustomIconButton>
 				</Box>
@@ -148,7 +149,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 				<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
 					{/* Start Time */}
 					<Box sx={{ flex: "1 1 48%" }}>
-						<Typography variant="body2" fontWeight={500} mb={0.5}>
+						<Typography
+							variant="body2"
+							fontWeight={500}
+							mb={0.5}
+							color="#D0E1E9"
+						>
 							Start Time
 						</Typography>
 						<Controller
@@ -170,7 +176,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 
 					{/* End Time */}
 					<Box sx={{ flex: "1 1 48%" }}>
-						<Typography variant="body2" fontWeight={500} mb={0.5}>
+						<Typography
+							variant="body2"
+							fontWeight={500}
+							mb={0.5}
+							color="#D0E1E9"
+						>
 							End Time
 						</Typography>
 						<Controller
@@ -189,30 +200,6 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 							)}
 						/>
 					</Box>
-
-					{/* Availability Toggle */}
-					<Box
-						display="flex"
-						alignItems="center"
-						justifyContent="space-between"
-						gap={2}
-						sx={{ flex: "1 1 100%" }}
-					>
-						<Button
-							onClick={() => {
-								const newAvailability = !isAvailable;
-								setIsAvailable(newAvailability); // Update local state
-								setValue("isAvailable", newAvailability); // Update form value for isAvailable
-							}}
-							variant={isAvailable ? "contained" : "outlined"}
-							color="primary"
-						>
-							{isAvailable ? "Available" : "Not Available"}
-						</Button>
-						{/* <Typography>
-							{isAvailable ? "Available" : "Not Available"}
-						</Typography> */}
-					</Box>
 				</Box>
 
 				{/* Submit Button */}
@@ -222,12 +209,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 					<Button
 						type="submit"
 						sx={{
-							backgroundColor: "#52ACDF",
+							backgroundColor: "#D0E1E9",
-							color: "white",
+							color: "#000000",
 							borderRadius: "8px",
-							fontSize:'16px',
+							fontSize: "16px",
 							width: "117px",
-							"&:hover": { backgroundColor: "#439BC1" },
+							"&:hover": { backgroundColor: "#D0E1E9" },
 						}}
 						disabled={loading} // Disable the button during loading state
 					>

src/components/LineChartCard/lineChartCard.tsx

@@ -12,7 +12,6 @@ import { AppDispatch, RootState } from "../../redux/store/store";
 import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
 import { Box } from "@mui/material";
 
-
 function AreaGradient({ color, id }: { color: string; id: string }) {
 	return (
 		<defs>
@@ -23,7 +22,7 @@ function AreaGradient({ color, id }: { color: string; id: string }) {
 		</defs>
 	);
 }
-  const chartColor = " #111111";
+const chartColor = " #111111";
 export default function LineChartCard() {
 	const theme = useTheme();
 	const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -66,7 +65,7 @@ export default function LineChartCard() {
 				width: "100%",
 				height: "auto",
 				minHeight: { xs: "360px", sm: "400px", md: "444px" },
-				borderRadius: "16px",
+				borderRadius: "30px",
 				border: "none",
 				background: "#D0E1E9",
 			}}
@@ -156,7 +155,7 @@ export default function LineChartCard() {
 				{/* Line Chart */}
 				<Box sx={{ mt: 7.5 }}>
 					<LineChart
-						colors={[theme.palette.primary.main]}
+						colors={[chartColor]}
 						xAxis={[
 							{
 								scaleType: "point",
@@ -170,7 +169,7 @@ export default function LineChartCard() {
 								curve: "linear",
 								area: true,
 								data: chartData.map((data) => data.value),
-								color: theme.palette.primary.main,
+								color: "#000000",
 							},
 						]}
 						height={getChartHeight()}

src/components/ResourcePieChart/resourcePieChart.tsx

@@ -11,19 +11,18 @@ import { useDispatch, useSelector } from "react-redux";
 import { useEffect } from "react";
 import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
 
-const colorPalette = [
+// const colorPalette = [
-	"hsla(202, 69%, 60%, 1)",
+// 	"hsla(202, 69%, 60%, 1)",
-	"hsl(204, 48.60%, 72.50%)",
+// 	"hsl(204, 48.60%, 72.50%)",
-	"hsl(214, 56.40%, 30.60%)",
+// 	"hsl(214, 56.40%, 30.60%)",
-	"hsl(222, 6.80%, 50.80%)",
+// 	"hsl(222, 6.80%, 50.80%)",
-];
-
-// const data = [
-//   { title: "Total Resources", value: 50, color: colorPalette[0] },
-//   { title: "Total Stations", value: 20, color: colorPalette[1] },
-//   { title: "Station Manager", value: 15, color: colorPalette[2] },
-//   { title: "Total Booth", value: 15, color: colorPalette[3] },
 // ];
+const colorPalette = [
+	"rgb(11, 13, 14)",
+	"hsl(204, 59.60%, 78.60%)",
+	"hsl(214, 77.50%, 13.90%)",
+	"hsl(222, 4.10%, 52.20%)",
+];
 
 export default function ResourcePieChart() {
 	const theme = useTheme();
@@ -31,20 +30,10 @@ export default function ResourcePieChart() {
 	const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
 	const dispatch = useDispatch<AppDispatch>();
 
-	// // Fetch role and carPortCounts from Redux state
-	// const {user} = useSelector((state: RootState) => state.profileReducer); // Assuming user role is stored in Redux
 	const { carPortCounts } = useSelector(
 		(state: RootState) => state.dashboardReducer
 	);
 	console.log("first", carPortCounts);
-	// Static data for non-superadmin roles
-	// const staticCarPorts = [
-	// 	{ carPort: "240V", count: 5 },
-	// 	{ carPort: "120V", count: 3 },
-	// 	{ carPort: "DCFC", count: 2 },
-	// 	{ carPort: "Other", count: 7 },
-	// ];
-
 	useEffect(() => {
 		dispatch(fetchDashboardData());
 	}, [dispatch]);
@@ -53,11 +42,6 @@ export default function ResourcePieChart() {
 
 	const dataToDisplay = carPortCounts;
 
-	//  const dataToDisplay =
-	// 		user?.userType === "superadmin"
-	// 			? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts
-	// 			: staticCarPorts.filter((entry) => entry.count > 0);
-	// console.log("Filtered Data to Display:", dataToDisplay);
 	const getChartDimensions = () => {
 		if (isXsScreen) {
 			return {
@@ -100,11 +84,9 @@ export default function ResourcePieChart() {
 				height: "auto",
 				minHeight: { xs: "320px", sm: "340px", md: "360px" },
 				padding: { xs: "12px", sm: "14px", md: "16px" },
-				borderRadius: "16px",
+				borderRadius: "30px",
 				border: "none",
-				// "*:where([data-mui-color-scheme='dark']) &": {
+
-				// 	backgroundColor: "#202020",
-				// },
 				background: "#D0E1E9",
 			}}
 		>
@@ -114,12 +96,10 @@ export default function ResourcePieChart() {
 				<Typography
 					component="h2"
 					variant="subtitle2"
-					// color="#F2F2F2"
 					sx={{
 						fontWeight: 600,
 						fontSize: { xs: "12px", sm: "14px", md: "16px" },
 						lineHeight: "24px",
-						// color: "#FFFFFF",
 						marginBottom: { xs: 1, sm: 1.5, md: 2 },
 					}}
 				>

src/components/SessionsChart/sessionChart.tsx

@@ -27,12 +27,9 @@ export default function SessionsChart() {
 				height: "auto",
 				minHeight: { xs: "260px", sm: "270px", md: "290px" },
 				gap: "16px",
-				borderRadius: "16px",
+				borderRadius: "30px",
 				padding: { xs: "12px", sm: "16px", md: "20px" },
 				border: "none",
-				// "*:where([data-mui-color-scheme='dark']) &": {
-				// 	backgroundColor: "#202020",
-				// },
 				background: "#D0E1E9",
 			}}
 		>

src/components/StatCard/statCard.tsx

@@ -26,7 +26,7 @@ export default function StatCard({ title, value }: StatCardProps) {
 					sm: "14px",
 					md: "10px",
 				},
-				borderRadius: "12px",
+				borderRadius: "30px",
 				border: "none",
 				gap: "24px",
 			  background: "#D0E1E9",
@@ -80,9 +80,9 @@ export default function StatCard({ title, value }: StatCardProps) {
 					sx={{
 						fontWeight: 600,
 						fontSize: {
-							xs: "24px",
+							xs: "25px",
-							sm: "28px",
+							sm: "30px",
-							md: "30px",
+							md: "35px",
 						},
 						lineHeight: {
 							xs: "28px",

src/components/barChartCard/barChartCard.tsx

@@ -49,6 +49,7 @@ export default function RoundedBarChart() {
 				{
 					dataKey: "name",
 					scaleType: "band" as const,
+					bandWidth: isXsScreen ? 8 : 15,
 				},
 			],
 			sx: {
@@ -74,7 +75,7 @@ export default function RoundedBarChart() {
 		} else {
 			return {
 				...baseSettings,
-				width: 500,
+				width: 400,
 				height: 280,
 			};
 		}
@@ -95,11 +96,8 @@ export default function RoundedBarChart() {
 				width: "100%",
 				height: "auto",
 				minHeight: { xs: "360px", sm: "400px", md: "444px" },
-				borderRadius: "16px",
+				borderRadius: "30px",
 				border: "none",
-				// "*:where([data-mui-color-scheme='dark']) &": {
-				// 	backgroundColor: "#202020",
-				// },
 				background: "#D0E1E9",
 			}}
 		>
@@ -211,7 +209,7 @@ export default function RoundedBarChart() {
 						series={[
 							{
 								dataKey: "count",
-								color: "#52ACDF",
+								color: "#000000",
 							},
 						]}
 						layout="vertical"

src/pages/Auth/Login/index.tsx

@@ -40,7 +40,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 		trigger,
 	} = useForm<ILoginForm>({ mode: "onChange" });
 	const dispatch = useDispatch<AppDispatch>();
-	const router = useNavigate();
+	const navigate = useNavigate();
 
 	const handleClickOpen = () => {
 		setOpen(true);
@@ -63,7 +63,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 		try {
 			const response = await dispatch(loginUser(data)).unwrap();
 			if (response?.data?.token) {
-				router("/panel/dashboard");
+				navigate("/panel/dashboard");
 			}
 		} catch (error: any) {
 			console.log("Login failed:", error);
@@ -112,7 +112,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						xs={12}
 						md={5}
 						sx={{
-							backgroundColor: "black",
+							backgroundColor: "background.default", // Use theme's default background (#DFECF1)
 							display: "flex",
 							justifyContent: "center",
 							alignItems: "center",
@@ -144,7 +144,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						<Typography
 							variant="h3"
 							sx={{
-								color: "white",
+								color: "text.primary", // Use theme's primary text color (#000000)
 								textAlign: "center",
 								fontSize: {
 									xs: "1.8rem",
@@ -154,6 +154,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 								width: "100%",
 								mb: { xs: 2, md: 3 },
 								mt: { xs: 0, md: 0 },
+								fontFamily:
+									'"Publica Sans Round Medium", sans-serif',
 							}}
 						>
 							Welcome Back!
@@ -171,11 +173,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 								maxWidth: "408px",
 								minHeight: { xs: "auto", md: "428px" },
 								padding: { xs: "16px", sm: "20px", md: "24px" },
-								borderRadius: "9px",
+								borderRadius: "8px", // Match theme's borderRadius
-								border: "none",
+								backgroundColor: "#000000", // Use theme's paper color (#D0E1E9)
-								"*:where([data-mui-color-scheme='dark']) &": {
+								borderColor: "divider", // Use theme's divider color (#E0E0E0)
-									backgroundColor: "#1E1E1E",
-								},
 							}}
 						>
 							<Box
@@ -193,10 +193,13 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									variant="h4"
 									sx={{
 										textAlign: "center",
-										color: "white",
+										color: "#D0E1E9",
 										fontSize: { xs: "20px", md: "24px" },
+										fontFamily:
+											'"Publica Sans Round Medium", sans-serif',
 									}}
 								>
+									{" "}
 									Login
 								</Typography>
 								<Typography
@@ -204,9 +207,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									variant="subtitle2"
 									sx={{
 										textAlign: "center",
-										color: "#D9D8D8",
+										color: "#D0E1E9", // Use theme's secondary text color (#272727)
 										fontSize: { xs: "14px", md: "16px" },
 										mb: 1,
+										fontFamily:
+											'"Publica Sans Round Medium", sans-serif',
 									}}
 								>
 									Log in with your email and password
@@ -217,13 +222,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									<FormLabel
 										htmlFor="email"
 										sx={{
-											borderRadius: "8px",
 											fontSize: {
 												xs: "0.875rem",
 												sm: "1rem",
 											},
-											color: "white",
+											color: "#D0E1E9",
 											mb: 0.5,
+											fontFamily:
+												'"Publica Sans Round Medium", sans-serif',
 											...autofillFix,
 										}}
 									>
@@ -269,46 +275,43 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 														},
 														alignItems: "center",
 														backgroundColor:
-															"#1E1F1F",
+															"background.paper", // Match card background
+														borderRadius: "8px",
 													},
 												}}
 												sx={{
 													"& .MuiOutlinedInput-root":
 														{
-															backgroundColor:
-																"#1E1F1F",
-															borderRadius: "8px",
 															"& fieldset": {
 																borderColor:
-																	"#4b5255",
+																	"divider",
 															},
 															"&:hover fieldset":
 																{
 																	borderColor:
-																		"#4b5255",
+																		"text.secondary",
 																},
 															"&.Mui-focused fieldset":
 																{
 																	borderColor:
-																		"#4b5255",
+																		"primary.main",
 																},
 														},
-
 													"& input": {
-														color: "white",
+														color: "text.primary",
 														fontSize: {
 															xs: "0.875rem",
 															sm: "1rem",
 														},
 														fontFamily:
-															"Gilroy, sans-serif",
+															'"Publica Sans Round Medium", sans-serif',
 													},
 													"& .MuiInputBase-input::placeholder":
 														{
-															color: "white",
+															color: "text.secondary",
 															opacity: 1,
 															fontFamily:
-																"Gilroy, sans-serif",
+																'"Publica Sans Round Medium", sans-serif',
 														},
 													...autofillFix,
 												}}
@@ -322,14 +325,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									<FormLabel
 										htmlFor="password"
 										sx={{
-											borderRadius: "8px",
 											fontSize: {
 												xs: "0.875rem",
 												sm: "1rem",
 											},
-											color: "white",
+											color: "#D0E1E9",
-											fontFamily: "Gilroy, sans-serif",
 											mb: 0.5,
+											fontFamily:
+												'"Publica Sans Round Medium", sans-serif',
 										}}
 									>
 										Password
@@ -381,16 +384,18 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 															xs: "45px",
 															md: "50px",
 														},
+														backgroundColor:
+															"background.paper",
+														borderRadius: "8px",
 														...autofillFix,
 													},
-
 													endAdornment: (
 														<InputAdornment position="end">
 															<CustomIconButton
 																aria-label="toggle password visibility"
 																onClick={
 																	togglePasswordVisibility
-																} // Only the button triggers visibility toggle
+																}
 																edge="end"
 															>
 																{showPassword ? (
@@ -405,35 +410,36 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												sx={{
 													"& .MuiOutlinedInput-root":
 														{
-															backgroundColor:
-																"#1E1F1F",
-															borderRadius: "8px",
 															"& fieldset": {
 																borderColor:
-																	"#4b5255",
+																	"divider",
 															},
 															"&:hover fieldset":
 																{
 																	borderColor:
-																		"#4b5255",
+																		"text.secondary",
 																},
 															"&.Mui-focused fieldset":
 																{
 																	borderColor:
-																		"#4b5255",
+																		"primary.main",
 																},
 														},
 													"& input": {
-														color: "white",
+														color: "text.primary",
 														fontSize: {
 															xs: "0.875rem",
 															sm: "1rem",
 														},
+														fontFamily:
+															'"Publica Sans Round Medium", sans-serif',
 													},
 													"& .MuiInputBase-input::placeholder":
 														{
-															color: "white",
+															color: "text.secondary",
 															opacity: 1,
+															fontFamily:
+																'"Publica Sans Round Medium", sans-serif',
 														},
 												}}
 											/>
@@ -446,7 +452,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									sx={{
 										display: "flex",
 										justifyContent: "space-between",
-										color: "white",
 										alignItems: "center",
 										flexWrap: { xs: "wrap", sm: "nowrap" },
 										gap: 1,
@@ -460,7 +465,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												sx={{
 													width: { xs: 16, md: 20 },
 													height: { xs: 16, md: 20 },
-													border: "2px solid #4b5255",
+													border: "2px solid",
+													borderColor: "divider",
 													borderRadius: "4px",
 													backgroundColor:
 														"transparent",
@@ -471,7 +477,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 													"&.Mui-checked": {
 														backgroundColor:
 															"transparent",
-														borderColor: "#4b5255",
+														borderColor:
+															"primary.main",
 														"&:hover": {
 															backgroundColor:
 																"transparent",
@@ -488,6 +495,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 														sm: "0.875rem",
 														md: "1rem",
 													},
+													color: "#D0E1E9",
+													fontFamily:
+														'"Publica Sans Round Medium", sans-serif',
 												}}
 											>
 												Remember me
@@ -502,22 +512,20 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										variant="body2"
 										sx={{
 											alignSelf: "center",
-											color: "#01579b",
+											color: "#D0E1E9",
 											textDecoration: "none",
 											fontSize: {
 												xs: "0.75rem",
 												sm: "0.875rem",
 												md: "1rem",
 											},
+											fontFamily:
+												'"Publica Sans Round Medium", sans-serif',
 										}}
 									>
 										Forgot password?
 									</Link>
 								</Box>
-								{/* <ForgotPassword
-									open={open}
-									handleClose={handleClose}
-								/> */}
 
 								{/* Login Button */}
 								<Button
@@ -525,11 +533,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									fullWidth
 									disabled={!isValid}
 									sx={{
-										color: "#ffffff !important",
+										color: "#000000",
 										fontWeight: 500,
-										backgroundColor: "#52ACDF",
+										backgroundColor: "#D0E1E9",
 										"&:hover": {
-											backgroundColor: "#52ACDF",
+											backgroundColor: "#D0E1E9",
 										},
 										padding: { xs: "8px 0", md: "10px 0" },
 										mt: { xs: 2, md: 3 },
@@ -537,6 +545,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 											xs: "0.875rem",
 											md: "1rem",
 										},
+										fontFamily:
+											'"Publica Sans Round Medium", sans-serif',
 									}}
 								>
 									Login

src/pages/EvSlotList/index.tsx

@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 import {
 	createSlot,
 	fetchManagersSlots,
+	toggleStatus,
 	updateSlot,
 } from "../../redux/slices/slotSlice";
 import AddSlotModal from "../../components/AddSlotModal/addSlotModal";
@@ -25,7 +26,6 @@ export default function EVSlotList() {
 		(state: RootState) => state?.slotReducer.availableSlots
 	);
 	const { user } = useSelector((state: RootState) => state?.profileReducer);
-console.log("bjbjhjh", availableSlots);
 	useEffect(() => {
 		dispatch(fetchManagersSlots());
 	}, [dispatch]);
@@ -101,7 +101,6 @@ console.log("bjbjhjh", availableSlots);
 				duration: duration,
 			};
 
-			// Dispatch action to create slot and refresh available slots
 			await dispatch(createSlot(payload));
 			await dispatch(fetchManagersSlots());
 
@@ -116,8 +115,7 @@ console.log("bjbjhjh", availableSlots);
 	const handleUpdate = async (
 		id: string,
 		startTime: string,
-		endTime: string,
+		endTime: string
-		isAvailable: boolean
 	) => {
 		try {
 			// Convert times using dayjs
@@ -136,7 +134,6 @@ console.log("bjbjhjh", availableSlots);
 					id,
 					startTime: formattedStartTime,
 					endTime: formattedEndTime,
-					isAvailable,
 				})
 			).unwrap();
 
@@ -150,13 +147,17 @@ console.log("bjbjhjh", availableSlots);
 		}
 	};
 
+	const handleStatusToggle = async (id: string, newStatus: boolean) => {
+		await dispatch(toggleStatus({ id, isAvailable: newStatus })); // Dispatch the action with the correct status
+	};
+
 	const slotColumns: Column[] = [
 		{ id: "srno", label: "Sr No" },
 		{ id: "stationName", label: "Station Name" },
 		{ id: "date", label: "Date" },
 		{ id: "startTime", label: "Start Time" },
 		{ id: "endTime", label: "End Time" },
-		{ id: "isAvailable", label: "Is Available", align: "center" },
+		{ id: "isAvailable", label: "Status", align: "center" },
 		...(user?.userType === "manager"
 			? [{ id: "action", label: "Action", align: "center" as const }]
 			: []),
@@ -164,7 +165,6 @@ console.log("bjbjhjh", availableSlots);
 
 	const slotRows = availableSlots?.length
 		? availableSlots.map((slot, index) => {
-				
 				const startTime = dayjs(
 					slot?.startTime,
 					"YYYY-MM-DD hh:mm A"
@@ -173,7 +173,6 @@ console.log("bjbjhjh", availableSlots);
 							"hh:mm A"
 					  )
 					: "Invalid";
-
 				const endTime = dayjs(
 					slot?.endTime,
 					"YYYY-MM-DD hh:mm A"
@@ -190,7 +189,11 @@ console.log("bjbjhjh", availableSlots);
 					date: slot?.date ?? "NA",
 					startTime: startTime ?? "NA",
 					endTime: endTime ?? "NA",
-					isAvailable: slot?.isAvailable ? "Yes" : "No",
+					isAvailable: slot?.isAvailable
+						? "Available"
+						: "Not Available",
+					statusValue: !!slot?.isAvailable, // Normalize to boolean (true/false)
+					statusField: "isAvailable", // I
 				};
 		  })
 		: [];
@@ -208,7 +211,9 @@ console.log("bjbjhjh", availableSlots);
 				setModalOpen={() => setEditModalOpen(true)}
 				tableType="slots"
 				handleClickOpen={handleClickOpen}
+				handleStatusToggle={handleStatusToggle} // Pass handleStatusToggle as a prop
 			/>
+
 			<AddSlotModal
 				open={addModalOpen}
 				handleClose={handleCloseModal}

src/pages/StationList/index.tsx

@@ -86,19 +86,10 @@ export default function StationList() {
 		}
 	};
 
-	const handleStatusToggle = async (id: string, newStatus: number) => {
+	const handleStatusToggle = async (id: string, newStatus: boolean) => {
-		await dispatch(toggleStatus({ id, status: newStatus }));
+		await dispatch(toggleStatus({ id, status: newStatus ? 1 : 0 })); // For stations, convert boolean to 1/0
 	};
 
-	// const filterStations = Array.isArray(stations)
-	// 	? stations.filter((station) =>
-	// 			station.name
-	// 				.toLocaleLowerCase()
-	// 				.includes(searchTerm.toLowerCase())
-	// 	  )
-	// 	: [];
-
-	// Mapping and formatting vehicles
 	const categoryRows = stations?.length
 		? stations?.map((station: any, index: number) => {
 				// Format the selected vehicles from the allowedCars array
@@ -122,9 +113,8 @@ export default function StationList() {
 					registeredAddress: station.registeredAddress || "N/A",
 					totalSlots: station.totalSlots,
 					vehicles: vehicleDisplay, // Add the formatted vehicle display here
-					status:
+					statusValue: station?.status === 1, // Normalize to boolean (true for 1, false for 0)
-						station.status === 1 ? "Available" : "Not Available", // Format status text
+					statusField: "status", // Status value for toggling
-					statusValue: station.status, // Status value for toggling
 				};
 		  })
 		: [];

src/redux/slices/slotSlice.ts

@@ -85,8 +85,7 @@ export const createSlot = createAsyncThunk<
 		endHour: string;
 		isAvailable: boolean;
 		duration: number;
-		stationId:number;
+		stationId: number;
-		
 	},
 	{ rejectValue: string }
 >("slots/createSlot", async (payload, { rejectWithValue }) => {
@@ -114,7 +113,6 @@ export const updateSlot = createAsyncThunk<
 		id: string;
 		startTime: string;
 		endTime: string;
-		isAvailable: boolean;
 	},
 	{ rejectValue: string }
 >("slots/updateSlot", async ({ id, ...slotData }, { rejectWithValue }) => {
@@ -134,7 +132,39 @@ export const updateSlot = createAsyncThunk<
 		);
 	}
 });
+export const toggleStatus = createAsyncThunk<
+	any,
+	{ id: string; isAvailable: boolean },
+	{ rejectValue: string }
+>("slot/toggleStatus", async ({ id, isAvailable }, { rejectWithValue }) => {
+	try {
+		const response = await http.patch(`/update-availability/${id}`, {
+			isAvailable,
+		});
 
+		if (response.data.statusCode === 200) {
+			toast.success(
+				response.data.message || "Status updated successfully"
+			);
+			return {
+				responseData: response.data,
+				id,
+				isAvailable,
+			};
+		} else {
+			throw new Error(response.data.message || "Failed to update status");
+		}
+	} catch (error: any) {
+		toast.error(
+			"Error updating status: " + (error.message || "Unknown error")
+		);
+		return rejectWithValue(
+			error.response?.data?.message ||
+				error.message ||
+				"An error occurred"
+		);
+	}
+});
 export const deleteSlot = createAsyncThunk<
 	string, // Return type (id of deleted slot)
 	string,
@@ -193,16 +223,6 @@ const slotSlice = createSlice({
 			.addCase(createSlot.pending, (state) => {
 				state.loading = true;
 			})
-			// .addCase(
-			// 	createSlot.fulfilled,
-			// 	(state, action: PayloadAction<Slot[]>) => {
-			// 		state.loading = false;
-
-			// 		// Add the new slots to both arrays
-			// 		state.slots.push(...action.payload);
-			// 		state.availableSlots.push(...action.payload);
-			// 	}
-			// )
 			.addCase(
 				createSlot.fulfilled,
 				(state, action: PayloadAction<Slot[]>) => {
@@ -254,6 +274,35 @@ const slotSlice = createSlice({
 			.addCase(deleteSlot.pending, (state) => {
 				state.loading = true;
 			})
+
+			.addCase(toggleStatus.pending, (state) => {
+				state.loading = true;
+			})
+			.addCase(
+				toggleStatus.fulfilled,
+				(state, action: PayloadAction<any>) => {
+					state.loading = false;
+					const { id, isAvailable } = action.payload;
+
+					const stationIndex = state.availableSlots.findIndex(
+						(slot) => slot.id === id
+					);
+					if (stationIndex !== -1) {
+						state.availableSlots[stationIndex] = {
+							...state.availableSlots[stationIndex],
+							isAvailable: isAvailable,
+						};
+					}
+				}
+			)
+			.addCase(
+				toggleStatus.rejected,
+				(state, action: PayloadAction<string | undefined>) => {
+					state.loading = false;
+					state.error =
+						action.payload || "Failed to toggle station status";
+				}
+			)
 			.addCase(
 				deleteSlot.fulfilled,
 				(state, action: PayloadAction<string>) => {

src/shared-theme/AppTheme.tsx

@@ -1,67 +1,4 @@
-// import * as React from "react";
-// import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
-// import type { ThemeOptions } from "@mui/material/styles";
-// import { inputsCustomizations } from "./customizations/inputs";
-// import { dataDisplayCustomizations } from "./customizations/dataDisplay";
-// import { feedbackCustomizations } from "./customizations/feedback";
-// import { navigationCustomizations } from "./customizations/navigation";
-// import { surfacesCustomizations } from "./customizations/surfaces";
-// import { colorSchemes, shadows, shape } from "./themePrimitives";
 
-// interface AppThemeProps {
-// 	children: React.ReactNode;
-// 	disableCustomTheme?: boolean;
-// 	themeComponents?: ThemeOptions["components"];
-// }
-
-// export default function AppTheme(props: AppThemeProps) {
-// 	const { children, disableCustomTheme, themeComponents } = props;
-// 	const theme = React.useMemo(() => {
-// 		return disableCustomTheme
-// 			? {}
-// 			: createTheme({
-// 					palette: {
-// 						mode: "dark",
-// 						background: {
-// 							// default: "#ECF4FA",
-// 							default: "#DFECF1",
-// 							paper: "#1e1e1e",
-// 						},
-// 						text: {
-// 							primary: "#111111",
-// 							secondary: "#b0b0b0",
-// 						},
-// 					},
-// 					typography: {
-// 						fontFamily: "Gilroy",
-// 					},
-// 					cssVariables: {
-// 						colorSchemeSelector: "data-mui-color-scheme",
-// 						cssVarPrefix: "template",
-// 					},
-// 					shadows,
-// 					shape,
-// 					components: {
-// 						...inputsCustomizations,
-// 						...dataDisplayCustomizations,
-// 						...feedbackCustomizations,
-// 						...navigationCustomizations,
-// 						...surfacesCustomizations,
-// 						...themeComponents,
-// 					},
-// 			  });
-// 	}, [disableCustomTheme, themeComponents]);
-
-// 	if (disableCustomTheme) {
-// 		return <React.Fragment>{children}</React.Fragment>;
-// 	}
-
-// 	return (
-// 		<ThemeProvider theme={theme} disableTransitionOnChange>
-// 			{children}
-// 		</ThemeProvider>
-// 	);
-// }
 import * as React from "react";
 import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
 import type { ThemeOptions } from "@mui/material/styles";

src/shared-theme/customizations/autoFill.tsx

@@ -20,8 +20,8 @@ export const autofillFix = {
 	},
 	"& input:autofill": {
 		boxShadow: "0 0 0 1000px transparent inset !important",
-      textFillColor: "white !important",
+		textFillColor: "transparent !important",
 		transition: "background-color 5000s ease-in-out 0s",
 	},
-  };
+};