Created User List routes and designed that page

src/components/Header/index.tsx

@@ -71,7 +71,7 @@ export default function Header() {
 					<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__"
+							src="/avatar.png"
 							sx={{ width: 36, height: 36 }}
 						/>
 						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>

src/components/MenuContent/index.tsx

@@ -22,6 +22,11 @@ const baseMenuItems = [
 		icon: <AnalyticsRoundedIcon />,
 		url: "/panel/admin-list",
 	},
+	{
+		text: "Users",
+		icon: <AnalyticsRoundedIcon />,
+		url: "/panel/user-list",
+	},
 ];
 
 //Eknoor singh and Jaanvi

src/pages/UserList/index.tsx

@@ -0,0 +1,313 @@
+import { useEffect, useState } from "react";
+import {
+	Box,
+	Button,
+	Typography,
+	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 { userList } from "../../redux/slices/userSlice"; // Make sure userSlice exists
+import { AppDispatch, RootState } from "../../redux/store/store";
+
+export default function UserList() {
+	const [searchQuery, setSearchQuery] = useState("");
+	const [currentPage, setCurrentPage] = useState(1);
+	const usersPerPage = 10;
+
+	const dispatch = useDispatch<AppDispatch>();
+	const users = useSelector((state: RootState) => state.userReducer.users);
+
+	useEffect(() => {
+		dispatch(userList());
+	}, [dispatch]);
+
+	const staticUsers = [
+		{
+			name: "Alice Johnson",
+			email: "alice@example.com",
+			role: "User",
+			phone: "+1 234 567 8901",
+		},
+		{
+			name: "Bob Brown",
+			email: "bob@example.com",
+			role: "Admin",
+			phone: "+1 987 654 3210",
+		},
+		{
+			name: "Charlie Davis",
+			email: "charlie@example.com",
+			role: "User",
+			phone: "+1 312 555 7890",
+		},
+		{
+			name: "Alice Johnson",
+			email: "alice@example.com",
+			role: "User",
+			phone: "+1 234 567 8901",
+		},
+		{
+			name: "Bob Brown",
+			email: "bob@example.com",
+			role: "Admin",
+			phone: "+1 987 654 3210",
+		},
+		{
+			name: "Charlie Davis",
+			email: "charlie@example.com",
+			role: "User",
+			phone: "+1 312 555 7890",
+		},
+		{
+			name: "Bob Brown",
+			email: "bob@example.com",
+			role: "Admin",
+			phone: "+1 987 654 3210",
+		},
+		{
+			name: "Charlie Davis",
+			email: "charlie@example.com",
+			role: "User",
+			phone: "+1 312 555 7890",
+		},
+	];
+
+	const userData = users.length ? users : staticUsers;
+
+	const filteredUsers = userData.filter((user) =>
+		user.name.toLowerCase().includes(searchQuery.toLowerCase())
+	);
+
+	const indexOfLastUser = currentPage * usersPerPage;
+	const indexOfFirstUser = indexOfLastUser - usersPerPage;
+	const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
+
+	const handlePageChange = (event, value) => {
+		setCurrentPage(value);
+	};
+
+	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",
+				}}
+			>
+				User List
+			</Typography>
+
+			{/* Search & Buttons Section */}
+			<Box
+				sx={{
+					display: "flex",
+					gap: "16px",
+					marginTop: "16px",
+					alignItems: "center",
+					fontFamily: "Gilroy",
+				}}
+			>
+				<TextField
+					variant="outlined"
+					placeholder="Search Users"
+					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: "flex-end",
+						width: "100%",
+					}}
+				>
+					<Button
+						sx={{
+							backgroundColor: "#52ACDF",
+							color: "white",
+							borderRadius: "8px",
+							width: "184px",
+							"&:hover": { backgroundColor: "#439BC1" },
+						}}
+					>
+						Add User
+					</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", "Email", "Role", "Phone", "Action"].map(
+								(header) => (
+									<TableCell
+										key={header}
+										sx={{
+											color: "#FFFFFF",
+											fontWeight: "bold",
+										}}
+									>
+										{header}
+									</TableCell>
+								)
+							)}
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{currentUsers.map((user, index) => (
+							<TableRow
+								key={index}
+								sx={{ backgroundColor: "#1C1C1C" }}
+							>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{user.name}
+								</TableCell>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{user.email}
+								</TableCell>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{user.role}
+								</TableCell>
+								<TableCell
+									sx={{
+										color: "#FFFFFF",
+										borderBottom: "1px solid #2A2A2A",
+									}}
+								>
+									{user.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",
+				}}
+			>
+				<Typography
+					sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
+				>
+					Page Number :
+				</Typography>
+				<Pagination
+					count={Math.ceil(filteredUsers.length / usersPerPage)}
+					page={currentPage}
+					onChange={handlePageChange}
+					siblingCount={0}
+					boundaryCount={0}
+					sx={{
+						"& .MuiPaginationItem-root": {
+							color: "white",
+							borderRadius: "0px",
+						},
+						"& .MuiPaginationItem-page.Mui-selected": {
+							backgroundColor: "transparent",
+							fontWeight: "bold",
+							color: "#FFFFFF",
+						},
+					}}
+				/>
+			</Box>
+		</Box>
+	);
+}

