Merge pull request #115 from UoaWDCC/uasc-52/admin-bookings-calendar-…

…view

UASC-52/Admin Bookings Calendar View

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,11 @@ function App() {
                   <Route path="/booking" element={<Booking />} />
                   <Route path="/profile" element={<Profile />} />
                   <Route path="/admin" element={<Admin />} />
+                  <Route
+                    path="/admin/bookings"
+                    element={<AdminBookingsDetailedView />}
+                    exact
+                  />
                 </Routes>
               </div>
             </div>

frontend/src/components/AdminBookingDetails.js

@@ -0,0 +1,92 @@
+import { Grid, Typography, Box, Divider, Paper } from "@mui/material"
+
+const AdminBookingDetails = ({
+  selectedUser,
+  checkInDate,
+  checkOutDate,
+  totalDays,
+  setShowDetails,
+}) => {
+  const styles = {
+    outerBackground: {
+      borderRadius: 15,
+      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 (
+    <div>
+      <Grid container rowSpacing={2} paddingTop="32px" sx={{ width: 850 }}>
+        <Grid item xs={12} md={8}>
+          {" "}
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <Typography
+            variant="h5"
+            align="right"
+            paddingTop="9px"
+            paddingBottom="1px"
+            sx={{ fontWeight: "bold" }}
+            onClick={() => setShowDetails(false)}
+          >
+            HIDE
+          </Typography>
+          <Divider />
+        </Grid>
+        <Grid item xs={12}>
+          <Paper elevation={0} style={styles.outerBackground}>
+            <Paper elevation={0} style={styles.requestBlock}>
+              <Box paddingLeft="10px">
+                <Typography
+                  variant="h5"
+                  align="left"
+                  sx={{ fontWeight: "bold" }}
+                >
+                  BOOKING DETAILS
+                </Typography>
+                <Divider width="200px" />
+                <Typography
+                  variant="h6"
+                  align="left"
+                  sx={{ fontWeight: "bold" }}
+                >
+                  User: {selectedUser}
+                </Typography>
+                <Typography
+                  variant="h6"
+                  align="left"
+                  sx={{ fontWeight: "bold" }}
+                >
+                  Check In Date: {checkInDate}
+                </Typography>
+                <Typography
+                  variant="h6"
+                  align="left"
+                  sx={{ fontWeight: "bold" }}
+                >
+                  Check Out Date: {checkOutDate}
+                </Typography>
+                <Typography
+                  variant="h6"
+                  align="left"
+                  sx={{ fontWeight: "bold" }}
+                >
+                  Total Days: {totalDays}
+                </Typography>
+              </Box>
+            </Paper>
+          </Paper>
+        </Grid>
+      </Grid>
+    </div>
+  )
+}
+export default AdminBookingDetails

frontend/src/components/AdminBookings.js

@@ -8,13 +8,15 @@ import {
 } from "@mui/material"
 import { ArrowForwardIos, ArrowBackIos } from "@mui/icons-material"
 import "../pages/Admin.css"
+import { useNavigate } from "react-router-dom"
 import React, { useState, useEffect } from "react"
 import { collection, getDocs } from "firebase/firestore"
 import { db } from "../firebase"
 
 const AdminBookings = () => {
   const daysOfWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]
   const [weekOffset, setWeekOffset] = useState(0)
+  const navigate = useNavigate()
   const [bookings, setBookings] = useState({
     SUN: [],
     MON: [],
@@ -109,10 +111,14 @@ const AdminBookings = () => {
          Check-In Date: ${booking.checkIn.toLocaleDateString()}
          Check-Out Date: ${booking.checkOut.toLocaleDateString()}`
     )
+
+    if (error) {
+      return <div>Error fetching data. Please try again later.</div>
+    }
   }
 
-  if (error) {
-    return <div>Error fetching data. Please try again later.</div>
+  const handleBookingsClick = () => {
+    navigate("/admin/bookings")
   }
 
   return (
@@ -125,6 +131,7 @@ const AdminBookings = () => {
           variant="contained"
           color="primary"
           className="manage-bookings-button"
+          onClick={() => handleBookingsClick()}
         >
           Manage Bookings
         </Button>

frontend/src/components/AdminDetailedCalendar.js

@@ -0,0 +1,137 @@
+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 AdminDetailedCalendar = ({
+  setSelectedUser,
+  setCheckInDate,
+  setCheckOutDate,
+  setTotalDays,
+  showDetails,
+  setShowDetails,
+}) => {
+  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, index) => {
+    setSelectedUser(user)
+    setShowDetails(true)
+
+    var clickedDate = new Date(startDate.valueOf())
+    clickedDate.setDate(clickedDate.getDate() + index)
+    setCheckInDate(clickedDate.toLocaleDateString())
+
+    var checkOutDate = new Date(clickedDate.valueOf())
+    checkOutDate.setDate(checkOutDate.getDate() + 3)
+    setCheckOutDate(checkOutDate.toLocaleDateString())
+
+    setTotalDays(
+      Math.ceil(checkOutDate.getTime() - clickedDate.getTime()) /
+        (1000 * 3600 * 24)
+    )
+  }
+
+  return (
+    <div
+      style={{
+        backgroundColor: "transparent",
+        width: showDetails ? "60%" : "100%",
+      }}
+    >
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{ paddingTop: "20px" }}
+      >
+        <Typography
+          variant="h3"
+          align="left"
+          sx={{ fontWeight: "900", color: "#457CC3" }}
+        >
+          Bookings
+        </Typography>
+      </Stack>
+      <Paper
+        elevation={2}
+        sx={{
+          padding: "32px",
+          borderRadius: "15px",
+          background: "white",
+          boxShadow: "0px 8px 44px 0px rgba(0, 0, 0, 0.14)",
+          marginTop: "16px",
+        }}
+        className="calendar-container"
+      >
+        <div className="container-header">
+          <IconButton onClick={() => setWeekOffset(weekOffset - 1)}>
+            <ArrowBackIos />
+          </IconButton>
+          <Typography variant="h6" paddingLeft="1rem" className="date-range">
+            {startDate.toLocaleDateString()} - {endDate.toLocaleDateString()}
+          </Typography>
+          <IconButton onClick={() => setWeekOffset(weekOffset + 1)}>
+            <ArrowForwardIos />
+          </IconButton>
+        </div>
+        <Grid container spacing={1}>
+          {daysOfWeek.map((day, index) => (
+            <Grid
+              key={index}
+              item
+              xs={12}
+              md={12 / daysOfWeek.length}
+              className="day-container"
+            >
+              <Typography align="center" variant="h6">
+                {day}
+              </Typography>
+              <div className="user-buttons-container">
+                {bookings[day]?.length > 0 ? (
+                  bookings[day].map((user, userIndex) => (
+                    <Button
+                      key={userIndex}
+                      onClick={() => handleUserClick(user, index)}
+                      className="user-button"
+                      sx={{ color: "primary.quaternary" }}
+                    >
+                      {user}
+                    </Button>
+                  ))
+                ) : (
+                  <Typography variant="no-booking">No bookings</Typography>
+                )}
+              </div>
+            </Grid>
+          ))}
+        </Grid>
+      </Paper>
+    </div>
+  )
+}
+
+export default AdminDetailedCalendar

frontend/src/pages/AdminBookingsDetailedView.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react"
+import { Container, Paper, Typography } from "@mui/material"
+import DetailedBookingsCalendar from "../components/AdminDetailedCalendar"
+import BookingDetails from "../components/AdminBookingDetails"
+import "../pages/Admin.css"
+
+const AdminBookingsDetailedView = () => {
+  const [selectedUser, setSelectedUser] = useState(null)
+  const [checkInDate, setCheckInDate] = useState("")
+  const [checkOutDate, setCheckOutDate] = useState("")
+  const [totalDays, setTotalDays] = useState(0)
+  const [showDetails, setShowDetails] = useState(false)
+
+  return (
+    <div
+      style={{
+        backgroundColor: "#f4f4f4",
+        height: "100%",
+        width: "100%",
+        backgroundImage:
+          "radial-gradient(ellipse 50% 50% at 30% 30%, #81c7ebaa, #ffffff)",
+      }}
+    >
+      <Paper
+        elevation={2}
+        sx={{
+          margin: "32px",
+          marginTop: "75px",
+          padding: " 32px",
+          backgroundColor: "transparent",
+          boxShadow: "none",
+        }}
+      >
+        <Typography
+          variant="h1"
+          align="left"
+          color="#474747"
+          sx={{ fontWeight: "bold" }}
+        >
+          Booking Details
+        </Typography>
+        <Container maxWidth={false} disableGutters={true}>
+          <Container
+            maxWidth={false}
+            disableGutters={true}
+            sx={{ display: "flex", justifyContent: "space-between" }}
+          >
+            <DetailedBookingsCalendar
+              setSelectedUser={setSelectedUser}
+              setCheckInDate={setCheckInDate}
+              setCheckOutDate={setCheckOutDate}
+              setTotalDays={setTotalDays}
+              showDetails={showDetails}
+              setShowDetails={setShowDetails}
+            />
+            {showDetails ? (
+              <BookingDetails
+                selectedUser={selectedUser}
+                checkInDate={checkInDate}
+                checkOutDate={checkOutDate}
+                totalDays={totalDays}
+                showDetails={showDetails}
+                setShowDetails={setShowDetails}
+              />
+            ) : (
+              <div />
+            )}
+          </Container>
+        </Container>
+      </Paper>
+    </div>
+  )
+}
+
+export default AdminBookingsDetailedView