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

UserBooking and slots api implementation

Browse source
This commit is contained in:
jaanvi 2025-03-21 18:07:55 +05:30
parent 61963d6fe2
commit bbb980c042
11 changed files with 633 additions and 591 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

204
src/components/AddBookingModal/index.tsx
View file

@ -1,3 +1,4 @@
import React, { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import {
Box,
@ -5,13 +6,22 @@ import {
Typography,
Modal,
IconButton,
InputAdornment,
MenuItem,
Select,
InputLabel,
FormControl,
TextField,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import { useDispatch } from "react-redux";
import { addBooking, bookingList } from "../../redux/slices/bookSlice.ts";
import React, { useState } from "react";
import {
addBooking,
bookingList,
getCarNames,
getCarPorts,
} from "../../redux/slices/bookSlice";
import { AppDispatch } from "../../redux/store/store";
import { toast } from "sonner";
import {
CustomIconButton,
CustomTextField,
@ -24,19 +34,35 @@ export default function AddBookingModal({
open: boolean;
handleClose: () => void;
}) {
const dispatch = useDispatch();
const dispatch = useDispatch<AppDispatch>();
const {
control,
register,
handleSubmit,
formState: { errors },
reset,
watch,
} = useForm();
const [carNames, setCarNames] = useState<any[]>([]); // To hold the car names
const [carPorts, setCarPorts] = useState<any[]>([]); // To hold the car ports
const [showPassword, setShowPassword] = useState(false);
useEffect(() => {
// Fetch car names and car ports
dispatch(getCarNames()).then((response: any) => {
const fetchedCarNames = response.payload || [];
setCarNames(fetchedCarNames);
});
const togglePasswordVisibility = () => setShowPassword((prev) => !prev);
dispatch(getCarPorts()).then((response: any) => {
const fetchedCarPorts = response.payload || [];
setCarPorts(fetchedCarPorts);
});
// Fetch the bookings after this
dispatch(bookingList());
}, [dispatch]);
// Get today's date in yyyy-mm-dd format
const today = new Date().toISOString().split("T")[0];
const onSubmit = async (data: any) => {
const bookingData = {
@ -44,6 +70,9 @@ export default function AddBookingModal({
date: data.date,
startTime: data.startTime,
endTime: data.endTime,
carName: data.carName,
carNumber: data.carNumber,
carPort: data.carPort,
};
try {
@ -53,6 +82,7 @@ export default function AddBookingModal({
reset(); // Reset form fields
} catch (error) {
console.error("Error adding booking:", error);
toast.error("Failed to add booking.");
}
};
@ -60,9 +90,7 @@ export default function AddBookingModal({
<Modal
open={open}
onClose={(e, reason) => {
if (reason === "backdropClick") {
return;
}
if (reason === "backdropClick") return;
handleClose();
}}
aria-labelledby="add-booking-modal"
@ -80,7 +108,6 @@ export default function AddBookingModal({
borderRadius: 2,
}}
>
{/* Header */}
<Box
sx={{
display: "flex",
@ -98,8 +125,9 @@ export default function AddBookingModal({
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
<form onSubmit={handleSubmit(onSubmit)}>
{/* Station ID Input */}
{/* Station ID and Car Name */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
{/* Station ID */}
<Box sx={{ flex: 1 }}>
<Typography variant="body2" fontWeight={500}>
Station ID
@ -119,41 +147,134 @@ export default function AddBookingModal({
})}
/>
</Box>
</Box>
{/* Date Input */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
<Box sx={{ flex: 1 }}>
<Typography variant="body2" fontWeight={500}>
Date
</Typography>
<CustomTextField
fullWidth
placeholder="Select Booking Date"
size="small"
type="date"
size="small"
error={!!errors.date}
helperText={
errors.date ? errors.date.message : ""
}
{...register("date", {
required: "Date is required",
validate: (value) =>
value >= today ||
"Date cannot be in the past",
})}
InputLabelProps={{
shrink: true,
}}
// Setting minimum date to today
inputProps={{ min: today }}
/>
</Box>
</Box>
{/* Start Time Input */}
{/* Car Port and Date */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
{/* Car Name */}
<Box sx={{ flex: 1 }}>
<Typography variant="body2" fontWeight={500}>
Car Name
</Typography>
<Controller
control={control}
name="carName"
render={({ field }) => (
<FormControl
fullWidth
size="small"
error={!!errors.carName}
>
<InputLabel>Car Name</InputLabel>
<Select
{...field}
label="Car Name"
defaultValue=""
>
{carNames.map((car, index) => (
<MenuItem
key={car.id}
value={car.id}
>
{car.name}
</MenuItem>
))}
</Select>
{errors.carName && (
<Typography
color="error"
variant="body2"
sx={{ mt: 1 }}
>
{errors.carName.message}
</Typography>
)}
</FormControl>
)}
rules={{ required: "Car Name is required" }}
/>
</Box>
{/* Car Port */}
<Box sx={{ flex: 1 }}>
<Typography variant="body2" fontWeight={500}>
Car Port
</Typography>
<Controller
control={control}
name="carPort"
render={({ field }) => (
<FormControl
fullWidth
size="small"
error={!!errors.carPort}
>
<InputLabel>Car Port</InputLabel>
<Select
{...field}
label="Car Port"
defaultValue=""
>
{carPorts.map((port, index) => (
<MenuItem
key={index}
value={port.chargeType}
>
{port.chargeType}
</MenuItem>
))}
</Select>
{errors.carPort && (
<Typography
color="error"
variant="body2"
sx={{ mt: 1 }}
>
{errors.carPort.message}
</Typography>
)}
</FormControl>
)}
rules={{ required: "Car Port is required" }}
/>
</Box>
</Box>
{/* Start Time and End Time */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
{/* Start Time */}
<Box sx={{ flex: 1 }}>
<Typography variant="body2" fontWeight={500}>
Start Time
</Typography>
<CustomTextField
fullWidth
placeholder="Enter Start Time"
size="small"
type="time"
size="small"
error={!!errors.startTime}
helperText={
errors.startTime
@ -165,32 +286,45 @@ export default function AddBookingModal({
})}
/>
</Box>
</Box>
{/* End Time Input */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
{/* End Time */}
<Box sx={{ flex: 1 }}>
<Typography variant="body2" fontWeight={500}>
End Time
</Typography>
<CustomTextField
fullWidth
placeholder="Enter End Time"
size="small"
type="time"
size="small"
error={!!errors.endTime}
helperText={
errors.endTime ? errors.endTime.message : ""
}
{...register("endTime", {
required: "End Time is required",
validate: (value) => {
const startTime = watch("startTime");
if (value <= startTime) {
return "End time must be after start time.";
}
return true;
},
})}
/>
</Box>
</Box>
{/* Car Number */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
<Box sx={{ flex: 1 }}>
<Typography variant="body2" fontWeight={500}>
Car Number
</Typography>
<CustomTextField
fullWidth
placeholder="Enter Car Number"
size="small"
error={!!errors.carNumber}
helperText={
errors.carNumber
? errors.carNumber.message
: ""
}
{...register("carNumber", {
required: "Car Number is required",
})}
/>
</Box>
@ -201,7 +335,7 @@ export default function AddBookingModal({
sx={{
display: "flex",
justifyContent: "flex-end",
mt: 3,
mt: 2,
}}
>
<Button

4
src/components/AddEditUserModel/index.tsx
View file

@ -378,7 +378,5 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
export default AddUserModal;
function setValue(arg0: string, name: any) {
throw new Error("Function not implemented.");
}

398
src/components/AddSlotModal/index.tsx
View file

@ -1,316 +1,130 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import {
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Button,
TextField,
Typography,
IconButton,
Box,
Snackbar,
Stack,
Tabs,
Tab,
Card,
} from "@mui/material";
import { useForm } from "react-hook-form";
import { CustomTextField } from "../../components/AddEditUserModel/styled.css.tsx";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import DeleteIcon from "@mui/icons-material/Delete";
import CalendarTodayRoundedIcon from "@mui/icons-material/CalendarTodayRounded";
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs from "dayjs";
import { useDispatch, useSelector } from "react-redux";
import {
fetchAvailableSlots,
createSlot,
deleteSlot,
} from "../../redux/slices/slotSlice.ts";
const days = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
interface AddSlotModalProps {
open: boolean;
onClose: () => void;
}
export default function AddSlotModal({ open, onClose }: AddSlotModalProps) {
const [selectedDay, setSelectedDay] = useState("Monday");
const [openingTime, setOpeningTime] = useState("");
const [closingTime, setClosingTime] = useState("");
const [breakTime, setBreakTime] = useState<any>([]);
const [error, setError] = useState<string>("");
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(
dayjs()
);
const dispatch = useDispatch();
// Fetch slots from the Redux state
const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
const {
slots,
loading,
error: apiError,
} = useSelector((state: any) => state.slotReducer.slots);
register,
handleSubmit,
reset,
formState: { errors },
} = useForm();
const [isAvailable, setIsAvailable] = useState<boolean>(true); // Default is available
// useEffect(() => {
// if (selectedDay) {
// dispatch(fetchAvailableSlots(1)); // Replace with actual stationId if needed
// }
// }, [dispatch, selectedDay]);
// Get today's date in the format yyyy-mm-dd
const today = new Date().toISOString().split("T")[0];
const addSlot = (start: string, end: string) => {
const selectedDateFormatted = selectedDate.format("YYYY-MM-DD");
const startTime = start;
const endTime = end;
dispatch(
createSlot({
stationId: 1,
date: selectedDateFormatted,
startHour: startTime,
endHour: endTime,
isAvailable: true,
})
);
};
const addBreak = (start: string, end: string) => {
if (!start || !end) {
setError("Break Start and End times are required.");
return;
}
setBreakTime([...breakTime, { start, end }]);
setError("");
};
const deleteSlot = (start: string, end: string) => {
const updatedSlots = slots[selectedDay].filter(
(slot: any) => !(slot.start === start && slot.end === end)
);
setSlots({
...slots,
[selectedDay]: updatedSlots,
});
};
const deleteBreak = (start: string, end: string) => {
const updatedBreaks = breakTime.filter(
(breakItem: any) =>
!(breakItem.start === start && breakItem.end === end)
);
setBreakTime(updatedBreaks);
};
const saveData = () => {
if (!openingTime || !closingTime) {
setError("Operating hours are required.");
return;
}
setSuccessMessage(
`Data for ${selectedDay} has been saved successfully!`
);
setError("");
};
const handleCloseSnackbar = () => {
setSuccessMessage(null);
const onSubmit = (data: {
date: string;
startHour: string;
endHour: string;
}) => {
handleAddSlot({ ...data, isAvailable });
reset();
handleClose();
};
return (
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
<DialogTitle align="center">EV Station Slot Management</DialogTitle>
<Dialog open={open} onClose={handleClose}>
<DialogTitle>Add EV Slot</DialogTitle>
<DialogContent>
{/* Date Picker */}
<Box
sx={{
display: "flex",
justifyContent: "space-between",
mt: 3,
}}
>
<Typography variant="h4" gutterBottom>
Select Date
</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
value={selectedDate}
onChange={(newDate) => setSelectedDate(newDate)}
renderInput={(props) => (
<CustomTextField
{...props}
fullWidth
label="Select Date"
InputProps={{
startAdornment: (
<CalendarTodayRoundedIcon fontSize="small" />
),
}}
/>
)}
/>
</LocalizationProvider>
</Box>
<Tabs
value={selectedDay}
onChange={(event, newValue) => setSelectedDay(newValue)}
variant="scrollable"
scrollButtons="auto"
sx={{ mt: 3 }}
>
{days.map((day) => (
<Tab
key={day}
label={day}
value={day}
sx={{
fontWeight: "bold",
fontSize: "16px",
"&.Mui-selected": {
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
{...register("date", {
required: "Date is required",
validate: (value) =>
value >= today || "Date cannot be in the past",
})}
label="Date"
type="date"
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
error={!!errors.date}
helperText={errors.date?.message}
// Set the min value to today's date
inputProps={{ min: today }}
/>
<TextField
{...register("startHour", {
required: "Start hour is required",
})}
label="Start Hour"
type="time"
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
error={!!errors.startHour}
helperText={errors.startHour?.message}
/>
<TextField
{...register("endHour", {
required: "End hour is required",
})}
label="End Hour"
type="time"
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"
>
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",
},
}}
/>
))}
</Tabs>
{/* Operating Hours */}
<Card sx={{ mt: 2, p: 2 }}>
<Typography variant="h6" gutterBottom>
Set Operating Hours for {selectedDay}
</Typography>
<Box sx={{ display: "flex", gap: 2, mt: 1 }}>
<CustomTextField
type="time"
label="Opening Time"
value={openingTime}
onChange={(e) => setOpeningTime(e.target.value)}
fullWidth
/>
<CustomTextField
type="time"
label="Closing Time"
value={closingTime}
onChange={(e) => setClosingTime(e.target.value)}
fullWidth
/>
</Box>
</Card>
{/* Slots */}
<Card sx={{ mt: 2, p: 2 }}>
<Typography variant="h6">Add Slots</Typography>
<Box sx={{ display: "flex", gap: 2, mt: 1 }}>
<CustomTextField
type="time"
label="Start Time"
id="slotStart"
fullWidth
/>
<CustomTextField
type="time"
label="End Time"
id="slotEnd"
fullWidth
/>
<Button
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "250px",
"&:hover": { backgroundColor: "#439BC1" },
}}
onClick={() =>
addSlot(
document.getElementById("slotStart").value,
document.getElementById("slotEnd").value
)
}
>
<AddCircleIcon sx={{ mr: 1 }} /> Add
</Button>
</Box>
{error && (
<Typography color="error" mt={1}>
{error}
</Typography>
)}
</Card>
{/* Break Time */}
<Card sx={{ mt: 2, p: 2 }}>
<Typography variant="h6">Break Time</Typography>
<Box sx={{ display: "flex", gap: 2, mt: 1 }}>
<CustomTextField
type="time"
label="Break Start"
id="breakStart"
fullWidth
/>
<CustomTextField
type="time"
label="Break End"
id="breakEnd"
fullWidth
/>
<Button
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "250px",
"&:hover": { backgroundColor: "#439BC1" },
}}
onClick={() =>
addBreak(
document.getElementById("breakStart").value,
document.getElementById("breakEnd").value
)
}
>
<AddCircleIcon sx={{ mr: 1 }} /> Add
</Button>
</Box>
</Card>
{/* Slots and Break Times Lists */}
{/* (Content for slots and breaks remains the same as in the original implementation) */}
{/* Success Snackbar */}
<Snackbar
open={!!successMessage}
autoHideDuration={6000}
onClose={handleCloseSnackbar}
message={successMessage}
/>
width: "100px",
"&:hover": { backgroundColor: "#439BC1" },
}}
>
Add Booking
</Button>
</DialogActions>
</form>
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary">
Cancel
</Button>
<Button onClick={saveData} color="primary">
Save
</Button>
</DialogActions>
</Dialog>
);
}
};
export default AddSlotModal;

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

@ -11,7 +11,7 @@ import { adminList, deleteAdmin } from "../../redux/slices/adminSlice";
import { vehicleList, deleteVehicle } from "../../redux/slices/VehicleSlice";
import { deleteManager, managerList } from "../../redux/slices/managerSlice";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import {
Box,
Button,
@ -24,7 +24,7 @@ import {
} from "@mui/material";
import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
import DeleteModal from "../Modals/DeleteModal";
import { AppDispatch } from "../../redux/store/store";
import { AppDispatch, RootState } from "../../redux/store/store";
import ViewModal from "../Modals/ViewModal";
import VehicleViewModal from "../Modals/VehicleViewModal";
@ -36,7 +36,10 @@ import UserViewModal from "../Modals/UserViewModal/index.tsx";
import { deleteUser, userList } from "../../redux/slices/userSlice.ts";
import { deleteStation } from "../../redux/slices/stationSlice.ts";
import StationViewModal from "../Modals/StationViewModal/index.tsx";
import { fetchAvailableSlots } from "../../redux/slices/slotSlice.ts";
import {
deleteSlot,
fetchAvailableSlots,
} from "../../redux/slices/slotSlice.ts";
import { bookingList } from "../../redux/slices/bookSlice.ts";
// Styled components for customization
const StyledTableCell = styled(TableCell)(({ theme }) => ({
@ -105,14 +108,17 @@ const CustomTable: React.FC<CustomTableProps> = ({
const [searchQuery, setSearchQuery] = React.useState("");
const [currentPage, setCurrentPage] = React.useState(1);
const usersPerPage = 10;
const { user, isLoading } = useSelector(
(state: RootState) => state?.profileReducer
);
const open = Boolean(anchorEl);
console.log("Rows", rows);
const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
setAnchorEl(event.currentTarget);
setSelectedRow(row);
setRowData(row);
};
const handleClose = () => {
setAnchorEl(null);
};
@ -125,9 +131,13 @@ const CustomTable: React.FC<CustomTableProps> = ({
};
const handleDeleteButton = (id: string | undefined) => {
if (!id) console.error("ID not found", id);
if (!id) {
console.error("ID not found", id);
return;
}
switch (tableType) {
case "admin":
dispatch(deleteAdmin(id || ""));
break;
@ -143,9 +153,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
case "station":
dispatch(deleteStation(id || ""));
break;
// case "booking":
// dispatch(deleteBooking(id || ""));
// break;
case "slots":
dispatch(deleteSlot(id || ""));
break;
default:
console.error("Unknown table type:", tableType);
return;
@ -172,6 +182,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
case "booking":
dispatch(bookingList());
break;
case "slots":
dispatch(fetchAvailableSlots());
break;
default:
console.error("Unknown table type:", tableType);
return;
@ -240,6 +253,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
? "Charging Station"
: tableType === "booking"
? "Booking"
: tableType === "slots"
? "Slot"
: "List"}
</Typography>
@ -290,33 +305,37 @@ const CustomTable: React.FC<CustomTableProps> = ({
width: "100%",
}}
>
<Button
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "184px",
"&:hover": { backgroundColor: "#439BC1" },
}}
onClick={() => handleClickOpen()}
>
Add{" "}
{tableType === "admin"
? "Admin"
: tableType === "role"
? "Role"
: tableType === "user"
? "User"
: tableType === "manager"
? "Manager"
: tableType === "vehicle"
? "Vehicle"
: tableType === "station"
? "Charging Station"
: tableType === "booking"
? "Booking"
: "Item"}
</Button>
{!(user?.userType === "user" && tableType === "slots") && (
<Button
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "184px",
"&:hover": { backgroundColor: "#439BC1" },
}}
onClick={() => handleClickOpen()}
>
Add{" "}
{tableType === "admin"
? "Admin"
: tableType === "role"
? "Role"
: tableType === "user"
? "User"
: tableType === "manager"
? "Manager"
: tableType === "vehicle"
? "Vehicle"
: tableType === "station"
? "Charging Station"
: tableType === "booking"
? "Booking"
: tableType === "slots"
? "Slot"
: "Item"}
</Button>
)}
</Box>
<IconButton

20
src/components/MenuContent/index.tsx
View file

@ -60,16 +60,26 @@ export default function MenuContent({ hidden }: PropType) {
icon: <ManageAccountsOutlinedIcon />,
url: "/panel/vehicle-list", // Placeholder for now
},
userRole === "manager" && {
text: "Add Slots",
icon: <ManageAccountsOutlinedIcon />,
url: "/panel/EVslots", // Placeholder for now
},
// userRole === "manager" && {
// text: "Add Slots",
// icon: <ManageAccountsOutlinedIcon />,
// url: "/panel/EVslots", // Placeholder for now
// },
userRole === "user" && {
text: "Bookings",
icon: <ManageAccountsOutlinedIcon />,
url: "/panel/booking-list", // Placeholder for now
},
userRole === "manager" && {
text: "Available Slots",
icon: <ManageAccountsOutlinedIcon />,
url: "/panel/slot-list", // Placeholder for now
},
userRole === "user" && {
text: "Available Slots",
icon: <ManageAccountsOutlinedIcon />,
url: "/panel/slot-list", // Placeholder for now
},
];
const filteredMenuItems = baseMenuItems.filter(Boolean);

41
src/pages/BookingList/index.tsx
View file

@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
import { addBooking, bookingList } from "../../redux/slices/bookSlice";
import AddBookingModal from "../../components/AddBookingModal";
export default function ManagerList() {
export default function BookingList() {
const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
const [editRow, setEditRow] = useState<any>(null);
@ -22,6 +22,7 @@ export default function ManagerList() {
);
const users = useSelector((state: RootState) => state?.profileReducer.user);
useEffect(() => {
dispatch(bookingList());
}, [dispatch]);
@ -30,6 +31,7 @@ export default function ManagerList() {
setRowData(null);
setAddModalOpen(true);
};
const handleCloseModal = () => {
setAddModalOpen(false);
setEditModalOpen(false);
@ -37,44 +39,57 @@ export default function ManagerList() {
reset();
};
// Updated handleAddBooking function to handle the added fields
const handleAddBooking = async (data: {
stationId: string;
date: string;
startTime: string;
endTime: string;
carName: string;
carNumber: string;
carPort: string;
}) => {
try {
// Dispatch addBooking with new data
await dispatch(addBooking(data));
await dispatch(bookingList());
handleCloseModal(); // Close the modal
handleCloseModal(); // Close the modal after adding the booking
} catch (error) {
console.error("Error adding manager", error);
console.error("Error adding booking", error);
}
};
// Table Columns for bookings
const categoryColumns: Column[] = [
{ id: "srno", label: "Sr No" },
{ id: "name", label: "User Name" },
// { id: "stationName", label: "Station Name" },
// { id: "registeredAddress", label: "Station Location" },
{ id: "stationId", label: "Station Id" },
{ id: "stationName", label: "Station Name" },
{ id: "stationLocation", label: "Station Location" },
{ id: "date", label: "Date" },
{ id: "startTime", label: "Start Time" },
{ id: "endTime", label: "End Time" },
{ id: "carName", label: "Vehicle Name" },
{ id: "carNumber", label: "Vehicle Number" },
{ id: "carPort", label: "Charging Port" },
{ id: "action", label: "Action", align: "center" },
];
// Table Rows for bookings
// Table Rows for bookings
const categoryRows = bookings?.length
? bookings?.map(function (
booking: {
id: number;
name: string;
stationId: string;
stationName: string;
stationLocation: string;
date: string;
startTime: string;
endTime: string;
carName: string;
carNumber: string;
carPort: string;
},
index: number
) {
@ -83,13 +98,17 @@ export default function ManagerList() {
srno: index + 1,
name: users?.name ?? "NA",
stationId: booking?.stationId ?? "NA",
stationName: booking?.stationName ?? "NA",
stationLocation: booking?.stationLocation ?? "NA",
date: booking?.date ?? "NA",
startTime: booking?.startTime ?? "NA",
endTime: booking?.endTime ?? "NA",
carName: booking?.carName ?? "NA", // Directly access carName
carNumber: booking?.carNumber ?? "NA", // Directly access carNumber
carPort: booking?.carPort ?? "NA",
};
})
: [];
// console.log("Rowa", categoryRows);
return (
<>
@ -105,11 +124,11 @@ export default function ManagerList() {
tableType="booking"
handleClickOpen={handleClickOpen}
/>
{/* Add Manager Modal */}
{/* Add Booking Modal */}
<AddBookingModal
open={addModalOpen}
handleClose={handleCloseModal}
handleAddManager={handleAddBooking}
handleAddBooking={handleAddBooking} // Passing the handleAddBooking function
/>
</>
);

179
src/pages/EVSlotManagement/index.tsx
View file

@ -4,12 +4,9 @@ import {
Tab,
Box,
Card,
CardContent,
Button,
Typography,
IconButton,
Stack,
Snackbar,
Button,
} from "@mui/material";
import { CustomTextField } from "../../components/AddEditUserModel/styled.css.tsx";
import AddCircleIcon from "@mui/icons-material/AddCircle";
@ -38,23 +35,18 @@ const days = [
export default function EVSlotManagement() {
const [selectedDay, setSelectedDay] = useState("Monday");
const [openingTime, setOpeningTime] = useState("");
const [closingTime, setClosingTime] = useState("");
const [breakTime, setBreakTime] = useState<any>([]);
const [error, setError] = useState<string>("");
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const [selectedDate, setSelectedDate] = useState<dayjs.Dayjs | null>(
dayjs()
);
const navigate = useNavigate();
const dispatch = useDispatch();
const { slots, availableSlots } = useSelector(
const { availableSlots } = useSelector(
(state: RootState) => state?.slotReducer
);
console.log("availableSlots", availableSlots);
useEffect(() => {
dispatch(fetchAvailableSlots());
}, [dispatch]);
@ -63,64 +55,37 @@ export default function EVSlotManagement() {
navigate("/panel/dashboard");
};
// Add Slot
const addSlot = (start: string, end: string) => {
const selectedDateFormatted = selectedDate?.format("YYYY-MM-DD");
const startTime = start;
const endTime = end;
dispatch(
createSlot({
date: selectedDateFormatted,
startHour: startTime,
endHour: endTime,
startHour: start,
endHour: end,
isAvailable: true,
})
);
// dispatch(fetchAvailableSlots());
).then(() => {
dispatch(fetchAvailableSlots());
});
};
// Delete slot function that dispatches deleteSlot
const addBreak = (start: string, end: string) => {
if (!start || !end) {
setError("Break Start and End times are required.");
return;
}
setBreakTime([...breakTime, { start, end }]);
setError("");
};
const handleDeleteSlot = (slotId: number) => {
// Delete slot
const handleDeleteSlot = (slotId: string) => {
dispatch(deleteSlot(slotId));
dispatch(fetchAvailableSlots());
};
// Delete break function
const deleteBreak = (start: string, end: string) => {
const updatedBreaks = breakTime.filter(
(breakItem: any) =>
!(breakItem.start === start && breakItem.end === end)
);
setBreakTime(updatedBreaks);
};
// Filter the available slots for the selected date's day
const filteredSlots = availableSlots.filter((slot: any) => {
// Get the day of the week for each slot
const slotDate = dayjs(slot.date);
const slotDay = slotDate.format("dddd"); // Get the day of the week (e.g., "Monday")
// Save function
const saveData = () => {
if (!openingTime || !closingTime) {
setError("Operating hours are required.");
return;
}
// Simulate saving data (e.g., to a database or API)
setSuccessMessage(
`Data for ${selectedDay} has been saved successfully!`
);
setError(""); // Clear any previous errors
};
const handleCloseSnackbar = () => {
setSuccessMessage(null);
};
// Compare the selected day with the slot's day
return slotDay === selectedDay; // Only show slots that match the selected day
});
return (
<Box sx={{ maxWidth: 600, mx: "auto", p: 2 }}>
@ -219,46 +184,13 @@ export default function EVSlotManagement() {
</Typography>
)}
</Card>
<Card sx={{ mt: 2, p: 2 }}>
<Typography variant="h6">Break Time</Typography>
<Box sx={{ display: "flex", gap: 2, mt: 1 }}>
<CustomTextField
type="time"
label="Break Start"
id="breakStart"
fullWidth
/>
<CustomTextField
type="time"
label="Break End"
id="breakEnd"
fullWidth
/>
<Button
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "250px",
"&:hover": { backgroundColor: "#439BC1" },
}}
onClick={() =>
addBreak(
document.getElementById("breakStart").value,
document.getElementById("breakEnd").value
)
}
>
<AddCircleIcon sx={{ mr: 1 }} /> Add
</Button>
</Box>
</Card>
<Card sx={{ mt: 2, p: 2 }}>
<Typography variant="h6" gutterBottom>
Slots for {selectedDay}
</Typography>
{Array.isArray(availableSlots) && availableSlots.length ? (
availableSlots.map((slot: any, index: number) => (
{filteredSlots.length ? (
filteredSlots.map((slot: any, index: number) => (
<Box
key={index}
sx={{
@ -284,75 +216,6 @@ export default function EVSlotManagement() {
<Typography>No slots added for {selectedDay}</Typography>
)}
</Card>
<Card sx={{ mt: 2, p: 2 }}>
<Typography variant="h6" gutterBottom>
Break Times for {selectedDay}
</Typography>
{breakTime.length ? (
breakTime.map((breakItem: any, index: number) => (
<Box
key={index}
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
mb: 1,
}}
>
<Typography variant="body1">
{breakItem.start} - {breakItem.end}
</Typography>
<IconButton
onClick={() =>
deleteBreak(breakItem.start, breakItem.end)
}
>
<DeleteIcon color="error" />
</IconButton>
</Box>
))
) : (
<Typography>No break times added</Typography>
)}
</Card>
{/* <Box
sx={{ display: "flex", justifyContent: "space-between", mt: 3 }}
>
<Button
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
"&:hover": { backgroundColor: "#439BC1" },
width: "117px",
}}
onClick={handleBack}
>
Back
</Button>
<Button
type="submit"
sx={{
backgroundColor: "#52ACDF",
color: "white",
borderRadius: "8px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
}}
onClick={saveData}
>
Save
</Button>
</Box> */}
{/* Success Snackbar */}
{/* <Snackbar
open={!!successMessage}
autoHideDuration={6000}
onClose={handleCloseSnackbar}
message={successMessage}
/> */}
</Box>
);
}

110
src/pages/EvSlotList/index.tsx Normal file
View file

@ -0,0 +1,110 @@
import React, { useEffect, useState } from "react";
import { Box, Button, TextField, Typography } from "@mui/material";
import CustomTable, { Column } from "../../components/CustomTable";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "../../redux/store/store";
import { useForm } from "react-hook-form";
import { createSlot, fetchAvailableSlots } from "../../redux/slices/slotSlice";
import AddSlotModal from "../../components/AddSlotModal";
import dayjs from "dayjs";
export default function EVSlotList() {
const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
const [editRow, setEditRow] = useState<any>(null);
const { reset } = useForm();
const [deleteModal, setDeleteModal] = useState<boolean>(false);
const [viewModal, setViewModal] = useState<boolean>(false);
const [rowData, setRowData] = useState<any | null>(null);
const [searchTerm, setSearchTerm] = useState("");
const dispatch = useDispatch<AppDispatch>();
const availableSlots = useSelector(
(state: RootState) => state?.slotReducer.availableSlots
);
useEffect(() => {
dispatch(fetchAvailableSlots());
}, [dispatch]);
const handleClickOpen = () => {
setRowData(null);
setAddModalOpen(true);
};
const handleCloseModal = () => {
setAddModalOpen(false);
setEditModalOpen(false);
setRowData(null);
reset();
};
const handleAddSlot = async (data: {
date: string;
startTime: string;
endTime: string;
isAvailable: boolean;
}) => {
try {
await dispatch(createSlot(data));
await dispatch(fetchAvailableSlots());
handleCloseModal();
} catch (error) {
console.error("Error adding slot", error);
}
};
const slotColumns: Column[] = [
{ id: "srno", label: "Sr No" },
{ id: "name", label: "Station Name" },
{ id: "stationId", label: "Station Id" },
{ id: "date", label: "Date" },
{ id: "startTime", label: "Start Time" },
{ id: "endTime", label: "End Time" },
{ id: "isAvailable", label: "Is Available", align: "center" },
{ id: "action", label: "Action", align: "center" },
];
// Make sure dayjs is imported
const slotRows = availableSlots?.length
? availableSlots.map((slot, index) => {
const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD");
const startTime = dayjs(slot?.startTime).format("HH:mm");
const endTime = dayjs(slot?.endTime).format("HH:mm");
console.log("first", startTime);
return {
srno: index + 1,
id: slot?.id ?? "NA",
stationId: slot?.stationId ?? "NA",
name: slot?.ChargingStation?.name ?? "NA",
date: formattedDate ?? "NA",
startTime: startTime ?? "NA",
endTime: endTime ?? "NA",
isAvailable: slot?.isAvailable ? "Yes" : "No",
};
})
: [];
console.log("Rows",slotRows)
return (
<>
<CustomTable
columns={slotColumns}
rows={slotRows}
setDeleteModal={setDeleteModal}
deleteModal={deleteModal}
setViewModal={setViewModal}
viewModal={viewModal}
setRowData={setRowData}
setModalOpen={() => setEditModalOpen(true)}
tableType="slots"
handleClickOpen={handleClickOpen}
/>
<AddSlotModal
open={addModalOpen}
handleClose={handleCloseModal}
handleAddSlot={handleAddSlot}
/>
</>
);
}

89
src/redux/slices/bookSlice.ts
View file

@ -2,27 +2,75 @@ import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import http from "../../lib/https";
import { toast } from "sonner";
// Define the structure for carDetails
interface CarDetails {
name: string;
number: string;
model: string;
}
interface Booking {
id: number;
name:string;
slotId: number;
stationId: string;
stationName: string;
stationLocation: string;
date: string;
startTime: string;
endTime: string;
carDetails: CarDetails;
}
interface BookingState {
bookings: Booking[];
loading: boolean;
error: string | null;
carNames: string[]; // For car names
carPorts: string[]; // For car ports
}
const initialState: BookingState = {
bookings: [],
loading: false,
error: null,
carNames: [], // Initialize carNames
carPorts: [], // Initialize carPorts
};
// Redux slice for fetching car names and ports
export const getCarNames = createAsyncThunk<
string[],
void,
{ rejectValue: string }
>("fetchCarNames", async (_, { rejectWithValue }) => {
try {
const response = await http.get("/get-vehicle-dropdown");
return response.data.data; // Adjust based on actual API response
} catch (error: any) {
return rejectWithValue(
error?.response?.data?.message || "An error occurred"
);
}
});
export const getCarPorts = createAsyncThunk<
string[],
void,
{ rejectValue: string }
>("fetchCarPorts", async (_, { rejectWithValue }) => {
try {
const response = await http.get("/get-vehicle-port-dropdown");
return response.data.data; // Adjust based on actual API response
} catch (error: any) {
return rejectWithValue(
error?.response?.data?.message || "An error occurred"
);
}
});
// Fetch booking list
export const bookingList = createAsyncThunk<
Booking,
Booking[],
void,
{ rejectValue: string }
>("fetchBooking", async (_, { rejectWithValue }) => {
@ -31,18 +79,20 @@ export const bookingList = createAsyncThunk<
if (!token) throw new Error("No token found");
const response = await http.get("/user-bookings");
console.log("API Response:", response);
if (!response.data?.data) throw new Error("Invalid API response");
return response.data.data;
return response.data.data; // Updated to access data
} catch (error: any) {
toast.error("Error Fetching User Booking List" + error);
toast.error("Error Fetching User Booking List: " + error.message);
return rejectWithValue(
error?.response?.data?.message || "An error occurred"
);
}
});
// Add a new booking
export const addBooking = createAsyncThunk<
Booking,
{
@ -50,13 +100,20 @@ export const addBooking = createAsyncThunk<
date: string;
startTime: string;
endTime: string;
carName: string;
carNumber: string;
carPort: string;
},
{ rejectValue: string }
>("/AddBooking", async (data, { rejectWithValue }) => {
try {
const response = await http.post("/book-slot", data);
return response.data;
toast.success("EV Booked Successfully!");
return response.data.data; // Adjust to match the new API response structure
} catch (error: any) {
toast.error(
"The requested time slot doesn't fall within any available slot "
);
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
@ -82,23 +139,33 @@ const bookSlice = createSlice({
)
.addCase(bookingList.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message || "Failed to fetch users";
state.error =
action.error.message || "Failed to fetch bookings";
})
.addCase(addBooking.pending, (state) => {
state.loading = true;
// state.error = null;
})
.addCase(
addBooking.fulfilled,
(state, action: PayloadAction<Booking>) => {
state.loading = false;
state.bookings.push(action.payload);
state.bookings.push(action.payload); // Add new booking to state
}
)
.addCase(addBooking.rejected, (state) => {
state.loading = false;
})
// Add case reducers for fetching car names and ports
.addCase(
getCarNames.fulfilled,
(state, action: PayloadAction<string[]>) => {
state.carNames = action.payload;
}
)
.addCase(
addBooking.rejected,
(state, action: PayloadAction<string | undefined>) => {
state.loading = false;
getCarPorts.fulfilled,
(state, action: PayloadAction<string[]>) => {
state.carPorts = action.payload;
}
);
},

78
src/redux/slices/slotSlice.ts
View file

@ -4,11 +4,14 @@ import { toast } from "sonner";
// Define TypeScript types
interface Slot {
id: number;
id: string;
stationId:string;
date: string;
startHour: Date;
endHour: Date;
startTime: string;
endTime: string;
isAvailable: boolean;
ChargingStation: { name: string };
}
interface SlotState {
@ -52,42 +55,39 @@ export const createSlot = createAsyncThunk<
Slot,
{
date: string;
startHour: string;
endHour: string;
startTime: string;
endTime: string;
isAvailable: boolean;
},
{ rejectValue: string }
>(
"slots/createSlot",
async (payload, { rejectWithValue }) => {
try {
// const payload = {
// date,
// startHour,
// endHour,
// isAvailable,
// };
>("slots/createSlot", async (payload, { rejectWithValue }) => {
try {
// const payload = {
// date,
// startHour,
// endHour,
// isAvailable,
// };
const token = localStorage?.getItem("authToken");
if (!token) throw new Error("No token found");
const response = await http.post("/create-slot", payload);
toast.success("Slot created successfully");
return response.data.data;
} catch (error: any) {
// Show error message
toast.error("Error creating slot: " + error?.message);
const token = localStorage?.getItem("authToken");
if (!token) throw new Error("No token found");
const response = await http.post("/create-slot", payload);
toast.success("Slot created successfully");
return response.data.data;
} catch (error: any) {
// Show error message
toast.error("Error creating slot: " + error?.message);
// Return a detailed error message if possible
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
// Return a detailed error message if possible
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
);
});
// Update Slot details
export const updateSlot = createAsyncThunk<
Slot,
Slot,
{ id: number; startTime: string; endTime: string }, // Argument type (slot update data)
{ rejectValue: string }
>("slots/updateSlot", async ({ id, ...slotData }, { rejectWithValue }) => {
@ -104,8 +104,8 @@ export const updateSlot = createAsyncThunk<
});
export const deleteSlot = createAsyncThunk<
number, // Return type (id of deleted slot)
number,
string, // Return type (id of deleted slot)
string,
{ rejectValue: string }
>("slots/deleteSlot", async (id, { rejectWithValue }) => {
try {
@ -181,12 +181,18 @@ const slotSlice = createSlice({
})
.addCase(
deleteSlot.fulfilled,
(state, action: PayloadAction<number>) => {
(state, action: PayloadAction<string>) => {
state.loading = false;
// Remove the deleted slot from the state
state.slots = state.slots.filter(
(slot) => slot.id !== action.payload
// Ensure we're filtering the correct array (availableSlots)
state.availableSlots = state.availableSlots.filter(
(slot) => String(slot.id) !== String(action.payload)
);
// Also update slots array if it exists
if (state.slots) {
state.slots = state.slots.filter(
(slot) => String(slot.id) !== String(action.payload)
);
}
}
)
.addCase(deleteSlot.rejected, (state, action) => {

10
src/router.tsx
View file

@ -21,7 +21,7 @@ const ManagerList = lazy(() => import("./pages/ManagerList"));
const StationList = lazy(() => import("./pages/StationList"));
const EVSlotManagement = lazy(() => import("./pages/EVSlotManagement"));
const BookingList = lazy(() => import("./pages/BookingList"));
const EvSlotList = lazy(() => import("./pages/EvSlotList"));
interface ProtectedRouteProps {
@ -102,9 +102,11 @@ export default function AppRouter() {
/>
<Route
path="booking-list"
element={
<ProtectedRoute component={<BookingList />} />
}
element={<ProtectedRoute component={<BookingList />} />}
/>
<Route
path="slot-list"
element={<ProtectedRoute component={<EvSlotList />} />}
/>
</Route>