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

Updation of Modals Ui for Manager and User panel

Browse source
This commit is contained in:
jaanvi 2025-04-24 11:41:34 +05:30
parent 6dc26bf6af
commit 7f4914c695
8 changed files with 695 additions and 498 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
src/components/AddManagerStationModal/addmanagerStationModal.tsx
View file

@ -30,7 +30,7 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
const payload = { const payload = {
connectorType, connectorType,
power, power,
price, price,
available, available,
}; };
@ -57,10 +57,9 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
top: "50%", top: "50%",
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: 400, width: 500,
bgcolor: "background.paper",
boxShadow: 24, boxShadow: 24,
p: 3, p: 0,
borderRadius: 2, borderRadius: 2,
}} }}
> >
@ -70,6 +69,10 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}} }}
> >
<Typography variant="h6" fontWeight={600} fontSize={"16px"}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
@ -81,78 +84,112 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
</Box> </Box>
{/* Divider */} {/* Divider */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> {/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
{/* Connector Type */}
<Typography variant="body2" fontWeight={500} mb={0.5}>
Connector Type
</Typography>
<TextField
{...register("connectorType", {
required: "Connector Type is required",
})}
fullWidth
error={!!errors.connectorType}
helperText={errors.connectorType?.message}
/>
{/* Power */}
<Typography variant="body2" fontWeight={500} mb={0.5}>
Power (kW)
</Typography>
<TextField
{...register("power", { required: "Power is required" })}
fullWidth
error={!!errors.power}
helperText={errors.power?.message}
/>
{/* Price */}
<Typography variant="body2" fontWeight={500} mb={0.5}>
Price (₹)
</Typography>
<TextField
{...register("price", {
required: "Price is required",
pattern: {
value: /^[0-9]+$/,
message: "Price must be a number",
},
})}
fullWidth
error={!!errors.price}
helperText={errors.price?.message}
/>
{/* Availability Switch */}
<FormControlLabel
control={
<Switch
checked={available}
onChange={() => setavailable((prev) => !prev)}
/>
}
label={available ? "Available" : "Not Available"}
sx={{ mt: 2 }}
/>
{/* Submit */}
<Box <Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }} sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
> >
<Button {/* Connector Type */}
type="submit" <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
mt={1}
>
Connector Type
</Typography>
<TextField
{...register("connectorType", {
required: "Connector Type is required",
})}
fullWidth
error={!!errors.connectorType}
helperText={errors.connectorType?.message}
/>
{/* Power */}
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
mt={1}
>
Power (kW)
</Typography>
<TextField
{...register("power", {
required: "Power is required",
})}
fullWidth
error={!!errors.power}
helperText={errors.power?.message}
/>
{/* Price */}
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
mt={1}
>
Price (₹)
</Typography>
<TextField
{...register("price", {
required: "Price is required",
pattern: {
value: /^[0-9]+$/,
message: "Price must be a number",
},
})}
fullWidth
error={!!errors.price}
helperText={errors.price?.message}
/>
{/* Availability Switch */}
<FormControlLabel
control={
<Switch
checked={available}
onChange={() => setavailable((prev) => !prev)}
/>
}
label={available ? "Available" : "Not Available"}
sx={{ mt: 2 }}
/>
{/* Submit */}
<Box
sx={{ sx={{
backgroundColor: "#52ACDF", display: "flex",
color: "white", justifyContent: "flex-end",
borderRadius: "8px", mt: 3,
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
}} }}
> >
Add Station <Button
</Button> type="submit"
sx={{
backgroundColor: "#000000",
color: "#D0E1E9",
borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#454545" },
}}
>
Add Station
</Button>
</Box>
</Box> </Box>
</Box> </Box>
</Modal> </Modal>

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

