From b0a146691bbc1a5167020e4934393d5fe8ff2bd1 Mon Sep 17 00:00:00 2001
From: Regalijan <r@regalijan.com>
Date: Wed, 11 Dec 2024 23:42:11 -0500
Subject: [PATCH] Add buttons that do things to the event calendar page

---
 app/routes/events-calendar.tsx | 46 ++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx
index 0bb4b6b..fc1530c 100644
--- a/app/routes/events-calendar.tsx
+++ b/app/routes/events-calendar.tsx
@@ -7,6 +7,7 @@ import { type LinksFunction } from "@remix-run/cloudflare";
 import {
   Button,
   Container,
+  Flex,
   Heading,
   Modal,
   ModalBody,
@@ -15,8 +16,17 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  Spacer,
   Text,
   useDisclosure,
+  VStack,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
 import { useState } from "react";
@@ -76,6 +86,9 @@ export async function loader({ context }: { context: RequestContext }) {
 
   return {
     calendarData,
+    canManage: Boolean(
+      [1 << 4, 1 << 12].find((p) => context.data.current_user.permissions & p),
+    ),
     eventList: eventsData.results,
     memberData: memberData.results,
   };
@@ -143,6 +156,39 @@ export default function () {
         toolbar={false}
         views={["month"]}
       />
+      <Flex mt="16px">
+        <Button as="a" colorScheme="blue" href="/book-event">
+          Book Event
+        </Button>
+        <Spacer />
+        {data.canManage ? (
+          <Popover placement="top-end">
+            <PopoverTrigger>
+              <Button colorScheme="blue">Management</Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <PopoverHeader fontWeight="semibold">
+                Management Tools
+              </PopoverHeader>
+              <PopoverArrow />
+              <PopoverCloseButton />
+              <PopoverBody>
+                <VStack>
+                  <Button as="a" href="/events-team/historical" w="100%">
+                    Historical Events
+                  </Button>
+                  <Button as="a" href="/et-members" w="100%">
+                    Member Management
+                  </Button>
+                  <Button as="a" href="/events-team/outstanding" w="100%">
+                    Outstanding Events
+                  </Button>
+                </VStack>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        ) : null}
+      </Flex>
     </Container>
   );
 }