Le V1

app/routes/inactivities.tsx

@@ -2,15 +2,26 @@ import {
   Button,
   Container,
   Heading,
+  ListItem,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
   Table,
   TableCaption,
   TableContainer,
   Tbody,
   Td,
   Thead,
   Tr,
+  UnorderedList,
+  useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
+import { useState } from "react";
 
 export async function loader({ context }: { context: RequestContext }) {
   const { current_user: currentUser } = context.data;
@@ -46,7 +57,7 @@ export async function loader({ context }: { context: RequestContext }) {
 
   const today = new Date().toISOString().split("T").at(0);
   const { results } = await context.env.D1.prepare(
-    "SELECT decisions, end, start, user FROM inactivity_notices WHERE start <= ?1 AND date(end, '+30 days') <= ?1; ",
+    "SELECT decisions, end, id, start, user FROM inactivity_notices WHERE start <= ?1 AND date(end, '+30 days') <= ?1; ",
   )
     .bind(today)
     .all();
@@ -63,16 +74,83 @@ export async function loader({ context }: { context: RequestContext }) {
   }) as unknown as {
     decisions: { [k: string]: boolean };
     end: string;
+    id: string;
     start: string;
     user: { email: string; id: string; username: string };
   }[];
 }
 
 export default function () {
   const data = useLoaderData<typeof loader>();
+  const [currentInactivity, setInactivity] = useState(
+    {} as { [k: string]: any },
+  );
+  const { isOpen, onClose, onOpen } = useDisclosure();
+  const toast = useToast();
+
+  async function getInactivity(id: string) {
+    const inactivityResponse = await fetch(`/api/inactivity/${id}`);
+
+    if (!inactivityResponse.ok) {
+      let msg = "Unknown error";
+
+      try {
+        msg = ((await inactivityResponse.json()) as { error: string }).error;
+      } catch {}
+
+      toast({
+        description: msg,
+        status: "error",
+        title: "Failed to fetch inactivity",
+      });
+
+      return;
+    }
+
+    setInactivity(await inactivityResponse.json());
+    onOpen();
+  }
 
   return (
     <Container maxW="container.lg">
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Inactivity Details</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <UnorderedList>
+              <ListItem>Username: ${currentInactivity.user.username}</ListItem>
+              <ListItem>User ID: ${currentInactivity.user.id}</ListItem>
+              <ListItem>Start Date: ${currentInactivity.start}</ListItem>
+              <ListItem>End Date: ${currentInactivity.end}</ListItem>
+              <ListItem>
+                Is Hiatus: ${currentInactivity.hiatus ? "Yes" : "No"}
+              </ListItem>
+              <ListItem>Reason: ${currentInactivity.reason}</ListItem>
+              <ListItem>
+                Decisions:
+                <br />
+                Approved: $
+                {Object.keys(currentInactivity.decisions).filter(
+                  (d) => currentInactivity.decisions[d],
+                )}
+                <br />
+                Denied: $
+                {Object.keys(currentInactivity.decisions).filter(
+                  (d) => !currentInactivity.decisions[d],
+                )}
+                <br />
+                Pending: $
+                {currentInactivity.departments.filter(
+                  (d: "DM" | "ET" | "FM" | "WM") =>
+                    typeof currentInactivity.decisions[d] === "undefined",
+                )}
+              </ListItem>
+            </UnorderedList>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
       <Heading pb="32px">Current Inactivity Notices</Heading>
       <TableContainer>
         <Table variant="simple">