src/redux/reducers.ts

@@ -3,11 +3,13 @@ import { combineReducers } from "@reduxjs/toolkit";
 import authReducer from "./slices/authSlice";
 import adminReducer from "./slices/adminSlice";
 import profileReducer from "./slices/profileSlice";
+import userReducer from "./slices/userSlice.ts";
 
 const rootReducer = combineReducers({
   authReducer, 
   adminReducer,
-  profileReducer
+  profileReducer,
+  userReducer,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;

src/redux/slices/userSlice.ts

@@ -0,0 +1,59 @@
+import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+import axios from "axios";
+
+// Define TypeScript types
+interface User {
+	id: number;
+	name: string;
+	email: string;
+	phone?: string;
+	location?: string;
+	managerAssigned?: string;
+	vehicle?: string;
+}
+
+interface UserState {
+	users: User[];
+	loading: boolean;
+	error: string | null;
+}
+
+// Initial state
+const initialState: UserState = {
+	users: [],
+	loading: false,
+	error: null,
+};
+
+// Async thunk to fetch user list
+export const userList = createAsyncThunk<User[]>("users/fetchUsers", async () => {
+	try {
+		const response = await axios.get<User[]>("/api/users"); // Adjust the API endpoint as needed
+		return response.data;
+	} catch (error: any) {
+		throw new Error(error.response?.data?.message || "Failed to fetch users");
+	}
+});
+
+const userSlice = createSlice({
+	name: "users",
+	initialState,
+	reducers: {},
+	extraReducers: (builder) => {
+		builder
+			.addCase(userList.pending, (state) => {
+				state.loading = true;
+				state.error = null;
+			})
+			.addCase(userList.fulfilled, (state, action: PayloadAction<User[]>) => {
+				state.loading = false;
+				state.users = action.payload;
+			})
+			.addCase(userList.rejected, (state, action) => {
+				state.loading = false;
+				state.error = action.error.message || "Failed to fetch users";
+			});
+	},
+});
+
+export default userSlice.reducer;

src/router.tsx

@@ -1,8 +1,4 @@
-import {
+import { Routes as BaseRoutes, Navigate, Route } from "react-router-dom";
-	Routes as BaseRoutes,
-	Navigate,
-	Route,
-} from "react-router-dom";
 import React, { lazy, Suspense } from "react";
 import LoadingComponent from "./components/Loading";
 import DashboardLayout from "./layouts/DashboardLayout";
@@ -15,6 +11,7 @@ const Vehicles = lazy(() => import("./pages/Vehicles"));
 const AdminList = lazy(() => import("./pages/AdminList"));
 const ProfilePage = lazy(() => import("./pages/ProfilePage"));
 const NotFoundPage = lazy(() => import("./pages/NotFound"));
+const UserList = lazy(() => import("./pages/UserList"));
 
 interface ProtectedRouteProps {
 	caps: string[];
@@ -77,6 +74,15 @@ export default function AppRouter() {
 							/>
 						}
 					/>
+					<Route
+						path="user-list"
+						element={
+							<ProtectedRoute
+								caps={[]}
+								component={<UserList />}
+							/>
+						}
+					/>
 
 					<Route
 						path="profile"
@@ -90,7 +96,7 @@ export default function AppRouter() {
 				</Route>
 
 				{/* Catch-all Route */}
-				<Route path="*" element={<NotFoundPage/>} />
+				<Route path="*" element={<NotFoundPage />} />
 			</BaseRoutes>
 		</Suspense>
 	);