"Finish" this atrocity

app/routes/me.tsx

@@ -45,22 +45,29 @@ export async function loader({ context }: { context: RequestContext }) {
 
   const settledPromises = await Promise.allSettled(d1Promises);
 
-  return settledPromises.filter((p) => {
+  const data = {
+    items: settledPromises.filter((p) => {
       if (p.status === "fulfilled") return p.value.results;
 
       return null;
-  }) as any as ({ [k: string]: any }[] | null)[];
+    }) as any as ({ [k: string]: any }[] | null)[],
+    permissions: currentUser.permissions as number,
+  };
+
+  return data;
 }
 
 export default function () {
-  const data: ({ [k: string]: any }[] | null)[] =
+  const data: {
-    useLoaderData<typeof loader>();
+    items: ({ [k: string]: any }[] | null)[];
+    permissions: number;
+  } = useLoaderData<typeof loader>();
   const timeStates: {
     [k: number]: { data: string; set: Dispatch<SetStateAction<string>> };
   } = {};
   const toast = useToast();
 
-  for (const result of data) {
+  for (const result of data.items) {
     if (!result) continue;
 
     for (const row of result) {
@@ -231,7 +238,7 @@ export default function () {
       <br />
       <br />
       <Heading size="lg">Discord Appeals</Heading>
-      <TableContainer>
+      <TableContainer mb="16px">
         <Table variant="simple">
           <Thead>
             <Tr>
@@ -242,8 +249,7 @@ export default function () {
             </Tr>
           </Thead>
           <Tbody>
-            {data[0]
+            {data.items[0]?.map((result) => {
-              ? data[0].map((result) => {
               return (
                 <Tr>
                   <Td>{timeStates[result.created_at].data}</Td>
@@ -255,10 +261,50 @@ export default function () {
                       ? `${result.approved ? "Accepted" : "Denied"}`
                       : "Unknown"}
                   </Td>
+                  <Td>
+                    <Button
+                      onClick={async () => await fetchItem(result.id, "appeal")}
+                    >
+                      View
+                    </Button>
+                  </Td>
+                </Tr>
+              );
+            })}
+          </Tbody>
+        </Table>
+      </TableContainer>
+      <br />
+      {[1 << 2, 1 << 3, 1 << 9, 1 << 10].find((p) => data.permissions & p) ? (
+        <>
+          <Heading size="lg">Inactivity Notices</Heading>
+          <TableContainer mb="16px">
+            <Table variant="simple">
+              <Thead>
+                <Tr>
+                  <Th>Date</Th>
+                  <Th>ID</Th>
+                  <Th>Status</Th>
+                  <Th>View</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {data.items[1]?.map((result) => {
+                  return (
+                    <Tr>
+                      <Td>{timeStates[result.created_at].data}</Td>
+                      <Td>{result.id}</Td>
+                      <Td>
+                        {result.open
+                          ? "Pending"
+                          : Object.values(result.decisions).find((d) => !d)
+                          ? "Denied"
+                          : "Approved"}
+                      </Td>
                       <Td>
                         <Button
                           onClick={async () =>
-                            await fetchItem(result.id, "appeal")
+                            await fetchItem(result.id, "inactivity")
                           }
                         >
                           View
@@ -266,8 +312,41 @@ export default function () {
                       </Td>
                     </Tr>
                   );
-                })
+                })}
-              : undefined}
+              </Tbody>
+            </Table>
+          </TableContainer>
+          <br />
+        </>
+      ) : null}
+      <Heading size="lg">Reports</Heading>
+      <TableContainer>
+        <Table variant="simple">
+          <Thead>
+            <Tr>
+              <Th>Date</Th>
+              <Th>ID</Th>
+              <Th>Status</Th>
+              <Th>View</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {data.items[2]?.map((result) => {
+              return (
+                <Tr>
+                  <Td>{timeStates[result.created_at].data}</Td>
+                  <Td>{result.id}</Td>
+                  <Td>{result.open ? "Pending" : "Reviewed"}</Td>
+                  <Td>
+                    <Button
+                      onClick={async () => await fetchItem(result.id, "report")}
+                    >
+                      View
+                    </Button>
+                  </Td>
+                </Tr>
+              );
+            })}
           </Tbody>
         </Table>
       </TableContainer>