Added Icons for Active/Inactive status

frontend/src/grant-info/components/GrantItem.tsx

@@ -2,6 +2,12 @@ import React, {useState } from 'react';
 import './styles/GrantItem.css';
 import { GrantAttributes } from './GrantAttributes';
 import GrantDetails from './GrantDetails';
+import StatusIndicator from "./StatusIndicator";  // import the new component
+
+function isActiveStatus(status: string) {
+    return ["Pending", "In Review", "Awaiting Submission"].includes(status);
+  }
+
 import {Grant} from "@/external/bcanSatchel/store.ts";
 
 interface GrantItemProps {
@@ -20,6 +26,8 @@ const GrantItem: React.FC<GrantItemProps> = ({ grant }) => {
     const toggleExpand = () => {
         setIsExpanded(!isExpanded);
     };
+
+    const active = isActiveStatus(curGrant.status);
 
     // when toggle edit turns off, sends curGrant to backend to be saved
     const toggleEdit = async () => {
@@ -54,6 +62,7 @@ const GrantItem: React.FC<GrantItemProps> = ({ grant }) => {
                 <li className="status">{curGrant.status}</li>
                 <li className="amount">${curGrant.amount}</li>
                 <li className="restriction-status">{curGrant.restrictions}</li>
+                <li><StatusIndicator isActive={active} /></li>
             </ul>
             <div className={`grant-body ${isExpanded ? 'expanded' : ''}`}>
                 {isExpanded && (

frontend/src/grant-info/components/GrantStatus.tsx

@@ -0,0 +1,5 @@
+export function isActiveStatus(status: string): boolean {
+    return ["Pending", "In Review", "Awaiting Submission"].includes(status);
+}
+
+

frontend/src/grant-info/components/StatusBadge.tsx

@@ -0,0 +1,42 @@
+import { Badge, Box } from "@chakra-ui/react";
+import { isActiveStatus } from "./GrantStatus";
+
+export function StatusBadge({ status }: { status: string }) {
+  let colorScheme: string;
+  switch (status) {
+    case "Pending":
+      colorScheme = "orange";
+      break;
+    case "In Review":
+      colorScheme = "yellow";
+      break;
+    case "Awaiting Submission":
+      colorScheme = "teal";
+      break;
+    case "Approved":
+      colorScheme = "green";
+      break;
+    case "Rejected":
+      colorScheme = "red";
+      break;
+    case "Cancelled":
+      colorScheme = "red";
+      break;
+    default:
+      colorScheme = "gray";
+  }
+
+  return (
+    <Badge colorPalette={colorScheme} variant="solid" borderRadius="md" ml={2}>
+      <Box
+        as="span"
+        w="6px"
+        h="6px"
+        borderRadius="full"
+        bg={isActiveStatus(status) ? "green.600" : "red.600"}
+        mr={2}
+      />
+      {isActiveStatus(status) ? "Active" : "Inactive"}
+    </Badge>
+  );
+}

frontend/src/grant-info/components/StatusIndicator.tsx

@@ -0,0 +1,46 @@
+// StatusIndicator.tsx
+
+import React from "react";
+import { Box, Text } from "@chakra-ui/react";
+
+interface StatusIndicatorProps {
+  isActive: boolean;
+}
+
+const StatusIndicator: React.FC<StatusIndicatorProps> = ({ isActive }) => {
+  const circleColor = isActive ? "#5AB911" : "#A9A9A9"; // #5AB911 = bright green from Figma
+  const labelText = isActive ? "Active" : "Inactive";
+
+  return (
+    <Box 
+      display="flex"
+      alignItems="center"
+    >
+      <Box
+        as="svg"
+        width="39px"
+        height="36px"
+        fill="none"
+      >
+        <path
+          d="M39 18C39 27.9411 30.2696 36 19.5 36C8.73045 36 0 27.9411 0 18C0 8.05887 8.73045 0 19.5 0C30.2696 0 39 8.05887 39 18Z"
+          fill={circleColor}
+        />
+      </Box>
+
+      {/* The text label: #000, "Helvetica Neue", 28px */}
+      <Text
+        ml="8px"
+        color="#000"
+        fontFamily='"Helvetica Neue", sans-serif'
+        fontSize="20px"
+        fontWeight="400"
+        lineHeight="normal"
+      >
+        {labelText}
+      </Text>
+    </Box>
+  );
+};
+
+export default StatusIndicator;