Worked on the Charge stations section according to the figma design

src/components/Header/index.tsx

@@ -1,63 +1,89 @@
 import * as React from "react";
 import Stack from "@mui/material/Stack";
-import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
+import Avatar from "@mui/material/Avatar";
-import CustomDatePicker from "../CustomDatePicker";
-import NavbarBreadcrumbs from "../NavbarBreadcrumbs";
-import MenuButton from "../MenuButton";
-import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import Search from "../Search";
+import InputBase from "@mui/material/InputBase";
+import SearchIcon from "@mui/icons-material/Search";
+import Divider from "@mui/material/Divider";
+import MenuButton from "../MenuButton";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
 export default function Header() {
 	const [showNotifications, setShowNotifications] = React.useState(false);
 	const toggleNotifications = () => {
 		setShowNotifications((prev) => !prev);
 	};
+
 	return (
-		<Stack
+		<Box
-			direction="row"
 			sx={{
-				display: { xs: "none", md: "flex" },
 				width: "100%",
-				alignItems: { xs: "flex-start", md: "center" },
+				height: "84px",
+				backgroundColor: "#202020",
+				padding: "20px 24px",
+				display: "flex",
+				alignItems: "center",
 				justifyContent: "space-between",
-				maxWidth: { sm: "100%", md: "1700px" },
-				pt: 1.5,
 			}}
-			spacing={2}
 		>
-			<NavbarBreadcrumbs />
+			<Box sx={{ flexGrow: 1 }} />
-			<Stack direction="row" sx={{ gap: 1 }}>
+			<Stack
-				<Search />
+				direction="row"
-				<CustomDatePicker />
+				spacing={3}
-				<MenuButton
+				alignItems="center"
-					showBadge
+				justifyContent="flex-end"
-					aria-label="Open notifications"
+			>
-					onClick={toggleNotifications}
+				{/* Search Bar */}
-				>
-					<NotificationsRoundedIcon />
-				</MenuButton>
-				<ColorModeIconDropdown />
-			</Stack>
-			{showNotifications && (
 				<Box
 					sx={{
-						p: 2,
+						width: "360px",
-						position: "absolute",
+						height: "44px",
-					    top: "55px", // Adjust this value according to your AppBar height
+						backgroundColor: "#303030",
-						right: "66px",
+						borderRadius: "8px",
-						bgcolor: "lightblue",
+						border: "1px solid #424242",
-						boxShadow: 1,
+						display: "flex",
-						borderRadius: 1,
+						alignItems: "center",
-						zIndex: 1300,
+						padding: "0 12px",
 					}}
 				>
-					<Typography variant="body2" color="text.secondary">
+					<SearchIcon sx={{ color: "#FFFFFF" }} />
-						No notifications yet
+					<InputBase
-					</Typography>
+						sx={{ marginLeft: 1, flex: 1, color: "#FFFFFF" }}
+					/>
 				</Box>
-			)}
+
-		</Stack>
+				{/* Notification and Profile Section */}
+				<Stack direction="row" spacing={2} alignItems="center">
+					<MenuButton
+						onClick={toggleNotifications}
+						aria-label="Open notifications"
+					>
+						{/* Custom Bell Icon */}
+						<Box
+							component="img"
+							src="/Bell.jpg"
+							alt="Notification Icon"
+							sx={{ width: 24, height: 24 }}
+						/>
+					</MenuButton>
+					<Divider flexItem sx={{ backgroundColor: "#424242" }} />
+					<Stack direction="row" spacing={1.5} alignItems="center">
+						<Avatar
+							alt="User Avatar"
+							src="https://s3-alpha-sig.figma.com/img/dacf/0ff0/1f9d2fd2c30c4d605c4df5e0cf713ec5?Expires=1740960000&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=rcIQTiiBm0HAkIDyXDXxRybg0V-7JweZfG1yWxaHiJLDWGBk1qTnBKTOUEY6DC~hEI5wElvp0gaqjIrbxky6GExQeKo7uqw6gKJ88-daa8D7xWxzOs2ArVFzMEKqO3kDLDVssolGJC0TVyW5iKaryqKz7~D3ucY0h~GY6V-VAP7F5UmxA~H3CF-L72CC1HtMyiGC6nmtDfNo7lNP36o44Os4LSRcIof9xC5nXLo8MQjx9JRKvv6C-B95x2s7ms1~KqKHZWaCjgEcgiCfHwbQK9PgdpSyjSm2ljS4kRCdj6PYleV-D~S82cUGxAXNiay9EmX--QJuQ0MowpFNOJjVgg__"
+							sx={{ width: 36, height: 36 }}
+						/>
+						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
+							Momah
+						</Typography>
+						{/* Dropdown Icon */}
+						<ArrowDropDownIcon
+							sx={{ color: "#FFFFFF", width: 16, height: 16 }}
+						/>
+					</Stack>
+				</Stack>
+			</Stack>
+		</Box>
 	);
 }

