Display status and buttons on event team cards

app/routes/events-team.tsx

@@ -1,8 +1,11 @@
 import {
   Box,
+  Button,
   Card,
   CardBody,
+  CardFooter,
   Container,
+  Flex,
   Heading,
   Link,
   Stack,
@@ -16,7 +19,7 @@ import { type ReactNode } from "react";
 export async function loader({ context }: { context: RequestContext }) {
   const now = new Date();
   const monthEventList = await context.env.D1.prepare(
-    "SELECT created_by, day, month, type, year FROM events WHERE month = ? AND year = ?;",
+    "SELECT approved, created_by, day, month, pending, type, year FROM events WHERE month = ? AND year = ?;",
   )
     .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
     .all();
@@ -26,14 +29,25 @@ export async function loader({ context }: { context: RequestContext }) {
       status: 500,
     });
 
-  return monthEventList.results;
+  return {
+    can_approve: Boolean(
+      [1 << 4, 1 << 12].find((p) => context.data.user.permissions & p),
+    ),
+    events: monthEventList.results,
+  };
 }
 
 export default function () {
-  const data: { [k: string]: any }[] = useLoaderData<typeof loader>();
+  const {
+    can_approve,
+    events,
+  }: {
+    can_approve: boolean;
+    events: { [k: string]: any }[];
+  } = useLoaderData<typeof loader>();
   const eventCards: ReactNode[] = [];
 
-  for (const event of data) {
+  for (const event of events) {
     eventCards.push(
       <Card w="100%">
         <CardBody>
@@ -58,6 +72,20 @@ export default function () {
             </Box>
           </Stack>
         </CardBody>
+        <CardFooter>
+          <Flex gap="16px">
+            {can_approve && event.pending ? (
+              <>
+                <Button colorScheme="red">Deny</Button>
+                <Button colorScheme="blue">Approve</Button>
+              </>
+            ) : null}
+          </Flex>
+          <Text alignSelf="center" fontSize="sm">
+            Status:{" "}
+            {event.pending ? "Pending" : event.approved ? "Approved" : "Denied"}
+          </Text>
+        </CardFooter>
       </Card>,
     );
   }