add liaison page

booking-app/app/liaison/page.tsx

@@ -0,0 +1,9 @@
+// app/liaison/page.tsx
+
+"use client";
+
+import Liaison from "@/components/src/client/routes/liaison/Liaison";
+
+const LiaisonPage: React.FC = () => <Liaison />;
+
+export default LiaisonPage;

booking-app/components/src/client/routes/liaison/Liaison.tsx

@@ -0,0 +1,50 @@
+import { Box, Tab, Tabs } from "@mui/material";
+import { PageContextLevel, PagePermission } from "../../../types";
+import React, { useContext, useMemo, useState } from "react";
+
+import { Bookings } from "../components/bookingTable/Bookings";
+import { CenterLoading } from "../components/Loading";
+import { DatabaseContext } from "../components/Provider";
+
+const Liaison = () => {
+  const { liaisonUsers, pagePermission, userEmail } =
+    useContext(DatabaseContext);
+  const [tab, setTab] = useState("bookings");
+
+  const liaisonEmails = useMemo<string[]>(
+    () => liaisonUsers.map((user) => user.email),
+    [liaisonUsers]
+  );
+
+  const userHasPermission =
+    pagePermission === PagePermission.ADMIN ||
+    pagePermission === PagePermission.LIAISON;
+
+  if (liaisonEmails.length === 0 || userEmail === null) {
+    return <CenterLoading />;
+  }
+
+  return (
+    <Box margin={3}>
+      {!userHasPermission ? (
+        <div>You do not have permission to view this page.</div>
+      ) : (
+        <div>
+          <Tabs
+            value={tab}
+            onChange={(_, newVal) => setTab(newVal)}
+            textColor="primary"
+            indicatorColor="primary"
+          >
+            <Tab value="bookings" label="Bookings" />
+          </Tabs>
+          {tab === "bookings" && (
+            <Bookings pageContext={PageContextLevel.LIAISON} />
+          )}
+        </div>
+      )}
+    </Box>
+  );
+};
+
+export default Liaison;