@ -98,10 +98,10 @@ const AddSlotModal = ({ open, handleClose }: any) => {
top: "50%", top: "50%",
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: 400, width: 500,
bgcolor: "background.paper",
boxShadow: 24, boxShadow: 24,
p: 3, p: 0,
borderRadius: 2, borderRadius: 2,
}} }}
> >
@ -111,6 +111,11 @@ const AddSlotModal = ({ open, handleClose }: any) => {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "16px 24px",
borderRadius: "10px 10px 0 0",
}} }}
> >
<Typography variant="h6" fontWeight={600} fontSize={"16px"}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
@ -122,182 +127,245 @@ const AddSlotModal = ({ open, handleClose }: any) => {
</Box> </Box>
{/* Horizontal Line */} {/* Horizontal Line */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> {/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
{/* Date Range Toggle */} <Box
<FormControlLabel
control={
<Switch
checked={isDateRange}
onChange={() => setIsDateRange(!isDateRange)}
/>
}
label="Select Date Range"
sx={{ sx={{
fontWeight: 500, backgroundColor: "#b5c4cb",
fontSize: "16px", padding: "24px",
margin: 0, borderRadius: "0 0 10px 10px",
}} }}
/> >
{/* Date Range Toggle */}
{/* Date Input Fields */} <FormControlLabel
{isDateRange ? ( control={
<> <Switch
<Typography variant="body2" fontWeight={500} mb={0.5}> checked={isDateRange}
Start Date onChange={() => setIsDateRange(!isDateRange)}
</Typography> />
<TextField }
{...register("startingDate", { label="Select Date Range"
required: "Start date is required", sx={{
validate: (value) => fontWeight: 500,
value >= today || fontSize: "16px",
"Start date cannot be in the past", margin: 0,
})} color: "#000000",
type="date" mb: 1,
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 */} {/* Date Input Fields */}
<FormControl fullWidth> {isDateRange ? (
<InputLabel>Unit</InputLabel> <>
<Select <Typography
value={durationUnit} variant="body2"
onChange={(e) => setDurationUnit(e.target.value)} fontWeight={500}
> mb={1}
<MenuItem value="minutes">Minutes</MenuItem> mt={1}
<MenuItem value="hours">Hours</MenuItem> color="#000000"
</Select> fontSize={"16px"}
</FormControl> >
</Box> 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
error={!!errors.startingDate}
helperText={errors.startingDate?.message}
inputProps={{ min: today }}
/>
<Typography
variant="body2"
fontWeight={500}
fontSize={"16px"}
mb={1}
mt={1}
color="#000000"
>
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={1}
color="#000000"
fontSize={"16px"}
mt={1}
>
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 }}
/>
</>
)}
{/* Availability Toggle */} {/* Start Hour */}
<Box
display="flex" <Typography
alignItems="center" variant="body2"
justifyContent="space-between" fontWeight={500}
gap={2} mb={1}
> color="#000000"
<Button fontSize={"16px"}
onClick={() => setIsAvailable((prev) => !prev)} mt={1}
variant={isAvailable ? "contained" : "outlined"}
color="primary"
sx={{ marginTop: 1 }}
> >
Check Availability Start Hour
</Button>
<Typography>
{isAvailable ? "Available" : "Not Available"}
</Typography> </Typography>
</Box> <TextField
{...register("startHour", {
required: "Start hour is required",
})}
type="time"
fullWidth
error={!!errors.startHour}
helperText={errors.startHour?.message}
/>
{/* Submit Button */} {/* End Hour */}
<Box <Typography
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }} variant="body2"
> fontWeight={500}
<Button mb={1}
type="submit" color="#000000"
fontSize={"16px"}
mt={1}
>
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={1}
color="#000000"
fontSize={"16px"}
mt={1}
>
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)
}
>
<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}
mt={1}
>
<Button
onClick={() => setIsAvailable((prev) => !prev)}
sx={{
marginTop: 1,
color: "#D0E1E9",
backgroundColor: "#000000",
"&:hover": { backgroundColor: "#454545" },
}}
>
Check Availability
</Button>
<Typography>
{isAvailable ? "Available" : "Not Available"}
</Typography>
</Box>
{/* Submit Button */}
<Box
sx={{ sx={{
backgroundColor: "#52ACDF", display: "flex",
color: "white", justifyContent: "flex-end",
borderRadius: "8px", mt: 3,
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
}} }}
> >
Add Slot <Button
</Button> type="submit"
sx={{
backgroundColor: "#000000",
color: "#D0E1E9",
borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#454545" },
}}
>
Add Slot
</Button>
</Box>
</Box> </Box>
</Box> </Box>
</Modal> </Modal>

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

