From d1612f913156e5252d21d1c2454b94507b0fca8d Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Tue, 4 Mar 2025 16:42:58 +0530
Subject: [PATCH 1/6] vehicle list created and some bugs solved

---
 public/model-s-exterior-front-view.webp | Bin 0 -> 8618 bytes
 src/components/Header/index.tsx         |  23 ++-
 src/components/MenuContent/index.tsx    |   5 +
 src/components/OptionsMenu/index.tsx    |  21 ++-
 src/components/SideMenu/index.tsx       |  10 +-
 src/pages/Auth/Login/index.tsx          |  21 ++-
 src/pages/VehicleList/index.tsx         | 227 ++++++++++++++++++++++++
 src/pages/Vehicles/index.tsx            | 102 -----------
 src/redux/reducers.ts                   |   3 +
 src/redux/slices/VehicleSlice.ts        | 135 ++++++++++++++
 src/redux/slices/userSlice.ts           |   9 -
 src/router.tsx                          |  12 +-
 12 files changed, 429 insertions(+), 139 deletions(-)
 create mode 100644 public/model-s-exterior-front-view.webp
 create mode 100644 src/pages/VehicleList/index.tsx
 delete mode 100644 src/pages/Vehicles/index.tsx
 create mode 100644 src/redux/slices/VehicleSlice.ts

diff --git a/public/model-s-exterior-front-view.webp b/public/model-s-exterior-front-view.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3af1533c06a602e2884c1193f2902e383f7e17d6
GIT binary patch
literal 8618
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

literal 0
HcmV?d00001

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 4c3f027..aaa4691 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -8,15 +8,28 @@ import SearchIcon from "@mui/icons-material/Search";
 import Divider from "@mui/material/Divider";
 import MenuButton from "../MenuButton";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
 import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
