From 817b0196e5aae144399be08c2a6d18fdddc5c15f Mon Sep 17 00:00:00 2001 From: atharvaarankalle Date: Sat, 2 Sep 2023 13:33:38 +1200 Subject: [PATCH 1/6] feat: Reused calendar view from admin dashboard --- frontend/src/App.js | 2 + .../src/components/AdminDetailedBookings.js | 114 ++++++++++++++++++ .../src/pages/AdminBookingsDetailedView.js | 33 +++++ 3 files changed, 149 insertions(+) create mode 100644 frontend/src/components/AdminDetailedBookings.js create mode 100644 frontend/src/pages/AdminBookingsDetailedView.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 76624e1b8..066be7537 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -11,6 +11,7 @@ import Checkout from "./pages/Checkout" import Booking from "./pages/Booking" import Profile from "./pages/Profile" import Admin from "./pages/Admin" +import AdminBookingsDetailedView from "./pages/AdminBookingsDetailedView" import { BrowserRouter as Router, Route, Routes } from "react-router-dom" import { ThemeProvider } from "@mui/material" import { LocalizationProvider } from "@mui/x-date-pickers" @@ -37,6 +38,7 @@ function App() { } /> } /> } /> + } exact /> diff --git a/frontend/src/components/AdminDetailedBookings.js b/frontend/src/components/AdminDetailedBookings.js new file mode 100644 index 000000000..7ed47b040 --- /dev/null +++ b/frontend/src/components/AdminDetailedBookings.js @@ -0,0 +1,114 @@ +import React, { useState } from "react" +import { + Paper, + Typography, + Stack, + Button, + Grid, + IconButton, +} from "@mui/material" +import { ArrowForwardIos, ArrowBackIos } from "@mui/icons-material" +import "../pages/Admin.css" + +const AdminBookings = () => { + const daysOfWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] + const [weekOffset, setWeekOffset] = useState(0) + + const startDate = new Date() + startDate.setDate(startDate.getDate() - startDate.getDay() + weekOffset * 7) + const endDate = new Date(startDate) + endDate.setDate(endDate.getDate() + 6) + + // Fake dataset for now - will be replaced with API call + const bookings = { + SUN: ["User A"], + MON: [], + TUE: ["User A", "User B"], + WED: ["User A", "User C", "User D"], + THU: [], + FRI: ["User A", "User B", "User C", "User D"], + SAT: ["User C", "User D"], + } + + const handleUserClick = (user) => { + alert(`Clicked on ${user}`) + } + + return ( +
+ + + Bookings + + + +
+ setWeekOffset(weekOffset - 1)}> + + + + {startDate.toLocaleDateString()} - {endDate.toLocaleDateString()} + + setWeekOffset(weekOffset + 1)}> + + +
+ + {daysOfWeek.map((day, index) => ( + + + {day} + +
+ {bookings[day]?.length > 0 ? ( + bookings[day].map((user, userIndex) => ( + + )) + ) : ( + No bookings + )} +
+ + ))} + + +
+ ) +} + +export default AdminBookings diff --git a/frontend/src/pages/AdminBookingsDetailedView.js b/frontend/src/pages/AdminBookingsDetailedView.js new file mode 100644 index 000000000..4e7b61c23 --- /dev/null +++ b/frontend/src/pages/AdminBookingsDetailedView.js @@ -0,0 +1,33 @@ +import React from "react"; +import { Container, Divider, Paper, Typography } from "@mui/material" +import DetailedBookings from "../components/AdminDetailedBookings"; + +const AdminBookingsDetailedView = () => { + return ( +
+ + + {" "} + ADMIN DASHBOARD{" "} + + + + + + + + +
+ ) +} + +export default AdminBookingsDetailedView; \ No newline at end of file From 7388df34b9b872e91bed22d5e27ea69026775e74 Mon Sep 17 00:00:00 2001 From: atharvaarankalle Date: Sat, 2 Sep 2023 13:38:53 +1200 Subject: [PATCH 2/6] feat: Added onclick functionality to get to detailed bookings page --- frontend/src/components/AdminBookings.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/components/AdminBookings.js b/frontend/src/components/AdminBookings.js index a3a602725..fff11c64c 100644 --- a/frontend/src/components/AdminBookings.js +++ b/frontend/src/components/AdminBookings.js @@ -9,10 +9,12 @@ import { } from "@mui/material" import { ArrowForwardIos, ArrowBackIos } from "@mui/icons-material" import "../pages/Admin.css" +import { useNavigate } from "react-router-dom" const AdminBookings = () => { const daysOfWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] const [weekOffset, setWeekOffset] = useState(0) + const navigate = useNavigate() const startDate = new Date() startDate.setDate(startDate.getDate() - startDate.getDay() + weekOffset * 7) @@ -30,6 +32,10 @@ const AdminBookings = () => { SAT: ["User C", "User D"], } + const handleBookingsClick = () => { + navigate("/admin/bookings") + } + const handleUserClick = (user) => { alert(`Clicked on ${user}`) } @@ -54,6 +60,7 @@ const AdminBookings = () => { variant="contained" color="primary" className="manage-bookings-button" + onClick={() => handleBookingsClick() } > Manage Bookings From 95a4628c4751b841d8dce9e577d3dab3cdf67a69 Mon Sep 17 00:00:00 2001 From: atharvaarankalle Date: Wed, 6 Sep 2023 14:33:36 +1200 Subject: [PATCH 3/6] feat: Added functionality to update details based on which user is selected in calendar --- .../src/components/AdminBookingDetails.js | 72 +++++++++++++++++++ ...edBookings.js => AdminDetailedCalendar.js} | 16 +++-- .../src/pages/AdminBookingsDetailedView.js | 15 ++-- 3 files changed, 92 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/AdminBookingDetails.js rename frontend/src/components/{AdminDetailedBookings.js => AdminDetailedCalendar.js} (86%) diff --git a/frontend/src/components/AdminBookingDetails.js b/frontend/src/components/AdminBookingDetails.js new file mode 100644 index 000000000..1c1d2a966 --- /dev/null +++ b/frontend/src/components/AdminBookingDetails.js @@ -0,0 +1,72 @@ +import { Grid, Typography, Box, Divider, Paper } from "@mui/material" + +const AdminBookingDetails = ({ selectedUser, checkInDate }) => { + const styles = { + outerBackground: { + borderRadius: 15, + backgroundColor: "gray", + padding: "20px", + boxShadow: "none", + }, + requestBlock: { + borderRadius: 15, // Change the value as needed + backgroundColor: "lightblue", + padding: "5px", // Add padding as needed + boxShadow: "none", + marginBottom: "5px", + }, + } + + return ( +
+ + + {" "} + + + + HIDE + + + + + + + + + BOOKING DETAILS + + + + User: {selectedUser} + + + Check In Date: {checkInDate} + + + + + + +
+ ) +} +export default AdminBookingDetails diff --git a/frontend/src/components/AdminDetailedBookings.js b/frontend/src/components/AdminDetailedCalendar.js similarity index 86% rename from frontend/src/components/AdminDetailedBookings.js rename to frontend/src/components/AdminDetailedCalendar.js index 7ed47b040..41fbe9f7c 100644 --- a/frontend/src/components/AdminDetailedBookings.js +++ b/frontend/src/components/AdminDetailedCalendar.js @@ -10,7 +10,7 @@ import { import { ArrowForwardIos, ArrowBackIos } from "@mui/icons-material" import "../pages/Admin.css" -const AdminBookings = () => { +const AdminDetailedCalendar = ({ setSelectedUser, setCheckInDate }) => { const daysOfWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] const [weekOffset, setWeekOffset] = useState(0) @@ -30,12 +30,16 @@ const AdminBookings = () => { SAT: ["User C", "User D"], } - const handleUserClick = (user) => { - alert(`Clicked on ${user}`) + const handleUserClick = (user, index) => { + setSelectedUser(user) + + var clickedDate = new Date(startDate.valueOf()) + clickedDate.setDate(clickedDate.getDate() + index) + setCheckInDate(clickedDate.toLocaleDateString()) } return ( -
+
{ bookings[day].map((user, userIndex) => (