@ -31,7 +31,7 @@ const AddStationLocationModal = ({
}; };
return ( return (
<Dialog open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose} >
<DialogTitle>Search Near By Stations</DialogTitle> <DialogTitle>Search Near By Stations</DialogTitle>
<DialogContent> <DialogContent>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>

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

@ -648,31 +648,39 @@ const CustomTable: React.FC<CustomTableProps> = ({
}, },
}} }}
> >
<MenuItem {user?.userType !==
onClick={() => "manager" &&
handleMenuAction( user?.userType !==
"view" "user" && (
) <MenuItem
} onClick={() =>
sx={{ handleMenuAction(
color: "#000000", "view"
fontSize: )
"16px", }
display: "flex", sx={{
alignItems: color: "#000000",
"center", fontSize:
gap: 1, "16px",
}} display:
> "flex",
<VisibilityIcon alignItems:
sx={{ "center",
fontSize: gap: 1,
"18px", }}
color: "#454545", >
}} <VisibilityIcon
/> sx={{
View fontSize:
</MenuItem> "18px",
color: "#454545",
}}
/>
View
</MenuItem>
)}
{ user?.userType !==
"user" && (
<MenuItem <MenuItem
onClick={() => onClick={() =>
handleMenuAction( handleMenuAction(
@ -697,7 +705,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
}} }}
/> />
Edit Edit
</MenuItem> </MenuItem>)}
<MenuItem <MenuItem
onClick={() => onClick={() =>
handleMenuAction( handleMenuAction(

260
src/components/EditManagerStationModal/editManagerStationModal.tsx
View file

@ -128,7 +128,7 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
width: 400, width: 400,
bgcolor: "background.paper", bgcolor: "background.paper",
boxShadow: 24, boxShadow: 24,
p: 3, p: 0,
borderRadius: 2, borderRadius: 2,
}} }}
> >
@ -138,6 +138,10 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600}>
@ -148,121 +152,157 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
</CustomIconButton> </CustomIconButton>
</Box> </Box>
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> {/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
{/* Input Fields */}
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Connector Type */}
<Box sx={{ flex: "1 1 100%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}>
Connector Type
</Typography>
<Controller
name="connectorType"
control={control}
rules={{ required: "Connector type is required" }}
render={({ field }) => (
<CustomTextField
{...field}
fullWidth
size="small"
error={!!errors.connectorType}
helperText={errors.connectorType?.message}
/>
)}
/>
</Box>
{/* Power */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}>
Power
</Typography>
<Controller
name="power"
control={control}
rules={{ required: "Power is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="number"
fullWidth
size="small"
error={!!errors.power}
helperText={errors.power?.message}
/>
)}
/>
</Box>
{/* Price */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}>
Price
</Typography>
<Controller
name="price"
control={control}
rules={{ required: "Price is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="number"
fullWidth
size="small"
error={!!errors.price}
helperText={errors.price?.message}
/>
)}
/>
</Box>
{/* Available Toggle */}
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
sx={{ flex: "1 1 100%" }}
>
<FormControlLabel
control={
<Switch
checked={available}
onChange={() => {
const toggle = !available;
setAvailable(toggle);
setValue("available", toggle);
}}
/>
}
label={available ? "Available" : "Not Available"}
sx={{ mt: 1 }}
/>
</Box>
</Box>
{/* Submit Button */}
<Box <Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }} sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
> >
<Button {/* Input Fields */}
type="submit" <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Connector Type */}
<Box sx={{ flex: "1 1 100%" }}>
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
>
Connector Type
</Typography>
<Controller
name="connectorType"
control={control}
rules={{
required: "Connector type is required",
}}
render={({ field }) => (
<CustomTextField
{...field}
fullWidth
size="small"
error={!!errors.connectorType}
helperText={
errors.connectorType?.message
}
/>
)}
/>
</Box>
{/* Power */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
>
Power
</Typography>
<Controller
name="power"
control={control}
rules={{ required: "Power is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="number"
fullWidth
size="small"
error={!!errors.power}
helperText={errors.power?.message}
/>
)}
/>
</Box>
{/* Price */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
>
Price
</Typography>
<Controller
name="price"
control={control}
rules={{ required: "Price is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="number"
fullWidth
size="small"
error={!!errors.price}
helperText={errors.price?.message}
/>
)}
/>
</Box>
{/* Available Toggle */}
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
sx={{ flex: "1 1 100%" }}
>
<FormControlLabel
control={
<Switch
checked={available}
onChange={() => {
const toggle = !available;
setAvailable(toggle);
setValue("available", toggle);
}}
/>
}
label={
available ? "Available" : "Not Available"
}
sx={{ mt: 1 }}
/>
</Box>
</Box>
{/* Submit Button */}
<Box
sx={{ sx={{
backgroundColor: "#52ACDF", display: "flex",
color: "white", justifyContent: "flex-end",
borderRadius: "8px", mt: 3,
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
}} }}
disabled={loading}
> >
{loading ? ( <Button
<CircularProgress size={24} color="inherit" /> type="submit"
) : ( sx={{
"Update" backgroundColor: "#000000",
)} color: "#D0E1E9",
</Button> borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#454545" },
}}
disabled={loading}
>
{loading ? (
<CircularProgress size={24} color="inherit" />
) : (
"Update"
)}
</Button>
</Box>
</Box> </Box>
</Box> </Box>
</Modal> </Modal>

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

@ -73,21 +73,20 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
setLoading(true); setLoading(true);
try { try {
await dispatch( await dispatch(
updateSlot({ updateSlot({
id: editRow.id, id: editRow.id,
startTime: data.startTime, startTime: data.startTime,
endTime: data.endTime, endTime: data.endTime,
}) })
).unwrap(); ).unwrap();
dispatch(fetchManagersSlots()); dispatch(fetchManagersSlots());
handleClose(); handleClose();
reset(); reset();
} catch (error) { } catch (error) {
console.error("Error updating slot:", error); console.error("Error updating slot:", error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
} }
}; };
@ -112,9 +111,9 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: 400, width: 400,
bgcolor: "#000000",
boxShadow: 24, boxShadow: 24,
p: 3, p: 0,
borderRadius: 2, borderRadius: 2,
}} }}
> >
@ -124,6 +123,10 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}} }}
> >
<Typography <Typography
@ -143,87 +146,100 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
</Box> </Box>
{/* Horizontal Line */} {/* Horizontal Line */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> {/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
{/* Input Fields */}
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Start Time */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#D0E1E9"
>
Start Time
</Typography>
<Controller
name="startTime"
control={control}
rules={{ required: "Start Time is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="time"
fullWidth
size="small"
error={!!errors.startTime}
helperText={errors.startTime?.message}
/>
)}
/>
</Box>
{/* End Time */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#D0E1E9"
>
End Time
</Typography>
<Controller
name="endTime"
control={control}
rules={{ required: "End Time is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="time"
fullWidth
size="small"
error={!!errors.endTime}
helperText={errors.endTime?.message}
/>
)}
/>
</Box>
</Box>
{/* Submit Button */}
<Box <Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }} sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
> >
<Button {/* Input Fields */}
type="submit" <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Start Time */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
>
Start Time
</Typography>
<Controller
name="startTime"
control={control}
rules={{ required: "Start Time is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="time"
fullWidth
size="small"
error={!!errors.startTime}
helperText={errors.startTime?.message}
/>
)}
/>
</Box>
{/* End Time */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
>
End Time
</Typography>
<Controller
name="endTime"
control={control}
rules={{ required: "End Time is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="time"
fullWidth
size="small"
error={!!errors.endTime}
helperText={errors.endTime?.message}
/>
)}
/>
</Box>
</Box>
{/* Submit Button */}
<Box
sx={{ sx={{
backgroundColor: "#D0E1E9", display: "flex",
color: "#000000", justifyContent: "flex-end",
borderRadius: "8px", mt: 3,
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#D0E1E9" },
}} }}
disabled={loading} // Disable the button during loading state
> >
{loading ? ( <Button
<CircularProgress size={24} color="inherit" /> type="submit"
) : ( sx={{
"Update Slot" backgroundColor: "#000000",
)} color: "#D0E1E9",
</Button> borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#454545" },
}}
disabled={loading} // Disable the button during loading state
>
{loading ? (
<CircularProgress size={24} color="inherit" />
) : (
"Update Slot"
)}
</Button>
</Box>
</Box> </Box>
</Box> </Box>
</Modal> </Modal>

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

@ -11,9 +11,9 @@ const MenuItem = styled(MuiMenuItem)({
margin: "2px 10px", margin: "2px 10px",
borderBottom: "none", borderBottom: "none",
"& .MuiButtonBase-root-MuiButton-root":{ "& .MuiButtonBase-root-MuiButton-root": {
fontSize:"16px", fontSize: "16px",
} },
}); });
export default function OptionsMenu({ export default function OptionsMenu({
@ -48,20 +48,21 @@ export default function OptionsMenu({
paper: { paper: {
elevation: 0, elevation: 0,
sx: { sx: {
borderRadius: "12px",
overflow: "visible", overflow: "visible",
//filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))", // filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5, mt: 1,
backgroundColor: "#000000",
"& .MuiList-root": { // "& .MuiList-root": {
background: "#D0E1E9", // background: "#000000",
// },
},
"& .MuiMenuItem-root": { "& .MuiMenuItem-root": {
borderBottom: "none", // Remove any divider under menu items borderBottom: "none",
}, },
}, },
}, },
}} }}
transformOrigin={{ horizontal: "right", vertical: "top" }} transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
> >
@ -72,6 +73,7 @@ export default function OptionsMenu({
"&::before": { "&::before": {
display: "none", display: "none",
}, },
color: "#D0E1E9",
}} }}
> >
<MenuItem onClick={onClose}>Profile</MenuItem> <MenuItem onClick={onClose}>Profile</MenuItem>

