vendor handle cancellation

client-frontend/src/containers/Vendor/Booking/BookingDetailsForm.jsx

@@ -18,6 +18,10 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { DateField } from "@mui/x-date-pickers/DateField";
 import dayjs from "dayjs";
 import { appointmentDataShape } from "../../../utils/ComponentPropTypes";
+import {
+  convertISOtoShortDate,
+  convertISOtoTime,
+} from "../../../utils/TimeFormatter";
 
 const BookingDetailsForm = ({ appointmentData }) => {
   const theme = useTheme();
@@ -151,12 +155,13 @@ const BookingDetailsForm = ({ appointmentData }) => {
                     <span
                       style={{
                         fontWeight: "bold",
-                        color: theme.palette.dark_purple.main,
+                        color: theme.palette.primary.main,
                       }}
                     >
                       {details.actionByUserType} {details.actionByUserName}
                     </span>{" "}
-                    on {new Date(details.actionTimestamp).toLocaleString()}
+                    on {convertISOtoShortDate(details.actionTimestamp)} at{" "}
+                    {convertISOtoTime(details.actionTimestamp)}
                   </>
                 }
                 secondary={

client-frontend/src/containers/Vendor/Booking/BookingsMonthView.jsx

@@ -36,6 +36,10 @@ import {
 } from "../../../utils/ComponentPropTypes";
 import BookingDetailsForm from "./BookingDetailsForm";
 import BookingRejectModal from "./BookingRejectModal";
+import {
+  convertISOtoDate,
+  convertISOtoTime,
+} from "../../../utils/TimeFormatter";
 
 const PREFIX = "Demo";
 
@@ -92,13 +96,13 @@ const BookingsMonthView = ({
           startDate: startDateTime,
           endDate: endDateTime,
           ...restProps,
-        }),
+        })
       )
       .filter((booking) =>
         filterCriteria[newStatus].value === "ALL"
           ? booking.status === filterCriteria.pending.value ||
             booking.status === filterCriteria.confirmed.value
-          : booking.status === filterCriteria[newStatus].value,
+          : booking.status === filterCriteria[newStatus].value
       );
     setBookings(newBookings);
   };
@@ -176,30 +180,6 @@ const BookingsMonthView = ({
     </StyledToolbarFlexibleSpace>
   );
 
-  const convertISOtoDate = (value) => {
-    const date = new Date(value);
-    const options = {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    };
-    const formattedDate = date.toLocaleDateString("en-SG", options);
-    return formattedDate;
-  };
-
-  const convertISOtoTime = (value) => {
-    const date = new Date(value);
-    const formattedTime = date
-      .toLocaleTimeString("en-SG", {
-        hour: "numeric",
-        minute: "numeric",
-        hour12: true,
-      })
-      .toUpperCase();
-    return formattedTime;
-  };
-
   const ToolTipContent = ({ appointmentData }) => {
     return (
       <Grid
@@ -350,13 +330,13 @@ const BookingsMonthView = ({
           startDate: startDateTime,
           endDate: endDateTime,
           ...restProps,
-        }),
+        })
       )
       .filter((booking) =>
         filterCriteria[currentStatus].value === "ALL"
           ? booking.status === filterCriteria.pending.value ||
             booking.status === filterCriteria.confirmed.value
-          : booking.status === filterCriteria[currentStatus].value,
+          : booking.status === filterCriteria[currentStatus].value
       );
   };
 

client-frontend/src/containers/Vendor/Booking/BookingsPage.jsx

@@ -4,20 +4,16 @@ import CloseIcon from "@mui/icons-material/Close";
 import DoneIcon from "@mui/icons-material/Done";
 import EventAvailableIcon from "@mui/icons-material/EventAvailable";
 import NewReleasesIcon from "@mui/icons-material/NewReleases";
-import {
-  Badge,
-  Box,
-  Tab,
-  Tabs,
-  Typography,
-  useTheme
-} from "@mui/material";
+import ConfirmField from "./ConfirmField";
+import CancelField from "./CancelField";
+import { Badge, Box, Tab, Tabs, Typography, useTheme } from "@mui/material";
 import { useEffect, useState } from "react";
 import useBookingStore from "../../../zustand/BookingStore";
 import useSnackbarStore from "../../../zustand/SnackbarStore";
 import BookingsMonthView from "./BookingsMonthView";
 import BookingsTable from "./BookingsTable";
