src/components/AddEditCategoryModal/index.tsx

@@ -1,17 +1,20 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import {
 	Box,
 	Button,
-	Dialog,
+	Typography,
-	DialogActions,
+	Modal,
-	DialogContent,
+	InputAdornment,
-	DialogTitle,
+
-	IconButton,
-	TextField,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import { useForm, Controller } from "react-hook-form";
-import { Visibility, VisibilityOff } from "@mui/icons-material";
+import {
+	CustomIconButton,
+	CustomTextField,
+} from "../AddUserModel/styled.css.tsx";
 
 //By Jaanvi : Edit Model :: 11-feb-25
 interface AddEditCategoryModalProps {
@@ -44,6 +47,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 	handleUpdate,
 	editRow,
 }) => {
+	const [showPassword, setShowPassword] = React.useState(false);
 	const {
 		control,
 		handleSubmit,
@@ -77,6 +81,10 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 		reset();
 	};
 
+    const togglePasswordVisibility = () => {
+			setShowPassword((prev) => !prev);
+		};
+
 	useEffect(() => {
 		if (editRow) {
 			setValue("name", editRow.name);
@@ -88,40 +96,69 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 		}
 	}, [editRow, setValue, reset]);
 
-	const [showPassword, setShowPassword] = React.useState(false);
+
+
 	
 	return (
-		<Dialog
+		<Modal
 			open={open}
 			onClose={handleClose}
-			maxWidth="md"
+			aria-labelledby="add-edit-category-modal"
-			fullWidth
-			PaperProps={{
-				component: "form",
-				onSubmit: handleSubmit(onSubmit),
-			}}
 		>
-			<DialogTitle
-				sx={{
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-				}}
-			>
-				{editRow ? "Edit Admin" : "Add Admin"}
 			<Box
-					onClick={handleClose}
 				sx={{
-						cursor: "pointer",
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					width: 600,
+					bgcolor: "background.paper",
+					boxShadow: 24,
+					p: 3,
+					borderRadius: 2,
+				}}
+			>
+				{/* Header */}
+				<Box
+					sx={{
 						display: "flex",
+						justifyContent: "space-between",
 						alignItems: "center",
 					}}
 				>
+					<Typography variant="h6" fontWeight={600}>
+						{editRow ? "Edit Admin" : "Add Admin"}
+					</Typography>
+					<CustomIconButton onClick={handleClose}>
 						<CloseIcon />
+					</CustomIconButton>
 				</Box>
-			</DialogTitle>
 
-			<DialogContent>
+				{/* Horizontal Line */}
+				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
+
+				{/* Form */}
+				<form onSubmit={handleSubmit(onSubmit)}>
+					{/* Input Fields */}
+					<Box
+						sx={{
+							display: "flex",
+							flexDirection: "column",
+							gap: 2,
+						}}
+					>
+						{/* First Row - Two Inputs */}
+						<Box sx={{ display: "flex", gap: 2 }}>
+							<Box
+								sx={{
+									display: "flex",
+									flexDirection: "column",
+									width: "50%",
+								}}
+							>
+								<Typography variant="body2" fontWeight={500}>
+									Admin Name
+								</Typography>
 								<Controller
 									name="name"
 									control={control}
@@ -129,112 +166,159 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 										required: "Admin Name is required",
 										minLength: {
 											value: 3,
-							message: "Minimum 3 characters required",
+											message:
+												"Minimum 3 characters required",
 										},
 										maxLength: {
 											value: 30,
-							message: "Maximum 30 characters allowed",
+											message:
+												"Maximum 30 characters allowed",
 										},
 									}}
 									render={({ field }) => (
-						<TextField
+										<CustomTextField
 											{...field}
-							autoFocus
 											required
-							margin="dense"
+											placeholder="Enter Admin Name"
-							label="Admin Name"
-							type="text"
 											fullWidth
-							variant="standard"
+											size="small"
 											error={!!errors.name}
 											helperText={errors.name?.message}
 										/>
 									)}
 								/>
+							</Box>
 
+							<Box
+								sx={{
+									display: "flex",
+									flexDirection: "column",
+									width: "50%",
+								}}
+							>
+								<Typography variant="body2" fontWeight={500}>
+									Email
+								</Typography>
 								<Controller
 									name="email"
 									control={control}
 									rules={{
 										required: "Email is required",
 										pattern: {
-							value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+											value: /\S+@\S+\.\S+/,
-							message: "Invalid email address",
+											message:
+												"Please enter a valid email address.",
 										},
 									}}
 									render={({ field }) => (
-						<TextField
+										<CustomTextField
 											{...field}
-							required
-							margin="dense"
-							label="Email"
-							type="email"
-							fullWidth
-							variant="standard"
 											error={!!errors.email}
 											helperText={errors.email?.message}
+											id="email"
+											type="email"
+											placeholder="Email"
+											required
+											fullWidth
+											color={
+												errors.email
+													? "error"
+													: "primary"
+											}
 										/>
 									)}
 								/>
