Very crude implementation of status display for inactivity notices

components/InactivityNoticeCard.tsx

@@ -6,12 +6,25 @@ import {
   CardFooter,
   CardHeader,
   Heading,
+  Icon,
+  ListItem,
   Stack,
   StackDivider,
   Text,
+  UnorderedList
 } from "@chakra-ui/react";
 
-export default function (props: InactivityNoticeProps) {
+export default function(props: InactivityNoticeProps) {
+  const Approved = () => <Icon fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
+    <path
+      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+  </Icon>;
+
+  const Denied = () => <Icon fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
+    <path
+      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
+  </Icon>;
+
   return (
     <Card w="100%">
       <CardHeader>
@@ -32,6 +45,14 @@ export default function (props: InactivityNoticeProps) {
             <Heading size="xs">End Date</Heading>
             <Text>{new Date(props.end).toLocaleDateString()}</Text>
           </Box>
+          {props.decisions ? <Box>
+            <Heading size="xs">Decisions</Heading>
+            <UnorderedList>
+              {props.decisions.map(decision => <ListItem>
+                {decision.accepted ? <Approved /> : <Denied />} {decision.department}
+              </ListItem>)}
+            </UnorderedList>
+          </Box> : null}
         </Stack>
       </CardBody>
       <CardFooter pb="4px">

index.d.ts

@@ -44,6 +44,10 @@ declare global {
 
   interface InactivityNoticeProps {
     created_at: number;
+    decisions?: {
+      accepted: boolean;
+      department: string;
+    }[];
     departments: string[];
     end: string;
     reason: string;