diff --git a/app/routes/events-team.tsx b/app/routes/events-team.tsx index 37b88a6..93dd7f7 100644 --- a/app/routes/events-team.tsx +++ b/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>, ); }