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

update the slotbooking ui

Browse source
This commit is contained in:
jaanvi 2025-04-14 17:40:19 +05:30
parent 1ddae7164f
commit 8aed8993ac
20 changed files with 342 additions and 432 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/AddAdminModal/addAdminModal.tsx
View file

@ -324,6 +324,7 @@ const AddAdminModal: React.FC<AddAdminModalProps> = ({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

3
src/components/AddBookingModal/addBookingModal.tsx
View file

@ -125,7 +125,7 @@ export default function AddBookingModal({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Add Booking Add Booking
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -453,6 +453,7 @@ export default function AddBookingModal({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

3
src/components/AddEditAdminModal/addEditAdminModal.tsx
View file

@ -130,7 +130,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
{editRow ? "Edit Admin" : "Add Admin"} {editRow ? "Edit Admin" : "Add Admin"}
</Typography> </Typography>
<CustomIconButton onClick={handleCloseModal}> <CustomIconButton onClick={handleCloseModal}>
@ -430,6 +430,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

13
src/components/AddManagerModal/addManagerModal.tsx
View file

@ -106,7 +106,7 @@ export default function AddManagerModal({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Add Manager Add Manager
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -130,7 +130,6 @@ export default function AddManagerModal({
placeholder="Enter Manager Name" placeholder="Enter Manager Name"
size="small" size="small"
sx={{ marginTop: 1 }} sx={{ marginTop: 1 }}
error={!!errors.name} error={!!errors.name}
helperText={ helperText={
errors.name ? errors.name.message : "" errors.name ? errors.name.message : ""
@ -160,10 +159,7 @@ export default function AddManagerModal({
{/* Station Dropdown */} {/* Station Dropdown */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}> <Box sx={{ display: "flex", gap: 2, mb: 2 }}>
<Box sx={{ flex: 1 }}> <Box sx={{ flex: 1 }}>
<Typography <Typography variant="body2" fontWeight={500}>
variant="body2"
fontWeight={500}
>
Select Station Select Station
</Typography> </Typography>
<FormControl <FormControl
@ -176,7 +172,6 @@ export default function AddManagerModal({
required: "Station Name is required", required: "Station Name is required",
})} })}
sx={{ marginTop: 1 }} sx={{ marginTop: 1 }}
displayEmpty displayEmpty
defaultValue="" defaultValue=""
renderValue={(selected) => { renderValue={(selected) => {
@ -239,7 +234,6 @@ export default function AddManagerModal({
placeholder="Enter Manager Email" placeholder="Enter Manager Email"
size="small" size="small"
sx={{ marginTop: 1 }} sx={{ marginTop: 1 }}
autoComplete="new-email" autoComplete="new-email"
error={!!errors.email} error={!!errors.email}
helperText={ helperText={
@ -281,7 +275,6 @@ export default function AddManagerModal({
{...field} {...field}
required required
sx={{ marginTop: 1 }} sx={{ marginTop: 1 }}
autoComplete="new-password" autoComplete="new-password"
placeholder="Enter Password" placeholder="Enter Password"
type={ type={
@ -334,7 +327,6 @@ export default function AddManagerModal({
placeholder="Enter Phone Number" placeholder="Enter Phone Number"
size="small" size="small"
sx={{ marginTop: 1 }} sx={{ marginTop: 1 }}
error={!!errors.phone} error={!!errors.phone}
helperText={ helperText={
errors.phone ? errors.phone.message : "" errors.phone ? errors.phone.message : ""
@ -372,6 +364,7 @@ export default function AddManagerModal({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

614
src/components/AddSlotModal/addSlotModal.tsx
View file

@ -1,173 +1,25 @@
// import React, { useState } from "react";
// import {
// Dialog,
// DialogActions,
// DialogContent,
// DialogTitle,
// Button,
// TextField,
// Typography,
// Box,
// } from "@mui/material";
// import { useForm } from "react-hook-form";
// const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
// const {
// register,
// handleSubmit,
// reset,
// formState: { errors },
// } = useForm();
// const [isAvailable, setIsAvailable] = useState<boolean>(true); // Default is available
// // Get today's date in the format yyyy-mm-dd
// const today = new Date().toISOString().split("T")[0];
// const onSubmit = (data: {
// date: string;
// startHour: string;
// endHour: string;
// }) => {
// handleAddSlot({ ...data, isAvailable });
// reset();
// handleClose();
// };
// return (
// <Dialog open={open} onClose={handleClose}>
// <DialogTitle>Add EV Slot</DialogTitle>
// <DialogContent>
// <form onSubmit={handleSubmit(onSubmit)}>
// <Typography variant="body2" fontWeight={500}>
// Date
// </Typography>
// <TextField
// {...register("date", {
// required: "Date is required",
// validate: (value) =>
// value >= today || "Date cannot be in the past",
// })}
// // label="Date"
// // sx={{ marginTop: 1 }}
// type="date"
// fullWidth
// margin="normal"
// slotProps={{
// inputLabel: {
// shrink: true,
// },
// }}
// error={!!errors.date}
// helperText={errors.date?.message}
// // Set the min value to today's date
// inputProps={{ min: today }}
// />
// <Typography variant="body2" fontWeight={500}>
// Start Hour
// </Typography>
// <TextField
// {...register("startHour", {
// required: "Start hour is required",
// })}
// // label="Start Hour"
// type="time"
// // sx={{ marginTop: 1 }}
// fullWidth
// margin="normal"
// slotProps={{
// inputLabel: {
// shrink: true,
// },
// }}
// error={!!errors.startHour}
// helperText={errors.startHour?.message}
// />
// <Typography variant="body2" fontWeight={500}>
// End Hour
// </Typography>
// <TextField
// {...register("endHour", {
// required: "End hour is required",
// })}
// // label="End Hour"
// type="time"
// // sx={{ marginTop: 1 }}
// fullWidth
// margin="normal"
// InputLabelProps={{
// shrink: true,
// }}
// error={!!errors.endHour}
// helperText={errors.endHour?.message}
// />
// {/* Availability Toggle */}
// <Box
// display="flex"
// alignItems="center"
// justifyContent="space-between"
// gap={2}
// >
// <Button
// onClick={() => setIsAvailable((prev) => !prev)}
// variant={isAvailable ? "contained" : "outlined"}
// color="primary"
// sx={{ marginTop: 1 }}
// >
// Check Availability
// </Button>
// <Typography>
// {isAvailable ? "Available" : "Not Available"}
// </Typography>
// </Box>
// <DialogActions>
// <Button onClick={handleClose} color="secondary">
// Cancel
// </Button>
// <Button
// type="submit"
// sx={{
// backgroundColor: "#52ACDF",
// color: "white",
// borderRadius: "8px",
// width: "100px",
// "&:hover": { backgroundColor: "#439BC1" },
// }}
// >
// Add Booking
// </Button>
// </DialogActions>
// </form>
// </DialogContent>
// </Dialog>
// );
// };
// export default AddSlotModal;
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { import {
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Button,
TextField,
Typography,
Box, Box,
Button,
Typography,
Modal,
FormControlLabel, FormControlLabel,
Switch, Switch,
TextField,
MenuItem, MenuItem,
Select, Select,
FormControl,
InputLabel, InputLabel,
FormControl,
} from "@mui/material"; } from "@mui/material";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux"; // Import the Redux dispatch import { useDispatch } from "react-redux";
import { createSlot } from "../../redux/slices/slotSlice.ts"; // Assuming this is your slice import { createSlot } from "../../redux/slices/slotSlice.ts"; // Assuming this is your slice
import CloseIcon from "@mui/icons-material/Close";
import { CustomIconButton } from "../AddUserModal/styled.css"; // Assuming this is for custom styled components
const AddSlotModal = ({ open, handleClose }: any) => { const AddSlotModal = ({ open, handleClose }: any) => {
const dispatch = useDispatch(); // Get dispatch from Redux
const { const {
register, register,
handleSubmit, handleSubmit,
@ -175,17 +27,13 @@ const AddSlotModal = ({ open, handleClose }: any) => {
watch, watch,
formState: { errors }, formState: { errors },
} = useForm(); } = useForm();
const dispatch = useDispatch(); // Get dispatch from Redux
const [isAvailable, setIsAvailable] = useState<boolean>(true); const [isAvailable, setIsAvailable] = useState<boolean>(true);
const [isDateRange, setIsDateRange] = useState<boolean>(false); const [isDateRange, setIsDateRange] = useState<boolean>(false);
const [durationUnit, setDurationUnit] = useState<string>("minutes");
const [minEndTime, setMinEndTime] = useState<string>(""); const [minEndTime, setMinEndTime] = useState<string>("");
const [durationUnit, setDurationUnit] = useState<string>("minutes"); // New state for duration unit
// Get today's date in the format yyyy-mm-dd
const today = new Date().toISOString().split("T")[0]; const today = new Date().toISOString().split("T")[0];
// Watch the start time value
const startHour = watch("startHour"); const startHour = watch("startHour");
useEffect(() => { useEffect(() => {
@ -194,214 +42,256 @@ const AddSlotModal = ({ open, handleClose }: any) => {
} }
}, [startHour]); }, [startHour]);
const onSubmit = (data: any) => { const onSubmit = (data: any) => {
const { const { date, startingDate, endingDate, startHour, endHour, duration } =
date, data;
startingDate,
endingDate,
startHour,
endHour,
duration,
} = data;
const payload = isDateRange const payload = isDateRange
? { ? {
startingDate, startingDate,
endingDate, endingDate,
startHour, startHour,
endHour, endHour,
duration: parseInt(duration, 10), duration: parseInt(duration, 10),
isAvailable, durationUnit, // Include the duration unit (minutes or hours)
isAvailable,
} }
: { : {
date, date,
startHour, startHour,
endHour, endHour,
duration: parseInt(duration, 10), duration: parseInt(duration, 10),
isAvailable, durationUnit, // Include the duration unit (minutes or hours)
isAvailable,
}; };
dispatch(createSlot(payload));
reset();
handleClose();
};
dispatch(createSlot(payload));
reset();
handleClose();
};
return ( return (
<Dialog open={open} onClose={handleClose}> <Modal
<DialogTitle>Add EV Slot</DialogTitle> open={open}
<DialogContent> onClose={(e, reason) => {
<form onSubmit={handleSubmit(onSubmit)}> if (reason === "backdropClick") {
<FormControlLabel return;
control={ }
<Switch handleClose();
checked={isDateRange} }}
onChange={() => setIsDateRange(!isDateRange)} aria-labelledby="add-slot-modal"
/> >
} <Box
label="Select Date Range" component="form"
/> onSubmit={handleSubmit(onSubmit)}
{isDateRange ? ( sx={{
<> position: "absolute",
<Typography variant="body2" fontWeight={500}> top: "50%",
Start Date left: "50%",
</Typography> transform: "translate(-50%, -50%)",
<TextField width: 400,
{...register("startingDate", { bgcolor: "background.paper",
required: "Start date is required", boxShadow: 24,
validate: (value) => p: 3,
value >= today || borderRadius: 2,
"Start date cannot be in the past", }}
})} >
type="date" {/* Header */}
fullWidth <Box
margin="normal" sx={{
error={!!errors.startingDate} display: "flex",
helperText={errors.startingDate?.message} justifyContent: "space-between",
inputProps={{ min: today }} alignItems: "center",
/> }}
<Typography variant="body2" fontWeight={500}> >
End Date <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
</Typography> Add Slot
<TextField
{...register("endingDate", {
required: "End date is required",
validate: (value) =>
value >= today ||
"End date cannot be in the past",
})}
type="date"
fullWidth
margin="normal"
error={!!errors.endingDate}
helperText={errors.endingDate?.message}
inputProps={{ min: today }}
/>
</>
) : (
<>
<Typography variant="body2" fontWeight={500}>
Date
</Typography>
<TextField
{...register("date", {
required: "Date is required",
validate: (value) =>
value >= today ||
"Date cannot be in the past",
})}
type="date"
fullWidth
margin="normal"
error={!!errors.date}
helperText={errors.date?.message}
inputProps={{ min: today }}
/>
</>
)}
<Typography variant="body2" fontWeight={500}>
Start Hour
</Typography> </Typography>
<TextField <CustomIconButton onClick={handleClose}>
{...register("startHour", { <CloseIcon />
required: "Start hour is required", </CustomIconButton>
})} </Box>
type="time"
fullWidth {/* Horizontal Line */}
margin="normal" <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
error={!!errors.startHour}
helperText={errors.startHour?.message} {/* Date Range Toggle */}
/> <FormControlLabel
<Typography variant="body2" fontWeight={500}> control={
End Hour <Switch
</Typography> checked={isDateRange}
<TextField onChange={() => setIsDateRange(!isDateRange)}
{...register("endHour", {
required: "End hour is required",
validate: (value) =>
value > startHour ||
"End hour must be after start hour",
})}
type="time"
fullWidth
margin="normal"
error={!!errors.endHour}
helperText={errors.endHour?.message}
inputProps={{ min: minEndTime }}
/>
<Typography variant="body2" fontWeight={500}>
Slot Duration
</Typography>
<Box display="flex" alignItems="center" gap={2}>
<TextField
{...register("duration", {
required: "Duration is required",
pattern: {
value: /^[0-9]+$/,
message: "Duration must be a number",
},
})}
type="number"
fullWidth
margin="normal"
error={!!errors.duration}
helperText={errors.duration?.message}
/> />
<FormControl fullWidth> }
label="Select Date Range"
<Select sx={{
value={durationUnit} fontWeight: 500,
onChange={(e) => fontSize: "16px",
setDurationUnit(e.target.value) margin: 0,
} }}
/>
>
<MenuItem value="minutes">Minutes</MenuItem> {/* Date Input Fields */}
<MenuItem value="hours">Hours</MenuItem> {isDateRange ? (
</Select> <>
</FormControl> <Typography variant="body2" fontWeight={500} mb={0.5}>
</Box> Start Date
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
gap={2}
>
<Button
onClick={() => setIsAvailable((prev) => !prev)}
variant={isAvailable ? "contained" : "outlined"}
color="primary"
sx={{ marginTop: 1 }}
>
Check Availability
</Button>
<Typography>
{isAvailable ? "Available" : "Not Available"}
</Typography> </Typography>
</Box> <TextField
<DialogActions> {...register("startingDate", {
<Button onClick={handleClose} color="secondary"> required: "Start date is required",
Cancel validate: (value) =>
</Button> value >= today ||
<Button "Start date cannot be in the past",
type="submit" })}
sx={{ type="date"
backgroundColor: "#52ACDF", fullWidth
color: "white", error={!!errors.startingDate}
borderRadius: "8px", helperText={errors.startingDate?.message}
width: "100px", inputProps={{ min: today }}
"&:hover": { backgroundColor: "#439BC1" }, />
}} <Typography variant="body2" fontWeight={500} mb={0.5}>
End Date
</Typography>
<TextField
{...register("endingDate", {
required: "End date is required",
validate: (value) =>
value >= today ||
"End date cannot be in the past",
})}
type="date"
fullWidth
error={!!errors.endingDate}
helperText={errors.endingDate?.message}
inputProps={{ min: today }}
/>
</>
) : (
<>
<Typography variant="body2" fontWeight={500} mb={0.5}>
Date
</Typography>
<TextField
{...register("date", {
required: "Date is required",
validate: (value) =>
value >= today ||
"Date cannot be in the past",
})}
type="date"
fullWidth
error={!!errors.date}
helperText={errors.date?.message}
inputProps={{ min: today }}
/>
</>
)}
{/* Start Hour */}
<Typography variant="body2" fontWeight={500} mb={0.5}>
Start Hour
</Typography>
<TextField
{...register("startHour", {
required: "Start hour is required",
})}
type="time"
fullWidth
error={!!errors.startHour}
helperText={errors.startHour?.message}
/>
{/* End Hour */}
<Typography variant="body2" fontWeight={500} mb={0.5}>
End Hour
</Typography>
<TextField
{...register("endHour", {
required: "End hour is required",
validate: (value) =>
value > startHour ||
"End hour must be after start hour",
})}
type="time"
fullWidth
error={!!errors.endHour}
helperText={errors.endHour?.message}
inputProps={{ min: minEndTime }}
/>
{/* Duration and Duration Unit */}
<Typography variant="body2" fontWeight={500} mb={0.5}>
Slot Duration
</Typography>
<Box display="flex" alignItems="center" gap={2}>
<TextField
{...register("duration", {
required: "Duration is required",
pattern: {
value: /^[0-9]+$/,
message: "Duration must be a number",
},
})}
type="number"
fullWidth
error={!!errors.duration}
helperText={errors.duration?.message}
/>
{/* Dropdown for selecting Minutes/Hours */}
<FormControl fullWidth>
<InputLabel>Unit</InputLabel>
<Select
value={durationUnit}
onChange={(e) => setDurationUnit(e.target.value)}
> >
Add Booking <MenuItem value="minutes">Minutes</MenuItem>
</Button> <MenuItem value="hours">Hours</MenuItem>
</DialogActions> </Select>
</form> </FormControl>
</DialogContent> </Box>
</Dialog>
{/* Availability Toggle */}
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
gap={2}
>
<Button
onClick={() => setIsAvailable((prev) => !prev)}
variant={isAvailable ? "contained" : "outlined"}
color="primary"
sx={{ marginTop: 1 }}
>
Check Availability
</Button>
<Typography>
{isAvailable ? "Available" : "Not Available"}
</Typography>
</Box>
{/* Submit Button */}
<Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
>
<Button
type="submit"
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
}}
>
Add Slot
</Button>
</Box>
</Box>
</Modal>
); );
}; };

3
src/components/AddStationLocation/addStationLocation.tsx
View file

@ -52,7 +52,7 @@ const AddStationLocationModal = ({
helperText={errors.city?.message} helperText={errors.city?.message}
/> />
<DialogActions> <DialogActions>
<Button onClick={handleClose} color="secondary"> <Button onClick={handleClose} color="secondary" fontSize={"16px"}>
Cancel Cancel
</Button> </Button>
<Button <Button
@ -61,6 +61,7 @@ const AddStationLocationModal = ({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px",
width: "100px", width: "100px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

40
src/components/AddStationModal/addStationModal.tsx
View file

@ -133,7 +133,7 @@ export default function AddStationModal({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Add Charging Station Add Charging Station
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -304,23 +304,26 @@ export default function AddStationModal({
gap: 0.5, gap: 0.5,
}} }}
> >
{displayNames.map((id,index) => { {displayNames.map(
const brand = (id, index) => {
vehicleBrands.find( const brand =
(b) => vehicleBrands.find(
b.id === id (b) =>
); b.id ===
return brand ? ( id
<Typography );
key={index} return brand ? (
variant="body2" <Typography
> key={index}
{brand variant="body2"
? brand.name >
: ""} {brand
</Typography> ? brand.name
) : null; : ""}
})} </Typography>
) : null;
}
)}
{moreCount > 0 && ( {moreCount > 0 && (
<Typography <Typography
@ -501,6 +504,7 @@ export default function AddStationModal({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

3
src/components/AddUserModal/addUserModal.tsx
View file

@ -90,7 +90,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Add User Add User
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -318,6 +318,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize:"16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

3
src/components/AddVehicleModal/addVehicleModal.tsx
View file

@ -106,7 +106,7 @@ export default function AddVehicleModal({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Add Vehicle Add Vehicle
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -349,6 +349,7 @@ export default function AddVehicleModal({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize:"16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

8
src/components/BookingSlotsMangers/bookingslots.tsx
View file

@ -80,7 +80,13 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
return ( return (
<Dialog open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose}>
<DialogTitle>Add EV Slot</DialogTitle> <DialogTitle>Add EV Slot</DialogTitle>
<DialogContent> <DialogContent
sx={{
display: "flex",
flexDirection: "column",
padding:0
}}
>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<FormControlLabel <FormControlLabel
control={ control={

3
src/components/CustomTable/customTable.tsx
View file

@ -42,6 +42,7 @@ import {
} from "../../redux/slices/slotSlice.ts"; } from "../../redux/slices/slotSlice.ts";
import { bookingList, deleteBooking } from "../../redux/slices/bookSlice.ts"; import { bookingList, deleteBooking } from "../../redux/slices/bookSlice.ts";
import AddCircleIcon from "@mui/icons-material/AddCircle"; import AddCircleIcon from "@mui/icons-material/AddCircle";
import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";
// Styled components for customization // Styled components for customization
const StyledTableCell = styled(TableCell)(({ theme }) => ({ const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: { [`&.${tableCellClasses.head}`]: {
@ -292,6 +293,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
marginTop: "16px", marginTop: "16px",
alignItems: { xs: "stretch", sm: "stretch", md: "center" }, alignItems: { xs: "stretch", sm: "stretch", md: "center" },
width: "100%", width: "100%",
...autofillFix
}} }}
> >
<TextField <TextField
@ -356,6 +358,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
maxWidth: "250px", // Optional: limit it from being *too* wide maxWidth: "250px", // Optional: limit it from being *too* wide
marginRight: "16px", marginRight: "16px",
paddingX: "16px", paddingX: "16px",
fontSize:"16px",
whiteSpace: "nowrap", // Prevents text from wrapping whiteSpace: "nowrap", // Prevents text from wrapping
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

3
src/components/EditSlotModal/editSlotModal.tsx
View file

@ -133,7 +133,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Edit Slot Edit Slot
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -225,6 +225,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize:'16px',
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

3
src/components/EditStationModal/editSationModal.tsx
View file

@ -211,7 +211,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Edit Charging Station Edit Charging Station
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -531,6 +531,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize:"16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

3
src/components/EditUserModal/editUserModal.tsx
View file

@ -95,7 +95,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Edit User Edit User
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -220,6 +220,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fpntSize:"16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

5
src/components/EditVehicleModal/editVehicleModal.tsx
View file

@ -71,7 +71,6 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
} else { } else {
setImagePreview(null); setImagePreview(null);
} }
} else { } else {
// Reset form and preview when no editRow // Reset form and preview when no editRow
reset(); reset();
@ -138,7 +137,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Edit Vehicle Edit Vehicle
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
@ -314,7 +313,6 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
Upload Image Upload Image
</Typography> </Typography>
<Button <Button
component="label" component="label"
sx={{ sx={{
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
@ -364,6 +362,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
backgroundColor: "#52ACDF", backgroundColor: "#52ACDF",
color: "white", color: "white",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}

2
src/index.css
View file

@ -12,7 +12,7 @@ code {
} }
.mui-typography { .mui-typography {
font-family: "Gilroy", sans-serif !important; font-family: "Gilroy";
background-color: rgb(7, 127, 233); background-color: rgb(7, 127, 233);
} }

57
src/pages/EvSlotList/index.tsx
View file

@ -112,7 +112,6 @@ export default function EVSlotList() {
} }
}; };
// In handleUpdate method // In handleUpdate method
const handleUpdate = async ( const handleUpdate = async (
id: string, id: string,
@ -131,8 +130,6 @@ export default function EVSlotList() {
"MM/DD/YYYY, h:mm:ss A" "MM/DD/YYYY, h:mm:ss A"
).format("hh:mm A"); ).format("hh:mm A");
// Dispatch the update action // Dispatch the update action
await dispatch( await dispatch(
updateSlot({ updateSlot({
@ -165,32 +162,38 @@ export default function EVSlotList() {
: []), : []),
]; ];
const slotRows = availableSlots?.length const slotRows = availableSlots?.length
? availableSlots.map((slot, index) => { ? availableSlots.map((slot, index) => {
const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD"); const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD");
const startTime = dayjs( const startTime = dayjs(
slot?.startTime, slot?.startTime,
"YYYY-MM-DD hh:mm A" "YYYY-MM-DD hh:mm A"
).isValid() ).isValid()
? dayjs(slot?.startTime, "YYYY-MM-DD hh:mm A").format("hh:mm A") ? dayjs(slot?.startTime, "YYYY-MM-DD hh:mm A").format(
: "Invalid"; "hh:mm A"
)
: "Invalid";
const endTime = dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").isValid() const endTime = dayjs(
? dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").format("hh:mm A") slot?.endTime,
: "Invalid"; "YYYY-MM-DD hh:mm A"
).isValid()
return { ? dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").format(
srno: index + 1, "hh:mm A"
id: slot?.id ?? "NA", )
stationName: slot?.stationName ?? "NA", : "Invalid";
date: formattedDate ?? "NA",
startTime: startTime ?? "NA",
endTime: endTime ?? "NA",
isAvailable: slot?.isAvailable ? "Yes" : "No",
};
})
: [];
return {
srno: index + 1,
id: slot?.id ?? "NA",
stationName: slot?.stationName ?? "NA",
date: formattedDate ?? "NA",
startTime: startTime ?? "NA",
endTime: endTime ?? "NA",
isAvailable: slot?.isAvailable ? "Yes" : "No",
};
})
: [];
return ( return (
<> <>

3
src/shared-theme/AppTheme.tsx
View file

@ -32,7 +32,8 @@ export default function AppTheme(props: AppThemeProps) {
}, },
}, },
typography: { typography: {
fontFamily: "Gilroy, sans-serif", fontFamily: "Gilroy",
}, },
cssVariables: { cssVariables: {
colorSchemeSelector: "data-mui-color-scheme", colorSchemeSelector: "data-mui-color-scheme",

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

@ -29,6 +29,7 @@ export const dataDisplayCustomizations = {
}, },
[`& .${typographyClasses.root}`]: { [`& .${typographyClasses.root}`]: {
fontWeight: 500, fontWeight: 500,
fontSize:"16px"
}, },
[`& .${buttonBaseClasses.root}`]: { [`& .${buttonBaseClasses.root}`]: {
display: 'flex', display: 'flex',
@ -59,7 +60,7 @@ export const dataDisplayCustomizations = {
MuiListItemText: { MuiListItemText: {
styleOverrides: { styleOverrides: {
primary: ({ theme }) => ({ primary: ({ theme }) => ({
fontSize: theme.typography.body2.fontSize, fontSize: "16px",
fontWeight: 500, fontWeight: 500,
lineHeight: theme.typography.body2.lineHeight, lineHeight: theme.typography.body2.lineHeight,
}), }),

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

@ -28,6 +28,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
}, },
[`& .${typographyClasses.root}`]: { [`& .${typographyClasses.root}`]: {
fontWeight: 500, fontWeight: 500,
}, },
[`& .${buttonBaseClasses.root}`]: { [`& .${buttonBaseClasses.root}`]: {
display: 'flex', display: 'flex',