Add finalize report button

app/routes/events-team_.report.tsx

@@ -1,4 +1,5 @@
 import {
+  Button,
   Container,
   Heading,
   Table,
@@ -11,6 +12,7 @@ import {
   Tr,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
+import { useState } from "react";
 
 export async function loader({ context }: { context: RequestContext }) {
   const { current_user: user } = context.data;
@@ -82,13 +84,27 @@ export async function loader({ context }: { context: RequestContext }) {
     )
       memberMap[member].points -= 30;
 
-  return memberMap;
+  const date = new Date();
+  const reportFinalizationKey = await context.env.DATA.get(
+    `reportfinalized_${date.getUTCFullYear()}-${date.getUTCMonth() + 1}`,
+  );
+
+  return {
+    can_finalize: typeof reportFinalizationKey !== "undefined",
+    members: memberMap,
+  };
 }
 
 export default function () {
   const data = useLoaderData<typeof loader>() as {
+    can_finalize: boolean;
+    members: {
       [k: string]: { name: string; points: number; roblox_id?: number };
     };
+  };
+  const [showFinalizeButton, setShowFinalizeButton] = useState(
+    data.can_finalize,
+  );
   const now = new Date();
   let month = now.getUTCMonth();
   let year = now.getUTCFullYear();
@@ -117,7 +133,7 @@ export default function () {
             </Tr>
           </Thead>
           <Tbody>
-            {Object.entries(data).map(([key, value]) => (
+            {Object.entries(data.members).map(([key, value]) => (
               <Tr>
                 <Td>{key}</Td>
                 <Td>{value.name}</Td>
@@ -128,6 +144,7 @@ export default function () {
           </Tbody>
         </Table>
       </TableContainer>
+      <Button disabled={!showFinalizeButton}>Finalize Report</Button>
     </Container>
   );
 }