jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Upadate ui for admin panel

Browse source
This commit is contained in:
jaanvi 2025-03-10 18:34:12 +05:30
parent 1d67f85f22
commit 86e0502256
12 changed files with 977 additions and 605 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

502
src/components/AddEditCategoryModal/index.tsx
View file

@ -1,17 +1,20 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
IconButton,
TextField,
Typography,
Modal,
InputAdornment,
} 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,
@ -59,7 +63,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
password: "",
},
});
const onSubmit = (data: FormData) => {
if (editRow) {
handleUpdate(
@ -77,6 +81,10 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
reset();
};
const togglePasswordVisibility = () => {
setShowPassword((prev) => !prev);
};
useEffect(() => {
if (editRow) {
setValue("name", editRow.name);
@ -88,217 +96,327 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
}
}, [editRow, setValue, reset]);
const [showPassword, setShowPassword] = React.useState(false);
return (
<Dialog
<Modal
open={open}
onClose={handleClose}
maxWidth="md"
fullWidth
PaperProps={{
component: "form",
onSubmit: handleSubmit(onSubmit),
}}
aria-labelledby="add-edit-category-modal"
>
<DialogTitle
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 600,
bgcolor: "background.paper",
boxShadow: 24,
p: 3,
borderRadius: 2,
}}
>
{editRow ? "Edit Admin" : "Add Admin"}
{/* Header */}
<Box
onClick={handleClose}
sx={{
cursor: "pointer",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<CloseIcon />
<Typography variant="h6" fontWeight={600}>
{editRow ? "Edit Admin" : "Add Admin"}
</Typography>
<CustomIconButton onClick={handleClose}>
<CloseIcon />
</CustomIconButton>
</Box>
</DialogTitle>
<DialogContent>
<Controller
name="name"
control={control}
rules={{
required: "Admin Name is required",
minLength: {
value: 3,
message: "Minimum 3 characters required",
},
maxLength: {
value: 30,
message: "Maximum 30 characters allowed",
},
}}
render={({ field }) => (
<TextField
{...field}
autoFocus
required
margin="dense"
label="Admin Name"
type="text"
fullWidth
variant="standard"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
{/* Horizontal Line */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
<Controller
name="email"
control={control}
rules={{
required: "Email is required",
pattern: {
value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
message: "Invalid email address",
},
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Email"
type="email"
fullWidth
variant="standard"
error={!!errors.email}
helperText={errors.email?.message}
/>
)}
/>
{!editRow && (
<Controller
name="password"
control={control}
rules={{
required: "password is required",
{/* Form */}
<form onSubmit={handleSubmit(onSubmit)}>
{/* Input Fields */}
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 2,
}}
render={({ field }) => (
<>
>
{/* 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}
rules={{
required: "Admin Name is required",
minLength: {
value: 3,
message:
"Minimum 3 characters required",
},
maxLength: {
value: 30,
message:
"Maximum 30 characters allowed",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
required
placeholder="Enter Admin Name"
fullWidth
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: /\S+@\S+\.\S+/,
message:
"Please enter a valid email address.",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
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",
alignItems: "center",
flexDirection: "column",
width: "50%",
}}
>
<TextField
<Typography
variant="body2"
fontWeight={500}
>
Password
</Typography>
<Controller
name="password"
control={control}
rules={{
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
{...field}
required
placeholder="Enter Password"
type={
showPassword
? "text"
: "password"
}
id="password"
fullWidth
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
}
/>
)}
/>
</Box>
)}
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "50%",
}}
>
<Typography variant="body2" fontWeight={500}>
Phone Number
</Typography>
<Controller
name="phone"
control={control}
rules={{
required: "Phone number is required",
pattern: {
value: /^[0-9]*$/,
message: "Only numbers are allowed",
},
minLength: {
value: 6,
message:
"Phone number must be at least 6 digits",
},
maxLength: {
value: 14,
message:
"Phone number must be at most 14 digits",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
required
placeholder="Enter Phone Number"
size="small"
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}
rules={{
required: "Address is required",
maxLength: {
value: 100,
message:
"Address cannot exceed 100 characters",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
required
margin="dense"
label="Password"
type={
showPassword ? "text" : "password"
}
id="password"
autoComplete="current-password"
autoFocus
placeholder="Enter Address"
fullWidth
variant="standard"
error={!!errors.password}
helperText={errors.password?.message}
/>
<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"
error={!!errors.registeredAddress}
helperText={
errors.registeredAddress?.message
}
>
{showPassword ? (
<VisibilityOff />
) : (
<Visibility />
)}
</IconButton>
</Box>
</>
)}
/>
)}
<Controller
name="phone"
control={control}
rules={{
required: "Phone number is required",
pattern: {
value: /^[0-9]*$/,
message: "Only numbers are allowed",
},
minLength: {
value: 6,
message: "Phone number must be exactly 6 digits",
},
maxLength: {
value: 14,
message: "Phone number must be exactly 14 digits",
},
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Phone Number"
type="tel"
fullWidth
variant="standard"
error={!!errors.phone}
helperText={errors.phone?.message}
/>
)}
/>
/>
)}
/>
</Box>
</Box>
<Controller
name="registeredAddress"
control={control}
rules={{
required: "Address is required",
maxLength: {
value: 100,
message: "Address cannot exceed 100 characters",
},
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Address"
type="text"
fullWidth
variant="standard"
error={!!errors.registeredAddress}
helperText={errors.registeredAddress?.message}
/>
)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type="submit">{editRow ? "Update" : "Create"}</Button>
</DialogActions>
</Dialog>
{/* Submit Button */}
<Box
sx={{
display: "flex",
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>
);
};

447
src/components/AddUserModel/index.tsx
View file

@ -1,17 +1,27 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Typography,
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: "",
password: "",
phone: "",
password: "",
},
});
// 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,156 +86,290 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
reset();
};
const togglePasswordVisibility = () => {
setShowPassword((prev) => !prev);
};
return (
<Dialog
<Modal
open={open}
onClose={handleClose}
maxWidth="md"
fullWidth
PaperProps={{
component: "form",
onSubmit: handleSubmit(onSubmit),
}}
aria-labelledby="add-user-modal"
>
<DialogTitle
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
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,
}}
>
{editRow ? "Edit User" : "Add User"}
{/* Header */}
<Box
onClick={handleClose}
sx={{
cursor: "pointer",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<CloseIcon />
<Typography variant="h6" fontWeight={600}>
{editRow ? "Edit User" : "Add User"}
</Typography>
<CustomIconButton onClick={handleClose}>
<CloseIcon />
</CustomIconButton>
</Box>
</DialogTitle>
<DialogContent>
<Controller
name="name"
control={control}
rules={{
required: "Admin Name is required",
minLength: {
value: 3,
message: "Minimum 3 characters required",
},
maxLength: {
value: 30,
message: "Maximum 30 characters allowed",
},
}}
render={({ field }) => (
<TextField
{...field}
autoFocus
required
margin="dense"
label="User Name"
type="text"
fullWidth
variant="standard"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
{/* Horizontal Line */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
<Controller
name="email"
control={control}
rules={{
required: "Email is required",
pattern: {
value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
message: "Invalid email address",
},
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Email"
type="email"
fullWidth
variant="standard"
error={!!errors.email}
helperText={errors.email?.message}
/>
)}
/>
<Controller
name="password"
control={control}
rules={{
required: "password is required",
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Password"
type="password"
fullWidth
variant="standard"
error={!!errors.password}
helperText={errors.password?.message}
/>
)}
/>
<Controller
name="phone"
control={control}
rules={{
required: "Phone number is required",
pattern: {
value: /^[0-9]*$/,
message: "Only numbers are allowed",
},
minLength: {
value: 6,
message: "Phone number must be exactly 6 digits",
},
maxLength: {
value: 14,
message: "Phone number must be exactly 14 digits",
},
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Phone Number"
type="tel"
fullWidth
variant="standard"
error={!!errors.phone}
helperText={errors.phone?.message}
/>
)}
/>
</DialogContent>
{/* 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: "User Name is required",
minLength: {
value: 3,
message:
"Minimum 3 characters required",
},
maxLength: {
value: 30,
message:
"Maximum 30 characters allowed",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
required
placeholder="Enter User Name"
fullWidth
size="small"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
</Box>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type="submit">Create</Button>
</DialogActions>
</Dialog>
<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: /\S+@\S+\.\S+/,
message:
"Please enter a valid email address.",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
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",
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
{...field}
required
placeholder="Enter Password"
type={
showPassword
? "text"
: "password"
}
id="password"
fullWidth
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
}
/>
)}
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
Phone Number
</Typography>
<Controller
name="phone"
control={control}
rules={{
required: "Phone number is required",
pattern: {
value: /^[0-9]*$/,
message: "Only numbers are allowed",
},
minLength: {
value: 6,
message:
"Phone number must be at least 6 digits",
},
maxLength: {
value: 14,
message:
"Phone number must be at most 14 digits",
},
}}
render={({ field }) => (
<CustomTextField
{...field}
required
placeholder="Enter Phone Number"
size="small"
error={!!errors.phone}
helperText={errors.phone?.message}
/>
)}
/>
</Box>
</Box>
</Box>
{/* Submit Button */}
<Box
sx={{
display: "flex",
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.");
}

26
src/components/AddUserModel/styled.css.tsx Normal file
View file

@ -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",
},
});

322
src/components/AddVehicleModal/index.tsx
View file

@ -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 [name, setName] = useState("");
const [company, setCompany] = useState("");
const [modelName, setModelName] = useState("");
const [chargeType, setChargeType] = useState("");
const [imageUrl, setImageUrl] = useState("");
const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm();
const handleSubmit = () => {
if (!name || !company || !modelName || !chargeType || !imageUrl) {
alert("Please fill all fields");
return;
}
const newVehicle = {
name,
company,
modelName,
chargeType,
imageUrl,
};
handleAddVehicle(newVehicle); // Add vehicle to table
const onSubmit = (data: any) => {
handleAddVehicle(data); // Add vehicle to table
handleClose(); // Close modal after adding
reset();
};
return (
@ -69,127 +55,197 @@ 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 }} />
{/* 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}>
Vehicle Name
</Typography>
<TextField
fullWidth
placeholder="Enter Vehicle Name"
size="small"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
Company
</Typography>
<TextField
fullWidth
placeholder="Enter Company Name"
size="small"
value={company}
onChange={(e) => setCompany(e.target.value)}
/>
</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}>
Model Name
</Typography>
<TextField
fullWidth
placeholder="Enter Model Name"
size="small"
value={modelName}
onChange={(e) => setModelName(e.target.value)}
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
Charge Type
</Typography>
<TextField
fullWidth
placeholder="Enter Charge Type"
size="small"
value={chargeType}
onChange={(e) => setChargeType(e.target.value)}
/>
</Box>
</Box>
{/* Third Row - Image URL */}
{/* Form */}
<form onSubmit={handleSubmit(onSubmit)}>
{/* Input Fields */}
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
gap: 2,
}}
>
<Typography variant="body2" fontWeight={500}>
Image URL
</Typography>
<TextField
fullWidth
placeholder="Enter Image URL"
size="small"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
/>
</Box>
</Box>
{/* First Row - Two Inputs */}
<Box sx={{ display: "flex", gap: 2 }}>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
Vehicle Name
</Typography>
<CustomTextField
fullWidth
placeholder="Enter Vehicle Name"
size="small"
error={!!errors.name}
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>
{/* Submit Button */}
<Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
>
<Button variant="contained" onClick={handleSubmit}>
Add Vehicle
</Button>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
Company
</Typography>
<CustomTextField
fullWidth
placeholder="Enter Company Name"
size="small"
error={!!errors.company}
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>
{/* Second Row - Two Inputs */}
<Box sx={{ display: "flex", gap: 2 }}>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
Model Name
</Typography>
<CustomTextField
fullWidth
placeholder="Enter Model Name"
size="small"
error={!!errors.modelName}
helperText={
errors.modelName
? errors.modelName.message
: ""
}
{...register("modelName", {
required: "Model Name is required",
})}
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
Charge Type
</Typography>
<CustomTextField
fullWidth
placeholder="Enter Charge Type"
size="small"
error={!!errors.chargeType}
helperText={
errors.chargeType
? errors.chargeType.message
: ""
}
{...register("chargeType", {
required: "Charge Type is required",
})}
/>
</Box>
</Box>
{/* Third Row - Image URL */}
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
Image URL
</Typography>
<CustomTextField
fullWidth
placeholder="Enter Image URL"
size="small"
error={!!errors.imageUrl}
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,
}}
>
<Button
type="submit"
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
}}
>
Add Vehicle
</Button>
</Box>
</form>
</Box>
</Modal>
);

28
src/components/CustomTable/index.tsx
View file

@ -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

32
src/components/EditVehicleModal/index.tsx
View file

@ -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>

86
src/components/Modals/VehicleViewModal/index.tsx
View file

@ -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;
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({
open,
setViewModal,
id,
}: Props) {
const { vehicles } = useSelector((state: RootState) => state.vehicleReducer);
export default function VehicleViewModal({ open, setViewModal, 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
sx={{
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>
<Typography variant="body1">
<strong>Company:</strong> {selectedVehicle.company}
</Typography>
<Typography variant="body1">
<strong>Model Name:</strong>{" "}
{selectedVehicle.modelName}
</Typography>
<Typography variant="body1">
<strong>Charge Type:</strong>{" "}
{selectedVehicle.chargeType}
</Typography>
<Typography variant="body1">
<strong>Image URL:</strong>{" "}
{selectedVehicle.imageUrl}
</Typography>
</Box>
<Grid container spacing={2} sx={{ width: "80%" }}>
<Grid item xs={6}>
<Typography variant="body1">
<strong>Name:</strong> {selectedVehicle.name}
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="body1">
<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>
</Grid>
</Grid>
) : (
<Typography align="center">
No vehicle found with this ID

113
src/components/Modals/ViewModal/index.tsx
View file

@ -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 = {
mt: 2,
px: 5,
py: 1.2,
width: "100%",
textTransform: "capitalize",
const headerLayoutStyle = {
// width: 544,
// height: 48,
gap: "24px",
paddingBottom: "12px",
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}>
<Typography
id="modal-title"
variant="h5"
fontWeight="bold"
sx={{ width: "100%" }}
>
<Box sx={mainContainerStyle}>
<Box sx={headerLayoutStyle}>
<Typography
id="modal-title"
variant="h5"
fontWeight="bold"
sx={{ flex: 1, textAlign: "center" }}
>
{selectedAdmin?.name}'s Details
</Typography>
<Box
onClick={() => setViewModal(false)}
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
marginLeft: "auto", // Ensures the button is at the right end
justifyContent:"flex-end"
}}
>
<Box sx={{ flex: 1, textAlign: "center" }}>
{selectedAdmin?.name}'s Details
</Box>
<Box
onClick={() => setViewModal(false)}
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
}}
>
<CloseIcon />
</Box>
<CloseIcon />
</Box>
</Typography>
</Box>
<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
wordBreak: "break-word",
whiteSpace: "pre-wrap",
wordBreak: "break-word",
overflowWrap: "break-word",
}}
>
<Typography variant="body1">
<b>Name:</b> {selectedAdmin.name}
</Typography>
<Typography variant="body1">
<strong>Email:</strong> {selectedAdmin.email}
</Typography>
<Typography variant="body1">
<strong>Phone:</strong> {selectedAdmin.phone}
</Typography>
<Typography variant="body1">
<strong>Address:</strong>{" "}
{selectedAdmin.registeredAddress ?? "N/A"}
</Typography>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography>
<b>Name:</b>
</Typography>
<Typography>{selectedAdmin.name}</Typography>
</Grid>
<Grid item xs={6}>
<Typography>
<b>Phone:</b>
</Typography>
<Typography>{selectedAdmin.phone}</Typography>
</Grid>
<Grid item xs={6}>
<Typography>
<b>Email:</b>
</Typography>
<Typography>{selectedAdmin.email}</Typography>
</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>
);

6
src/components/OptionsMenu/index.tsx
View file

@ -25,7 +25,7 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
return (
<React.Fragment>
<ExpandMoreIcon onClick={handleClick} sx={{cursor:"pointer"}}/>
<ExpandMoreIcon onClick={handleClick} sx={{ cursor: "pointer" }} />
<Menu
anchorEl={anchorEl}
id="top-menu"
@ -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
},

17
src/pages/AddEditRolePage/index.tsx
View file

@ -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>

1
src/shared-theme/customizations/dataDisplay.js
View file

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

2
src/shared-theme/customizations/inputs.js
View file

@ -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],