feat(frontend): Added scan status indicator to audits card and table view

Author: azdak

apps/frontend/src/components/AuditsTable.module.scss

@@ -1,6 +1,16 @@
 @use "../global-styles/variables.module.scss";
 @use "../global-styles/fonts.scss";
 
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+  color: variables.$green;
+}
+
 .AuditsTable {
   margin-top:variables.$spacing;
   margin-bottom:calc(variables.$spacing*2);

apps/frontend/src/components/AuditsTable.tsx

@@ -17,6 +17,7 @@ import { StyledLabeledInput } from "./StyledLabeledInput";
 import { formatId } from "../utils";
 import { Link } from "react-router-dom";
 import { FaArrowDown, FaArrowUp } from "react-icons/fa";
+import { GrPowerCycle } from "react-icons/gr";
 import React from "react";
 
 interface Audit {
@@ -57,6 +58,22 @@ export const AuditsTable = ({ audits, isLoading }: auditsTableProps) => {
   }
   const columns = useMemo<ColumnDef<Audit>[]>(
     () => [
+      {
+        accessorFn: (row) => row.scans[0]?.status,
+        id: "status",
+        header: "Status",
+        cell: ({ getValue }) => {
+          const status = getValue() as string | undefined;
+          if (status === "processing") {
+            return (
+              <span role="img" aria-label="Processing">
+                <GrPowerCycle className={styles.spinning} />
+              </span>
+            );
+          }
+          return null;
+        },
+      },
       {
         accessorKey: "name",
         header: "Name",

apps/frontend/src/routes/Audits.module.scss

@@ -1,13 +1,38 @@
 @use "../global-styles/variables.module.scss";
 @use "../global-styles/fonts.scss";
 
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+.processing-icon {
+  display: flex;
+  margin-left: auto;
+
+  svg {
+    color: variables.$green;
+  }
+}
+
 .Audits {
   h2 {
     margin-bottom: calc(variables.$spacing);
     line-height: 1.1em;
     svg {
       color: variables.$black;
     }
+    .processing-icon svg {
+      color: variables.$green;
+      min-width: 17px;
+      min-height: 17px;
+      width: 17px;
+      height: 17px;
+    }
   }
 
   .audits-header {

apps/frontend/src/routes/Audits.tsx

@@ -4,6 +4,7 @@ import * as API from "aws-amplify/api";
 import { Link, useNavigate } from "react-router-dom";
 import { StyledButton } from "#src/components/StyledButton.tsx";
 import { LuClipboard, LuClipboardPlus, LuZap } from "react-icons/lu";
+import { GrPowerCycle } from "react-icons/gr";
 import { Card } from "#src/components/Card.tsx";
 const apiClient = API.generateClient();
 import styles from "./Audits.module.scss";
@@ -25,6 +26,7 @@ export interface Scan {
   };
   percentage: number;
   updated_at: string;
+  status: string;
 }
 /* 
 export interface Audit {
@@ -73,6 +75,7 @@ export const Audits = () => {
                           count
                         }
                     }
+                    status
                     percentage
                     updated_at
                   }
@@ -182,6 +185,11 @@ export const Audits = () => {
                       <h2>
                         <LuClipboard className="icon-small" />
                         {row.name}
+                        {row.scans[0]?.status === "processing" && (
+                          <span role="img" aria-label="Processing" className={styles["processing-icon"]}>
+                            <GrPowerCycle className={`icon-small ${styles.spinning}`} />
+                          </span>
+                        )}
                       </h2>
                     </Link>
                     <div className={styles["dataRow-list"]}>