car-crushers-portal/app/routes/inactivities.tsx

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;

  if (!currentUser)
    throw new Response(null, {
      status: 401,
    });

  const permissionGroups = {
    DM: [1 << 11],
    ET: [1 << 4, 1 << 12],
    FM: [1 << 7],
    WM: [1 << 11],
  };

  const searchDepartments = [];

  for (const department of Object.keys(permissionGroups)) {
    if (currentUser.permissions & (1 << 0)) searchDepartments.push(department);
    else if (
      permissionGroups[department as "DM" | "ET" | "FM" | "WM"].find(
        (p) => currentUser.permissions & p,
      )
    )
      searchDepartments.push(department);
  }

  if (!searchDepartments.length)
    throw new Response(null, {
      status: 403,
    });

  const today = new Date().toISOString().split("T").at(0);
  const { results } = await context.env.D1.prepare(
    "SELECT decisions, departments, end, hiatus, id, start, user FROM inactivity_notices WHERE start <= ?1 AND date(end, '+30 days') <= ?1; ",
  )
    .bind(today)
    .all();

  for (let i = 0; i < results.length; i++) {
    results[i].decisions = JSON.parse(results[i].decisions as string);
    results[i].departments = JSON.parse(results[i].departments as string);
    results[i].user = JSON.parse(results[i].user as string);
  }

  return results.filter((row) => {
    const decisionValues = Object.values(
      row.decisions as { [k: string]: boolean },
    );

    return decisionValues.find((d) => d);
  }) 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">
          <TableCaption>
            All recent inactivity notices (current and last 30 days)
          </TableCaption>
          <Thead>
            <Tr>Name</Tr>
            <Tr>User ID</Tr>
            <Tr>Start Date</Tr>
            <Tr>End Date</Tr>
            <Tr>View More</Tr>
          </Thead>
          <Tbody>
            {data.map((row) => (
              <Tr>
                <Td>{row.user.username}</Td>
                <Td>{row.user.id}</Td>
                <Td>{row.start}</Td>
                <Td>{row.end}</Td>
                <Button>View More</Button>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
    </Container>
  );
}