Display all pending reviews on inactivity notice card

components/InactivityNoticeCard.tsx

@@ -51,7 +51,6 @@ export default function (
     });
 
     setLoading(false);
-    props.port?.postMessage(`inactivity_${props.id}`);
   }
 
   const Approved = () => (
@@ -66,6 +65,18 @@ export default function (
     </svg>
   );
 
+  const Pending = () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="currentColor"
+      viewBox="0 0 16 16"
+    >
+      <path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z" />
+    </svg>
+  );
+
   return (
     <Card w="100%">
       <CardHeader>
@@ -94,23 +105,31 @@ export default function (
               </Text>
             </Box>
           ) : null}
-          {Object.keys(props.decisions as { [k: string]: boolean }).length ? (
+          <Box>
-            <Box>
+            <Heading size="xs">Decisions</Heading>
-              <Heading size="xs">Decisions</Heading>
+            <UnorderedList>
-              <UnorderedList>
+              {props.departments.map((d) => {
-                {Object.entries(
+                const dept = d as "ET" | "DM" | "FM" | "WM";
-                  props.decisions as { [k: string]: boolean },
+
-                ).map(([dept, accepted]) => (
+                return (
                   <ListItem>
                     <Stack alignItems="center" direction="row">
-                      <Text>{dept}:&nbsp;</Text>
+                      <Text>{d}:&nbsp;</Text>
-                      {accepted ? <Approved /> : <Denied />}
+                      {typeof props.decisions[dept] === "boolean" ? (
+                        props.decisions[dept] ? (
+                          <Approved />
+                        ) : (
+                          <Denied />
+                        )
+                      ) : (
+                        <Pending />
+                      )}
                     </Stack>
                   </ListItem>
-                ))}
+                );
-              </UnorderedList>
+              })}
-            </Box>
+            </UnorderedList>
-          ) : null}
+          </Box>
         </Stack>
       </CardBody>
       <CardFooter