84
src/pages/LandingPage/index.tsx
View file

@ -56,7 +56,7 @@ const LandingPage = () => {
xs: " #000000", xs: " #000000",
}, },
color: "white", color: "white",
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
}} }}
@ -79,7 +79,7 @@ const LandingPage = () => {
// "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)", // "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)",
background: "#141615", background: "#141615",
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
}} }}
> >
<img <img
@ -112,7 +112,8 @@ const LandingPage = () => {
color: "#FFFFFF", color: "#FFFFFF",
borderRadius: "6px", borderRadius: "6px",
width: { xs: "90px", sm: "117px" }, width: { xs: "90px", sm: "117px" },
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
textTransform: "none", textTransform: "none",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
fontWeight: 500, fontWeight: 500,
@ -129,7 +130,7 @@ const LandingPage = () => {
sx={{ sx={{
py: 8, py: 8,
justifyContent: "space-between", justifyContent: "space-between",
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
backgroundImage: { backgroundImage: {
lg: 'url("/bgev.svg")', lg: 'url("/bgev.svg")',
sm: 'url("/bgev.svg")', sm: 'url("/bgev.svg")',
@ -146,7 +147,7 @@ const LandingPage = () => {
sx={{ sx={{
py: { xs: 4, sm: 6, md: 8 }, py: { xs: 4, sm: 6, md: 8 },
justifyContent: "space-between", justifyContent: "space-between",
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" }, width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
}} }}
> >
@ -176,7 +177,8 @@ const LandingPage = () => {
> >
<Typography <Typography
sx={{ sx={{
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
fontWeight: 600, fontWeight: 600,
fontSize: { fontSize: {
xs: "28px", xs: "28px",
@ -196,7 +198,8 @@ const LandingPage = () => {
<Typography <Typography
variant="body1" variant="body1"
sx={{ sx={{
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
color: "#CACACA", color: "#CACACA",
marginBottom: "24px", marginBottom: "24px",
fontWeight: 400, fontWeight: 400,
@ -222,7 +225,8 @@ const LandingPage = () => {
width: { xs: "120px", md: "140px" }, width: { xs: "120px", md: "140px" },
height: "48px", height: "48px",
textTransform: "none", textTransform: "none",
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
fontSize: { xs: "14px", md: "16px" }, fontSize: { xs: "14px", md: "16px" },
fontWeight: 500, fontWeight: 500,
@ -332,14 +336,18 @@ const LandingPage = () => {
sm: "80px", sm: "80px",
md: "100px", md: "100px",
}} }}
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
> >
50+ 50+
</Typography> </Typography>
<Typography <Typography
variant="body2" variant="body2"
color="#FFFFFF" color="#FFFFFF"
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={400} fontWeight={400}
fontSize={{ fontSize={{
xs: "12px", xs: "12px",
@ -379,14 +387,18 @@ const LandingPage = () => {
sm: "80px", sm: "80px",
md: "100px", md: "100px",
}} }}
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
> >
100% 100%
</Typography> </Typography>
<Typography <Typography
variant="body2" variant="body2"
color="#FFFFFF" color="#FFFFFF"
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={400} fontWeight={400}
fontSize={{ fontSize={{
xs: "12px", xs: "12px",
@ -426,14 +438,18 @@ const LandingPage = () => {
sm: "80px", sm: "80px",
md: "100px", md: "100px",
}} }}
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
> >
20+ 20+
</Typography> </Typography>
<Typography <Typography
variant="body2" variant="body2"
color="#FFFFFF" color="#FFFFFF"
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={400} fontWeight={400}
fontSize={{ fontSize={{
xs: "12px", xs: "12px",
@ -473,14 +489,18 @@ const LandingPage = () => {
sm: "80px", sm: "80px",
md: "100px", md: "100px",
}} }}
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
> >
10+ 10+
</Typography> </Typography>
<Typography <Typography
variant="body2" variant="body2"
color="#FFFFFF" color="#FFFFFF"
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={400} fontWeight={400}
fontSize={{ fontSize={{
xs: "12px", xs: "12px",
@ -512,7 +532,7 @@ const LandingPage = () => {
<Typography <Typography
variant="h4" variant="h4"
fontWeight={600} fontWeight={600}
fontFamily={"Gilory"} fontFamily={'"Publica Sans Round Medium", sans-serif'}
fontSize={{ xs: "24px", sm: "30px", md: "40px" }} fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
lineHeight={"100%"} lineHeight={"100%"}
color="#FFFFFF" color="#FFFFFF"
@ -537,7 +557,7 @@ const LandingPage = () => {
mt={2} mt={2}
maxWidth="600px" maxWidth="600px"
mx="auto" mx="auto"
fontFamily={"Gilory"} fontFamily={'"Publica Sans Round Medium", sans-serif'}
fontSize={{ xs: "14px", sm: "16px", md: "20px" }} fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
fontWeight={400} fontWeight={400}
lineHeight={"140%"} lineHeight={"140%"}
@ -626,7 +646,8 @@ const LandingPage = () => {
variant="h6" variant="h6"
sx={{ sx={{
color: "#52ACDF", color: "#52ACDF",
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
fontWeight: 600, fontWeight: 600,
fontSize: { fontSize: {
xs: "16px", xs: "16px",
@ -641,7 +662,8 @@ const LandingPage = () => {
variant="body2" variant="body2"
sx={{ sx={{
color: "#D9D8D8", color: "#D9D8D8",
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
fontWeight: 400, fontWeight: 400,
fontSize: { fontSize: {
xs: "12px", xs: "12px",
@ -670,7 +692,7 @@ const LandingPage = () => {
borderRadius: "16px", borderRadius: "16px",
mt: { xs: 6, md: 10 }, mt: { xs: 6, md: 10 },
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
}} }}
> >
Key Features Key Features
@ -690,7 +712,7 @@ const LandingPage = () => {
py: { xs: 2, md: 5 }, py: { xs: 2, md: 5 },
px: { xs: 2, md: 3 }, px: { xs: 2, md: 3 },
mt: { xs: 6, md: 5 }, mt: { xs: 6, md: 5 },
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
}} }}
> >
<Box <Box
@ -1184,7 +1206,7 @@ const LandingPage = () => {
px: { xs: 2, sm: 3, md: 4 }, px: { xs: 2, sm: 3, md: 4 },
mt: { xs: 6, sm: 8, md: 10 }, mt: { xs: 6, sm: 8, md: 10 },
// height: { xs: "auto", lg: "261px", sm: "208px" }, // height: { xs: "auto", lg: "261px", sm: "208px" },
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
borderRadius: "12px", borderRadius: "12px",
}} }}
> >
@ -1239,7 +1261,9 @@ const LandingPage = () => {
{/* Text */} {/* Text */}
<Typography <Typography
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={500} fontWeight={500}
fontSize={{ xs: "20px", sm: "24px", md: "27px" }} fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
lineHeight={"130%"} lineHeight={"130%"}
@ -1271,7 +1295,8 @@ const LandingPage = () => {
lg: "54px", lg: "54px",
md: "44px", md: "44px",
}, },
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
textTransform: "none", textTransform: "none",
fontWeight: 500, fontWeight: 500,
fontSize: { fontSize: {
@ -1306,7 +1331,7 @@ const LandingPage = () => {
px: { xs: 2, sm: 3, md: 4 }, px: { xs: 2, sm: 3, md: 4 },
mt: { xs: 6, sm: 8, md: 10 }, mt: { xs: 6, sm: 8, md: 10 },
mb: { xs: 6, sm: 8, md: 10 }, mb: { xs: 6, sm: 8, md: 10 },
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
height: "auto", height: "auto",
borderRadius: { xs: "8px", lg: "12px" }, borderRadius: { xs: "8px", lg: "12px" },
}} }}
@ -1317,13 +1342,13 @@ const LandingPage = () => {
py: 4, py: 4,
px: 3, px: 3,
mt: 2, mt: 2,
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
}} }}
> >
<Typography <Typography
variant="h5" variant="h5"
fontWeight={600} fontWeight={600}
fontFamily={"Gilory"} fontFamily={'"Publica Sans Round Medium", sans-serif'}
fontSize={{ xs: "24px", sm: "30px", md: "40px" }} fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
lineHeight={"120%"} lineHeight={"120%"}
> >
@ -1338,7 +1363,8 @@ const LandingPage = () => {
variant="body2" variant="body2"
sx={{ sx={{
my: { xs: 2, sm: 3 }, my: { xs: 2, sm: 3 },
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
fontWeight: 400, fontWeight: 400,
fontSize: { xs: "14px", sm: "18px", md: "20px" }, fontSize: { xs: "14px", sm: "18px", md: "20px" },
color: "#FFFFFF", color: "#FFFFFF",