-import ConfirmField from "./ConfirmField";
+import DetailsField from "./DetailsField";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 
 const StyledPage = styled("div")(({ theme }) => ({
   backgroundColor: theme.palette.grey[50],
@@ -36,12 +32,8 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
 const BookingsPage = () => {
   const theme = useTheme();
   const [currentTab, setCurrentTab] = useState();
-  const {
-    getBookingsForVendor,
-    bookings,
-    approveBooking,
-    rejectBooking,
-  } = useBookingStore();
+  const { getBookingsForVendor, bookings, approveBooking, rejectBooking } =
+    useBookingStore();
   const { openSnackbar } = useSnackbarStore();
 
   const pendingBookingBadgeNumber = bookings.filter(
@@ -52,6 +44,10 @@ const BookingsPage = () => {
     ["PAID", "PENDING_PAYMENT"].includes(booking.status)
   ).length;
 
+  const confirmedBadgeNumber = bookings.filter(
+    (booking) => booking.status === "CONFIRMED"
+  ).length;
+
   useEffect(() => {
     const fetchData = async () => {
       await getBookingsForVendor();
@@ -103,6 +99,43 @@ const BookingsPage = () => {
       },
     },
   ];
+  const confirmedAdditionalColumns = [
+    {
+      field: "details",
+      flex: 1,
+      renderHeader: () => {
+        return (
+          <Typography
+            fontSize={"1rem"}
+            sx={{ color: theme.palette.secondary.main }}
+          >
+            Confirmation Details
+          </Typography>
+        );
+      },
+      sortable: false,
+      renderCell: (params) => {
+        return <DetailsField params={params.row} />;
+      },
+    },
+    {
+      field: "cancelAction",
+      align: "center",
+      renderHeader: () => {
+        return (
+          <Typography
+            fontSize={"1rem"}
+            sx={{ color: theme.palette.secondary.main }}
+          ></Typography>
+        );
+      },
+      flex: 1,
+      sortable: false,
+      renderCell: (params) => {
+        return <CancelField bookingData={params.row} />;
+      },
+    },
+  ];
 
   return (
     <StyledPage>
@@ -154,6 +187,20 @@ const BookingsPage = () => {
             value="completedAndPaid"
             label="Completed"
           />
+          <Tab
+            icon={
+              <StyledBadge
+                color={
+                  currentTab === "confirmed" ? "pale_purple" : "unselected"
+                }
+                badgeContent={confirmedBadgeNumber}
+              >
+                <ThumbUpAltIcon />
+              </StyledBadge>
+            }
+            value="confirmed"
+            label="Confirmed"
+          />
         </Tabs>
       </Box>
       <Box sx={{ paddingLeft: 2, paddingRight: 2 }}>
@@ -169,9 +216,6 @@ const BookingsPage = () => {
           <BookingsTable
             allBookings={bookings}
             status={["PENDING_CONFIRMATION"]}
-            approveBooking={approveBooking}
-            rejectBooking={rejectBooking}
-            openSnackbar={openSnackbar}
             additionalColumns={pendingConfirmationAdditionalColumns}
           />
         )}
@@ -182,6 +226,13 @@ const BookingsPage = () => {
             additionalColumns={completedAndPaidAdditionalColumns}
           />
         )}
+        {currentTab === "confirmed" && (
+          <BookingsTable
+            allBookings={bookings}
+            status={["CONFIRMED"]}
+            additionalColumns={confirmedAdditionalColumns}
+          />
+        )}
       </Box>
     </StyledPage>
   );

client-frontend/src/containers/Vendor/Booking/BookingsTable.jsx

@@ -4,6 +4,11 @@ import { DataGrid, GridToolbarFilterButton } from "@mui/x-data-grid";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import BookingDetailsForm from "./BookingDetailsForm.jsx";
+import {
+  convertISOtoDate,
+  convertISOtoShortDate,
+  convertISOtoTime,
+} from "../../../utils/TimeFormatter.js";
 
 const BookingsTable = ({ allBookings, status, additionalColumns }) => {
   const [bookings, setBookings] = useState([]);
@@ -22,40 +27,6 @@ const BookingsTable = ({ allBookings, status, additionalColumns }) => {
     }, 1000);
   }, [allBookings]);
 
-  const convertISOtoDate = (value) => {
-    const date = new Date(value);
-    const options = {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    };
-    const formattedDate = date.toLocaleDateString("en-SG", options);
-    return formattedDate;
-  };
-  const convertISOtoShortDate = (value) => {
-    const date = new Date(value);
-    const options = {
-      year: "2-digit",
-      month: "2-digit",
-      day: "2-digit",
-    };
-    const formattedDate = date.toLocaleDateString("en-SG", options);
-    return formattedDate;
-  };
-
-  const convertISOtoTime = (value) => {
-    const date = new Date(value);
-    const formattedTime = date
-      .toLocaleTimeString("en-SG", {
-        hour: "numeric",
-        minute: "numeric",
-        hour12: true,
-      })
-      .toUpperCase();
-    return formattedTime;
-  };
-
   const handleRowClick = ({
     _id,
     activityTitle,
@@ -129,7 +100,7 @@ const BookingsTable = ({ allBookings, status, additionalColumns }) => {
             fontSize={"1rem"}
             sx={{ color: theme.palette.secondary.main }}
           >
-            Date
+            Event Date
           </Typography>
         );
       },