+							</Box>
+						</Box>
+
+						{/* Second Row - Two Inputs */}
+						<Box sx={{ display: "flex", gap: 2 }}>
 							{!editRow && (
+								<Box
+									sx={{
+										display: "flex",
+										flexDirection: "column",
+										width: "50%",
+									}}
+								>
+									<Typography
+										variant="body2"
+										fontWeight={500}
+									>
+										Password
+									</Typography>
 									<Controller
 										name="password"
 										control={control}
 										rules={{
-							required: "password is required",
+											required: "Password is required",
+											minLength: {
+												value: 6,
+												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 }) => (
-							<>
+											<CustomTextField
-								<Box
-									sx={{
-										display: "flex",
-										alignItems: "center",
-									}}
-								>
-									<TextField
 												{...field}
 												required
-										margin="dense"
+												placeholder="Enter Password"
-										label="Password"
 												type={
-											showPassword ? "text" : "password"
+													showPassword
+														? "text"
+														: "password"
 												}
 												id="password"
-										autoComplete="current-password"
-										autoFocus
 												fullWidth
-										variant="standard"
+												color={
-										error={!!errors.password}
+													errors.password
-										helperText={errors.password?.message}
+														? "error"
-									/>
+														: "primary"
-									<IconButton
-										sx={{
-											position: "absolute",
-											right: "10px",
-											top: "50%",
-											transform: "translateY(-50%)", // Center vertically
-											backgroundColor: "transparent", // Remove background color
-											border: "none", // Remove any border
-											boxShadow: "none", // Remove any shadow
-											padding: 0, // Remove padding to ensure it's fully transparent
-											
-										
-										}}
-										onClick={() =>
-											setShowPassword((prev) => !prev)
 												}
+												size="small"
+												InputProps={{
+													endAdornment: (
+														<InputAdornment position="end">
+															<CustomIconButton
+																aria-label="toggle password visibility"
+																onClick={
+																	togglePasswordVisibility
+																}
+																edge="end"
 															>
 																{showPassword ? (
 																	<VisibilityOff />
 																) : (
 																	<Visibility />
 																)}
-									</IconButton>
+															</CustomIconButton>
-								</Box>
+														</InputAdornment>
-							</>
+													),
-						)}
+												}}
+												error={!!errors.password}
+												helperText={
+													errors.password?.message
+												}
 											/>
 										)}
+									/>
+								</Box>
+							)}
+							<Box
+								sx={{
+									display: "flex",
+									flexDirection: "column",
+									width: "50%",
+								}}
+							>
+								<Typography variant="body2" fontWeight={500}>
+									Phone Number
+								</Typography>
 								<Controller
 									name="phone"
 									control={control}
@@ -246,28 +330,40 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 										},
 										minLength: {
 											value: 6,
-							message: "Phone number must be exactly 6 digits",
+											message:
+												"Phone number must be at least 6 digits",
 										},
 										maxLength: {
 											value: 14,
-							message: "Phone number must be exactly 14 digits",
+											message:
+												"Phone number must be at most 14 digits",
 										},
 									}}
 									render={({ field }) => (
-						<TextField
+										<CustomTextField
 											{...field}
 											required
-							margin="dense"
+											placeholder="Enter Phone Number"
-							label="Phone Number"
+											size="small"
-							type="tel"
-							fullWidth
-							variant="standard"
 											error={!!errors.phone}
 											helperText={errors.phone?.message}
 										/>
 									)}
 								/>
+							</Box>
+						</Box>
 
+						{/* Third Row - One Input */}
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "column",
+								width: "50%",
+							}}
+						>
+							<Typography variant="body2" fontWeight={500}>
+								Address
+							</Typography>
 							<Controller
 								name="registeredAddress"
 								control={control}
@@ -275,30 +371,52 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 									required: "Address is required",
 									maxLength: {
 										value: 100,
-							message: "Address cannot exceed 100 characters",
+										message:
+											"Address cannot exceed 100 characters",
 									},
 								}}
 								render={({ field }) => (
-						<TextField
+									<CustomTextField
 										{...field}
 										required
-							margin="dense"
+										placeholder="Enter Address"
-							label="Address"
-							type="text"
 										fullWidth
-							variant="standard"
+										size="small"
 										error={!!errors.registeredAddress}
-							helperText={errors.registeredAddress?.message}
+										helperText={
+											errors.registeredAddress?.message
+										}
 									/>
 								)}
 							/>
-			</DialogContent>
+						</Box>
+					</Box>
 
-			<DialogActions>
+					{/* Submit Button */}
-				<Button onClick={handleClose}>Cancel</Button>
+					<Box
-				<Button type="submit">{editRow ? "Update" : "Create"}</Button>
+						sx={{
-			</DialogActions>
+							display: "flex",
-		</Dialog>
+							justifyContent: "flex-end",
+							width: "100%",
+							mt: 3,
+						}}
+					>
+						<Button
+							type="submit"
+							sx={{
+								backgroundColor: "#52ACDF",
+								color: "white",
+								borderRadius: "8px",
+								width: "117px",
+								"&:hover": { backgroundColor: "#439BC1" },
+							}}
+						>
+							{editRow ? "Update Admin" : "Add Admin"}
+						</Button>
+					</Box>
+				</form>
+			</Box>
+		</Modal>
 	);
 };
 

src/components/AddUserModel/index.tsx

