chore: add new component for finding status and add sorting to the findings table

components/ui/table/index.ts

@@ -4,4 +4,5 @@ export * from "./data-table-filter-custom";
 export * from "./data-table-pagination";
 export * from "./severity-badge";
 export * from "./status-badge";
+export * from "./status-finding-badge";
 export * from "./table";

components/ui/table/severity-badge.tsx

@@ -37,7 +37,8 @@ export const SeverityBadge = ({ severity }: { severity: Severity }) => {
   return (
     <Chip
       className={clsx("gap-1 border-none capitalize text-default-600", {
-        "bg-rose-700/20": severity === "critical",
+        "bg-system-severity-critical text-white dark:text-white":
+          severity === "critical",
       })}
       size="sm"
       variant="flat"

components/ui/table/status-finding-badge.tsx

@@ -0,0 +1,37 @@
+import { Chip } from "@nextui-org/react";
+import React from "react";
+
+export type FindingStatus = "FAIL" | "PASS" | "MANUAL" | "MUTED";
+
+const statusColorMap: Record<
+  FindingStatus,
+  "danger" | "warning" | "success" | "default"
+> = {
+  FAIL: "danger",
+  PASS: "success",
+  MANUAL: "warning",
+  MUTED: "default",
+};
+
+export const StatusFindingBadge = ({
+  status,
+  size = "sm",
+  ...props
+}: {
+  status: FindingStatus;
+  size?: "sm" | "md" | "lg";
+}) => {
+  const color = statusColorMap[status];
+
+  return (
+    <Chip
+      className="gap-1 border-none px-2 py-4 capitalize text-default-600"
+      size={size}
+      variant="flat"
+      color={color}
+      {...props}
+    >
+      {status}
+    </Chip>
+  );
+};