+import SideMenu from "../SideMenu";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../../redux/store/store";
+import { fetchAdminProfile } from "../../redux/slices/profileSlice";
+import OptionsMenu from "../OptionsMenu";
 
 export default function Header() {
 	const [showNotifications, setShowNotifications] = React.useState(false);
 	const toggleNotifications = () => {
 		setShowNotifications((prev) => !prev);
 	};
+    	const [open, setOpen] = React.useState(true);
 
+		const dispatch = useDispatch<AppDispatch>();
+		const { user } = useSelector(
+			(state: RootState) => state?.profileReducer
+		);
+
+		React.useEffect(() => {
+			dispatch(fetchAdminProfile());
+		}, [dispatch]);
 	return (
 		<Box
 			sx={{
@@ -92,11 +105,11 @@ export default function Header() {
 							sx={{ width: 36, height: 36 }}
 						/>
 						<Typography variant="body1" sx={{ color: "#202020" }}>
-							Momah
+							{user?.name || "No Admin"}
 						</Typography>
-						{/* Dropdown Icon */}
-						<ArrowDropDownIcon
-							sx={{ color: "#202020", width: 16, height: 16 }}
+
+						<OptionsMenu
+							
 						/>
 					</Stack>
 					{/* <ColorModeIconDropdown /> */}
diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx
index 794a33b..e23f179 100644
--- a/src/components/MenuContent/index.tsx
+++ b/src/components/MenuContent/index.tsx
@@ -47,6 +47,11 @@ export default function MenuContent({ hidden }: PropType) {
 			icon: <AnalyticsRoundedIcon />,
 			url: "/panel/role-list",
 		},
+		userRole === "admin" && {
+			text: "Vehicles",
+			icon: <AnalyticsRoundedIcon />,
+			url: "/panel/vehicle-list",
+		},
 	];
 
 	const filteredMenuItems = baseMenuItems.filter(Boolean);
diff --git a/src/components/OptionsMenu/index.tsx b/src/components/OptionsMenu/index.tsx
index 1778e11..8ed491b 100644
--- a/src/components/OptionsMenu/index.tsx
+++ b/src/components/OptionsMenu/index.tsx
@@ -13,6 +13,7 @@ import MenuButton from "../MenuButton";
 import { Avatar } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import Logout from "../LogOutFunction/LogOutFunction";
+import { ArrowDropDownIcon } from "@mui/x-date-pickers";
 
 const MenuItem = styled(MuiMenuItem)({
 	margin: "2px 0",
@@ -46,7 +47,7 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 				onClick={handleClick}
 				sx={{ borderColor: "transparent" }}
 			>
-				{avatar ? (
+				{/* {avatar ? (
 					<MoreVertRoundedIcon />
 				) : (
 					<Avatar
@@ -55,7 +56,8 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 						src="/static/images/avatar/7.jpg"
 						sx={{ width: 36, height: 36 }}
 					/>
-				)}
+				)} */}
+				<ArrowDropDownIcon />
 			</MenuButton>
 			<Menu
 				anchorEl={anchorEl}
@@ -78,11 +80,11 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 				}}
 			>
 				<MenuItem onClick={handleProfile}>Profile</MenuItem>
-				<MenuItem onClick={handleClose}>My account</MenuItem>
+				{/* <MenuItem onClick={handleClose}>My account</MenuItem>
 				<Divider />
 				<MenuItem onClick={handleClose}>Add another account</MenuItem>
-				<MenuItem onClick={handleClose}>Settings</MenuItem>
-				<Divider />
+				<MenuItem onClick={handleClose}>Settings</MenuItem> */}
+				{/* <Divider /> */}
 				<MenuItem
 					onClick={handleClose}
 					sx={{
@@ -92,15 +94,12 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 						},
 					}}
 				>
-					{/* //Eknoor singh and jaanvi
-                    //date:- 13-Feb-2025
-                    //Implemented logout functionality which was static previously */}
-
 					<ListItemText
 						onClick={(e) => {
 							e.stopPropagation();
 							setLogoutModal(true);
 						}}
+						sx={{color:"red"}}
 					>
 						Logout
 					</ListItemText>
@@ -109,9 +108,9 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 						logoutModal={logoutModal}
 					/>
 
-					<ListItemIcon>
+					{/* <ListItemIcon>
 						<LogoutRoundedIcon fontSize="small" />
-					</ListItemIcon>
+					</ListItemIcon> */}
 				</MenuItem>
 			</Menu>
 		</React.Fragment>
diff --git a/src/components/SideMenu/index.tsx b/src/components/SideMenu/index.tsx
index 0ff8e9e..357a0b8 100644
--- a/src/components/SideMenu/index.tsx
+++ b/src/components/SideMenu/index.tsx
@@ -29,10 +29,6 @@ const Drawer = styled(MuiDrawer)({
 export default function SideMenu() {
 	const [open, setOpen] = React.useState(true);
 
-	//Eknoor singh
-	//date:- 12-Feb-2025
-	//Dispatch is called with user from Authstate Interface
-
 	const dispatch = useDispatch<AppDispatch>();
 	const { user } = useSelector((state: RootState) => state?.profileReducer);
 
@@ -74,7 +70,7 @@ export default function SideMenu() {
 			</Box>
 			<MenuContent hidden={open} />
 			{/* <CardAlert /> */}
-			<Stack
+			{/* <Stack
 				direction="row"
 				sx={{
 					p: 2,
@@ -104,8 +100,8 @@ export default function SideMenu() {
 						{user?.email || "No Email"}
 					</Typography>
 				</Box>
-				<OptionsMenu avatar={open} />
-			</Stack>
+				 <OptionsMenu avatar={open} /> 
+			</Stack> */}
 		</Drawer>
 	);
 }
diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx
index 7f9184d..89f01cb 100644
--- a/src/pages/Auth/Login/index.tsx
+++ b/src/pages/Auth/Login/index.tsx
@@ -33,8 +33,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 	const {
 		control,
 		handleSubmit,
-		formState: { errors },
-	} = useForm<ILoginForm>();
+		formState: { errors, isValid },
+	} = useForm<ILoginForm>({ mode: "onChange" });
 	const dispatch = useDispatch();
 	const router = useNavigate();
 
@@ -228,6 +228,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 												message:
 													"Password must be at least 6 characters long.",
 											},
+											pattern: {
+												value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
+												message:
+													"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
+											},
 										}}
 										render={({ field }) => (
 											<Box sx={{ position: "relative" }}>
@@ -255,17 +260,22 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 															? "error"
 															: "primary"
 													}
+													sx={{
+														paddingRight: "40px",
+														height: "40px",
+														marginBottom: "8px",
+													}}
 												/>
 												<IconButton
 													sx={{
 														position: "absolute",
 														top: "50%",
 														right: "10px",
+														transform:
+															"translateY(-50%)",
 														background: "none",
 														borderColor:
 															"transparent",
-														transform:
-															"translateY(-50%)",
 														"&:hover": {
 															backgroundColor:
 																"transparent",
@@ -295,6 +305,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										display: "flex",
 										justifyContent: "space-between",
 										color: "white",
+										alignItems: "center",
+										flexWrap: "wrap",
 									}}
 								>
 									<FormControlLabel
@@ -326,6 +338,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 								<Button
 									type="submit"
 									fullWidth
+									disabled={!isValid}
 									sx={{
 										color: "white",
 										backgroundColor: "#52ACDF",
diff --git a/src/pages/VehicleList/index.tsx b/src/pages/VehicleList/index.tsx
new file mode 100644
index 0000000..b9bd1a7
--- /dev/null
+++ b/src/pages/VehicleList/index.tsx
@@ -0,0 +1,227 @@
+import React, { useEffect, useState } from "react";
+import { Box, Button, TextField, Typography } from "@mui/material";
+import AddEditCategoryModal from "../../components/AddEditCategoryModal";
+import { useForm } from "react-hook-form";
+import CustomTable, { Column } from "../../components/CustomTable";
+import DeleteModal from "../../components/Modals/DeleteModal";
+import { RootState } from "../../redux/reducers";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch } from "../../redux/store/store";
+import {
+	addVehicle,
+	updateVehicle,
+	vehicleList,
+} from "../../redux/slices/VehicleSlice";
+import SearchIcon from "@mui/icons-material/Search";
+const categoryRows = [
+	{
+		srno: 1,
+		id: 1, // Using a number for 'id'
+		name: "Tesla Model S",
+		brand: "Tesla",
+		imageUrl:
+			"https://example.com/https://imgd-ct.aeplcdn.com/1056x660/n/cw/ec/93821/model-s-exterior-front-view.jpeg?q=80.jpg",
+	},
+	{
+		srno: 2,
+		id: 2,
+		name: "BMW X5",
+		brand: "BMW",
+		imageUrl: "https://example.com/bmw_x5.jpg",
+	},
+	{
+		srno: 3,
+		id: 3,
+		name: "Audi A6",
+		brand: "Audi",
+		imageUrl: "https://example.com/audi_a6.jpg",
+	},
+	{
+		srno: 4,
+		id: 4,
+		name: "Mercedes-Benz S-Class",
+		brand: "Mercedes-Benz",
+		imageUrl: "https://example.com/mercedes_s_class.jpg",
+	},
+	{
+		srno: 5,
+		id: 5,
+		name: "Ford Mustang",
+		brand: "Ford",
+		imageUrl: "https://example.com/ford_mustang.jpg",
+	},
+];
+
+
+export default function VehicleList() {
+	const [modalOpen, setModalOpen] = useState<boolean>(false);
+	const [editRow, setEditRow] = useState<any>(null);
+	const { reset } = useForm();
+
+	const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
+	const [viewModal, setViewModal] = React.useState<boolean>(false);
+	const [rowData, setRowData] = React.useState<any | null>(null);
+	const [searchTerm, setSearchTerm] = useState("");
+	const dispatch = useDispatch<AppDispatch>();
+	const vehicles = useSelector(
+		(state: RootState) => state.vehicleReducer.vehicles
+	);
+
+	useEffect(() => {
+		dispatch(vehicleList());
+	}, [dispatch]);
+
+	const handleClickOpen = () => {
+		setRowData(null); // Reset row data when opening for new admin
+		setModalOpen(true);
+	};
+
+	const handleCloseModal = () => {
+		setModalOpen(false);
+		setRowData(null);
+		reset();
+	};
+
+	const handleCreate = async (data: {
+		name: string;
+		brand: string;
+		imageUrl: string;
+	}) => {
+		try {
+			await dispatch(addVehicle(data));
+			await dispatch(vehicleList());
+			handleCloseModal();
+		} catch (error) {
+			console.error("Creation failed", error);
+		}
+	};
+	const handleUpdate = async (
+		id: number,
+		name: string,
+		brand: string,
+		imageUrl: string
+	) => {
+		try {
+			await dispatch(
+				updateVehicle({
+					id,
+					name,
+					brand,
+					imageUrl,
+				})
+			);
+			await dispatch(vehicleList());
+		} catch (error) {
+			console.error("Update failed", error);
+		}
+	};
+	const categoryColumns: Column[] = [
+		{ id: "srno", label: "Sr No" },
+		{ id: "name", label: "Vehicle Name" },
+		{ id: "brand", label: "Brand" },
+		{ id: "imageUrl", label: "Image" },
+		{ id: "action", label: "Action", align: "center" },
+	];
+
+	const filteredVehicles = vehicles?.filter(
+		(vehicle) =>
+			vehicle.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+			vehicle.brand.toLowerCase().includes(searchTerm.toLowerCase())
+	);
+
+// const categoryRows = filteredVehicles?.length
+// 	? filteredVehicles?.map(
+// 			(
+// 				vehicle: {
+// 					id: number; 
+// 					name: string;
+// 					brand: string;
+// 					imageUrl: string;
+// 				},
+// 				index: number
+// 			) => ({
+// 				id: vehicle?.id, 
+// 				srno: index + 1,
+// 				name: vehicle?.name,
+// 				brand: vehicle?.brand,
+// 				imageUrl: vehicle?.imageUrl,
+// 			})
+// 	  )
+// 	: [];
+
+	return (
+		<>
+			
+				{/* Title and Add Category button */}
+				<Typography
+					component="h2"
+					variant="h6"
+					sx={{ mt: 2, fontWeight: 600 }}
+				>
+					Vehicles
+				</Typography>
+        <Box
+				sx={{
+					width: "100%",
+					display: "flex",
+					flexDirection: { xs: "column", sm: "row" },
+					justifyContent: "space-between",
+					alignItems: "center",
+					mb: 2, // Add margin bottom for spacing
+				}}
+			>
+				<TextField
+					variant="outlined"
+					size="small"
+					placeholder="Search..."
+					value={searchTerm}
+					onChange={(e) => setSearchTerm(e.target.value)}
+					sx={{
+						width: { xs: "100%", sm: "30%" }, 
+						marginBottom: { xs: 2, sm: 0 }, 
+					}}
+					InputProps={{
+						startAdornment: (
+							<SearchIcon
+								sx={{ color: "#202020", marginRight: 1 }}
+							/>
+						),
+					}}
+				/>
+				<Button
+                  variant="contained"
+                  size="medium"
+                  sx={{
+                    textAlign: "center",
+                    width: { xs: "100%", sm: "auto" },
+                  }}
+                  onClick={handleClickOpen}
+                >
+                  Add Vehicle
+                </Button>
+        </Box>
+			
+
+			<CustomTable
+				columns={categoryColumns}
+				rows={categoryRows}
+				setDeleteModal={setDeleteModal}
+				deleteModal={deleteModal}
+				setViewModal={setViewModal}
+				viewModal={viewModal}
+				setRowData={setRowData}
+				setModalOpen={setModalOpen}
+			/>
+			{/* <AddEditCategoryModal
+        open={modalOpen}
+        handleClose={handleCloseModal}
+        editRow={rowData}
+      />
+      <DeleteModal
+        open={deleteModal}
+        setDeleteModal={setDeleteModal}
+        handleDelete={handleDelete}
+      /> */}
+		</>
+	);
+}
diff --git a/src/pages/Vehicles/index.tsx b/src/pages/Vehicles/index.tsx
deleted file mode 100644
index 0cc06bb..0000000
--- a/src/pages/Vehicles/index.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Button, Typography } from '@mui/material';
-import AddEditCategoryModal from '../../components/AddEditCategoryModal';
-import { useForm } from 'react-hook-form';
-import CustomTable from '../../components/CustomTable';
-import DeleteModal from '../../components/Modals/DeleteModal';
-
-// Sample data for categories
-// const categoryRows = [
-//   { srno: 1, name: 'Strength', date: '01/03/2025' },
-//   {
-//     srno: 2,
-//     name: 'HIIT (High-Intensity Interval Training)',
-//     date: '01/03/2025',
-//   },
-//   { srno: 3, name: 'Cardio', date: '01/03/2025' },
-//   { srno: 4, name: 'Combat', date: '01/03/2025' },
-//   { srno: 5, name: 'Yoga', date: '01/03/2025' },
-// ];
-
-export default function Vehicles() {
-  const [modalOpen, setModalOpen] = useState<boolean>(false);
-  const [editRow, setEditRow] = useState<any>(null);
-  const { reset } = useForm();
-
-  const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
-  const [rowData, setRowData] = React.useState<any | null>(null);
-
-  const handleClickOpen = () => {
-    setModalOpen(true);
-    setEditRow(null);
-  };
-
-  const handleCloseModal = () => {
-    setModalOpen(false);
-    reset();
-  };
-
-  // const handleEdit = () => {
-  //   setEditRow(rowData);
-  // };
-
-  const handleDelete = () => {
-    console.log('Deleted row:', rowData);
-    setDeleteModal(false);
-  };
-
-  const categoryColumns = [
-    { id: 'srno', label: 'Sr No' },
-    { id: 'name', label: 'Category Name' },
-    { id: 'date', label: 'Date' },
-    { id: 'action', label: 'Action', align: 'center' },
-  ];
-
-  return (
-    <>
-      <Box
-        sx={{
-          width: '100%',
-          maxWidth: {
-            sm: '100%',
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          },
-        }}
-      >
-        {/* Title and Add Category button */}
-        {/* <Typography component="h2" variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
-          Vehicles
-        </Typography> */}
-        <Button
-          variant="contained"
-          size="medium"
-          sx={{ textAlign: 'right' }}
-          onClick={handleClickOpen}
-        >
-          Add Categorywewfw
-        </Button>
-      </Box>
-
-      <CustomTable
-        columns={categoryColumns}
-        rows={categoryRows}
-        editRow={editRow}
-        setDeleteModal={setDeleteModal}
-        setRowData={setRowData}
-        setModalOpen={setModalOpen}
-      />
-      <AddEditCategoryModal
-        open={modalOpen}
-        handleClose={handleCloseModal}
-        editRow={rowData}
-      />
-      <DeleteModal
-        open={deleteModal}
-        setDeleteModal={setDeleteModal}
-        handleDelete={handleDelete}
-      />
-    </>
-  );
-}
diff --git a/src/redux/reducers.ts b/src/redux/reducers.ts
index b67ef5f..3092653 100644
--- a/src/redux/reducers.ts
+++ b/src/redux/reducers.ts
@@ -5,6 +5,8 @@ import adminReducer from "./slices/adminSlice";
 import profileReducer from "./slices/profileSlice";
 import userReducer from "./slices/userSlice.ts";
 import roleReducer from "./slices/roleSlice.ts";
+import vehicleReducer from "./slices/VehicleSlice.ts";
+
 
 const rootReducer = combineReducers({
 	authReducer,
@@ -12,6 +14,7 @@ const rootReducer = combineReducers({
 	profileReducer,
 	userReducer,
 	roleReducer,
+	vehicleReducer
 });
 
 export type RootState = ReturnType<typeof rootReducer>;
diff --git a/src/redux/slices/VehicleSlice.ts b/src/redux/slices/VehicleSlice.ts
new file mode 100644
index 0000000..68f3383
--- /dev/null
+++ b/src/redux/slices/VehicleSlice.ts
@@ -0,0 +1,135 @@
+import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+import http from "../../lib/https";
+import { toast } from "sonner";
+
+interface Vehicle {
+    id:number;
+    name:string;
+    brand:string;
+    imageUrl:string;
+    
+}
+interface VehicleState {
+	vehicles:Vehicle[];
+	loading: boolean;
+	error: string | null;
+}
+const initialState: VehicleState = {
+	vehicles: [],
+	loading: false,
+	error: null,
+};
+
+export const vehicleList = createAsyncThunk<Vehicle, void, { rejectValue: string }>(
+	"fetchVehicles",
+	async (_, { rejectWithValue }) => {
+		try {
+			const token = localStorage?.getItem("authToken");
+			if (!token) throw new Error("No token found");
+
+			const response = await http.get("/");
+
+			if (!response.data?.data) throw new Error("Invalid API response");
+
+			return response.data.data;
+		} catch (error: any) {
+			toast.error("Error Fetching Profile" + error);
+			return rejectWithValue(
+				error?.response?.data?.message || "An error occurred"
+			);
+		}
+	}
+);
+
+//Add Vehicle
+export const addVehicle = createAsyncThunk<
+	Vehicle,
+	{
+		name: string;
+		brand: string;
+		imageUrl: string;
+	},
+	{ rejectValue: string }
+>("/AddVehicle", async (data, { rejectWithValue }) => {
+	try {
+		const response = await http.post("/", data);
+		return response.data;
+	} catch (error: any) {
+		return rejectWithValue(
+			error.response?.data?.message || "An error occurred"
+		);
+	}
+});
+
+
+// Update Vehicle details
+export const updateVehicle = createAsyncThunk(
+	"updateVehicle",
+	async ({ id, ...vehicleData }: Vehicle, { rejectWithValue }) => {
+		try {
+			const response = await http.put(`/${id}`, vehicleData);
+			toast.success("Vehicle Deatils updated successfully");
+			return response?.data;
+		} catch (error: any) {
+			toast.error("Error updating the user: " + error);
+			return rejectWithValue(
+				error.response?.data?.message || "An error occurred"
+			);
+		}
+	}
+);
+const vehicleSlice = createSlice({
+	name: "vehicle",
+	initialState,
+	reducers: {},
+	extraReducers: (builder) => {
+		builder
+			.addCase(vehicleList.pending, (state) => {
+				state.loading = true;
+				state.error = null;
+			})
+			.addCase(
+				vehicleList.fulfilled,
+				(state, action: PayloadAction<Vehicle[]>) => {
+					state.loading = false;
+					state.vehicles = action.payload;
+				}
+			)
+			.addCase(vehicleList.rejected, (state, action) => {
+				state.loading = false;
+				state.error = action.error.message || "Failed to fetch users";
+			})
+			.addCase(addVehicle.pending, (state) => {
+				state.loading = true;
+				// state.error = null;
+			})
+			.addCase(
+				addVehicle.fulfilled,
+				(state, action: PayloadAction<Vehicle>) => {
+					state.loading = false;
+					state.vehicles.push(action.payload);
+				}
+			)
+			.addCase(
+				addVehicle.rejected,
+				(state, action: PayloadAction<string | undefined>) => {
+					state.loading = false;
+				}
+			)
+			.addCase(updateVehicle.pending, (state) => {
+				state.loading = true;
+			})
+			.addCase(updateVehicle.fulfilled, (state, action) => {
+				const updateVehicle = action.payload;
+				state.vehicles = state?.vehicles?.map((vehicle) =>
+					vehicle?.id === updateVehicle?.id ? updateVehicle : vehicle
+				);
+				state.loading = false;
+			})
+			.addCase(updateVehicle.rejected, (state) => {
+				state.loading = false;
+			});
+	},
+});
+
+export default vehicleSlice.reducer;
diff --git a/src/redux/slices/userSlice.ts b/src/redux/slices/userSlice.ts
index 73f6066..b9c85b6 100644
--- a/src/redux/slices/userSlice.ts
+++ b/src/redux/slices/userSlice.ts
@@ -28,15 +28,6 @@ const initialState: UserState = {
 	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");
-// 	}
-// });
 export const userList = createAsyncThunk<User, void, { rejectValue: string }>(
 	"fetchUsers",
 	async (_, { rejectWithValue }) => {
diff --git a/src/router.tsx b/src/router.tsx
index d2ce56d..9af14d0 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -4,12 +4,13 @@ import LoadingComponent from "./components/Loading";
 import DashboardLayout from "./layouts/DashboardLayout";
 import RoleList from "./pages/RoleList";
 import AddEditRolePage from "./pages/AddEditRolePage";
+import VehicleList from "./pages/VehicleList";
 
 // Page imports
 const Login = lazy(() => import("./pages/Auth/Login"));
 const SignUp = lazy(() => import("./pages/Auth/SignUp"));
 const Dashboard = lazy(() => import("./pages/Dashboard"));
-const Vehicles = lazy(() => import("./pages/Vehicles"));
+const Vehicles = lazy(() => import("./pages/VehicleList"));
 const AdminList = lazy(() => import("./pages/AdminList"));
 const ProfilePage = lazy(() => import("./pages/ProfilePage"));
 const NotFoundPage = lazy(() => import("./pages/NotFound"));
@@ -95,6 +96,15 @@ export default function AppRouter() {
 							/>
 						}
 					/>
+					<Route
+						path="vehicle-list"
+						element={
+							<ProtectedRoute
+								caps={[]}
+								component={<VehicleList />}
+							/>
+						}
+					/>
 					<Route
 						path="permissions"
 						element={

From 36d7b9e71e6946180a7e6aa402d999cb2d2a0125 Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Tue, 4 Mar 2025 18:12:15 +0530
Subject: [PATCH 2/6] Profile page option feature and Its Design Implemented

---
 src/pages/ProfilePage/index.tsx | 133 ++++++++++++++++++++++++--------
 1 file changed, 102 insertions(+), 31 deletions(-)

diff --git a/src/pages/ProfilePage/index.tsx b/src/pages/ProfilePage/index.tsx
index 1bebb78..f1d2f32 100644
--- a/src/pages/ProfilePage/index.tsx
+++ b/src/pages/ProfilePage/index.tsx
@@ -1,7 +1,3 @@
-//Eknoor singh
-//date:- 12-Feb-2025
-//Made a special page for showing the profile details
-
 import { useEffect } from "react";
 import {
 	Container,
@@ -12,16 +8,15 @@ import {
 	Grid,
 	Avatar,
 	Box,
+	Stack,
+	Divider,
+	Link,
 } from "@mui/material";
-
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { fetchAdminProfile } from "../../redux/slices/profileSlice";
 
 const ProfilePage = () => {
-	//Eknoor singh
-	//date:- 12-Feb-2025
-	//Dispatch is called and user, isLoading, and error from Authstate Interface
 	const dispatch = useDispatch<AppDispatch>();
 	const { user, isLoading } = useSelector(
 		(state: RootState) => state?.profileReducer
@@ -49,34 +44,110 @@ const ProfilePage = () => {
 	return (
 		<Container sx={{ py: 4 }}>
 			<Typography variant="h4" gutterBottom>
-				Profile
+				Account Info
 			</Typography>
-			<Card sx={{ maxWidth: 600, margin: "0 auto" }}>
+			<Card sx={{ maxWidth: "100%", margin: "0 auto" }}>
 				<CardContent>
-					<Grid container spacing={2} alignItems="center">
-						<Grid item>
+					<Stack direction="column" spacing={2}>
+						<Stack
+							direction="row"
+							spacing={1.5}
+							alignItems="center"
+						>
 							<Avatar
-								
-								alt={user?.name || "User Avatar"}
-								src={"/static/images/avatar/7.jpg"}
-								sx={{ width: 80, height: 80 }}
+								alt="User Avatar"
+								src="/avatar.png"
+								sx={{ width: 36, height: 36 }}
 							/>
+							<Box>
+								<Typography
+									variant="body1"
+									sx={{ color: "#202020" }}
+								>
+									{user?.name || "No Admin"}
+								</Typography>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+								>
+									{user?.userType || "N/A"}
+								</Typography>
+							</Box>
+						</Stack>
+						<Divider
+							flexItem
+							sx={{ backgroundColor: "rgba(32, 32, 32, 0.5)" }}
+						/>
+
+						<Stack
+							direction="row"
+							justifyContent="space-between"
+							alignItems="center"
+						>
+							<Typography
+								variant="body1"
+								sx={{ color: "#202020" }}
+							>
+								Personal Information
+							</Typography>
+							<Link href="/edit-profile" underline="hover">
+								Edit
+							</Link>
+						</Stack>
+
+						<Grid container >
+							<Grid item xs={12} sm={4}>
+								<Typography
+									variant="body1"
+									sx={{ color: "#202020" }}
+								>
+									Name:
+								</Typography>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+								>
+									{user?.name || "N/A"}
+								</Typography>
+							</Grid>
+							<Grid item xs={12} sm={4}>
+								<Typography
+									variant="body1"
+									sx={{ color: "#202020" }}
+								>
+									Phone:
+								</Typography>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+								>
+									{user?.phone || "N/A"}
+								</Typography>
+							</Grid>
+							<Grid item xs={12} sm={4}>
+								<Typography
+									variant="body1"
+									sx={{ color: "#202020" }}
+								>
+									Email:
+								</Typography>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+								>
+									{user?.email || "N/A"}
+								</Typography>
+							</Grid>
 						</Grid>
-						<Grid item xs>
-							<Typography variant="h6">
-								{user?.name || "N/A"}
-							</Typography>
-							<Typography variant="body2" color="text.secondary">
-								Email: {user?.email || "N/A"}
-							</Typography>
-							<Typography variant="body2" color="text.secondary">
-								Phone: {user?.phone || "N/A"}
-							</Typography>
-							<Typography variant="body2" color="text.secondary">
-								Role: <b>{user?.userType || "N/A"}</b>
-							</Typography>
-						</Grid>
-					</Grid>
+
+
+						<Typography variant="body1" sx={{ color: "#202020" }}>
+							Bio:
+						</Typography>
+						<Typography variant="body2" color="text.secondary">
+							{user?.bio || "No bio available."}
+						</Typography>
+					</Stack>
 				</CardContent>
 			</Card>
 		</Container>

From 43709e51a750dcc2c0ad64a5c15094aa3830bcea Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Wed, 5 Mar 2025 18:05:29 +0530
Subject: [PATCH 3/6] Recreate the CustomTable UI and Appthem changes also made
 changes in header section

---
 src/components/AddUserModel/index.tsx |  20 +-
 src/components/AppNavbar/index.tsx    |   2 +-
 src/components/CustomTable/index.tsx  | 623 ++++++++++++++++++++--
 src/components/Header/index.tsx       |  16 +-
 src/components/SideMenu/index.tsx     |  34 +-
 src/layouts/DashboardLayout/index.tsx |  23 +-
 src/pages/AdminList/index.tsx         |  84 +--
 src/pages/Dashboard/index.tsx         |  90 ++--
 src/pages/RoleList/index.tsx          |  45 +-
 src/pages/UserList/index.tsx          | 711 +-------------------------
 src/pages/VehicleList/index.tsx       |  51 +-
 src/redux/slices/VehicleSlice.ts      |   5 +-
 src/redux/slices/adminSlice.ts        |   5 +-
 src/redux/slices/userSlice.ts         |  38 +-
 src/shared-theme/AppTheme.tsx         | 113 ++--
 15 files changed, 782 insertions(+), 1078 deletions(-)

diff --git a/src/components/AddUserModel/index.tsx b/src/components/AddUserModel/index.tsx
index 376adad..d92f9bf 100644
--- a/src/components/AddUserModel/index.tsx
+++ b/src/components/AddUserModel/index.tsx
@@ -55,7 +55,19 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 	});
 
 	const onSubmit = (data: FormData) => {
-		handleCreate(data);
+		if (editRow) {
+		
+			handleUpdate(
+				editRow.id,
+				data.name,
+				data.email,
+				data.phone,
+				data.password
+			);
+		} else {
+			
+			handleCreate(data);
+		}
 
 		handleClose();
 		reset();
@@ -79,7 +91,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 					justifyContent: "space-between",
 				}}
 			>
-				{editRow ? "Edit Admin" : "Add Admin"}
+				{editRow ? "Edit User" : "Add User"}
 				<Box
 					onClick={handleClose}
 					sx={{
@@ -210,3 +222,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 };
 
 export default AddUserModal;
+function handleUpdate(id: any, name: string, email: string, phone: string, password: string) {
+	throw new Error("Function not implemented.");
+}
+
diff --git a/src/components/AppNavbar/index.tsx b/src/components/AppNavbar/index.tsx
index 5652b4f..28fe816 100644
--- a/src/components/AppNavbar/index.tsx
+++ b/src/components/AppNavbar/index.tsx
@@ -42,7 +42,7 @@ export default function AppNavbar() {
 			sx={{
 				display: { xs: "auto", md: "none" },
 				boxShadow: 0,
-				bgcolor: "background.paper",
+				backgroundColor:"#1C1C1C",
 				backgroundImage: "none",
 				borderBottom: "1px solid",
 				borderColor: "divider",
diff --git a/src/components/CustomTable/index.tsx b/src/components/CustomTable/index.tsx
index 4927964..c34da95 100644
--- a/src/components/CustomTable/index.tsx
+++ b/src/components/CustomTable/index.tsx
@@ -1,3 +1,317 @@
+// import * as React from "react";
+// import { styled } from "@mui/material/styles";
+// import Table from "@mui/material/Table";
+// import TableBody from "@mui/material/TableBody";
+// import TableCell, { tableCellClasses } from "@mui/material/TableCell";
+// import TableContainer from "@mui/material/TableContainer";
+// import TableHead from "@mui/material/TableHead";
+// import TableRow from "@mui/material/TableRow";
+// import Paper, { paperClasses } from "@mui/material/Paper";
+// import { adminList, deleteAdmin } from "../../redux/slices/adminSlice";
+// import { useDispatch } from "react-redux";
+// import {
+// 	Box,
+// 	Button,
+// 	dividerClasses,
+// 	IconButton,
+// 	listClasses,
+// 	Menu,
+// } from "@mui/material";
+// import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
+// import DeleteModal from "../Modals/DeleteModal";
+// import { AppDispatch } from "../../redux/store/store";
+// import ViewModal from "../Modals/ViewModal";
+
+// // Styled components for customization
+// const StyledTableCell = styled(TableCell)(({ theme }) => ({
+// 	[`&.${tableCellClasses.head}`]: {
+// 		backgroundColor: " #1565c0",
+// 		color: theme.palette.common.white,
+// 	},
+// 	[`&.${tableCellClasses.body}`]: {
+// 		fontSize: 14,
+// 	},
+// }));
+
+// const StyledTableRow = styled(TableRow)(({ theme }) => ({
+// 	"&:nth-of-type(odd)": {
+// 		backgroundColor: theme.palette.action.hover,
+// 	},
+// 	"&:last-child td, &:last-child th": {
+// 		border: 0,
+// 	},
+// }));
+
+// export interface Column {
+// 	id: string;
+// 	label: string;
+// 	align?: "left" | "center" | "right";
+// }
+
+// interface Row {
+// 	[key: string]: any;
+// }
+
+// interface CustomTableProps {
+// 	columns: Column[];
+// 	rows: Row[];
+// 	setDeleteModal: Function;
+// 	setRowData: Function;
+// 	setModalOpen: Function;
+// 	viewModal: boolean;
+// 	setViewModal: Function;
+// 	deleteModal: boolean;
+// 	handleStatusToggle: (id: string, currentStatus: number) => void;
+// 	tableType?: string;
+// }
+
+// const CustomTable: React.FC<CustomTableProps> = ({
+// 	columns,
+// 	rows,
+// 	setDeleteModal,
+// 	deleteModal,
+// 	viewModal,
+// 	setRowData,
+// 	setViewModal,
+// 	setModalOpen,
+// 	handleStatusToggle,
+// 	tableType,
+// }) => {
+// 	const dispatch = useDispatch<AppDispatch>();
+// 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+// 	const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
+
+// 	const open = Boolean(anchorEl);
+
+// 	const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
+// 		setAnchorEl(event.currentTarget);
+// 		setSelectedRow(row); // Ensure the row data is set
+// 		setRowData(row);
+// 	};
+
+// 	const handleClose = () => {
+// 		setAnchorEl(null);
+// 	};
+
+// 	const isImage = (value: any) => {
+// 		if (typeof value === "string") {
+// 			return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image
+// 		}
+// 		return false;
+// 	};
+
+// 	const handleDeleteButton = (id: string | undefined) => {
+// 		if (!id) console.error("ID not found", id);
+
+// 		dispatch(deleteAdmin(id || ""));
+// 		setDeleteModal(false); // Close the modal only after deletion
+// 		handleClose();
+// 	};
+
+// 	const handleViewButton = (id: string | undefined) => {
+// 		if (!id) console.error("ID not found", id);
+
+// 		dispatch(adminList());
+// 		setViewModal(false);
+// 	};
+
+// 	const handleToggleStatus = () => {
+// 		if (selectedRow) {
+// 			// Toggle the opposite of current status
+// 			const newStatus = selectedRow.statusValue === 1 ? 0 : 1;
+// 			handleStatusToggle(selectedRow.id, newStatus);
+// 		}
+// 		handleClose();
+// 	};
+
+// 	return (
+// 		<Box sx={{ overflowX: "auto", width: "100%" }}>
+// 			<TableContainer component={Paper}>
+// 				<Table
+// 					sx={{
+// 						minWidth: 700,
+// 						width: "100%",
+// 						tableLayout: "auto",
+// 					}}
+// 					aria-label="customized table"
+// 				>
+// 					<TableHead>
+// 						<TableRow>
+// 							{columns.map((column) => (
+// 								<StyledTableCell
+// 									key={column.id}
+// 									align={column.align || "left"}
+// 									sx={{
+// 										whiteSpace: "nowrap", // Prevent wrapping
+// 										// fontSize: { xs: "12px", sm: "14px" },
+// 										fontSize: {
+// 											xs: "10px",
+// 											sm: "12px",
+// 											md: "14px",
+// 										}, // Adjust font size responsively
+// 										padding: { xs: "8px", sm: "12px" },
+// 									}}
+// 								>
+// 									{column.label}
+// 								</StyledTableCell>
+// 							))}
+// 						</TableRow>
+// 					</TableHead>
+// 					<TableBody>
+// 						{rows.map((row, rowIndex) => (
+// 							<StyledTableRow key={rowIndex}>
+// 								{columns.map((column) => (
+// 									<StyledTableCell
+// 										key={column.id}
+// 										align={column.align || "left"}
+// 										sx={{
+// 											whiteSpace: "nowrap", // Prevent wrapping
+// 											fontSize: {
+// 												xs: "10px",
+// 												sm: "12px",
+// 												md: "14px",
+// 											}, // Adjust font size responsively
+// 											padding: { xs: "8px", sm: "12px" },
+// 										}}
+// 									>
+// 										{isImage(row[column.id]) ? (
+// 											<img
+// 												src={row[column.id]}
+// 												alt="Row "
+// 												style={{
+// 													width: "50px",
+// 													height: "50px",
+// 													objectFit: "cover",
+// 												}}
+// 											/>
+// 										) : column.id !== "action" ? (
+// 											row[column.id]
+// 										) : (
+// 											<IconButton
+// 												onClick={(e) => {
+// 													handleClick(e, row);
+// 													setRowData(row); // Store the selected row
+// 												}}
+// 											>
+// 												<MoreVertRoundedIcon />
+// 											</IconButton>
+// 										)}
+// 									</StyledTableCell>
+// 								))}
+// 							</StyledTableRow>
+// 						))}
+// 					</TableBody>
+// 				</Table>
+// 			</TableContainer>
+
+// 			{/* Menu Actions */}
+// 			{open && (
+// 				<Menu
+// 					anchorEl={anchorEl}
+// 					id="menu"
+// 					open={open}
+// 					onClose={handleClose}
+// 					onClick={handleClose}
+// 					transformOrigin={{ horizontal: "right", vertical: "top" }}
+// 					anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+// 					sx={{
+// 						[`& .${listClasses.root}`]: {
+// 							padding: "4px",
+// 						},
+// 						[`& .${paperClasses.root}`]: {
+// 							padding: 0,
+// 						},
+// 						[`& .${dividerClasses.root}`]: {
+// 							margin: "4px -4px",
+// 						},
+// 					}}
+// 				>
+// 					<Box
+// 						sx={{
+// 							display: "flex",
+// 							flexDirection: "column",
+// 							justifyContent: "flex-start",
+// 						}}
+// 					>
+// 						<Button
+// 							variant="text"
+// 							onClick={(e) => {
+// 								e.stopPropagation();
+// 								setViewModal(true);
+// 							}}
+// 							color="primary"
+// 							sx={{
+// 								justifyContent: "flex-start",
+// 								py: 0,
+// 								textTransform: "capitalize",
+// 							}}
+// 						>
+// 							View
+// 						</Button>
+// 						{viewModal && (
+// 							<ViewModal
+// 								handleView={() =>
+// 									handleViewButton(selectedRow?.id)
+// 								}
+// 								open={viewModal}
+// 								setViewModal={setViewModal}
+// 								id={selectedRow?.id}
+// 							/>
+// 						)}
+// 						<Button
+// 							variant="text"
+// 							onClick={() => setModalOpen(true)}
+// 							color="primary"
+// 							sx={{
+// 								justifyContent: "flex-start",
+// 								py: 0,
+// 								textTransform: "capitalize",
+// 							}}
+// 						>
+// 							Edit
+// 						</Button>
+
+// 						{tableType === "roleList" && (
+// 							<Button variant="text" onClick={handleToggleStatus}>
+// 								{selectedRow.statusValue === 1
+// 									? "Deactivate"
+// 									: "Activate"}
+// 							</Button>
+// 						)}
+
+// 						<Button
+// 							variant="text"
+// 							onClick={(e) => {
+// 								e.stopPropagation();
+// 								setDeleteModal(true);
+// 							}}
+// 							color="error"
+// 							sx={{
+// 								justifyContent: "flex-start",
+// 								py: 0,
+// 								textTransform: "capitalize",
+// 							}}
+// 						>
+// 							Delete
+// 						</Button>
+// 						{deleteModal && (
+// 							<DeleteModal
+// 								handleDelete={() =>
+// 									handleDeleteButton(selectedRow?.id)
+// 								}
+// 								open={deleteModal}
+// 								setDeleteModal={setDeleteModal}
+// 								id={selectedRow?.id}
+// 							/>
+// 						)}
+// 					</Box>
+// 				</Menu>
+// 			)}
+// 		</Box>
+// 	);
+// };
+
+// export default CustomTable;
 import * as React from "react";
 import { styled } from "@mui/material/styles";
 import Table from "@mui/material/Table";
@@ -12,24 +326,30 @@ import { useDispatch } from "react-redux";
 import {
 	Box,
 	Button,
-	dividerClasses,
 	IconButton,
-	listClasses,
+	InputAdornment,
 	Menu,
+	Pagination,
+	TextField,
+	Typography,
 } from "@mui/material";
-import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
+import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded"; 
 import DeleteModal from "../Modals/DeleteModal";
 import { AppDispatch } from "../../redux/store/store";
 import ViewModal from "../Modals/ViewModal";
+import SearchIcon from "@mui/icons-material/Search";
+import TuneIcon from "@mui/icons-material/Tune";
 
 // Styled components for customization
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	[`&.${tableCellClasses.head}`]: {
-		backgroundColor: " #1565c0",
+		backgroundColor: "#454545", // Changed to #272727 for the header
 		color: theme.palette.common.white,
+		borderBottom: "none", // Remove any border at the bottom of the header
 	},
 	[`&.${tableCellClasses.body}`]: {
 		fontSize: 14,
+		borderBottom: "1px solid #454545", // Adding border to body cells
 	},
 }));
 
@@ -37,8 +357,9 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
 	"&:nth-of-type(odd)": {
 		backgroundColor: theme.palette.action.hover,
 	},
-	"&:last-child td, &:last-child th": {
-		border: 0,
+	"& td, th": {
+		borderColor: "#454545", // Applying border color to both td and th
+		borderWidth: "1px", // Set border width to ensure it appears
 	},
 }));
 
@@ -62,7 +383,8 @@ interface CustomTableProps {
 	setViewModal: Function;
 	deleteModal: boolean;
 	handleStatusToggle: (id: string, currentStatus: number) => void;
-	tableType?: string;
+	tableType: string; // Adding tableType prop to change header text dynamically
+	handleClickOpen: () => void;
 }
 
 const CustomTable: React.FC<CustomTableProps> = ({
@@ -76,10 +398,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
 	setModalOpen,
 	handleStatusToggle,
 	tableType,
+	handleClickOpen,
+
 }) => {
 	const dispatch = useDispatch<AppDispatch>();
 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 	const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
+	const [searchQuery, setSearchQuery] = React.useState("");
+	const [currentPage, setCurrentPage] = React.useState(1);
+	const usersPerPage = 10;
 
 	const open = Boolean(anchorEl);
 
@@ -124,32 +451,164 @@ const CustomTable: React.FC<CustomTableProps> = ({
 		handleClose();
 	};
 
+const filteredRows = rows.filter(
+	(row) =>
+		(row.name &&
+			row.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
+		false
+);
+
+
+	const indexOfLastRow = currentPage * usersPerPage;
+	const indexOfFirstRow = indexOfLastRow - usersPerPage;
+	const currentRows = filteredRows.slice(indexOfFirstRow, indexOfLastRow);
+
+	const handlePageChange = (
+		event: React.ChangeEvent<unknown>,
+		value: number
+	) => {
+		setCurrentPage(value);
+	};
+
 	return (
-		<Box sx={{ overflowX: "auto", width: "100%" }}>
-			<TableContainer component={Paper}>
-				<Table
+		<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",
+				}}
+			>
+				{/* Dynamic title based on the page type */}
+				{tableType === "admin"
+					? "Admin"
+					: tableType === "role"
+					? "Roles"
+					: tableType === "user"
+					? "Users"
+					: tableType === "manager"
+					? "Managers"
+					: tableType === "vehicle"
+					? "Vehicles"
+					: "List"}
+			</Typography>
+
+			{/* Search & Buttons Section */}
+			<Box
+				sx={{
+					display: "flex",
+					gap: "16px",
+					marginTop: "16px",
+					alignItems: "center",
+				}}
+			>
+				<TextField
+					variant="outlined"
+					placeholder="Search"
 					sx={{
-						minWidth: 700,
-						width: "100%",
-						tableLayout: "auto",
+						width: "422px",
+						borderRadius: "12px",
+						input: { color: "#FFFFFF" },
+						backgroundColor: "#272727",
+						"& .MuiOutlinedInput-root": {
+							borderRadius: "12px",
+							"& fieldset": { borderColor: "#FFFFFF" },
+							"&:hover fieldset": { borderColor: "#FFFFFF" },
+							"&.Mui-focused fieldset": {
+								borderColor: "#52ACDF",
+							},
+						},
+					}}
+					InputProps={{
+						startAdornment: (
+							<InputAdornment position="start">
+								<SearchIcon sx={{ color: "#272727" }} />
+							</InputAdornment>
+						),
+					}}
+					value={searchQuery}
+					onChange={(e) => setSearchQuery(e.target.value)}
+				/>
+				<Box
+					sx={{
+						display: "flex",
+						justifyContent: "flex-end",
+						width: "100%",
 					}}
-					aria-label="customized table"
 				>
-					<TableHead>
+					<Button
+						sx={{
+							backgroundColor: "#52ACDF",
+							color: "white",
+							borderRadius: "8px",
+							width: "184px",
+							"&:hover": { backgroundColor: "#439BC1" },
+						}}
+						onClick={() => handleClickOpen()}
+					>
+						Add{" "}
+						{tableType === "admin"
+							? "Admin"
+							: tableType === "role"
+							? "Role"
+							: tableType === "user"
+							? "User"
+							: tableType === "manager"
+							? "Manager"
+							: tableType === "vehicle"
+							? "Vehicle"
+							: "Item"}
+					</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",
+							borderBottom: "none",
+						}}
+					>
+						{" "}
 						<TableRow>
 							{columns.map((column) => (
 								<StyledTableCell
 									key={column.id}
-									align={column.align || "left"}
 									sx={{
-										whiteSpace: "nowrap", // Prevent wrapping
-										// fontSize: { xs: "12px", sm: "14px" },
-										fontSize: {
-											xs: "10px",
-											sm: "12px",
-											md: "14px",
-										}, // Adjust font size responsively
-										padding: { xs: "8px", sm: "12px" },
+										color: "#FFFFFF",
+										fontWeight: "bold",
 									}}
 								>
 									{column.label}
@@ -158,20 +617,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						</TableRow>
 					</TableHead>
 					<TableBody>
-						{rows.map((row, rowIndex) => (
+						{currentRows.map((row, rowIndex) => (
 							<StyledTableRow key={rowIndex}>
 								{columns.map((column) => (
 									<StyledTableCell
 										key={column.id}
-										align={column.align || "left"}
 										sx={{
-											whiteSpace: "nowrap", // Prevent wrapping
-											fontSize: {
-												xs: "10px",
-												sm: "12px",
-												md: "14px",
-											}, // Adjust font size responsively
-											padding: { xs: "8px", sm: "12px" },
+											color: "#FFFFFF",
+											backgroundColor: "#272727",
 										}}
 									>
 										{isImage(row[column.id]) ? (
@@ -192,8 +645,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
 													handleClick(e, row);
 													setRowData(row); // Store the selected row
 												}}
+												sx={{
+													padding: 0,
+													minWidth: 0,
+													width: "auto",
+													height: "auto",
+													backgroundColor:
+														"transparent",
+													color: "#FFFFFF",
+													border: "none",
+													"&:hover": {
+														backgroundColor:
+															"transparent",
+													},
+												}}
 											>
-												<MoreVertRoundedIcon />
+												<MoreHorizRoundedIcon
+													sx={{ fontSize: "24px" }}
+												/>
 											</IconButton>
 										)}
 									</StyledTableCell>
@@ -204,6 +673,40 @@ const CustomTable: React.FC<CustomTableProps> = ({
 				</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(filteredRows.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>
+
 			{/* Menu Actions */}
 			{open && (
 				<Menu
@@ -215,15 +718,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					transformOrigin={{ horizontal: "right", vertical: "top" }}
 					anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
 					sx={{
-						[`& .${listClasses.root}`]: {
-							padding: "4px",
-						},
 						[`& .${paperClasses.root}`]: {
 							padding: 0,
 						},
-						[`& .${dividerClasses.root}`]: {
-							margin: "4px -4px",
-						},
 					}}
 				>
 					<Box
@@ -243,7 +740,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							sx={{
 								justifyContent: "flex-start",
 								py: 0,
-								textTransform: "capitalize",
+								fontWeight: "bold",
+								color: "#52ACDF",
 							}}
 						>
 							View
@@ -258,6 +756,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 								id={selectedRow?.id}
 							/>
 						)}
+
 						<Button
 							variant="text"
 							onClick={() => setModalOpen(true)}
@@ -270,10 +769,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						>
 							Edit
 						</Button>
-
-						{tableType === "roleList" && (
-							<Button variant="text" onClick={handleToggleStatus}>
-								{selectedRow.statusValue === 1
+						{tableType === "role" && (
+							<Button
+								variant="text"
+								onClick={(e) => {
+									e.stopPropagation();
+									handleToggleStatus();
+								}}
+								color="secondary"
+								sx={{
+									justifyContent: "flex-start",
+									py: 0,
+									fontWeight: "bold",
+								}}
+							>
+								{selectedRow?.statusValue === 1
 									? "Deactivate"
 									: "Activate"}
 							</Button>
@@ -289,24 +799,25 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							sx={{
 								justifyContent: "flex-start",
 								py: 0,
-								textTransform: "capitalize",
+								fontWeight: "bold",
+								color: "red",
 							}}
 						>
 							Delete
 						</Button>
-						{deleteModal && (
-							<DeleteModal
-								handleDelete={() =>
-									handleDeleteButton(selectedRow?.id)
-								}
-								open={deleteModal}
-								setDeleteModal={setDeleteModal}
-								id={selectedRow?.id}
-							/>
-						)}
 					</Box>
 				</Menu>
 			)}
+
+			{/* Modals */}
+			{deleteModal && (
+				<DeleteModal
+					handleDelete={() => handleDeleteButton(selectedRow?.id)}
+					open={deleteModal}
+					setDeleteModal={setDeleteModal}
+					id={selectedRow?.id}
+				/>
+			)}
 		</Box>
 	);
 };
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index aaa4691..116c3ce 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -35,8 +35,8 @@ export default function Header() {
 			sx={{
 				width: "100%",
 				height: "84px",
-				// backgroundColor: "#202020",
-				padding: "20px 24px",
+				backgroundColor: "#1C1C1C",
+				//padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "space-between",
@@ -60,7 +60,7 @@ export default function Header() {
 					sx={{
 						width: { xs: "100%", sm: "360px" },
 						height: "44px",
-						backgroundColor: "#FFFFFF",
+
 						borderRadius: "8px",
 						border: "1px solid #424242",
 						display: "flex",
@@ -68,12 +68,12 @@ export default function Header() {
 						padding: "0 12px",
 					}}
 				>
-					<SearchIcon sx={{ color: "#202020" }} />
+					<SearchIcon sx={{ color: "#FFFFFF" }} />
 					<InputBase
 						sx={{
 							marginLeft: 1,
 							flex: 1,
-							color: "#202020",
+							color: "#FFFFFF",
 							fontSize: { xs: "12px", sm: "14px" },
 						}}
 					/>
@@ -104,13 +104,11 @@ export default function Header() {
 							src="/avatar.png"
 							sx={{ width: 36, height: 36 }}
 						/>
-						<Typography variant="body1" sx={{ color: "#202020" }}>
+						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
 							{user?.name || "No Admin"}
 						</Typography>
 
-						<OptionsMenu
-							
-						/>
+						<OptionsMenu />
 					</Stack>
 					{/* <ColorModeIconDropdown /> */}
 				</Stack>
diff --git a/src/components/SideMenu/index.tsx b/src/components/SideMenu/index.tsx
index 357a0b8..0838f94 100644
--- a/src/components/SideMenu/index.tsx
+++ b/src/components/SideMenu/index.tsx
@@ -69,39 +69,7 @@ export default function SideMenu() {
 				</Button>
 			</Box>
 			<MenuContent hidden={open} />
-			{/* <CardAlert /> */}
-			{/* <Stack
-				direction="row"
-				sx={{
-					p: 2,
-					gap: 1,
-					alignItems: "center",
-					borderTop: "1px solid",
-					borderColor: "divider",
-				}}
-			>
-				<Avatar
-					sizes="small"
-					alt={user?.name || "User Avatar"}
-					src={"/static/images/avatar/7.jpg"}
-					sx={{ width: open ? 36 : 0, height: open ? 36 : 0 }}
-				/>
-				<Box sx={{ mr: "auto", display: !open ? "none" : "block" }}>
-					<Typography
-						variant="body2"
-						sx={{ fontWeight: 500, lineHeight: "16px" }}
-					>
-						{user?.name || "No Admin"}
-					</Typography>
-					<Typography
-						variant="caption"
-						sx={{ color: "text.secondary" }}
-					>
-						{user?.email || "No Email"}
-					</Typography>
-				</Box>
-				 <OptionsMenu avatar={open} /> 
-			</Stack> */}
+			
 		</Drawer>
 	);
 }
diff --git a/src/layouts/DashboardLayout/index.tsx b/src/layouts/DashboardLayout/index.tsx
index 6d2ad96..3fe127c 100644
--- a/src/layouts/DashboardLayout/index.tsx
+++ b/src/layouts/DashboardLayout/index.tsx
@@ -18,13 +18,16 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 					display: "flex",
 					height: "100vh",
 					flexDirection: { xs: "column", md: "row" },
+					width: "100%",
+					margin: 0,
+					padding: 0,
 				}}
 			>
 				{/* SideMenu - Responsive, shown only on large screens */}
 				<Box
 					sx={{
 						display: { xs: "none", md: "block" },
-						width: 250,
+						// width: 250,
 					}}
 				>
 					<SideMenu />
@@ -46,8 +49,24 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 						overflow: "auto",
 						...customStyles,
 						mt: { xs: 8, md: 0 },
+						padding: 0,
 					})}
 				>
+					<Stack
+						spacing={2}
+						sx={{
+							display: "flex",
+							flex: 1,
+							justifyItems: "center",
+							alignItems: "center",
+							mx: 0,
+							pb: 5,
+							mt: { xs: 3, md: 0 },
+						}}
+					>
+						<Header />
+						
+					</Stack>
 					<Stack
 						spacing={2}
 						sx={{
@@ -60,7 +79,7 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 							mt: { xs: 3, md: 0 },
 						}}
 					>
-						<Header />
+						
 						<Outlet />
 					</Stack>
 				</Box>
diff --git a/src/pages/AdminList/index.tsx b/src/pages/AdminList/index.tsx
index f579f75..30705dc 100644
--- a/src/pages/AdminList/index.tsx
+++ b/src/pages/AdminList/index.tsx
@@ -69,6 +69,7 @@ export default function AdminList() {
 					email,
 					phone,
 					registeredAddress,
+					
 				})
 			);
 			await dispatch(adminList());
@@ -85,18 +86,17 @@ export default function AdminList() {
 		{ id: "registeredAddress", label: "Address" },
 		{ id: "action", label: "Action", align: "center" },
 	];
-	const filteredAdmins = admins?.filter(
-		(admin) =>
-			admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-			admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
-			admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
-			admin.registeredAddress
-				.toLowerCase()
-				.includes(searchTerm.toLowerCase())
-	);
+	// const filteredAdmins = admins?.filter(
+	// 	(admin) =>
+	// 		admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+	// 		admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+	// 		admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
+	// 		admin.registeredAddress
+	// 			.toLowerCase()
+	// 			.includes(searchTerm.toLowerCase())
+	// );
 
-	const categoryRows = filteredAdmins?.length
-		? filteredAdmins?.map(
+	const categoryRows = admins?.map(
 				(
 					admin: {
 						id: string;
@@ -112,68 +112,14 @@ export default function AdminList() {
 					name: admin?.name,
 					email: admin?.email,
 					phone: admin?.phone,
-					registeredAddress: admin?.registeredAddress,
+					registeredAddress: admin?.registeredAddress || "NA",
 				})
 		  )
-		: [];
+	;
 
 	return (
 		<>
-			<Typography
-				component="h2"
-				variant="h6"
-				sx={{
-					fontWeight: 600,
-					mb: { xs: 2, sm: 0 },
-					width: "100%",
-					display: "flex",
-				}}
-			>
-				Admins
-			</Typography>
-
-			<Box
-				sx={{
-					width: "100%",
-					display: "flex",
-					flexDirection: { xs: "column", sm: "row" },
-					justifyContent: "space-between",
-					alignItems: "center",
-					mb: 2, // Add margin bottom for spacing
-				}}
-			>
-				<TextField
-					variant="outlined"
-					size="small"
-					placeholder="Search..."
-					value={searchTerm}
-					onChange={(e) => setSearchTerm(e.target.value)}
-					sx={{
-						width: { xs: "100%", sm: "30%" }, 
-						marginBottom: { xs: 2, sm: 0 }, 
-					}}
-					InputProps={{
-						startAdornment: (
-							<SearchIcon
-								sx={{ color: "#202020", marginRight: 1 }}
-							/>
-						),
-					}}
-				/>
-
-				<Button
-					variant="contained"
-					size="medium"
-					sx={{
-						textAlign: "center",
-						width: { xs: "100%", sm: "auto" },
-					}}
-					onClick={handleClickOpen}
-				>
-					Add Admin
-				</Button>
-			</Box>
-
+			
 			<CustomTable
 				columns={categoryColumns}
 				rows={categoryRows}
@@ -183,6 +129,8 @@ export default function AdminList() {
 				viewModal={viewModal}
 				setRowData={setRowData}
 				setModalOpen={setModalOpen}
+				tableType="admin"
+				handleClickOpen={handleClickOpen}
 			/>
 			<AddEditCategoryModal
 				open={modalOpen}
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 284d792..88ae995 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,60 +1,58 @@
 // src/pages/Dashboard
 
-import * as React from 'react';
-import { Box, CssBaseline, Typography } from '@mui/material';
+import * as React from "react";
+import { Box, CssBaseline, Typography } from "@mui/material";
 
 import {
-  chartsCustomizations,
-  dataGridCustomizations,
-  datePickersCustomizations,
-  treeViewCustomizations,
-} from './theme/customizations';
-import DashboardLayout from '../../layouts/DashboardLayout';
-import AppTheme from '../../shared-theme/AppTheme';
-import MainGrid from '../../components/MainGrid';
-import AdminList from '../AdminList';
+	chartsCustomizations,
+	dataGridCustomizations,
+	datePickersCustomizations,
+	treeViewCustomizations,
+} from "./theme/customizations";
+import DashboardLayout from "../../layouts/DashboardLayout";
+import AppTheme from "../../shared-theme/AppTheme";
+import MainGrid from "../../components/MainGrid";
+import AdminList from "../AdminList";
 
 const xThemeComponents = {
-  ...chartsCustomizations,
-  ...dataGridCustomizations,
-  ...datePickersCustomizations,
-  ...treeViewCustomizations,
+	...chartsCustomizations,
+	...dataGridCustomizations,
+	...datePickersCustomizations,
+	...treeViewCustomizations,
 };
 
 interface DashboardProps {
-  disableCustomTheme?: boolean;
+	disableCustomTheme?: boolean;
 }
 
-const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
-  return (
-    <AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
-      <CssBaseline enableColorScheme />
-      {!disableCustomTheme ? (
-        <><MainGrid /></>
-      ) : (
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor:'#202020',
-            height: '100vh',
-            textAlign: 'center',
-            padding: 2,
-          }}
-        >
-          
-        </Box>
-      )}
-    </AppTheme>
-  );
+const Dashboard: React.FC<DashboardProps> = ({
+	disableCustomTheme = false,
+}) => {
+	return (
+		<AppTheme
+			{...{ disableCustomTheme }}
+			themeComponents={xThemeComponents}
+		>
+			<CssBaseline enableColorScheme />
+			{!disableCustomTheme ? (
+				<>
+					<MainGrid />
+				</>
+			) : (
+				<Box
+					sx={{
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+						backgroundColor: "#202020",
+						height: "100vh",
+						textAlign: "center",
+						padding: 2,
+					}}
+				></Box>
+			)}
+		</AppTheme>
+	);
 };
 
 export default Dashboard;
-
-
-
-
-
-
-
diff --git a/src/pages/RoleList/index.tsx b/src/pages/RoleList/index.tsx
index 464afdd..4060a81 100644
--- a/src/pages/RoleList/index.tsx
+++ b/src/pages/RoleList/index.tsx
@@ -100,47 +100,7 @@ export default function RoleList() {
 
 	return (
 		<>
-			<Box
-				sx={{
-					width: "100%",
-					display: "flex",
-					flexDirection: { xs: "column", sm: "row" },
-					justifyContent: "space-between",
-					alignItems: "center",
-					mb: 2, 
-				}}
-			>
-				<TextField
-					variant="outlined"
-					size="small"
-					placeholder="Search..."
-					value={searchTerm}
-					onChange={(e) => setSearchTerm(e.target.value)}
-					sx={{
-						width: { xs: "100%", sm: "30%" },
-						marginBottom: { xs: 2, sm: 0 },
-					}}
-					InputProps={{
-						startAdornment: (
-							<SearchIcon
-								sx={{ color: "#202020", marginRight: 1 }}
-							/>
-						),
-					}}
-				/>
-				<Button
-					variant="contained"
-					size="small"
-					onClick={handleClickOpen}
-					sx={{
-						textAlign: "center",
-						width: { xs: "100%", sm: "auto" },
-					}}
-				>
-					Add Role
-				</Button>
-			</Box>
-
+			
 			{showPermissions ? (
 				<AddEditRolePage />
 			) : (
@@ -154,7 +114,8 @@ export default function RoleList() {
 					setRowData={setRowData}
 					setModalOpen={setModalOpen}
 					handleStatusToggle={handleStatusToggle}
-					tableType="roleList"
+					tableType="role"
+					handleClickOpen={handleClickOpen}
 				/>
 			)}
 		</>
diff --git a/src/pages/UserList/index.tsx b/src/pages/UserList/index.tsx
index 476bd59..519e770 100644
--- a/src/pages/UserList/index.tsx
+++ b/src/pages/UserList/index.tsx
@@ -1,678 +1,10 @@
-// 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>
-// 	);
-// }
-// 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 { adminList } from "../../redux/slices/adminSlice";
-// import { AppDispatch, RootState } from "../../redux/store/store";
-
-// export default function AdminList() {
-// 	const [searchQuery, setSearchQuery] = useState("");
-// 	const [currentPage, setCurrentPage] = useState(1);
-// 	const adminsPerPage = 10;
-
-// 	const dispatch = useDispatch<AppDispatch>();
-// 	const admins = useSelector((state: RootState) => state.adminReducer.admins);
-
-// 	useEffect(() => {
-// 		dispatch(adminList());
-// 	}, [dispatch]);
-
-// 	const staticAdmins = [
-// 		{
-// 			name: "John Doe",
-// 			location: "New York",
-// 			managerAssigned: "Alice Johnson",
-// 			vehicle: "Tesla Model S",
-// 			phone: "+1 234 567 8901",
-// 		},
-// 		{
-// 			name: "Jane Smith",
-// 			location: "Los Angeles",
-// 			managerAssigned: "Bob Brown",
-// 			vehicle: "Ford F-150",
-// 			phone: "+1 987 654 3210",
-// 		},
-// 		{
-// 			name: "Michael Brown",
-// 			location: "Chicago",
-// 			managerAssigned: "Sarah Lee",
-// 			vehicle: "Chevrolet Bolt",
-// 			phone: "+1 312 555 7890",
-// 		},
-// 		{
-// 			name: "Emily Davis",
-// 			location: "Houston",
-// 			managerAssigned: "Tom Wilson",
-// 			vehicle: "Nissan Leaf",
-// 			phone: "+1 713 444 5678",
-// 		},
-// 		{
-// 			name: "Daniel Martinez",
-// 			location: "Phoenix",
-// 			managerAssigned: "Jessica White",
-// 			vehicle: "BMW i3",
-// 			phone: "+1 602 999 4321",
-// 		},
-// 		{
-// 			name: "Sophia Miller",
-// 			location: "Philadelphia",
-// 			managerAssigned: "Mark Adams",
-// 			vehicle: "Audi e-tron",
-// 			phone: "+1 215 777 6543",
-// 		},
-// 		{
-// 			name: "James Anderson",
-// 			location: "San Antonio",
-// 			managerAssigned: "Emma Thomas",
-// 			vehicle: "Hyundai Kona EV",
-// 			phone: "+1 210 321 8765",
-// 		},
-// 		{
-// 			name: "James Anderson",
-// 			location: "San Antonio",
-// 			managerAssigned: "Emma Thomas",
-// 			vehicle: "Hyundai Kona EV",
-// 			phone: "+1 210 321 8765",
-// 		},
-// 	];
-
-// 	const adminData = admins.length ? admins : staticAdmins;
-
-// 	const filteredAdmins = adminData.filter((admin) =>
-// 		admin.name.toLowerCase().includes(searchQuery.toLowerCase())
-// 	);
-
-// 	const indexOfLastAdmin = currentPage * adminsPerPage;
-// 	const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage;
-// 	const currentAdmins = filteredAdmins.slice(
-// 		indexOfFirstAdmin,
-// 		indexOfLastAdmin
-// 	);
-
-// 	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",
-// 				}}
-// 			>
-// 				Charge stations
-// 			</Typography>
-
-// 			{/* Search & Buttons Section */}
-// 			<Box
-// 				sx={{
-// 					display: "flex",
-// 					gap: "16px",
-// 					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: "flex-end",
-// 						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
-// 					sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
-// 				>
-// 					Page Number :
-// 				</Typography>
-// 				<Pagination
-// 					count={Math.ceil(filteredAdmins.length / adminsPerPage)}
-// 					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>
-// 	);
-// }
 import React, { 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 { createUser, userList } from "../../redux/slices/userSlice";
+import { createUser, updateUser, userList } from "../../redux/slices/userSlice";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { string } from "prop-types";
 import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
@@ -709,7 +41,7 @@ export default function UserList() {
 		name: string;
 		email: string;
 		phone: string;
-		registeredAddress: string;
+		
 	}) => {
 		try {
 			await dispatch(createUser(data));
@@ -724,20 +56,19 @@ export default function UserList() {
 		id: string,
 		name: string,
 		email: string,
-		phone: string,
-		registeredAddress: string
+		phone: string
 	) => {
 		try {
 			await dispatch(
-				updateAdmin({
+				updateUser({
 					id,
 					name,
 					email,
 					phone,
-					registeredAddress,
+					
 				})
 			);
-			await dispatch(adminList());
+			await dispatch(userList());
 		} catch (error) {
 			console.error("Update failed", error);
 		}
@@ -784,34 +115,6 @@ export default function UserList() {
 
 	return (
 		<>
-			<Box
-				sx={{
-					width: "100%",
-					maxWidth: {
-						sm: "100%",
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-					},
-				}}
-			>
-				<Typography
-					component="h2"
-					variant="h6"
-					sx={{ mt: 2, fontWeight: 600 }}
-				>
-					Users
-				</Typography>
-				<Button
-					variant="contained"
-					size="medium"
-					sx={{ textAlign: "right" }}
-					onClick={handleClickOpen}
-				>
-					Add User
-				</Button>
-			</Box>
-
 			<CustomTable
 				columns={categoryColumns}
 				rows={categoryRows}
@@ -821,6 +124,8 @@ export default function UserList() {
 				viewModal={viewModal}
 				setRowData={setRowData}
 				setModalOpen={setModalOpen}
+				tableType="user"
+				handleClickOpen={handleClickOpen}
 			/>
 			<AddUserModal
 				open={modalOpen}
diff --git a/src/pages/VehicleList/index.tsx b/src/pages/VehicleList/index.tsx
index b9bd1a7..2f49cec 100644
--- a/src/pages/VehicleList/index.tsx
+++ b/src/pages/VehicleList/index.tsx
@@ -152,55 +152,6 @@ export default function VehicleList() {
 	return (
 		<>
 			
-				{/* Title and Add Category button */}
-				<Typography
-					component="h2"
-					variant="h6"
-					sx={{ mt: 2, fontWeight: 600 }}
-				>
-					Vehicles
-				</Typography>
-        <Box
-				sx={{
-					width: "100%",
-					display: "flex",
-					flexDirection: { xs: "column", sm: "row" },
-					justifyContent: "space-between",
-					alignItems: "center",
-					mb: 2, // Add margin bottom for spacing
-				}}
-			>
-				<TextField
-					variant="outlined"
-					size="small"
-					placeholder="Search..."
-					value={searchTerm}
-					onChange={(e) => setSearchTerm(e.target.value)}
-					sx={{
-						width: { xs: "100%", sm: "30%" }, 
-						marginBottom: { xs: 2, sm: 0 }, 
-					}}
-					InputProps={{
-						startAdornment: (
-							<SearchIcon
-								sx={{ color: "#202020", marginRight: 1 }}
-							/>
-						),
-					}}
-				/>
-				<Button
-                  variant="contained"
-                  size="medium"
-                  sx={{
-                    textAlign: "center",
-                    width: { xs: "100%", sm: "auto" },
-                  }}
-                  onClick={handleClickOpen}
-                >
-                  Add Vehicle
-                </Button>
-        </Box>
-			
 
 			<CustomTable
 				columns={categoryColumns}
@@ -211,6 +162,8 @@ export default function VehicleList() {
 				viewModal={viewModal}
 				setRowData={setRowData}
 				setModalOpen={setModalOpen}
+				tableType="vehicle"
+				handleClickOpen={handleClickOpen}
 			/>
 			{/* <AddEditCategoryModal
         open={modalOpen}
diff --git a/src/redux/slices/VehicleSlice.ts b/src/redux/slices/VehicleSlice.ts
index 68f3383..9db0869 100644
--- a/src/redux/slices/VehicleSlice.ts
+++ b/src/redux/slices/VehicleSlice.ts
@@ -120,11 +120,8 @@ const vehicleSlice = createSlice({
 				state.loading = true;
 			})
 			.addCase(updateVehicle.fulfilled, (state, action) => {
-				const updateVehicle = action.payload;
-				state.vehicles = state?.vehicles?.map((vehicle) =>
-					vehicle?.id === updateVehicle?.id ? updateVehicle : vehicle
-				);
 				state.loading = false;
+				state.error = action.payload;
 			})
 			.addCase(updateVehicle.rejected, (state) => {
 				state.loading = false;
diff --git a/src/redux/slices/adminSlice.ts b/src/redux/slices/adminSlice.ts
index 5d48ade..b2c6928 100644
--- a/src/redux/slices/adminSlice.ts
+++ b/src/redux/slices/adminSlice.ts
@@ -150,10 +150,7 @@ const adminSlice = createSlice({
 				state.isLoading = true;
 			})
 			.addCase(updateAdmin.fulfilled, (state, action) => {
-				const updatedAdmin = action.payload;
-				state.admins = state?.admins?.map((admin) =>
-					admin?.id === updatedAdmin?.id ? updatedAdmin : admin
-				);
+				
 				state.isLoading = false;
 			})
 			.addCase(updateAdmin.rejected, (state) => {
diff --git a/src/redux/slices/userSlice.ts b/src/redux/slices/userSlice.ts
index b9c85b6..2347971 100644
--- a/src/redux/slices/userSlice.ts
+++ b/src/redux/slices/userSlice.ts
@@ -5,14 +5,14 @@ import { toast } from "sonner";
 
 // Define TypeScript types
 interface User {
-	id: number;
+	id: string;
 	name: string;
 	email: string;
 	phone?: string;
 	// location?: string;
 	// managerAssigned?: string;
 	// vehicle?: string;
-	password:string;
+	password: string;
 }
 
 interface UserState {
@@ -55,12 +55,8 @@ export const createUser = createAsyncThunk<
 	{
 		name: string;
 		email: string;
-		password: string;
 		phone: string;
-		
-		// location?: string;
-		// managerAssigned?: string;
-		// vehicle?: string;
+
 	},
 	{ rejectValue: string }
 >("/CreateUser", async (data, { rejectWithValue }) => {
@@ -74,6 +70,23 @@ export const createUser = createAsyncThunk<
 	}
 });
 
+
+
+export const updateUser = createAsyncThunk(
+	"updateUser",
+	async ({ id, ...userData }: User, { rejectWithValue }) => {
+		try {
+			const response = await http.put(`/${id}/update-user`, userData);
+			toast.success("User updated successfully");
+			return response?.data;
+		} catch (error: any) {
+			toast.error("Error updating the user: " + error);
+			return rejectWithValue(
+				error.response?.data?.message || "An error occurred"
+			);
+		}
+	}
+);
 const userSlice = createSlice({
 	name: "fetchUsers",
 	initialState,
@@ -111,7 +124,16 @@ const userSlice = createSlice({
 				(state, action: PayloadAction<string | undefined>) => {
 					state.loading = false;
 				}
-			);
+			)
+			.addCase(updateUser.pending, (state) => {
+				state.loading = true;
+			})
+			.addCase(updateUser.fulfilled, (state, action) => {
+				state.loading = false;
+			})
+			.addCase(updateUser.rejected, (state) => {
+				state.loading = false;
+			});
 	},
 });
 
diff --git a/src/shared-theme/AppTheme.tsx b/src/shared-theme/AppTheme.tsx
index c6625f9..44ea419 100644
--- a/src/shared-theme/AppTheme.tsx
+++ b/src/shared-theme/AppTheme.tsx
@@ -1,59 +1,70 @@
-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, typography, shadows, shape } from './themePrimitives';
+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, typography, shadows, shape } from "./themePrimitives";
 
-declare module '@mui/styles/defaultTheme' {
-  interface DefaultTheme extends Theme {
-    vars: object
-  }
+declare module "@mui/styles/defaultTheme" {
+	interface DefaultTheme extends Theme {
+		vars: object;
+	}
 }
 
 interface AppThemeProps {
-  children: React.ReactNode;
-  /**
-   * This is for the docs site. You can ignore it or remove it.
-   */
-  disableCustomTheme?: boolean;
-  themeComponents?: ThemeOptions['components'];
+	children: React.ReactNode;
+	/**
+	 * This is for the docs site. You can ignore it or remove it.
+	 */
+	disableCustomTheme?: boolean;
+	themeComponents?: ThemeOptions["components"];
 }
 
 export default function AppTheme(props: AppThemeProps) {
-  const { children, disableCustomTheme, themeComponents } = props;
-  const theme = React.useMemo(() => {
-    return disableCustomTheme
-      ? {}
-      : createTheme({
-        // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
-        cssVariables: {
-          colorSchemeSelector: 'data-mui-color-scheme',
-          cssVarPrefix: 'template',
-        },
-        colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
-        typography,
-        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>
-  );
+	const { children, disableCustomTheme, themeComponents } = props;
+	const theme = React.useMemo(() => {
+		return disableCustomTheme
+			? {}
+			: createTheme({
+					palette: {
+						mode: "dark", // Enforcing dark mode across the app
+						background: {
+							default: "#121212", // Dark background color
+							paper: "#1e1e1e", // Darker background for cards, containers, etc.
+						},
+						text: {
+							primary: "#ffffff", // White text for readability
+							secondary: "#b0b0b0", // Lighter secondary text
+						},
+					},
+					cssVariables: {
+						colorSchemeSelector: "data-mui-color-scheme",
+						cssVarPrefix: "template",
+					},
+					typography,
+					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>
+	);
 }

From 165f1fd4eaeae01a0d29ebef24b10e31995eff68 Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Wed, 5 Mar 2025 18:27:32 +0530
Subject: [PATCH 4/6] update ui for dashboard

---
 src/components/LineChartCard/index.tsx    | 14 +++++++-------
 src/components/OptionsMenu/index.tsx      |  7 +++++--
 src/components/ResourcePieChart/index.tsx |  6 +++---
 src/components/SessionsChart/index.tsx    | 14 +++++++-------
 src/components/StatCard/index.tsx         |  6 +++---
 src/components/barChartCard/index.tsx     | 14 +++++++-------
 6 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/LineChartCard/index.tsx b/src/components/LineChartCard/index.tsx
index 069869c..fcaf4a5 100644
--- a/src/components/LineChartCard/index.tsx
+++ b/src/components/LineChartCard/index.tsx
@@ -43,20 +43,20 @@ export default function LineChartCard() {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<div
 					style={{
 						display: "flex",
 						alignItems: "center",
-						color: "#202020",
+						color: "#F2F2F2",
 					}}
 				>
 					<Typography
 						variant="h6"
 						align="left"
-						color="#202020"
+						color="#F2F2F2"
 						sx={{
 							fontFamily: "Gilroy",
 							fontWeight: 500,
@@ -70,7 +70,7 @@ export default function LineChartCard() {
 						sx={{
 							mt: 2,
 							mb: 2,
-							backgroundColor: "#FFFFFF",
+							backgroundColor: "#202020",
 							marginLeft: "auto",
 							marginRight: "16px",
 							display: "flex",
@@ -81,7 +81,7 @@ export default function LineChartCard() {
 							border: "1px solid #454545",
 
 							padding: "4px 8px",
-							color: "#FFFFFF",
+							color: "#F2F2F2",
 						}}
 					>
 						<Typography
@@ -90,13 +90,13 @@ export default function LineChartCard() {
 								fontWeight: 500,
 								fontSize: "14px",
 								lineHeight: "24px",
-								color: "#202020",
+								color: "#F2F2F2",
 								p: "4px",
 							}}
 						>
 							Weekly
 						</Typography>
-						<ArrowDropDownIcon sx={{ color: "#202020" }} />
+						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 					</Box>
 				</div>
 
diff --git a/src/components/OptionsMenu/index.tsx b/src/components/OptionsMenu/index.tsx
index 8ed491b..6501a32 100644
--- a/src/components/OptionsMenu/index.tsx
+++ b/src/components/OptionsMenu/index.tsx
@@ -77,9 +77,12 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 					[`& .${dividerClasses.root}`]: {
 						margin: "4px -4px",
 					},
+					backgroundColor:"#202020"
 				}}
 			>
-				<MenuItem onClick={handleProfile}>Profile</MenuItem>
+				<MenuItem onClick={handleProfile} >
+					Profile
+				</MenuItem>
 				{/* <MenuItem onClick={handleClose}>My account</MenuItem>
 				<Divider />
 				<MenuItem onClick={handleClose}>Add another account</MenuItem>
@@ -99,7 +102,7 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 							e.stopPropagation();
 							setLogoutModal(true);
 						}}
-						sx={{color:"red"}}
+						sx={{ color: "red" }}
 					>
 						Logout
 					</ListItemText>
diff --git a/src/components/ResourcePieChart/index.tsx b/src/components/ResourcePieChart/index.tsx
index fa14a6d..f257558 100644
--- a/src/components/ResourcePieChart/index.tsx
+++ b/src/components/ResourcePieChart/index.tsx
@@ -32,14 +32,14 @@ export default function ResourcePieChart() {
 				flexGrow: 1,
 				width: "100%",
 				height: "100%",
-				backgroundColor: "#F2F2F2",
+				backgroundColor: "#202020",
 			}}
 		>
 			<CardContent>
 				<Typography
 					component="h2"
 					variant="subtitle2"
-					color="#202020"
+					color="#F2F2F2"
 					sx={{
 						fontFamily: "Gilroy",
 						fontWeight: 500,
@@ -93,7 +93,7 @@ export default function ResourcePieChart() {
 										borderRadius: "50%",
 									}}
 								/>
-								<Typography variant="body2" color="#202020">
+								<Typography variant="body2" color="#F2F2F2">
 									{entry.title}
 								</Typography>
 							</Stack>
diff --git a/src/components/SessionsChart/index.tsx b/src/components/SessionsChart/index.tsx
index 22c7ddb..381df18 100644
--- a/src/components/SessionsChart/index.tsx
+++ b/src/components/SessionsChart/index.tsx
@@ -12,7 +12,7 @@ export default function SessionsChart() {
 			sx={{
 				width: "100%",
 				height: "100%",
-				backgroundColor: "#F2F2F2",
+				backgroundColor: "#202020",
 				p: 2,
 			}}
 		>
@@ -20,7 +20,7 @@ export default function SessionsChart() {
 				<Typography
 					variant="h6"
 					align="left"
-					color="#202020"
+					color="#F2F2F2"
 					sx={{
 						fontFamily: "Gilroy",
 						fontWeight: 500,
@@ -36,7 +36,7 @@ export default function SessionsChart() {
 					sx={{
 						mt: 2,
 						mb: 2,
-						backgroundColor: "#FFFFFF",
+						backgroundColor: "#202020",
 						fontSize: "14px",
 						lineHeight: "20px",
 						width: { xs: "100%" },
@@ -55,13 +55,13 @@ export default function SessionsChart() {
 							fontWeight: 500,
 							fontSize: "14px",
 							lineHeight: "24px",
-							color: "#202020",
+							color: "#F2F2F2",
 							p: "4px",
 						}}
 					>
 						Delhi NCR EV Station
 					</Typography>
-					<ArrowDropDownIcon sx={{ color: "#202020" }} />
+					<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 				</Box>
 
 				{/* Grid container for the four boxes */}
@@ -86,8 +86,8 @@ export default function SessionsChart() {
 								height: "84px",
 								borderRadius: "8px",
 								p: "12px 16px",
-								backgroundColor: "#FFFFFF",
-								color: "#202020",
+								backgroundColor: "#272727",
+								color: "#F2F2F2",
 							}}
 						>
 							<Typography
diff --git a/src/components/StatCard/index.tsx b/src/components/StatCard/index.tsx
index 0a1fd21..65ad3cc 100644
--- a/src/components/StatCard/index.tsx
+++ b/src/components/StatCard/index.tsx
@@ -18,13 +18,13 @@ export default function StatCard({ title, value }: StatCardProps) {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<Typography
 					component="h2"
 					variant="subtitle2"
-					color="#202020"
+					color="#F2F2F2"
 					gutterBottom
 				>
 					{title}
@@ -32,7 +32,7 @@ export default function StatCard({ title, value }: StatCardProps) {
 				<Typography
 					component="h1"
 					variant="body1"
-					color="#202020"
+					color="#F2F2F2"
 					fontSize={30}
 					fontWeight={700}
 					gutterBottom
diff --git a/src/components/barChartCard/index.tsx b/src/components/barChartCard/index.tsx
index 47682fd..156f343 100644
--- a/src/components/barChartCard/index.tsx
+++ b/src/components/barChartCard/index.tsx
@@ -30,20 +30,20 @@ export default function RoundedBarChart() {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<div
 					style={{
 						display: "flex",
 						alignItems: "center",
-						color: "#202020",
+						color: "#F2F2F2",
 					}}
 				>
 					<Typography
 						variant="h6"
 						align="left"
-						color="#202020"
+						color="#F2F2F2"
 						sx={{
 							fontFamily: "Gilroy",
 							fontWeight: 500,
@@ -57,7 +57,7 @@ export default function RoundedBarChart() {
 						sx={{
 							mt: 2,
 							mb: 2,
-							backgroundColor: "#FFFFFF",
+							backgroundColor: "#202020",
 							marginLeft: "auto",
 							marginRight: "16px",
 							display: "flex",
@@ -68,7 +68,7 @@ export default function RoundedBarChart() {
 							border: "1px solid #454545",
 
 							padding: "4px 8px",
-							color: "#202020",
+							color: "#F2F2F2",
 						}}
 					>
 						<Typography
@@ -77,13 +77,13 @@ export default function RoundedBarChart() {
 								fontWeight: 500,
 								fontSize: "14px",
 								lineHeight: "24px",
-								color: "#202020",
+								color: "#F2F2F2",
 								p: "4px",
 							}}
 						>
 							Monthly
 						</Typography>
-						<ArrowDropDownIcon sx={{ color: "#202020" }} />
+						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 					</Box>
 				</div>
 				<BarChart

From f74ee5b25ad73493c0827599ce2e8de4e7b6c6de Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Wed, 5 Mar 2025 18:28:46 +0530
Subject: [PATCH 5/6] minor changes

---
 src/components/CustomTable/index.tsx | 313 ---------------------------
 1 file changed, 313 deletions(-)

diff --git a/src/components/CustomTable/index.tsx b/src/components/CustomTable/index.tsx
index c34da95..0f24bd7 100644
--- a/src/components/CustomTable/index.tsx
+++ b/src/components/CustomTable/index.tsx
@@ -1,317 +1,4 @@
-// import * as React from "react";
-// import { styled } from "@mui/material/styles";
-// import Table from "@mui/material/Table";
-// import TableBody from "@mui/material/TableBody";
-// import TableCell, { tableCellClasses } from "@mui/material/TableCell";
-// import TableContainer from "@mui/material/TableContainer";
-// import TableHead from "@mui/material/TableHead";
-// import TableRow from "@mui/material/TableRow";
-// import Paper, { paperClasses } from "@mui/material/Paper";
-// import { adminList, deleteAdmin } from "../../redux/slices/adminSlice";
-// import { useDispatch } from "react-redux";
-// import {
-// 	Box,
-// 	Button,
-// 	dividerClasses,
-// 	IconButton,
-// 	listClasses,
-// 	Menu,
-// } from "@mui/material";
-// import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
-// import DeleteModal from "../Modals/DeleteModal";
-// import { AppDispatch } from "../../redux/store/store";
-// import ViewModal from "../Modals/ViewModal";
 
-// // Styled components for customization
-// const StyledTableCell = styled(TableCell)(({ theme }) => ({
-// 	[`&.${tableCellClasses.head}`]: {
-// 		backgroundColor: " #1565c0",
-// 		color: theme.palette.common.white,
-// 	},
-// 	[`&.${tableCellClasses.body}`]: {
-// 		fontSize: 14,
-// 	},
-// }));
-
-// const StyledTableRow = styled(TableRow)(({ theme }) => ({
-// 	"&:nth-of-type(odd)": {
-// 		backgroundColor: theme.palette.action.hover,
-// 	},
-// 	"&:last-child td, &:last-child th": {
-// 		border: 0,
-// 	},
-// }));
-
-// export interface Column {
-// 	id: string;
-// 	label: string;
-// 	align?: "left" | "center" | "right";
-// }
-
-// interface Row {
-// 	[key: string]: any;
-// }
-
-// interface CustomTableProps {
-// 	columns: Column[];
-// 	rows: Row[];
-// 	setDeleteModal: Function;
-// 	setRowData: Function;
-// 	setModalOpen: Function;
-// 	viewModal: boolean;
-// 	setViewModal: Function;
-// 	deleteModal: boolean;
-// 	handleStatusToggle: (id: string, currentStatus: number) => void;
-// 	tableType?: string;
-// }
-
-// const CustomTable: React.FC<CustomTableProps> = ({
-// 	columns,
-// 	rows,
-// 	setDeleteModal,
-// 	deleteModal,
-// 	viewModal,
-// 	setRowData,
-// 	setViewModal,
-// 	setModalOpen,
-// 	handleStatusToggle,
-// 	tableType,
-// }) => {
-// 	const dispatch = useDispatch<AppDispatch>();
-// 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-// 	const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
-
-// 	const open = Boolean(anchorEl);
-
-// 	const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
-// 		setAnchorEl(event.currentTarget);
-// 		setSelectedRow(row); // Ensure the row data is set
-// 		setRowData(row);
-// 	};
-
-// 	const handleClose = () => {
-// 		setAnchorEl(null);
-// 	};
-
-// 	const isImage = (value: any) => {
-// 		if (typeof value === "string") {
-// 			return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image
-// 		}
-// 		return false;
-// 	};
-
-// 	const handleDeleteButton = (id: string | undefined) => {
-// 		if (!id) console.error("ID not found", id);
-
-// 		dispatch(deleteAdmin(id || ""));
-// 		setDeleteModal(false); // Close the modal only after deletion
-// 		handleClose();
-// 	};
-
-// 	const handleViewButton = (id: string | undefined) => {
-// 		if (!id) console.error("ID not found", id);
-
-// 		dispatch(adminList());
-// 		setViewModal(false);
-// 	};
-
-// 	const handleToggleStatus = () => {
-// 		if (selectedRow) {
-// 			// Toggle the opposite of current status
-// 			const newStatus = selectedRow.statusValue === 1 ? 0 : 1;
-// 			handleStatusToggle(selectedRow.id, newStatus);
-// 		}
-// 		handleClose();
-// 	};
-
-// 	return (
-// 		<Box sx={{ overflowX: "auto", width: "100%" }}>
-// 			<TableContainer component={Paper}>
-// 				<Table
-// 					sx={{
-// 						minWidth: 700,
-// 						width: "100%",
-// 						tableLayout: "auto",
-// 					}}
-// 					aria-label="customized table"
-// 				>
-// 					<TableHead>
-// 						<TableRow>
-// 							{columns.map((column) => (
-// 								<StyledTableCell
-// 									key={column.id}
-// 									align={column.align || "left"}
-// 									sx={{
-// 										whiteSpace: "nowrap", // Prevent wrapping
-// 										// fontSize: { xs: "12px", sm: "14px" },
-// 										fontSize: {
-// 											xs: "10px",
-// 											sm: "12px",
-// 											md: "14px",
-// 										}, // Adjust font size responsively
-// 										padding: { xs: "8px", sm: "12px" },
-// 									}}
-// 								>
-// 									{column.label}
-// 								</StyledTableCell>
-// 							))}
-// 						</TableRow>
-// 					</TableHead>
-// 					<TableBody>
-// 						{rows.map((row, rowIndex) => (
-// 							<StyledTableRow key={rowIndex}>
-// 								{columns.map((column) => (
-// 									<StyledTableCell
-// 										key={column.id}
-// 										align={column.align || "left"}
-// 										sx={{
-// 											whiteSpace: "nowrap", // Prevent wrapping
-// 											fontSize: {
-// 												xs: "10px",
-// 												sm: "12px",
-// 												md: "14px",
-// 											}, // Adjust font size responsively
-// 											padding: { xs: "8px", sm: "12px" },
-// 										}}
-// 									>
-// 										{isImage(row[column.id]) ? (
-// 											<img
-// 												src={row[column.id]}
-// 												alt="Row "
-// 												style={{
-// 													width: "50px",
-// 													height: "50px",
-// 													objectFit: "cover",
-// 												}}
-// 											/>
-// 										) : column.id !== "action" ? (
-// 											row[column.id]
-// 										) : (
-// 											<IconButton
-// 												onClick={(e) => {
-// 													handleClick(e, row);
-// 													setRowData(row); // Store the selected row
-// 												}}
-// 											>
-// 												<MoreVertRoundedIcon />
-// 											</IconButton>
-// 										)}
-// 									</StyledTableCell>
-// 								))}
-// 							</StyledTableRow>
-// 						))}
-// 					</TableBody>
-// 				</Table>
-// 			</TableContainer>
-
-// 			{/* Menu Actions */}
-// 			{open && (
-// 				<Menu
-// 					anchorEl={anchorEl}
-// 					id="menu"
-// 					open={open}
-// 					onClose={handleClose}
-// 					onClick={handleClose}
-// 					transformOrigin={{ horizontal: "right", vertical: "top" }}
-// 					anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
-// 					sx={{
-// 						[`& .${listClasses.root}`]: {
-// 							padding: "4px",
-// 						},
-// 						[`& .${paperClasses.root}`]: {
-// 							padding: 0,
-// 						},
-// 						[`& .${dividerClasses.root}`]: {
-// 							margin: "4px -4px",
-// 						},
-// 					}}
-// 				>
-// 					<Box
-// 						sx={{
-// 							display: "flex",
-// 							flexDirection: "column",
-// 							justifyContent: "flex-start",
-// 						}}
-// 					>
-// 						<Button
-// 							variant="text"
-// 							onClick={(e) => {
-// 								e.stopPropagation();
-// 								setViewModal(true);
-// 							}}
-// 							color="primary"
-// 							sx={{
-// 								justifyContent: "flex-start",
-// 								py: 0,
-// 								textTransform: "capitalize",
-// 							}}
-// 						>
-// 							View
-// 						</Button>
-// 						{viewModal && (
-// 							<ViewModal
-// 								handleView={() =>
-// 									handleViewButton(selectedRow?.id)
-// 								}
-// 								open={viewModal}
-// 								setViewModal={setViewModal}
-// 								id={selectedRow?.id}
-// 							/>
-// 						)}
-// 						<Button
-// 							variant="text"
-// 							onClick={() => setModalOpen(true)}
-// 							color="primary"
-// 							sx={{
-// 								justifyContent: "flex-start",
-// 								py: 0,
-// 								textTransform: "capitalize",
-// 							}}
-// 						>
-// 							Edit
-// 						</Button>
-
-// 						{tableType === "roleList" && (
-// 							<Button variant="text" onClick={handleToggleStatus}>
-// 								{selectedRow.statusValue === 1
-// 									? "Deactivate"
-// 									: "Activate"}
-// 							</Button>
-// 						)}
-
-// 						<Button
-// 							variant="text"
-// 							onClick={(e) => {
-// 								e.stopPropagation();
-// 								setDeleteModal(true);
-// 							}}
-// 							color="error"
-// 							sx={{
-// 								justifyContent: "flex-start",
-// 								py: 0,
-// 								textTransform: "capitalize",
-// 							}}
-// 						>
-// 							Delete
-// 						</Button>
-// 						{deleteModal && (
-// 							<DeleteModal
-// 								handleDelete={() =>
-// 									handleDeleteButton(selectedRow?.id)
-// 								}
-// 								open={deleteModal}
-// 								setDeleteModal={setDeleteModal}
-// 								id={selectedRow?.id}
-// 							/>
-// 						)}
-// 					</Box>
-// 				</Menu>
-// 			)}
-// 		</Box>
-// 	);
-// };
-
-// export default CustomTable;
 import * as React from "react";
 import { styled } from "@mui/material/styles";
 import Table from "@mui/material/Table";

From e0cb35e783f9202170af9fa8ae1f0016925b30a9 Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Thu, 6 Mar 2025 18:41:53 +0530
Subject: [PATCH 6/6] Profile Role page changes

---
 src/components/Header/index.tsx             |  45 +-
 src/components/MainGrid/index.tsx           |   2 +-
 src/components/OptionsMenu/index.tsx        |  98 +--
 src/layouts/DashboardLayout/index.tsx       |  21 +-
 src/pages/AddEditRolePage/index.tsx         |  26 +-
 src/pages/Auth/Login/index.tsx              |   1 -
 src/pages/ProfilePage/index.tsx             |  54 +-
 src/shared-theme/AppTheme.tsx               |   2 +-
 src/shared-theme/customizations/surfaces.js |   2 +-
 src/shared-theme/themePrimitives.js         | 690 +++++++++---------
 src/shared-theme/themePrimitives.ts         | 729 ++++++++++----------
 11 files changed, 808 insertions(+), 862 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 116c3ce..83dca3c 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -14,6 +14,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { fetchAdminProfile } from "../../redux/slices/profileSlice";
 import OptionsMenu from "../OptionsMenu";
+import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 
 export default function Header() {
 	const [showNotifications, setShowNotifications] = React.useState(false);
@@ -34,16 +35,16 @@ export default function Header() {
 		<Box
 			sx={{
 				width: "100%",
-				height: "84px",
-				backgroundColor: "#1C1C1C",
-				//padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size
+				// height: "84px",
+				// backgroundColor: "#1C1C1C",
+				padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size // error on this
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "space-between",
 				flexDirection: { xs: "column", sm: "row" },
+				// padding:"0px"
 			}}
 		>
-			<Box sx={{ flexGrow: 1 }} />
 			<Stack
 				direction="row"
 				spacing={3}
@@ -58,7 +59,7 @@ export default function Header() {
 				{/* Search Bar */}
 				<Box
 					sx={{
-						width: { xs: "100%", sm: "360px" },
+						// width: { xs: "100%", sm: "360px" },
 						height: "44px",
 
 						borderRadius: "8px",
@@ -88,30 +89,20 @@ export default function Header() {
 						display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
 					}}
 				>
-					{/* Custom Bell Icon */}
-					<MenuButton
-						showBadge
-						aria-label="Open notifications"
-						onClick={toggleNotifications}
-					>
-						<NotificationsRoundedIcon />
-					</MenuButton>
+				
+					<NotificationsNoneIcon onClick={toggleNotifications} />
+					<Avatar
+						alt="User Avatar"
+						src="/avatar.png"
+						sx={{ width: 36, height: 36 }}
+					/>
+					<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
+						{user?.name || "No Admin"}
+					</Typography>
 
-					<Divider flexItem sx={{ backgroundColor: "#202020" }} />
-					<Stack direction="row" spacing={1.5} alignItems="center">
-						<Avatar
-							alt="User Avatar"
-							src="/avatar.png"
-							sx={{ width: 36, height: 36 }}
-						/>
-						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
-							{user?.name || "No Admin"}
-						</Typography>
-
-						<OptionsMenu />
-					</Stack>
-					{/* <ColorModeIconDropdown /> */}
+					<OptionsMenu />
 				</Stack>
+
 				{showNotifications && (
 					<Box
 						sx={{
diff --git a/src/components/MainGrid/index.tsx b/src/components/MainGrid/index.tsx
index b522cc8..491dc4e 100644
--- a/src/components/MainGrid/index.tsx
+++ b/src/components/MainGrid/index.tsx
@@ -48,7 +48,7 @@ export default function MainGrid() {
 				spacing={2}
 				columns={12}
 				
-				sx={{ mb: (theme) => theme.spacing(2) }}
+				// sx={{ mb: (theme) => theme.spacing(2) }}
 			>
 				{data.map((card, index) => (
 					<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>
diff --git a/src/components/OptionsMenu/index.tsx b/src/components/OptionsMenu/index.tsx
index 6501a32..42a89f9 100644
--- a/src/components/OptionsMenu/index.tsx
+++ b/src/components/OptionsMenu/index.tsx
@@ -1,22 +1,15 @@
 import * as React from "react";
 import { styled } from "@mui/material/styles";
-import Divider, { dividerClasses } from "@mui/material/Divider";
 import Menu from "@mui/material/Menu";
 import MuiMenuItem from "@mui/material/MenuItem";
-import { paperClasses } from "@mui/material/Paper";
-import { listClasses } from "@mui/material/List";
-import ListItemText from "@mui/material/ListItemText";
-import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
-import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
-import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
-import MenuButton from "../MenuButton";
-import { Avatar } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Link from "@mui/material/Link";
 import Logout from "../LogOutFunction/LogOutFunction";
-import { ArrowDropDownIcon } from "@mui/x-date-pickers";
-
+import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
+import { ListItemText } from "@mui/material";
 const MenuItem = styled(MuiMenuItem)({
 	margin: "2px 0",
+	borderBottom: "none",
 });
 
 export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
@@ -29,74 +22,44 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 	const handleClose = () => {
 		setAnchorEl(null);
 	};
-	//Eknoor singh and jaanvi
-	//date:- 12-Feb-2025
-	//Made a navigation page for the profile page
-	const navigate = useNavigate();
-	const handleProfile = () => {
-		navigate("/panel/profile");
-	};
-
-	//jaanvi
-	//date:- 13-Feb-2025
 
 	return (
 		<React.Fragment>
-			<MenuButton
-				aria-label="Open menu"
-				onClick={handleClick}
-				sx={{ borderColor: "transparent" }}
-			>
-				{/* {avatar ? (
-					<MoreVertRoundedIcon />
-				) : (
-					<Avatar
-						sizes="small"
-						alt="Super Admin"
-						src="/static/images/avatar/7.jpg"
-						sx={{ width: 36, height: 36 }}
-					/>
-				)} */}
-				<ArrowDropDownIcon />
-			</MenuButton>
+			<ExpandMoreIcon onClick={handleClick} />
 			<Menu
 				anchorEl={anchorEl}
-				id="menu"
+				id="top-menu"
 				open={open}
 				onClose={handleClose}
 				onClick={handleClose}
+				slotProps={{
+					paper: {
+						elevation: 0,
+						sx: {
+							overflow: "visible",
+							filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+							mt: 1.5,
+							"& .MuiMenuItem-root": {
+								borderBottom: "none", // Remove any divider under menu items
+							},
+						},
+					},
+				}}
 				transformOrigin={{ horizontal: "right", vertical: "top" }}
 				anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
-				sx={{
-					[`& .${listClasses.root}`]: {
-						padding: "4px",
-					},
-					[`& .${paperClasses.root}`]: {
-						padding: 0,
-					},
-					[`& .${dividerClasses.root}`]: {
-						margin: "4px -4px",
-					},
-					backgroundColor:"#202020"
-				}}
 			>
-				<MenuItem onClick={handleProfile} >
-					Profile
-				</MenuItem>
-				{/* <MenuItem onClick={handleClose}>My account</MenuItem>
-				<Divider />
-				<MenuItem onClick={handleClose}>Add another account</MenuItem>
-				<MenuItem onClick={handleClose}>Settings</MenuItem> */}
-				{/* <Divider /> */}
-				<MenuItem
-					onClick={handleClose}
+				<Link
+					href={"/panel/profile"}
+					underline="none"
 					sx={{
-						[`& .${listItemIconClasses.root}`]: {
-							ml: "auto",
-							minWidth: 0,
+						"&::before": {
+							display: "none",
 						},
 					}}
 				>
+					<MenuItem onClick={handleClose}>Profile</MenuItem>
+				</Link>
+				<MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}>
 					<ListItemText
 						onClick={(e) => {
 							e.stopPropagation();
@@ -106,14 +69,11 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 					>
 						Logout
 					</ListItemText>
+
 					<Logout
 						setLogoutModal={setLogoutModal}
 						logoutModal={logoutModal}
 					/>
-
-					{/* <ListItemIcon>
-						<LogoutRoundedIcon fontSize="small" />
-					</ListItemIcon> */}
 				</MenuItem>
 			</Menu>
 		</React.Fragment>
diff --git a/src/layouts/DashboardLayout/index.tsx b/src/layouts/DashboardLayout/index.tsx
index 3fe127c..6cb37b1 100644
--- a/src/layouts/DashboardLayout/index.tsx
+++ b/src/layouts/DashboardLayout/index.tsx
@@ -16,7 +16,7 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 			<Box
 				sx={{
 					display: "flex",
-					height: "100vh",
+					height: "auto",
 					flexDirection: { xs: "column", md: "row" },
 					width: "100%",
 					margin: 0,
@@ -50,23 +50,12 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 						...customStyles,
 						mt: { xs: 8, md: 0 },
 						padding: 0,
+						
 					})}
 				>
-					<Stack
-						spacing={2}
-						sx={{
-							display: "flex",
-							flex: 1,
-							justifyItems: "center",
-							alignItems: "center",
-							mx: 0,
-							pb: 5,
-							mt: { xs: 3, md: 0 },
-						}}
-					>
-						<Header />
 						
-					</Stack>
+						
+					
 					<Stack
 						spacing={2}
 						sx={{
@@ -79,7 +68,7 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 							mt: { xs: 3, md: 0 },
 						}}
 					>
-						
+						<Header />
 						<Outlet />
 					</Stack>
 				</Box>
diff --git a/src/pages/AddEditRolePage/index.tsx b/src/pages/AddEditRolePage/index.tsx
index 3ee8144..9a50015 100644
--- a/src/pages/AddEditRolePage/index.tsx
+++ b/src/pages/AddEditRolePage/index.tsx
@@ -137,8 +137,8 @@ const AddEditRolePage: React.FC = () => {
 					display: "flex",
 					justifyContent: "space-between",
 					alignItems: "center",
-					backgroundColor: "#1976D2",
-					color: "#fff",
+					backgroundColor: "#52ACDF",
+					color: "#fffff",
 					p: 2,
 					borderRadius: "8px",
 					mb: 2,
@@ -147,18 +147,14 @@ const AddEditRolePage: React.FC = () => {
 				<Typography variant="h6" fontWeight={600}>
 					Role Permissions
 				</Typography>
-				<Button
-					variant="contained"
-					color="secondary"
-					onClick={handleBack}
-				>
+				<Button variant="contained" onClick={handleBack}>
 					Back
 				</Button>
 			</Box>
 
 			{/* Role Name Input */}
-			<Box sx={{ mb: 2}}>
-				<label >Role Name</label>
+			<Box sx={{ mb: 2 }}>
+				<label>Role Name</label>
 				<TextField
 					placeholder="Enter role name"
 					value={roleName}
@@ -166,20 +162,22 @@ const AddEditRolePage: React.FC = () => {
 					fullWidth
 					required
 					variant="outlined"
-					
-					sx={{ mb: 2 ,mt:2}}
+					sx={{ mb: 2, mt: 2 }}
 				/>
 			</Box>
 
 			{/* Table Container */}
 			<TableContainer
 				component={Paper}
-				sx={{ borderRadius: "8px", overflow: "hidden" }}
+				sx={{
+					borderRadius: "8px",
+					overflow: "hidden",
+				}}
 			>
 				<Table>
 					{/* Table Head */}
 					<TableHead>
-						<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
+						<TableRow sx={{ backgroundColor: "#1C1C1C" }}>
 							<TableCell
 								sx={{ fontWeight: "bold", width: "30%" }}
 							>
@@ -200,7 +198,7 @@ const AddEditRolePage: React.FC = () => {
 								key={index}
 								sx={{
 									"&:nth-of-type(odd)": {
-										backgroundColor: "#FAFAFA",
+										backgroundColor: "#1C1C1C",
 									},
 								}}
 							>
diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx
index 89f01cb..cf478df 100644
--- a/src/pages/Auth/Login/index.tsx
+++ b/src/pages/Auth/Login/index.tsx
@@ -54,7 +54,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 			}
 		} catch (error: any) {
 			console.log("Login failed:", error);
-			toast.error("Login failed: " + error);
 		}
 	};
 
diff --git a/src/pages/ProfilePage/index.tsx b/src/pages/ProfilePage/index.tsx
index f1d2f32..f6567a2 100644
--- a/src/pages/ProfilePage/index.tsx
+++ b/src/pages/ProfilePage/index.tsx
@@ -46,7 +46,12 @@ const ProfilePage = () => {
 			<Typography variant="h4" gutterBottom>
 				Account Info
 			</Typography>
-			<Card sx={{ maxWidth: "100%", margin: "0 auto" }}>
+			<Card
+				sx={{
+					maxWidth: "100%",
+					margin: "0 auto",
+				}}
+			>
 				<CardContent>
 					<Stack direction="column" spacing={2}>
 						<Stack
@@ -62,14 +67,11 @@ const ProfilePage = () => {
 							<Box>
 								<Typography
 									variant="body1"
-									sx={{ color: "#202020" }}
+									sx={{ color: "#FFFFFF" }}
 								>
 									{user?.name || "No Admin"}
 								</Typography>
-								<Typography
-									variant="body2"
-									color="text.secondary"
-								>
+								<Typography variant="body2" color="#D9D8D8">
 									{user?.userType || "N/A"}
 								</Typography>
 							</Box>
@@ -86,65 +88,61 @@ const ProfilePage = () => {
 						>
 							<Typography
 								variant="body1"
-								sx={{ color: "#202020" }}
+								sx={{ color: "#FFFFFF" }}
 							>
 								Personal Information
 							</Typography>
-							<Link href="/edit-profile" underline="hover">
+							<Link
+								variant="body1"
+								href="/edit-profile"
+				
+								color="#52ACDF"
+								
+							>
 								Edit
 							</Link>
 						</Stack>
 
-						<Grid container >
+						<Grid container>
 							<Grid item xs={12} sm={4}>
 								<Typography
 									variant="body1"
-									sx={{ color: "#202020" }}
+									sx={{ color: "#FFFFFF" }}
 								>
-									Name:
+									Full Name:
 								</Typography>
-								<Typography
-									variant="body2"
-									color="text.secondary"
-								>
+								<Typography variant="body2" color="#D9D8D8">
 									{user?.name || "N/A"}
 								</Typography>
 							</Grid>
 							<Grid item xs={12} sm={4}>
 								<Typography
 									variant="body1"
-									sx={{ color: "#202020" }}
+									sx={{ color: "#FFFFFF" }}
 								>
 									Phone:
 								</Typography>
-								<Typography
-									variant="body2"
-									color="text.secondary"
-								>
+								<Typography variant="body2" color="#D9D8D8">
 									{user?.phone || "N/A"}
 								</Typography>
 							</Grid>
 							<Grid item xs={12} sm={4}>
 								<Typography
 									variant="body1"
-									sx={{ color: "#202020" }}
+									sx={{ color: "#FFFFFF" }}
 								>
 									Email:
 								</Typography>
-								<Typography
-									variant="body2"
-									color="text.secondary"
-								>
+								<Typography variant="body2" color="#D9D8D8">
 									{user?.email || "N/A"}
 								</Typography>
 							</Grid>
 						</Grid>
 
-
-						<Typography variant="body1" sx={{ color: "#202020" }}>
+						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
 							Bio:
 						</Typography>
-						<Typography variant="body2" color="text.secondary">
+						<Typography variant="body2" color="#D9D8D8">
 							{user?.bio || "No bio available."}
 						</Typography>
 					</Stack>
diff --git a/src/shared-theme/AppTheme.tsx b/src/shared-theme/AppTheme.tsx
index 44ea419..8171aab 100644
--- a/src/shared-theme/AppTheme.tsx
+++ b/src/shared-theme/AppTheme.tsx
@@ -32,7 +32,7 @@ export default function AppTheme(props: AppThemeProps) {
 					palette: {
 						mode: "dark", // Enforcing dark mode across the app
 						background: {
-							default: "#121212", // Dark background color
+							default: "#111111", // Dark background color
 							paper: "#1e1e1e", // Darker background for cards, containers, etc.
 						},
 						text: {
diff --git a/src/shared-theme/customizations/surfaces.js b/src/shared-theme/customizations/surfaces.js
index 0cc5229..cadabb5 100644
--- a/src/shared-theme/customizations/surfaces.js
+++ b/src/shared-theme/customizations/surfaces.js
@@ -67,7 +67,7 @@ export const surfacesCustomizations = {
           border: `1px solid ${(theme.vars || theme).palette.divider}`,
           boxShadow: 'none',
           ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
+            backgroundColor:"#1C1C1C",
           }),
           variants: [
             {
diff --git a/src/shared-theme/themePrimitives.js b/src/shared-theme/themePrimitives.js
index c7a9fcb..4a8c52b 100644
--- a/src/shared-theme/themePrimitives.js
+++ b/src/shared-theme/themePrimitives.js
@@ -1,380 +1,384 @@
-import { createTheme, alpha } from '@mui/material/styles';
+import { createTheme, alpha } from "@mui/material/styles";
 
 const defaultTheme = createTheme();
 
 const customShadows = [...defaultTheme.shadows];
 
 export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
+	50: "hsl(210, 100%, 95%)",
+	100: "hsl(210, 100%, 92%)",
+	200: "hsl(210, 100%, 80%)",
+	300: "hsl(210, 100%, 65%)",
+	400: "hsl(210, 98%, 48%)",
+	500: "hsl(210, 98%, 42%)",
+	600: "hsl(210, 98%, 55%)",
+	700: "hsl(210, 100%, 35%)",
+	800: "hsl(210, 100%, 16%)",
+	900: "hsl(210, 100%, 21%)",
 };
 
 export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
+	50: "hsl(220, 35%, 97%)",
+	100: "hsl(220, 30%, 94%)",
+	200: "hsl(220, 20%, 88%)",
+	300: "hsl(220, 20%, 80%)",
+	400: "hsl(220, 20%, 65%)",
+	500: "hsl(220, 20%, 42%)",
+	600: "hsl(220, 20%, 35%)",
+	700: "hsl(220, 20%, 25%)",
+	800: "hsl(220, 30%, 6%)",
+	900: "hsl(220, 35%, 3%)",
 };
 
 export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
+	50: "hsl(120, 80%, 98%)",
+	100: "hsl(120, 75%, 94%)",
+	200: "hsl(120, 75%, 87%)",
+	300: "hsl(120, 61%, 77%)",
+	400: "hsl(120, 44%, 53%)",
+	500: "hsl(120, 59%, 30%)",
+	600: "hsl(120, 70%, 25%)",
+	700: "hsl(120, 75%, 16%)",
+	800: "hsl(120, 84%, 10%)",
+	900: "hsl(120, 87%, 6%)",
 };
 
 export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
+	50: "hsl(45, 100%, 97%)",
+	100: "hsl(45, 92%, 90%)",
+	200: "hsl(45, 94%, 80%)",
+	300: "hsl(45, 90%, 65%)",
+	400: "hsl(45, 90%, 40%)",
+	500: "hsl(45, 90%, 35%)",
+	600: "hsl(45, 91%, 25%)",
+	700: "hsl(45, 94%, 20%)",
+	800: "hsl(45, 95%, 16%)",
+	900: "hsl(45, 93%, 12%)",
 };
 
 export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
+	50: "hsl(0, 100%, 97%)",
+	100: "hsl(0, 92%, 90%)",
+	200: "hsl(0, 94%, 80%)",
+	300: "hsl(0, 90%, 65%)",
+	400: "hsl(0, 90%, 40%)",
+	500: "hsl(0, 90%, 30%)",
+	600: "hsl(0, 91%, 25%)",
+	700: "hsl(0, 94%, 18%)",
+	800: "hsl(0, 95%, 12%)",
+	900: "hsl(0, 93%, 6%)",
 };
 
 export const getDesignTokens = (mode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
+	customShadows[1] =
+		mode === "dark"
+			? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
+			: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
 
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && {
-          primary: 'hsl(0, 0%, 100%)',
-          secondary: gray[400],
-        }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: 'Inter, sans-serif',
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
+	return {
+		palette: {
+			mode,
+			primary: {
+				light: brand[200],
+				main: brand[400],
+				dark: brand[700],
+				contrastText: brand[50],
+				...(mode === "dark" && {
+					contrastText: brand[50],
+					light: brand[300],
+					main: brand[400],
+					dark: brand[700],
+				}),
+			},
+			info: {
+				light: brand[100],
+				main: brand[300],
+				dark: brand[600],
+				contrastText: gray[50],
+				...(mode === "dark" && {
+					contrastText: brand[300],
+					light: brand[500],
+					main: brand[700],
+					dark: brand[900],
+				}),
+			},
+			warning: {
+				light: orange[300],
+				main: orange[400],
+				dark: orange[800],
+				...(mode === "dark" && {
+					light: orange[400],
+					main: orange[500],
+					dark: orange[700],
+				}),
+			},
+			error: {
+				light: red[300],
+				main: red[400],
+				dark: red[800],
+				...(mode === "dark" && {
+					light: red[400],
+					main: red[500],
+					dark: red[700],
+				}),
+			},
+			success: {
+				light: green[300],
+				main: green[400],
+				dark: green[800],
+				...(mode === "dark" && {
+					light: green[400],
+					main: green[500],
+					dark: green[700],
+				}),
+			},
+			grey: {
+				...gray,
+			},
+			divider:
+				mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
+			background: {
+				default: "hsl(0, 0%, 99%)",
+				paper: "hsl(220, 35%, 97%)",
+				...(mode === "dark" && {
+					default: gray[900],
+					paper: "hsl(220, 30%, 7%)",
+				}),
+			},
+			text: {
+				primary: gray[800],
+				secondary: gray[600],
+				warning: orange[400],
+				...(mode === "dark" && {
+					primary: "hsl(0, 0%, 100%)",
+					secondary: gray[400],
+				}),
+			},
+			action: {
+				hover: alpha(gray[200], 0.2),
+				selected: `${alpha(gray[200], 0.3)}`,
+				...(mode === "dark" && {
+					hover: alpha(gray[600], 0.2),
+					selected: alpha(gray[600], 0.3),
+				}),
+			},
+		},
+		typography: {
+			fontFamily: "Gilory",
+			h1: {
+				fontSize: defaultTheme.typography.pxToRem(48),
+				fontWeight: 600,
+				lineHeight: 1.2,
+				letterSpacing: -0.5,
+			},
+			h2: {
+				fontSize: defaultTheme.typography.pxToRem(36),
+				fontWeight: 600,
+				lineHeight: 1.2,
+			},
+			h3: {
+				fontSize: defaultTheme.typography.pxToRem(30),
+				lineHeight: 1.2,
+			},
+			h4: {
+				fontSize: defaultTheme.typography.pxToRem(24),
+				fontWeight: 600,
+				lineHeight: 1.5,
+			},
+			h5: {
+				fontSize: defaultTheme.typography.pxToRem(20),
+				fontWeight: 600,
+			},
+			h6: {
+				fontSize: defaultTheme.typography.pxToRem(18),
+				fontWeight: 600,
+			},
+			subtitle1: {
+				fontSize: defaultTheme.typography.pxToRem(18),
+			},
+			subtitle2: {
+				fontSize: defaultTheme.typography.pxToRem(14),
+				fontWeight: 500,
+			},
+			body1: {
+				fontSize: defaultTheme.typography.pxToRem(14),
+			},
+			body2: {
+				fontSize: defaultTheme.typography.pxToRem(14),
+				fontWeight: 400,
+			},
+			caption: {
+				fontSize: defaultTheme.typography.pxToRem(12),
+				fontWeight: 400,
+			},
+		},
+		shape: {
+			borderRadius: 8,
+		},
+		shadows: customShadows,
+	};
 };
 
 export const colorSchemes = {
-  light: {
-    palette: {
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-      },
-      grey: {
-        ...gray,
-      },
-      divider: alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-      },
-      baseShadow:
-        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-    },
-  },
-  dark: {
-    palette: {
-      primary: {
-        contrastText: brand[50],
-        light: brand[300],
-        main: brand[400],
-        dark: brand[700],
-      },
-      info: {
-        contrastText: brand[300],
-        light: brand[500],
-        main: brand[700],
-        dark: brand[900],
-      },
-      warning: {
-        light: orange[400],
-        main: orange[500],
-        dark: orange[700],
-      },
-      error: {
-        light: red[400],
-        main: red[500],
-        dark: red[700],
-      },
-      success: {
-        light: green[400],
-        main: green[500],
-        dark: green[700],
-      },
-      grey: {
-        ...gray,
-      },
-      divider: alpha(gray[700], 0.6),
-      background: {
-        default: gray[900],
-        paper: 'hsl(220, 30%, 7%)',
-      },
-      text: {
-        primary: 'hsl(0, 0%, 100%)',
-        secondary: gray[400],
-      },
-      action: {
-        hover: alpha(gray[600], 0.2),
-        selected: alpha(gray[600], 0.3),
-      },
-      baseShadow:
-        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-    },
-  },
+	light: {
+		palette: {
+			primary: {
+				light: brand[200],
+				main: brand[400],
+				dark: brand[700],
+				contrastText: brand[50],
+			},
+			info: {
+				light: brand[100],
+				main: brand[300],
+				dark: brand[600],
+				contrastText: gray[50],
+			},
+			warning: {
+				light: orange[300],
+				main: orange[400],
+				dark: orange[800],
+			},
+			error: {
+				light: red[300],
+				main: red[400],
+				dark: red[800],
+			},
+			success: {
+				light: green[300],
+				main: green[400],
+				dark: green[800],
+			},
+			grey: {
+				...gray,
+			},
+			divider: alpha(gray[300], 0.4),
+			background: {
+				default: "hsl(0, 0%, 99%)",
+				paper: "hsl(220, 35%, 97%)",
+			},
+			text: {
+				primary: gray[800],
+				secondary: gray[600],
+				warning: orange[400],
+			},
+			action: {
+				hover: alpha(gray[200], 0.2),
+				selected: `${alpha(gray[200], 0.3)}`,
+			},
+			baseShadow:
+				"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
+		},
+	},
+	dark: {
+		palette: {
+			primary: {
+				contrastText: brand[50],
+				light: brand[300],
+				main: brand[400],
+				dark: brand[700],
+			},
+			info: {
+				contrastText: brand[300],
+				light: brand[500],
+				main: brand[700],
+				dark: brand[900],
+			},
+			warning: {
+				light: orange[400],
+				main: orange[500],
+				dark: orange[700],
+			},
+			error: {
+				light: red[400],
+				main: red[500],
+				dark: red[700],
+			},
+			success: {
+				light: green[400],
+				main: green[500],
+				dark: green[700],
+			},
+			grey: {
+				...gray,
+			},
+			divider: alpha(gray[700], 0.6),
+			background: {
+				default: gray[900],
+				paper: "hsl(220, 30%, 7%)",
+			},
+			text: {
+				primary: "hsl(0, 0%, 100%)",
+				secondary: gray[400],
+			},
+			action: {
+				hover: alpha(gray[600], 0.2),
+				selected: alpha(gray[600], 0.3),
+			},
+			baseShadow:
+				"hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
+		},
+	},
 };
 
 export const typography = {
-  fontFamily: 'Inter, sans-serif',
-  h1: {
-    fontSize: defaultTheme.typography.pxToRem(48),
-    fontWeight: 600,
-    lineHeight: 1.2,
-    letterSpacing: -0.5,
-  },
-  h2: {
-    fontSize: defaultTheme.typography.pxToRem(36),
-    fontWeight: 600,
-    lineHeight: 1.2,
-  },
-  h3: {
-    fontSize: defaultTheme.typography.pxToRem(30),
-    lineHeight: 1.2,
-  },
-  h4: {
-    fontSize: defaultTheme.typography.pxToRem(24),
-    fontWeight: 600,
-    lineHeight: 1.5,
-  },
-  h5: {
-    fontSize: defaultTheme.typography.pxToRem(20),
-    fontWeight: 600,
-  },
-  h6: {
-    fontSize: defaultTheme.typography.pxToRem(18),
-    fontWeight: 600,
-  },
-  subtitle1: {
-    fontSize: defaultTheme.typography.pxToRem(18),
-  },
-  subtitle2: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-    fontWeight: 500,
-  },
-  body1: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-  },
-  body2: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-    fontWeight: 400,
-  },
-  caption: {
-    fontSize: defaultTheme.typography.pxToRem(12),
-    fontWeight: 400,
-  },
+	fontFamily: "Gilory",
+	h1: {
+		fontSize: defaultTheme.typography.pxToRem(48),
+		fontWeight: 600,
+		lineHeight: 1.2,
+		letterSpacing: -0.5,
+	},
+	h2: {
+		fontSize: defaultTheme.typography.pxToRem(36),
+		fontWeight: 600,
+		lineHeight: 1.2,
+	},
+	h3: {
+		fontSize: defaultTheme.typography.pxToRem(30),
+		lineHeight: 1.2,
+	},
+	h4: {
+		fontSize: defaultTheme.typography.pxToRem(24),
+		fontWeight: 600,
+		lineHeight: 1.5,
+	},
+	h5: {
+		fontSize: defaultTheme.typography.pxToRem(20),
+		fontWeight: 600,
+	},
+	h6: {
+		fontSize: defaultTheme.typography.pxToRem(18),
+		fontWeight: 600,
+	},
+	subtitle1: {
+		fontSize: defaultTheme.typography.pxToRem(18),
+	},
+	subtitle2: {
+		fontSize: defaultTheme.typography.pxToRem(14),
+		fontWeight: 500,
+	},
+	body1: {
+		fontSize: defaultTheme.typography.pxToRem(14),
+	},
+	body2: {
+		fontSize: defaultTheme.typography.pxToRem(14),
+		fontWeight: 400,
+	},
+	caption: {
+		fontSize: defaultTheme.typography.pxToRem(12),
+		fontWeight: 400,
+	},
 };
 
 export const shape = {
-  borderRadius: 8,
+	borderRadius: 8,
 };
 
 const defaultShadows = [
-  'none',
-  'var(--template-palette-baseShadow)',
-  ...defaultTheme.shadows.slice(2),
+	"none",
+	"var(--template-palette-baseShadow)",
+	...defaultTheme.shadows.slice(2),
 ];
 
 export const shadows = defaultShadows;
diff --git a/src/shared-theme/themePrimitives.ts b/src/shared-theme/themePrimitives.ts
index a12eb21..63dd01a 100644
--- a/src/shared-theme/themePrimitives.ts
+++ b/src/shared-theme/themePrimitives.ts
@@ -1,29 +1,29 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
+import { createTheme, alpha, PaletteMode, Shadows } from "@mui/material/styles";
 
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
+declare module "@mui/material/Paper" {
+	interface PaperPropsVariantOverrides {
+		highlighted: true;
+	}
 }
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
+declare module "@mui/material/styles/createPalette" {
+	interface ColorRange {
+		50: string;
+		100: string;
+		200: string;
+		300: string;
+		400: string;
+		500: string;
+		600: string;
+		700: string;
+		800: string;
+		900: string;
+	}
 
-  interface PaletteColor extends ColorRange {}
+	interface PaletteColor extends ColorRange {}
 
-  interface Palette {
-    baseShadow: string;
-  }
+	interface Palette {
+		baseShadow: string;
+	}
 }
 
 const defaultTheme = createTheme();
@@ -31,373 +31,380 @@ const defaultTheme = createTheme();
 const customShadows: Shadows = [...defaultTheme.shadows];
 
 export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
+	50: "hsl(210, 100%, 95%)",
+	100: "hsl(210, 100%, 92%)",
+	200: "hsl(210, 100%, 80%)",
+	300: "hsl(210, 100%, 65%)",
+	400: "hsl(210, 98%, 48%)",
+	500: "hsl(210, 98%, 42%)",
+	600: "hsl(210, 98%, 55%)",
+	700: "hsl(210, 100%, 35%)",
+	800: "hsl(210, 100%, 16%)",
+	900: "hsl(210, 100%, 21%)",
 };
 
 export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
+	50: "hsl(220, 35%, 97%)",
+	100: "hsl(220, 30%, 94%)",
+	200: "hsl(220, 20%, 88%)",
+	300: "hsl(220, 20%, 80%)",
+	400: "hsl(220, 20%, 65%)",
+	500: "hsl(220, 20%, 42%)",
+	600: "hsl(220, 20%, 35%)",
+	700: "hsl(220, 20%, 25%)",
+	800: "hsl(220, 30%, 6%)",
+	900: "hsl(220, 35%, 3%)",
 };
 
 export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
+	50: "hsl(120, 80%, 98%)",
+	100: "hsl(120, 75%, 94%)",
+	200: "hsl(120, 75%, 87%)",
+	300: "hsl(120, 61%, 77%)",
+	400: "hsl(120, 44%, 53%)",
+	500: "hsl(120, 59%, 30%)",
+	600: "hsl(120, 70%, 25%)",
+	700: "hsl(120, 75%, 16%)",
+	800: "hsl(120, 84%, 10%)",
+	900: "hsl(120, 87%, 6%)",
 };
 
 export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
+	50: "hsl(45, 100%, 97%)",
+	100: "hsl(45, 92%, 90%)",
+	200: "hsl(45, 94%, 80%)",
+	300: "hsl(45, 90%, 65%)",
+	400: "hsl(45, 90%, 40%)",
+	500: "hsl(45, 90%, 35%)",
+	600: "hsl(45, 91%, 25%)",
+	700: "hsl(45, 94%, 20%)",
+	800: "hsl(45, 95%, 16%)",
+	900: "hsl(45, 93%, 12%)",
 };
 
 export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
+	50: "hsl(0, 100%, 97%)",
+	100: "hsl(0, 92%, 90%)",
+	200: "hsl(0, 94%, 80%)",
+	300: "hsl(0, 90%, 65%)",
+	400: "hsl(0, 90%, 40%)",
+	500: "hsl(0, 90%, 30%)",
+	600: "hsl(0, 91%, 25%)",
+	700: "hsl(0, 94%, 18%)",
+	800: "hsl(0, 95%, 12%)",
+	900: "hsl(0, 93%, 6%)",
 };
 
 export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
+	customShadows[1] =
+		mode === "dark"
+			? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
+			: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
 
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: 'Inter, sans-serif',
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
+	return {
+		palette: {
+			mode,
+			primary: {
+				light: brand[200],
+				main: brand[400],
+				dark: brand[700],
+				contrastText: brand[50],
+				...(mode === "dark" && {
+					contrastText: brand[50],
+					light: brand[300],
+					main: brand[400],
+					dark: brand[700],
+				}),
+			},
+			info: {
+				light: brand[100],
+				main: brand[300],
+				dark: brand[600],
+				contrastText: gray[50],
+				...(mode === "dark" && {
+					contrastText: brand[300],
+					light: brand[500],
+					main: brand[700],
+					dark: brand[900],
+				}),
+			},
+			warning: {
+				light: orange[300],
+				main: orange[400],
+				dark: orange[800],
+				...(mode === "dark" && {
+					light: orange[400],
+					main: orange[500],
+					dark: orange[700],
+				}),
+			},
+			error: {
+				light: red[300],
+				main: red[400],
+				dark: red[800],
+				...(mode === "dark" && {
+					light: red[400],
+					main: red[500],
+					dark: red[700],
+				}),
+			},
+			success: {
+				light: green[300],
+				main: green[400],
+				dark: green[800],
+				...(mode === "dark" && {
+					light: green[400],
+					main: green[500],
+					dark: green[700],
+				}),
+			},
+			grey: {
+				...gray,
+			},
+			divider:
+				mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
+			background: {
+				default: "hsl(0, 0%, 99%)",
+				paper: "hsl(220, 35%, 97%)",
+				...(mode === "dark" && {
+					default: gray[900],
+					paper: "hsl(220, 30%, 7%)",
+				}),
+			},
+			text: {
+				primary: gray[800],
+				secondary: gray[600],
+				warning: orange[400],
+				...(mode === "dark" && {
+					primary: "hsl(0, 0%, 100%)",
+					secondary: gray[400],
+				}),
+			},
+			action: {
+				hover: alpha(gray[200], 0.2),
+				selected: `${alpha(gray[200], 0.3)}`,
+				...(mode === "dark" && {
+					hover: alpha(gray[600], 0.2),
+					selected: alpha(gray[600], 0.3),
+				}),
+			},
+		},
+		typography: {
+			fontFamily: "Gilroy",
+			h1: {
+				fontSize: defaultTheme.typography.pxToRem(48),
+				fontWeight: 600,
+				lineHeight: 1.2,
+				letterSpacing: -0.5,
+			},
+			h2: {
+				fontSize: defaultTheme.typography.pxToRem(36),
+				fontWeight: 600,
+				lineHeight: 1.2,
+			},
+			h3: {
+				fontSize: defaultTheme.typography.pxToRem(30),
+				lineHeight: 1.2,
+			},
+			h4: {
+				fontSize: defaultTheme.typography.pxToRem(24),
+				fontWeight: 600,
+				lineHeight: 1.5,
+			},
+			h5: {
+				fontSize: defaultTheme.typography.pxToRem(20),
+				fontWeight: 600,
+			},
+			h6: {
+				fontSize: defaultTheme.typography.pxToRem(18),
+				fontWeight: 600,
+			},
+			subtitle1: {
+				fontSize: defaultTheme.typography.pxToRem(18),
+			},
+			subtitle2: {
+				fontSize: defaultTheme.typography.pxToRem(14),
+				fontWeight: 500,
+			},
+			body1: {
+				fontSize: defaultTheme.typography.pxToRem(14),
+			},
+			body2: {
+				fontSize: defaultTheme.typography.pxToRem(14),
+				fontWeight: 400,
+			},
+			caption: {
+				fontSize: defaultTheme.typography.pxToRem(12),
+				fontWeight: 400,
+			},
+		},
+		shape: {
+			borderRadius: 8,
+		},
+		shadows: customShadows,
+	};
 };
 
 export const colorSchemes = {
-  light: {
-    palette: {
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-      },
-      grey: {
-        ...gray,
-      },
-      divider: alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-      },
-      baseShadow:
-        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-    },
-  },
-  dark: {
-    palette: {
-      primary: {
-        contrastText: brand[50],
-        light: brand[300],
-        main: brand[400],
-        dark: brand[700],
-      },
-      info: {
-        contrastText: brand[300],
-        light: brand[500],
-        main: brand[700],
-        dark: brand[900],
-      },
-      warning: {
-        light: orange[400],
-        main: orange[500],
-        dark: orange[700],
-      },
-      error: {
-        light: red[400],
-        main: red[500],
-        dark: red[700],
-      },
-      success: {
-        light: green[400],
-        main: green[500],
-        dark: green[700],
-      },
-      grey: {
-        ...gray,
-      },
-      divider: alpha(gray[700], 0.6),
-      background: {
-        default: gray[900],
-        paper: 'hsl(220, 30%, 7%)',
-      },
-      text: {
-        primary: 'hsl(0, 0%, 100%)',
-        secondary: gray[400],
-      },
-      action: {
-        hover: alpha(gray[600], 0.2),
-        selected: alpha(gray[600], 0.3),
-      },
-      baseShadow:
-        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-    },
-  },
+	light: {
+		palette: {
+			primary: {
+				light: brand[200],
+				main: brand[400],
+				dark: brand[700],
+				contrastText: brand[50],
+			},
+			info: {
+				light: brand[100],
+				main: brand[300],
+				dark: brand[600],
+				contrastText: gray[50],
+			},
+			warning: {
+				light: orange[300],
+				main: orange[400],
+				dark: orange[800],
+			},
+			error: {
+				light: red[300],
+				main: red[400],
+				dark: red[800],
+			},
+			success: {
+				light: green[300],
+				main: green[400],
+				dark: green[800],
+			},
+			grey: {
+				...gray,
+			},
+			divider: alpha(gray[300], 0.4),
+			background: {
+				default: "hsl(0, 0%, 99%)",
+				paper: "hsl(220, 35%, 97%)",
+			},
+			text: {
+				primary: gray[800],
+				secondary: gray[600],
+				warning: orange[400],
+			},
+			action: {
+				hover: alpha(gray[200], 0.2),
+				selected: `${alpha(gray[200], 0.3)}`,
+			},
+			baseShadow:
+				"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
+		},
+	},
+	dark: {
+		palette: {
+			primary: {
+				contrastText: brand[50],
+				light: brand[300],
+				main: brand[400],
+				dark: brand[700],
+			},
+			info: {
+				contrastText: brand[300],
+				light: brand[500],
+				main: brand[700],
+				dark: brand[900],
+			},
+			warning: {
+				light: orange[400],
+				main: orange[500],
+				dark: orange[700],
+			},
+			error: {
+				light: red[400],
+				main: red[500],
+				dark: red[700],
+			},
+			success: {
+				light: green[400],
+				main: green[500],
+				dark: green[700],
+			},
+			grey: {
+				...gray,
+			},
+			divider: alpha(gray[700], 0.6),
+			background: {
+				default: gray[900],
+				paper: "hsl(220, 30%, 7%)",
+			},
+			text: {
+				primary: "hsl(0, 0%, 100%)",
+				secondary: gray[400],
+			},
+			action: {
+				hover: alpha(gray[600], 0.2),
+				selected: alpha(gray[600], 0.3),
+			},
+			baseShadow:
+				"hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
+		},
+	},
 };
 
 export const typography = {
-  fontFamily: 'Inter, sans-serif',
-  h1: {
-    fontSize: defaultTheme.typography.pxToRem(48),
-    fontWeight: 600,
-    lineHeight: 1.2,
-    letterSpacing: -0.5,
-  },
-  h2: {
-    fontSize: defaultTheme.typography.pxToRem(36),
-    fontWeight: 600,
-    lineHeight: 1.2,
-  },
-  h3: {
-    fontSize: defaultTheme.typography.pxToRem(30),
-    lineHeight: 1.2,
-  },
-  h4: {
-    fontSize: defaultTheme.typography.pxToRem(24),
-    fontWeight: 600,
-    lineHeight: 1.5,
-  },
-  h5: {
-    fontSize: defaultTheme.typography.pxToRem(20),
-    fontWeight: 600,
-  },
-  h6: {
-    fontSize: defaultTheme.typography.pxToRem(18),
-    fontWeight: 600,
-  },
-  subtitle1: {
-    fontSize: defaultTheme.typography.pxToRem(18),
-  },
-  subtitle2: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-    fontWeight: 500,
-  },
-  body1: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-  },
-  body2: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-    fontWeight: 400,
-  },
-  caption: {
-    fontSize: defaultTheme.typography.pxToRem(12),
-    fontWeight: 400,
-  },
+	fontFamily: "Gilroy",
+	h1: {
+		fontSize: defaultTheme.typography.pxToRem(48),
+		fontWeight: 600,
+		lineHeight: 1.2,
+		letterSpacing: -0.5,
+	},
+	h2: {
+		fontSize: defaultTheme.typography.pxToRem(36),
+		fontWeight: 600,
+		lineHeight: 1.2,
+	},
+	h3: {
+		fontSize: defaultTheme.typography.pxToRem(30),
+		lineHeight: 1.2,
+	},
+	h4: {
+		fontSize: defaultTheme.typography.pxToRem(24),
+		fontWeight: 600,
+		lineHeight: 1.5,
+	},
+	h5: {
+		fontSize: defaultTheme.typography.pxToRem(20),
+		fontWeight: 600,
+	},
+	h6: {
+		fontSize: defaultTheme.typography.pxToRem(18),
+		fontWeight: 600,
+	},
+	subtitle1: {
+		fontSize: defaultTheme.typography.pxToRem(18),
+	},
+	subtitle2: {
+		fontSize: defaultTheme.typography.pxToRem(14),
+		fontWeight: 500,
+	},
+	body1: {
+		fontSize: defaultTheme.typography.pxToRem(14),
+	},
+	body2: {
+		fontSize: defaultTheme.typography.pxToRem(14),
+		fontWeight: 400,
+	},
+	caption: {
+		fontSize: defaultTheme.typography.pxToRem(12),
+		fontWeight: 400,
+	},
 };
 
 export const shape = {
-  borderRadius: 8,
+	borderRadius: 8,
 };
 
 // @ts-ignore
 const defaultShadows: Shadows = [
-  'none',
-  'var(--template-palette-baseShadow)',
-  ...defaultTheme.shadows.slice(2),
+	"none",
+	"var(--template-palette-baseShadow)",
+	...defaultTheme.shadows.slice(2),
 ];
 export const shadows = defaultShadows;