@@ -1,17 +1,27 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import {
 	Box,
 	Button,
-	Dialog,
+	Typography,
-	DialogActions,
-	DialogContent,
-	DialogTitle,
 	TextField,
+	Modal,
+	IconButton,
+	InputAdornment,
+	styled,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import { useForm, Controller } from "react-hook-form";
+import { CustomIconButton, CustomTextField } from "./styled.css.tsx";
 
-//By Jaanvi : Edit Model :: 11-feb-25
+
+interface FormData {
+	name: string;
+	email: string;
+	password: string;	
+	phone: string;
+}
 interface AddUserModalProps {
 	open: boolean;
 	handleClose: () => void;
@@ -20,52 +30,55 @@ interface AddUserModalProps {
 		id: string,
 		name: string,
 		email: string,
+		password: string,
 		phone: string,
-		password: string
+	
 	) => void;
 	editRow: any;
 }
-
-interface FormData {
-	name: string;
-	email: string;
-	phone: string;
-	password: string;
-}
 const AddUserModal: React.FC<AddUserModalProps> = ({
 	open,
 	handleClose,
 	handleCreate,
-	
+	handleUpdate,
 	editRow,
 }) => {
+	const [showPassword, setShowPassword] = useState(false);
+
 	const {
 		control,
 		handleSubmit,
 		formState: { errors },
-		setValue,
 		reset,
 	} = useForm<FormData>({
 		defaultValues: {
 			name: "",
 			email: "",
-			phone: "",
 			password: "",	
+			phone: "",
 		},
 	});
+	// useEffect(() => {
+	// 	if (editRow) {
+	// 		setValue("name", editRow.name);
+	// 		setValue("email", editRow.email);
+	// 		setValue("password", editRow.password);
+	// 		setValue("phone", editRow.phone);
+	// 	} else {
+	// 		reset();
+	// 	}
+	// }, [editRow, setValue, reset]);
 
 	const onSubmit = (data: FormData) => {
 		if (editRow) {
-		
 			handleUpdate(
 				editRow.id,
 				data.name,
 				data.email,
-				data.phone,
+				data.password,
-				data.password
+				data.phone
 			);
 		} else {
-			
 			handleCreate(data);
 		}
 
@@ -73,112 +86,225 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 		reset();
 	};
 
+	const togglePasswordVisibility = () => {
+		setShowPassword((prev) => !prev);
+	};
+
 	return (
-		<Dialog
+		<Modal
 			open={open}
 			onClose={handleClose}
-			maxWidth="md"
+			aria-labelledby="add-user-modal"
-			fullWidth
-			PaperProps={{
-				component: "form",
-				onSubmit: handleSubmit(onSubmit),
-			}}
 		>
-			<DialogTitle
-				sx={{
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-				}}
-			>
-				{editRow ? "Edit User" : "Add User"}
 			<Box
-					onClick={handleClose}
 				sx={{
-						cursor: "pointer",
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					width: 600, // Adjusted the width for a wider modal
+					bgcolor: "background.paper",
+					boxShadow: 24,
+					p: 3,
+					borderRadius: 2,
+				}}
+			>
+				{/* Header */}
+				<Box
+					sx={{
 						display: "flex",
+						justifyContent: "space-between",
 						alignItems: "center",
 					}}
 				>
+					<Typography variant="h6" fontWeight={600}>
+						{editRow ? "Edit User" : "Add User"}
+					</Typography>
+					<CustomIconButton onClick={handleClose}>
 						<CloseIcon />
+					</CustomIconButton>
 				</Box>
-			</DialogTitle>
 
-			<DialogContent>
+				{/* Horizontal Line */}
+				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
+
+				{/* Form */}
+				<form onSubmit={handleSubmit(onSubmit)}>
+					{/* Input Fields */}
+					<Box
+						sx={{
+							display: "flex",
+							flexDirection: "column",
+							gap: 2,
+						}}
+					>
+						{/* First Row - Two Inputs */}
+						<Box sx={{ display: "flex", gap: 2 }}>
+							<Box
+								sx={{
+									display: "flex",
+									flexDirection: "column",
+									width: "100%",
+								}}
+							>
+								<Typography variant="body2" fontWeight={500}>
+									User Name
+								</Typography>
 								<Controller
 									name="name"
 									control={control}
 									rules={{
-						required: "Admin Name is required",
+										required: "User Name is required",
 										minLength: {
 											value: 3,
-							message: "Minimum 3 characters required",
+											message:
+												"Minimum 3 characters required",
 										},
 										maxLength: {
 											value: 30,
-							message: "Maximum 30 characters allowed",
+											message:
+												"Maximum 30 characters allowed",
 										},
 									}}
 									render={({ field }) => (
-						<TextField
+										<CustomTextField
 											{...field}
-							autoFocus
 											required
-							margin="dense"
+											placeholder="Enter User Name"
-							label="User Name"
-							type="text"
 											fullWidth
-							variant="standard"
+											size="small"
 											error={!!errors.name}
 											helperText={errors.name?.message}
 										/>
 									)}
 								/>
+							</Box>
 
+							<Box
+								sx={{
+									display: "flex",
+									flexDirection: "column",
+									width: "100%",
+								}}
+							>
+								<Typography variant="body2" fontWeight={500}>
+									Email
+								</Typography>
 								<Controller
 									name="email"
 									control={control}
 									rules={{
 										required: "Email is required",
 										pattern: {
-							value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+											value: /\S+@\S+\.\S+/,
-							message: "Invalid email address",
+											message:
+												"Please enter a valid email address.",
 										},
 									}}
 									render={({ field }) => (
-						<TextField
+										<CustomTextField
 											{...field}
-							required
-							margin="dense"
-							label="Email"
-							type="email"
-							fullWidth
-							variant="standard"
 											error={!!errors.email}
 											helperText={errors.email?.message}
+											id="email"
+											type="email"
+											placeholder="Email"
+											required
+											fullWidth
+											color={
+												errors.email
+													? "error"
+													: "primary"
+											}
 										/>
 									)}
 								/>
+							</Box>
+						</Box>
+
+						{/* Second Row - Two Inputs */}
+						<Box sx={{ display: "flex", gap: 2 }}>
+							<Box
+								sx={{
+									display: "flex",
+									flexDirection: "column",
+									width: "100%",
+								}}
+							>
+								<Typography variant="body2" fontWeight={500}>
+									Password
+								</Typography>
 								<Controller
 									name="password"
 									control={control}
 									rules={{
-						required: "password is required",
+										required: "Password is required",
+										minLength: {
+											value: 6,
+											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 }) => (
-						<TextField
+										<CustomTextField
 											{...field}
 											required
-							margin="dense"
+											placeholder="Enter Password"
-							label="Password"
+											type={
-							type="password"
+												showPassword
+													? "text"
+													: "password"
+											}
+											id="password"
 											fullWidth
-							variant="standard"
+											color={
+												errors.password
+													? "error"
+													: "primary"
+											}
+											size="small"
+											InputProps={{
+												endAdornment: (
+													<InputAdornment position="end">
+														<CustomIconButton
+															aria-label="toggle password visibility"
+															onClick={
+																togglePasswordVisibility
+															}
+															edge="end"
+														>
+															{showPassword ? (
+																<VisibilityOff />
+															) : (
+																<Visibility />
+															)}
+														</CustomIconButton>
+													</InputAdornment>
+												),
+											}}
 											error={!!errors.password}
-							helperText={errors.password?.message}
+											helperText={
+												errors.password?.message
+											}
 										/>
 									)}
 								/>
+							</Box>
+							<Box
+								sx={{
+									display: "flex",
+									flexDirection: "column",
+									width: "100%",
+								}}
+							>
+								<Typography variant="body2" fontWeight={500}>
+									Phone Number
+								</Typography>
 								<Controller
 									name="phone"
 									control={control}
@@ -190,39 +316,60 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 										},
 										minLength: {
 											value: 6,
-							message: "Phone number must be exactly 6 digits",
+											message:
+												"Phone number must be at least 6 digits",
 										},
 										maxLength: {
 											value: 14,
-							message: "Phone number must be exactly 14 digits",
+											message:
+												"Phone number must be at most 14 digits",
 										},
 									}}
 									render={({ field }) => (
-						<TextField
+										<CustomTextField
 											{...field}
 											required
-							margin="dense"
+											placeholder="Enter Phone Number"
-							label="Phone Number"
+											size="small"
-							type="tel"
-							fullWidth
-							variant="standard"
 											error={!!errors.phone}
 											helperText={errors.phone?.message}
 										/>
 									)}
 								/>