src/components/MenuContent/index.tsx

@@ -18,11 +18,10 @@ const baseMenuItems = [
 		url: "/panel/dashboard",
 	},
 	{
-		text: "Admins",
+		text: "Charge Stations",
 		icon: <AnalyticsRoundedIcon />,
 		url: "/panel/admin-list",
 	},
-	
 ];
 
 //Eknoor singh and Jaanvi

src/pages/AdminList/index.tsx

@@ -1,159 +1,355 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
-import { Box, Button, Typography } from "@mui/material";
-import AddEditCategoryModal from "../../components/AddEditCategoryModal";
-import { useForm } from "react-hook-form";
-import CustomTable, { Column } from "../../components/CustomTable";
-import { useDispatch, useSelector } from "react-redux";
 import {
-	adminList,
+	Box,
-	updateAdmin,
+	Button,
-	createAdmin,
+	Typography,
-} from "../../redux/slices/adminSlice";
+	TextField,
+	InputAdornment,
+	Paper,
+	Table,
+	TableBody,
+	TableCell,
+	TableContainer,
+	TableHead,
+	TableRow,
+	Pagination,
+	IconButton,
+} from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import TuneIcon from "@mui/icons-material/Tune";
+import { useDispatch, useSelector } from "react-redux";
+import { adminList } from "../../redux/slices/adminSlice";
 import { AppDispatch, RootState } from "../../redux/store/store";
 
 export default function AdminList() {
-	const [modalOpen, setModalOpen] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
-	const { reset } = useForm();
+	const [currentPage, setCurrentPage] = useState(1);
-
+	const adminsPerPage = 10;
-	const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
-	const [viewModal, setViewModal] = React.useState<boolean>(false);
-	const [rowData, setRowData] = React.useState<any | null>(null);
 
 	const dispatch = useDispatch<AppDispatch>();
-
 	const admins = useSelector((state: RootState) => state.adminReducer.admins);
 
 	useEffect(() => {
 		dispatch(adminList());
 	}, [dispatch]);
 
-	const handleClickOpen = () => {
+	const staticAdmins = [
-		setRowData(null); // Reset row data when opening for new admin
+		{
-		setModalOpen(true);
+			name: "John Doe",
-	};
+			location: "New York",
-
+			managerAssigned: "Alice Johnson",
-	const handleCloseModal = () => {
+			vehicle: "Tesla Model S",
-		setModalOpen(false);
+			phone: "+1 234 567 8901",
-		setRowData(null);
+		},
-		reset();
+		{
-	};
+			name: "Jane Smith",
-
+			location: "Los Angeles",
-	const handleCreate = async (data: {
+			managerAssigned: "Bob Brown",
-		name: string;
+			vehicle: "Ford F-150",
-		email: string;
+			phone: "+1 987 654 3210",
-		phone: string;
+		},
-		registeredAddress: string;
+		{
-	}) => {
+			name: "Michael Brown",
-		try {
+			location: "Chicago",
-			await dispatch(createAdmin(data));
+			managerAssigned: "Sarah Lee",
-			await dispatch(adminList()); // Refresh the list after creation
+			vehicle: "Chevrolet Bolt",
-			handleCloseModal();
+			phone: "+1 312 555 7890",
-		} catch (error) {
+		},
-			console.error("Creation failed", error);
+		{
-		}
+			name: "Emily Davis",
-	};
+			location: "Houston",
-
+			managerAssigned: "Tom Wilson",
-	const handleUpdate = async (
+			vehicle: "Nissan Leaf",
-		id: string,
+			phone: "+1 713 444 5678",
-		name: string,
+		},
-		email: string,
+		{
-		phone: string,
+			name: "Daniel Martinez",
-		registeredAddress: string
+			location: "Phoenix",
-	) => {
+			managerAssigned: "Jessica White",
-		try {
+			vehicle: "BMW i3",
-			await dispatch(
+			phone: "+1 602 999 4321",
-				updateAdmin({
+		},
-					id,
+		{
-					name,
+			name: "Sophia Miller",
-					email,
+			location: "Philadelphia",
-					phone,
+			managerAssigned: "Mark Adams",
-					registeredAddress,
+			vehicle: "Audi e-tron",
-				})
+			phone: "+1 215 777 6543",
-			);
+		},
-			await dispatch(adminList());
+		{
-		} catch (error) {
+			name: "James Anderson",
-			console.error("Update failed", error);
+			location: "San Antonio",
-		}
+			managerAssigned: "Emma Thomas",
-	};
+			vehicle: "Hyundai Kona EV",
-
+			phone: "+1 210 321 8765",
-	const categoryColumns: Column[] = [
+		},
-		{ id: "srno", label: "Sr No" },
+		{
-		{ id: "name", label: "Name" },
+			name: "James Anderson",
-		{ id: "email", label: "Email" },
+			location: "San Antonio",
-		{ id: "phone", label: "Phone" },
+			managerAssigned: "Emma Thomas",
-		{ id: "registeredAddress", label: "Address" },
+			vehicle: "Hyundai Kona EV",
-		{ id: "action", label: "Action", align: "center" },
+			phone: "+1 210 321 8765",
+		},
 	];
 
-	const categoryRows = admins?.length
+	const adminData = admins.length ? admins : staticAdmins;
-		? admins?.map(
+
-				(
+	const filteredAdmins = adminData.filter((admin) =>
-					admin: {
+		admin.name.toLowerCase().includes(searchQuery.toLowerCase())
-						id: string;
+	);
-						name: string;
+
-						email: string;
+	const indexOfLastAdmin = currentPage * adminsPerPage;
-						phone: string;
+	const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage;
-						registeredAddress: string;
+	const currentAdmins = filteredAdmins.slice(
-					},
+		indexOfFirstAdmin,
-					index: number
+		indexOfLastAdmin
-				) => ({
+	);
-					id: admin?.id,
+
-					srno: index + 1,
+	const handlePageChange = (event, value) => {
-					name: admin?.name,
+		setCurrentPage(value);
-					email: admin?.email,
+	};
-					phone: admin?.phone,
-					registeredAddress: admin?.registeredAddress,
-				})
-		  )
-		: [];
 
 	return (
-		<>
+		<Box
+			sx={{
+				width: "calc(100% - 48px)",
+				margin: "0 auto",
+				padding: "24px",
+				backgroundColor: "#1C1C1C",
+				borderRadius: "12px",
+			}}
+		>
+			<Typography
+				sx={{
+					color: "#FFFFFF",
+					fontWeight: 500,
+					fontSize: "18px",
+					fontFamily: "Gilroy",
+				}}
+			>
+				Charge stations
+			</Typography>
+
+			{/* Search & Buttons Section */}
 			<Box
 				sx={{
-					width: "100%",
+					display: "flex",
-					maxWidth: {
+					gap: "16px",
-						sm: "100%",
+					marginTop: "16px",
+					alignItems: "center",
+					fontFamily: "Gilroy",
+				}}
+			>
+				<TextField
+					variant="outlined"
+					placeholder="Search Charge stations"
+					sx={{
+						width: "422px",
+						backgroundColor: "#272727",
+
+						borderRadius: "12px",
+						input: { color: "#FFFFFF" },
+						"& .MuiOutlinedInput-root": {
+							borderRadius: "12px",
+							"& fieldset": { borderColor: "#FFFFFF" },
+							"&:hover fieldset": { borderColor: "#FFFFFF" },
+							"&.Mui-focused fieldset": {
+								borderColor: "#52ACDF",
+							},
+						},
+					}}
+					InputProps={{
+						startAdornment: (
+							<InputAdornment position="start">
+								<SearchIcon sx={{ color: "#FFFFFF" }} />
+							</InputAdornment>
+						),
+					}}
+					value={searchQuery}
+					onChange={(e) => setSearchQuery(e.target.value)}
+				/>
+				<Box
+					sx={{
 						display: "flex",
-						justifyContent: "space-between",
+						justifyContent: "flex-end",
-						alignItems: "center",
+						width: "100%",
-					},
+					}}
+				>
+					<Button
+						sx={{
+							backgroundColor: "#52ACDF",
+							color: "white",
+							borderRadius: "8px",
+							width: "184px",
+							"&:hover": {
+								backgroundColor: "#439BC1",
+							},
+						}}
+					>
+						Add Charge Stations
+					</Button>
+				</Box>
+
+				<IconButton
+					sx={{
+						width: "44px",
+						height: "44px",
+						borderRadius: "8px",
+						backgroundColor: "#272727",
+						color: "#52ACDF",
+						"&:hover": { backgroundColor: "#333333" },
+					}}
+				>
+					<TuneIcon />
+				</IconButton>
+			</Box>
+
+			{/* Table Section */}
+			<TableContainer
+				component={Paper}
+				sx={{
+					marginTop: "24px",
+					backgroundColor: "#1C1C1C",
+					borderRadius: "12px",
+					overflow: "hidden",
+				}}
+			>
+				<Table>
+					<TableHead sx={{ backgroundColor: "#272727" }}>
+						<TableRow>
+							{[
+								"Name",
+								"Location",
+								"Manager Assigned",
+								"Vehicle",
+								"Phone Number",
+								"Action",
+							].map((header) => (
+								<TableCell
+									key={header}
+									sx={{
+										color: "#FFFFFF",
+										fontWeight: "bold",
+									}}
+								>
+									{header}
+								</TableCell>
+							))}
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{currentAdmins.map((admin, index) => (
+							<TableRow
+								key={index}
+								sx={{ backgroundColor: "#1C1C1C" }}
+							>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{admin.name}
+								</TableCell>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{admin.location || "N/A"}
+								</TableCell>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{admin.managerAssigned || "N/A"}
+								</TableCell>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{admin.vehicle || "N/A"}{" "}
+									<Typography
+										component="span"
+										sx={{
+											color: "#52ACDF",
+											cursor: "pointer",
+											textDecoration: "none",
+											"&:hover": {
+												textDecoration: "underline",
+											},
+										}}
+									>
+										+6 more
+									</Typography>
+								</TableCell>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{admin.phone}
+								</TableCell>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									<IconButton size="small">
+										<MoreHorizIcon
+											sx={{ color: "#FFFFFF" }}
+										/>
+									</IconButton>
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</TableContainer>
+
+			{/* Pagination */}
+			<Box
+				sx={{
+					display: "flex",
+					justifyContent: "flex-end",
+					alignItems: "center",
+					marginTop: "16px",
+					width: "100%",
+					gap: "8px",
 				}}
 			>
 				<Typography
-					component="h2"
+					sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
-					variant="h6"
-					sx={{ mt: 2, fontWeight: 600 }}
 				>
-					Admins
+					Page Number :
 				</Typography>
-				<Button
+				<Pagination
-					variant="contained"
+					count={Math.ceil(filteredAdmins.length / adminsPerPage)}
-					size="medium"
+					page={currentPage}
-					sx={{ textAlign: "right" }}
+					onChange={handlePageChange}
-					onClick={handleClickOpen}
+					siblingCount={0}
-				>
+					boundaryCount={0}
-					Add Admin
+					sx={{
-				</Button>
+						"& .MuiPaginationItem-root": {
+							color: "white",
+							borderRadius: "0px",
+						},
+						"& .MuiPaginationItem-page.Mui-selected": {
+							backgroundColor: "transparent",
+							fontWeight: "bold",
+							color: "#FFFFFF",
+						},
+					}}
+				/>
 			</Box>
-
+		</Box>
-			<CustomTable
-				columns={categoryColumns}
-				rows={categoryRows}
-				setDeleteModal={setDeleteModal}
-				deleteModal={deleteModal}
-				setViewModal={setViewModal}
-				viewModal={viewModal}
-				setRowData={setRowData}
-				setModalOpen={setModalOpen}
-			/>
-			<AddEditCategoryModal
-				open={modalOpen}
-				handleClose={handleCloseModal}
-				handleCreate={handleCreate}
-				handleUpdate={handleUpdate}
-				editRow={rowData}
-			/>
-		</>
 	);
 }