Add buttons that do things to the event calendar page

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>
   );
 }