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",
color: "white",
borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
}}

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

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

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

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

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

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

612
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 {
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Button,
TextField,
Typography,
Box,
Button,
Typography,
Modal,
FormControlLabel,
Switch,
TextField,
MenuItem,
Select,
FormControl,
InputLabel,
FormControl,
} from "@mui/material";
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 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 dispatch = useDispatch(); // Get dispatch from Redux
const {
register,
handleSubmit,
@ -175,17 +27,13 @@ const AddSlotModal = ({ open, handleClose }: any) => {
watch,
formState: { errors },
} = useForm();
const dispatch = useDispatch(); // Get dispatch from Redux
const [isAvailable, setIsAvailable] = useState<boolean>(true);
const [isDateRange, setIsDateRange] = useState<boolean>(false);
const [durationUnit, setDurationUnit] = useState<string>("minutes");
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];
// Watch the start time value
const startHour = watch("startHour");
useEffect(() => {
@ -194,214 +42,256 @@ const AddSlotModal = ({ open, handleClose }: any) => {
}
}, [startHour]);
const onSubmit = (data: any) => {
const {
date,
startingDate,
endingDate,
startHour,
endHour,
duration,
const onSubmit = (data: any) => {
const { date, startingDate, endingDate, startHour, endHour, duration } =
data;
} = data;
const payload = isDateRange
? {
startingDate,
endingDate,
startHour,
endHour,
duration: parseInt(duration, 10),
isAvailable,
}
: {
date,
startHour,
endHour,
duration: parseInt(duration, 10),
isAvailable,
};
dispatch(createSlot(payload));
reset();
handleClose();
};
const payload = isDateRange
? {
startingDate,
endingDate,
startHour,
endHour,
duration: parseInt(duration, 10),
durationUnit, // Include the duration unit (minutes or hours)
isAvailable,
}
: {
date,
startHour,
endHour,
duration: parseInt(duration, 10),
durationUnit, // Include the duration unit (minutes or hours)
isAvailable,
};
dispatch(createSlot(payload));
reset();
handleClose();
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>Add EV Slot</DialogTitle>
<DialogContent>
<form onSubmit={handleSubmit(onSubmit)}>
<FormControlLabel
control={
<Switch
checked={isDateRange}
onChange={() => setIsDateRange(!isDateRange)}
/>
}
label="Select Date Range"
/>
{isDateRange ? (
<>
<Typography variant="body2" fontWeight={500}>
Start Date
</Typography>
<TextField
{...register("startingDate", {
required: "Start date is required",
validate: (value) =>
value >= today ||
"Start date cannot be in the past",
})}
type="date"
fullWidth
margin="normal"
error={!!errors.startingDate}
helperText={errors.startingDate?.message}
inputProps={{ min: today }}
/>
<Typography variant="body2" fontWeight={500}>
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
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
<Modal
open={open}
onClose={(e, reason) => {
if (reason === "backdropClick") {
return;
}
handleClose();
}}
aria-labelledby="add-slot-modal"
>
<Box
component="form"
onSubmit={handleSubmit(onSubmit)}
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
boxShadow: 24,
p: 3,
borderRadius: 2,
}}
>
{/* Header */}
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
Add Slot
</Typography>
<TextField
{...register("startHour", {
required: "Start hour is required",
})}
type="time"
fullWidth
margin="normal"
error={!!errors.startHour}
helperText={errors.startHour?.message}
/>
<Typography variant="body2" fontWeight={500}>
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
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}
<CustomIconButton onClick={handleClose}>
<CloseIcon />
</CustomIconButton>
</Box>
{/* Horizontal Line */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
{/* Date Range Toggle */}
<FormControlLabel
control={
<Switch
checked={isDateRange}
onChange={() => setIsDateRange(!isDateRange)}
/>
<FormControl fullWidth>
}
label="Select Date Range"
sx={{
fontWeight: 500,
fontSize: "16px",
margin: 0,
}}
/>
<Select
value={durationUnit}
onChange={(e) =>
setDurationUnit(e.target.value)
}
>
<MenuItem value="minutes">Minutes</MenuItem>
<MenuItem value="hours">Hours</MenuItem>
</Select>
</FormControl>
</Box>
<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"}
{/* Date Input Fields */}
{isDateRange ? (
<>
<Typography variant="body2" fontWeight={500} mb={0.5}>
Start Date
</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" },
}}
<TextField
{...register("startingDate", {
required: "Start date is required",
validate: (value) =>
value >= today ||
"Start date cannot be in the past",
})}
type="date"
fullWidth
error={!!errors.startingDate}
helperText={errors.startingDate?.message}
inputProps={{ min: today }}
/>
<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
</Button>
</DialogActions>
</form>
</DialogContent>
</Dialog>
<MenuItem value="minutes">Minutes</MenuItem>
<MenuItem value="hours">Hours</MenuItem>
</Select>
</FormControl>
</Box>
{/* 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}
/>
<DialogActions>
<Button onClick={handleClose} color="secondary">
<Button onClick={handleClose} color="secondary" fontSize={"16px"}>
Cancel
</Button>
<Button
@ -61,6 +61,7 @@ const AddStationLocationModal = ({
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
fontSize: "16px",
width: "100px",
"&:hover": { backgroundColor: "#439BC1" },
}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
src/index.css
View file

@ -12,7 +12,7 @@ code {
}
.mui-typography {
font-family: "Gilroy", sans-serif !important;
font-family: "Gilroy";
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
const handleUpdate = async (
id: string,
@ -131,8 +130,6 @@ export default function EVSlotList() {
"MM/DD/YYYY, h:mm:ss A"
).format("hh:mm A");
// Dispatch the update action
await dispatch(
updateSlot({
@ -165,32 +162,38 @@ export default function EVSlotList() {
: []),
];
const slotRows = availableSlots?.length
? availableSlots.map((slot, index) => {
const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD");
const startTime = dayjs(
slot?.startTime,
"YYYY-MM-DD hh:mm A"
).isValid()
? dayjs(slot?.startTime, "YYYY-MM-DD hh:mm A").format("hh:mm A")
: "Invalid";
const slotRows = availableSlots?.length
? availableSlots.map((slot, index) => {
const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD");
const startTime = dayjs(
slot?.startTime,
"YYYY-MM-DD hh:mm A"
).isValid()
? dayjs(slot?.startTime, "YYYY-MM-DD hh:mm A").format(
"hh:mm A"
)
: "Invalid";
const endTime = dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").isValid()
? dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").format("hh:mm A")
: "Invalid";
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",
};
})
: [];
const endTime = dayjs(
slot?.endTime,
"YYYY-MM-DD hh:mm A"
).isValid()
? dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").format(
"hh:mm A"
)
: "Invalid";
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 (
<>

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

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

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

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