-			</DialogContent>
+							</Box>
+						</Box>
+					</Box>
 
-			<DialogActions>
+					{/* Submit Button */}
-				<Button onClick={handleClose}>Cancel</Button>
+					<Box
-				<Button type="submit">Create</Button>
+						sx={{
-			</DialogActions>
+							display: "flex",
-		</Dialog>
+							justifyContent: "flex-end",
+							width: "100%",
+							mt: 3,
+						}}
+					>
+						<Button
+							type="submit"
+							sx={{
+								backgroundColor: "#52ACDF",
+								color: "white",
+								borderRadius: "8px",
+								width: "117px",
+								"&:hover": { backgroundColor: "#439BC1" },
+							}}
+						>
+							{editRow ? "Update User" : "Add User"}
+						</Button>
+					</Box>
+				</form>
+			</Box>
+		</Modal>
 	);
 };
 
 export default AddUserModal;
-function handleUpdate(id: any, name: string, email: string, phone: string, password: string) {
+function setValue(arg0: string, name: any) {
 	throw new Error("Function not implemented.");
 }
 

src/components/AddUserModel/styled.css.tsx

@@ -0,0 +1,26 @@
+import { styled } from "@mui/material/styles";
+import { IconButton, TextField } from "@mui/material";
+export const CustomIconButton = styled(IconButton)({
+	backgroundColor: "transparent",
+	"&:hover": {
+		backgroundColor: "#272727",
+	},
+	"*:where([data-mui-color-scheme='dark']) &": {
+		backgroundColor: "transparent",
+		border: "none",
+	},
+});
+
+// Custom TextField with different placeholder color
+export const CustomTextField = styled(TextField)({
+	"& .MuiInputBase-input::placeholder": {
+		color: "#D9D8D8",
+		opacity: 1,
+	},
+	"& .MuiInputBase-root.Mui-focused .MuiInputBase-input::placeholder": {
+		color: "darkgray",
+	},
+
+});
+    
+

src/components/AddVehicleModal/index.tsx

@@ -1,42 +1,28 @@
-import { useState } from "react";
+import { useForm } from "react-hook-form";
 import {
 	Box,
 	Button,
 	Typography,
-	TextField,
 	Modal,
-	IconButton,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-
+import { CustomIconButton, CustomTextField } from "../AddUserModel/styled.css.tsx";
 export default function AddVehicleModal({
 	open,
 	handleClose,
 	handleAddVehicle,
 }) {
-	// State for input fields
+	const {
-	const [name, setName] = useState("");
+		register,
-	const [company, setCompany] = useState("");
+		handleSubmit,
-	const [modelName, setModelName] = useState("");
+		formState: { errors },
-	const [chargeType, setChargeType] = useState("");
+		reset,
-	const [imageUrl, setImageUrl] = useState("");
+	} = useForm();
 
-	const handleSubmit = () => {
+	const onSubmit = (data: any) => {
-		if (!name || !company || !modelName || !chargeType || !imageUrl) {
+		handleAddVehicle(data); // Add vehicle to table
-			alert("Please fill all fields");
-			return;
-		}
-
-		const newVehicle = {
-			name,
-			company,
-			modelName,
-			chargeType,
-			imageUrl,
-		};
-
-		handleAddVehicle(newVehicle); // Add vehicle to table
 		handleClose(); // Close modal after adding
+		reset();
 	};
 
 	return (
@@ -69,16 +55,24 @@ export default function AddVehicleModal({
 					<Typography variant="h6" fontWeight={600}>
 						Add Vehicle
 					</Typography>
-					<IconButton onClick={handleClose}>
+					<CustomIconButton onClick={handleClose}>
 						<CloseIcon />
-					</IconButton>
+					</CustomIconButton>
 				</Box>
 
 				{/* Horizontal Line */}
 				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
 
+				{/* Form */}
+				<form onSubmit={handleSubmit(onSubmit)}>
 					{/* Input Fields */}
-				<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+					<Box
+						sx={{
+							display: "flex",
+							flexDirection: "column",
+							gap: 2,
+						}}
+					>
 						{/* First Row - Two Inputs */}
 						<Box sx={{ display: "flex", gap: 2 }}>
 							<Box
@@ -91,12 +85,22 @@ export default function AddVehicleModal({
 								<Typography variant="body2" fontWeight={500}>
 									Vehicle Name
 								</Typography>
-							<TextField
+								<CustomTextField
 									fullWidth
 									placeholder="Enter Vehicle Name"
 									size="small"
-								value={name}
+									error={!!errors.name}
-								onChange={(e) => setName(e.target.value)}
+									helperText={
+										errors.name ? errors.name.message : ""
+									}
+									{...register("name", {
+										required: "Vehicle Name is required",
+										minLength: {
+											value: 2,
+											message:
+												"Vehicle Name must be at least 2 characters long",
+										},
+									})}
 								/>
 							</Box>
 
@@ -110,12 +114,24 @@ export default function AddVehicleModal({
 								<Typography variant="body2" fontWeight={500}>
 									Company
 								</Typography>
-							<TextField
+								<CustomTextField
 									fullWidth
 									placeholder="Enter Company Name"
 									size="small"
-								value={company}
+									error={!!errors.company}
-								onChange={(e) => setCompany(e.target.value)}
+									helperText={
+										errors.company
+											? errors.company.message
+											: ""
+									}
+									{...register("company", {
+										required: "Company is required",
+										minLength: {
+											value: 5,
+											message:
+												"Company must be at least 5 characters long",
+										},
+									})}
 								/>
 							</Box>
 						</Box>
@@ -132,12 +148,19 @@ export default function AddVehicleModal({
 								<Typography variant="body2" fontWeight={500}>
 									Model Name
 								</Typography>
-							<TextField
+								<CustomTextField
 									fullWidth
 									placeholder="Enter Model Name"
 									size="small"
-								value={modelName}
+									error={!!errors.modelName}
-								onChange={(e) => setModelName(e.target.value)}
+									helperText={
+										errors.modelName
+											? errors.modelName.message
+											: ""
+									}
+									{...register("modelName", {
+										required: "Model Name is required",
+									})}
 								/>
 							</Box>
 
@@ -151,12 +174,19 @@ export default function AddVehicleModal({
 								<Typography variant="body2" fontWeight={500}>
 									Charge Type
 								</Typography>
-							<TextField
+								<CustomTextField
 									fullWidth
 									placeholder="Enter Charge Type"
 									size="small"
-								value={chargeType}
+									error={!!errors.chargeType}
-								onChange={(e) => setChargeType(e.target.value)}
+									helperText={
+										errors.chargeType
+											? errors.chargeType.message
+											: ""
+									}
+									{...register("chargeType", {
+										required: "Charge Type is required",
+									})}
 								/>
 							</Box>
 						</Box>
@@ -172,24 +202,50 @@ export default function AddVehicleModal({
 							<Typography variant="body2" fontWeight={500}>
 								Image URL
 							</Typography>
-						<TextField
+							<CustomTextField
 								fullWidth
 								placeholder="Enter Image URL"
 								size="small"
-							value={imageUrl}
+								error={!!errors.imageUrl}
-							onChange={(e) => setImageUrl(e.target.value)}
+								helperText={
+									errors.imageUrl
+										? errors.imageUrl.message
+										: ""
+								}
+								{...register("imageUrl", {
+									required: "Image URL is required",
+									pattern: {
+										value: /^(https?:\/\/)?((([a-zA-Z\d]([a-zA-Z\d-]*[a-zA-Z\d])*)\.)+[a-zA-Z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:\d+)?(\/[-a-zA-Z\d%_.~+]*)*(\?[;&a-zA-Z\d%_.~+=-]*)?(#[-a-zA-Z\d_]*)?$/,
+										message: "Please enter a valid URL",
+									},
+								})}
 							/>
 						</Box>
 					</Box>
 
 					{/* Submit Button */}
 					<Box
-					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
+						sx={{
+							display: "flex",
+							justifyContent: "flex-end",
+							mt: 3,
+						}}
+					>
+						<Button
+							
+							type="submit"
+							sx={{
+								backgroundColor: "#52ACDF",
+								color: "white",
+								borderRadius: "8px",
+								width: "117px",
+								"&:hover": { backgroundColor: "#439BC1" },
+							}}
 						>
-					<Button variant="contained" onClick={handleSubmit}>
 							Add Vehicle
 						</Button>
 					</Box>
+				</form>
 			</Box>
 		</Modal>
 	);

src/components/CustomTable/index.tsx

@@ -15,9 +15,9 @@ import { useDispatch } from "react-redux";
 import {
 	Box,
 	Button,
-	IconButton,
 	InputAdornment,
 	Menu,
+IconButton,
 	Pagination,
 	TextField,
 	Typography,
@@ -30,7 +30,9 @@ import VehicleViewModal from "../Modals/VehicleViewModal";
 
 import SearchIcon from "@mui/icons-material/Search";
 import TuneIcon from "@mui/icons-material/Tune";
-
+import {
+	CustomIconButton,
+} from "../AddUserModel/styled.css.tsx";
 // Styled components for customization
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	[`&.${tableCellClasses.head}`]: {
@@ -248,11 +250,15 @@ const filteredRows = rows.filter(
 								borderColor: "#52ACDF",
 							},
 						},
+						"& .MuiInputBase-input::placeholder": {
+							color: "#D9D8D8",
+							opacity: 1,
+						},
 					}}
 					InputProps={{
 						startAdornment: (
 							<InputAdornment position="start">
-								<SearchIcon sx={{ color: "#272727" }} />
+								<SearchIcon sx={{ color: "#52ACDF" }} />
 							</InputAdornment>
 						),
 					}}
@@ -361,7 +367,7 @@ const filteredRows = rows.filter(
 										) : column.id !== "action" ? (
 											row[column.id]
 										) : (
-											<IconButton
+											<CustomIconButton
 												onClick={(e) => {
 													handleClick(e, row);
 													setRowData(row); // Store the selected row
@@ -371,20 +377,13 @@ const filteredRows = rows.filter(
 													minWidth: 0,
 													width: "auto",
 													height: "auto",
-													backgroundColor:
-														"transparent",
 													color: "#FFFFFF",
-													border: "none",
-													"&:hover": {
-														backgroundColor:
-															"transparent",
-													},
 												}}
 											>
 												<MoreHorizRoundedIcon
 													sx={{ fontSize: "24px" }}
 												/>
-											</IconButton>
+											</CustomIconButton>
 										)}
 									</StyledTableCell>
 								))}
@@ -442,6 +441,9 @@ const filteredRows = rows.filter(
 						[`& .${paperClasses.root}`]: {
 							padding: 0,
 						},
+						"& .MuiList-root": {
+							background: "#272727", // Remove any divider under menu items
+						},
 					}}
 				>
 					<Box
@@ -531,7 +533,7 @@ const filteredRows = rows.filter(
 								justifyContent: "flex-start",
 								py: 0,
 								fontWeight: "bold",
-								color: "red",
+								
 							}}
 						>
 							Delete

src/components/EditVehicleModal/index.tsx

@@ -3,14 +3,15 @@ import {
 	Box,
 	Button,
 	Typography,
-	TextField,
 	Modal,
-	IconButton,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { useForm, Controller } from "react-hook-form";
 import { updateVehicle } from "../../redux/slices/VehicleSlice";
-
+import {
+	CustomIconButton,
+	CustomTextField,
+} from "../AddUserModel/styled.css.tsx";
 interface EditVehicleModalProps {
 	open: boolean;
 	handleClose: () => void;
@@ -115,9 +116,9 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 					<Typography variant="h6" fontWeight={600}>
 						Edit Vehicle
 					</Typography>
-					<IconButton onClick={handleClose}>
+					<CustomIconButton onClick={handleClose}>
 						<CloseIcon />
-					</IconButton>
+					</CustomIconButton>
 				</Box>
 
 				{/* Horizontal Line */}
@@ -146,7 +147,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 								control={control}
 								rules={{ required: "Vehicle Name is required" }}
 								render={({ field }) => (
-									<TextField
+									<CustomTextField
 										{...field}
 										fullWidth
 										placeholder="Enter Vehicle Name"
@@ -177,7 +178,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 								control={control}
 								rules={{ required: "Company is required" }}
 								render={({ field }) => (
-									<TextField
+									<CustomTextField
 										{...field}
 										fullWidth
 										placeholder="Enter Company Name"
@@ -211,7 +212,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 								control={control}
 								rules={{ required: "Model Name is required" }}
 								render={({ field }) => (
-									<TextField
+									<CustomTextField
 										{...field}
 										fullWidth
 										placeholder="Enter Model Name"
@@ -242,7 +243,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 								control={control}
 								rules={{ required: "Charge Type is required" }}
 								render={({ field }) => (
-									<TextField
+									<CustomTextField
 										{...field}
 										fullWidth
 										placeholder="Enter Charge Type"
@@ -271,7 +272,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 							control={control}
 							rules={{ required: "Image URL is required" }}
 							render={({ field }) => (
-								<TextField
+								<CustomTextField
 									{...field}
 									fullWidth
 									placeholder="Enter Image URL"
@@ -288,7 +289,16 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 				<Box
 					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
 				>
-					<Button variant="contained" type="submit">
+					<Button
+						type="submit"
+						sx={{
+							backgroundColor: "#52ACDF",
+							color: "white",
+							borderRadius: "8px",
+							width: "117px",
+							"&:hover": { backgroundColor: "#439BC1" },
+						}}
+					>
 						Update Vehicle
 					</Button>
 				</Box>

src/components/Modals/VehicleViewModal/index.tsx

@@ -1,18 +1,15 @@
 import React, { useEffect, useState } from "react";
-import { Box, Modal, Typography, Divider } from "@mui/material";
+import { Box, Modal, Typography, Divider, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../redux/reducers";
 
-
-
 type Props = {
 	open: boolean;
 	setViewModal: Function;
 	handleView: (id: string | undefined) => void;
 	id?: number | undefined;
 };
-;
 
 const style = {
 	position: "absolute",
@@ -30,13 +27,10 @@ const style = {
 	gap: 2,
 };
 
-export default function VehicleViewModal({
+export default function VehicleViewModal({ open, setViewModal, id }: Props) {
-	open,
+	const { vehicles } = useSelector(
-	setViewModal,
+		(state: RootState) => state.vehicleReducer
-	id,
+	);
-	
-}: Props) {
-const { vehicles } = useSelector((state: RootState) => state.vehicleReducer);
 	const [selectedVehicle, setSelectedVehicle] = useState<any>(null);
 
 	useEffect(() => {
@@ -86,37 +80,37 @@ const { vehicles } = useSelector((state: RootState) => state.vehicleReducer);
 				<Divider sx={{ width: "100%" }} />
 
 				{selectedVehicle ? (
-					<Box
+					<Grid container spacing={2} sx={{ width: "80%" }}>
-						sx={{
+						<Grid item xs={6}>
-							width: "80%",
-							textAlign: "left",
-							display: "flex",
-							flexDirection: "column",
-							gap: 1.5,
-							whiteSpace: "pre-wrap",
-							wordBreak: "break-word",
-							overflowWrap: "break-word",
-						}}
-					>
 							<Typography variant="body1">
 								<strong>Name:</strong> {selectedVehicle.name}
 							</Typography>
+						</Grid>
+						<Grid item xs={6}>
 							<Typography variant="body1">
-							<strong>Company:</strong> {selectedVehicle.company}
+								<strong>Company:</strong>{" "}
+								{selectedVehicle.company}
 							</Typography>
+						</Grid>
+						<Grid item xs={6}>
 							<Typography variant="body1">
 								<strong>Model Name:</strong>{" "}
 								{selectedVehicle.modelName}
 							</Typography>
+						</Grid>
+						<Grid item xs={6}>
 							<Typography variant="body1">
 								<strong>Charge Type:</strong>{" "}
 								{selectedVehicle.chargeType}
 							</Typography>
+						</Grid>
+						<Grid item xs={6}>
 							<Typography variant="body1">
 								<strong>Image URL:</strong>{" "}
 								{selectedVehicle.imageUrl}
 							</Typography>
-					</Box>
+						</Grid>
+					</Grid>
 				) : (
 					<Typography align="center">
 						No vehicle found with this ID

src/components/Modals/ViewModal/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Modal, Typography, Divider } from "@mui/material";
+import { Box, Button, Modal, Typography, Divider, Grid } from "@mui/material";
 import { RootState } from "../../../redux/store/store";
 import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
@@ -10,12 +10,14 @@ type Props = {
 	id?: string;
 };
 
-const style = {
+const mainContainerStyle = {
 	position: "absolute",
 	top: "50%",
 	left: "50%",
 	transform: "translate(-50%, -50%)",
-	width: 400,
+	// width: "544px",
+	// height: "190px",
+	gap: "8px",
 	bgcolor: "background.paper",
 	borderRadius: 2,
 	boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
@@ -23,15 +25,16 @@ const style = {
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "center",
-	gap: 2,
 };
 
-const btnStyle = {
+const headerLayoutStyle = {
-	mt: 2,
+	// width: 544,
-	px: 5,
+	// height: 48,
-	py: 1.2,
+	gap: "24px",
-	width: "100%",
+	paddingBottom: "12px",
-	textTransform: "capitalize",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
 };
 
 export default function ViewModal({ open, setViewModal, id }: Props) {
@@ -51,75 +54,79 @@ export default function ViewModal({ open, setViewModal, id }: Props) {
 			aria-labelledby="modal-title"
 			aria-describedby="modal-description"
 		>
-			<Box sx={style}>
+			<Box sx={mainContainerStyle}>
+				<Box sx={headerLayoutStyle}>
 					<Typography
 						id="modal-title"
 						variant="h5"
 						fontWeight="bold"
-					sx={{ width: "100%" }}
+						sx={{ flex: 1, textAlign: "center" }}
 					>
-					<Box
-						sx={{
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "space-between",
-							width: "100%",
-						}}
-					>
-						<Box sx={{ flex: 1, textAlign: "center" }}>
 						{selectedAdmin?.name}'s Details
-						</Box>
+					</Typography>
 					<Box
 						onClick={() => setViewModal(false)}
 						sx={{
 							cursor: "pointer",
 							display: "flex",
 							alignItems: "center",
+							marginLeft: "auto", // Ensures the button is at the right end
+							justifyContent:"flex-end"
 						}}
 					>
 						<CloseIcon />
 					</Box>
 				</Box>
-				</Typography>
 
 				<Divider sx={{ width: "100%" }} />
 
 				{selectedAdmin ? (
 					<Box
 						sx={{
-							width: "80%",
+							width: "100%",
 							textAlign: "left",
 							display: "flex",
 							flexDirection: "column",
 							gap: 1.5,
-							whiteSpace: "pre-wrap", // the text wraps properly
+							whiteSpace: "pre-wrap",
 							wordBreak: "break-word",
 							overflowWrap: "break-word",
 						}}
 					>
-						<Typography variant="body1">
+						<Grid container spacing={2}>
-							<b>Name:</b> {selectedAdmin.name}
+							<Grid item xs={6}>
+								<Typography>
+									<b>Name:</b>
 								</Typography>
-						<Typography variant="body1">
+								<Typography>{selectedAdmin.name}</Typography>
-							<strong>Email:</strong> {selectedAdmin.email}
+							</Grid>
+							<Grid item xs={6}>
+								<Typography>
+									<b>Phone:</b>
 								</Typography>
-						<Typography variant="body1">
+								<Typography>{selectedAdmin.phone}</Typography>
-							<strong>Phone:</strong> {selectedAdmin.phone}
+							</Grid>
+							<Grid item xs={6}>
+								<Typography>
+									<b>Email:</b>
 								</Typography>
-						<Typography variant="body1">
+								<Typography>{selectedAdmin.email}</Typography>
-							<strong>Address:</strong>{" "}
+							</Grid>
+							<Grid item xs={6}>
+								<Typography>
+									<b>Address:</b>
+								</Typography>
+								<Typography>
 									{selectedAdmin.registeredAddress ?? "N/A"}
 								</Typography>
+							</Grid>
+						</Grid>
 					</Box>
 				) : (
 					<Typography align="center">
 						No admin found with this ID
 					</Typography>
 				)}
-
-				{/* <Button variant="contained" color="error" sx={btnStyle} onClick={() => setViewModal(false)}>
-					Close
-				</Button> */}
 			</Box>
 		</Modal>
 	);

src/components/OptionsMenu/index.tsx

@@ -39,6 +39,10 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 							overflow: "visible",
 							filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
 							mt: 1.5,
+
+							"& .MuiList-root": {
+								background: "#272727", // Remove any divider under menu items
+							},
 							"& .MuiMenuItem-root": {
 								borderBottom: "none", // Remove any divider under menu items
 							},

src/pages/AddEditRolePage/index.tsx

@@ -11,9 +11,8 @@ import {
 	Typography,
 	Box,
 	Grid,
-	FormControlLabel,
 	Button,
-	TextField,
+	FormControlLabel,
 	Snackbar,
 } from "@mui/material";
 import { useNavigate } from "react-router-dom"; // Import useNavigate
@@ -21,6 +20,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { createRole } from "../../redux/slices/roleSlice"; // Import the createRole action
 import { AppDispatch, RootState } from "../../redux/store/store"; // Assuming this is the path to your store file
 import { toast } from "sonner";
+import {
+	CustomTextField,
+} from "../../components/AddUserModel/styled.css.tsx";
 // Define the data structure for permission
 interface Permission {
 	module: string;
@@ -155,7 +157,7 @@ const AddEditRolePage: React.FC = () => {
 			{/* Role Name Input */}
 			<Box sx={{ mb: 2 }}>
 				<label>Role Name</label>
-				<TextField
+				<CustomTextField
 					placeholder="Enter role name"
 					value={roleName}
 					onChange={handleRoleNameChange}
@@ -256,10 +258,15 @@ const AddEditRolePage: React.FC = () => {
 			{/* Submit Button */}
 			<Box sx={{ mt: 2, display: "flex", justifyContent: "flex-end" }}>
 				<Button
-					variant="contained"
-					color="primary"
 					onClick={handleSubmit}
 					disabled={loading}
+					sx={{
+						backgroundColor: "#52ACDF",
+						color: "white",
+						borderRadius: "8px",
+						width: "117px",
+						"&:hover": { backgroundColor: "#439BC1" },
+					}}
 				>
 					{loading ? "Saving..." : "Save Role"}
 				</Button>

src/shared-theme/customizations/dataDisplay.js

@@ -14,6 +14,7 @@ export const dataDisplayCustomizations = {
         padding: '8px',
         display: 'flex',
         flexDirection: 'column',
+
         gap: 0,
       },
     },

src/shared-theme/customizations/inputs.js

@@ -385,7 +385,7 @@ export const inputsCustomizations = {
         color: (theme.vars || theme).palette.text.primary,
         borderRadius: (theme.vars || theme).shape.borderRadius,
         border: `1px solid ${(theme.vars || theme).palette.divider}`,
-        backgroundColor: (theme.vars || theme).palette.background.default,
+        backgroundColor: "#272727",
         transition: 'border 120ms ease-in',
         '&:hover': {
           borderColor: gray[400],