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 = {
connectorType,
power,
power,
price,
available,
};
@ -57,10 +57,9 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
width: 500,
boxShadow: 24,
p: 3,
p: 0,
borderRadius: 2,
}}
>
@ -70,6 +69,10 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}}
>
<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
@ -81,78 +84,112 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
</Box>
{/* Divider */}
<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 sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
<Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
>
<Button
type="submit"
{/* Connector Type */}
<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={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
display: "flex",
justifyContent: "flex-end",
mt: 3,
}}
>
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>
</Modal>

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

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

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

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

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

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

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

@ -128,7 +128,7 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
width: 400,
bgcolor: "background.paper",
boxShadow: 24,
p: 3,
p: 0,
borderRadius: 2,
}}
>
@ -138,6 +138,10 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}}
>
<Typography variant="h6" fontWeight={600}>
@ -148,121 +152,157 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
</CustomIconButton>
</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
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
>
<Button
type="submit"
{/* 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}
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={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
display: "flex",
justifyContent: "flex-end",
mt: 3,
}}
disabled={loading}
>
{loading ? (
<CircularProgress size={24} color="inherit" />
) : (
"Update"
)}
</Button>
<Button
type="submit"
sx={{
backgroundColor: "#000000",
color: "#D0E1E9",
borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#454545" },
}}
disabled={loading}
>
{loading ? (
<CircularProgress size={24} color="inherit" />
) : (
"Update"
)}
</Button>
</Box>
</Box>
</Box>
</Modal>

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

@ -73,21 +73,20 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
setLoading(true);
try {
await dispatch(
updateSlot({
id: editRow.id,
id: editRow.id,
startTime: data.startTime,
endTime: data.endTime,
})
).unwrap();
dispatch(fetchManagersSlots());
handleClose();
reset();
handleClose();
reset();
} catch (error) {
console.error("Error updating slot:", error);
} finally {
setLoading(false);
setLoading(false);
}
}
};
@ -112,9 +111,9 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "#000000",
boxShadow: 24,
p: 3,
p: 0,
borderRadius: 2,
}}
>
@ -124,6 +123,10 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}}
>
<Typography
@ -143,87 +146,100 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
</Box>
{/* Horizontal Line */}
<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 sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
<Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
>
<Button
type="submit"
{/* 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="#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={{
backgroundColor: "#D0E1E9",
color: "#000000",
borderRadius: "8px",
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#D0E1E9" },
display: "flex",
justifyContent: "flex-end",
mt: 3,
}}
disabled={loading} // Disable the button during loading state
>
{loading ? (
<CircularProgress size={24} color="inherit" />
) : (
"Update Slot"
)}
</Button>
<Button
type="submit"
sx={{
backgroundColor: "#000000",
color: "#D0E1E9",
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>
</Modal>

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

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

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

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