Findings page Status component (#34)

* feat(findings): Severity and Status badge WIP

* Remove SeverityBadge from PR

components/findings/table/ColumnsFindings.tsx

@@ -10,6 +10,7 @@ import {
 import { ColumnDef } from "@tanstack/react-table";
 
 import { VerticalDotsIcon } from "@/components/icons";
+import { StatusBadge } from "@/components/ui";
 import { FindingProps } from "@/types";
 
 const getFindingsAttributes = (row: { original: FindingProps }) => {
@@ -30,7 +31,7 @@ export const ColumnsFindings: ColumnDef<FindingProps>[] = [
     header: "Severity",
     cell: ({ row }) => {
       const { severity } = getFindingsAttributes(row);
-      return <p className="text-sm">{severity}</p>;
+      return <p className="text-sm text-nowrap">{severity}</p>;
     },
   },
   {
@@ -38,7 +39,7 @@ export const ColumnsFindings: ColumnDef<FindingProps>[] = [
     header: "Status",
     cell: ({ row }) => {
       const { status } = getFindingsAttributes(row);
-      return <p className="text-sm">{status}</p>;
+      return <StatusBadge status={status} />;
     },
   },
   {

components/index.ts

@@ -1,20 +0,0 @@
-export * from "./findings/table/ColumnsFindings";
-export * from "./findings/table/DataTableFindings";
-export * from "./findings/table/SkeletonTableFindings";
-export * from "./providers/AddProvider";
-export * from "./providers/ButtonAddProvider";
-export * from "./providers/ButtonCheckConnectionProvider";
-export * from "./providers/ButtonDeleteProvider";
-export * from "./providers/CheckConnectionProvider";
-export * from "./providers/DateWithTime";
-export * from "./providers/ProviderInfo";
-export * from "./providers/ScanStatus";
-export * from "./providers/table/ColumnsProvider";
-export * from "./providers/table/DataTableProvider";
-export * from "./providers/table/SkeletonTableProvider";
-export * from "./ui/alert/Alert";
-export * from "./ui/header/Header";
-export * from "./ui/sidebar";
-export * from "./ui/table/StatusBadge";
-export * from "./ui/table/Table";
-export * from "./ui/toast";

components/ui/table/StatusBadge.tsx

@@ -1,14 +1,25 @@
 import { Chip } from "@nextui-org/react";
 import React from "react";
 
-type Status = "completed" | "pending" | "cancelled";
+type Status =
+  | "completed"
+  | "pending"
+  | "cancelled"
+  | "fail"
+  | "success"
+  | "muted";
 
-export const statusColorMap: Record<Status, "success" | "danger" | "warning"> =
-  {
-    completed: "success",
-    pending: "warning",
-    cancelled: "danger",
-  };
+export const statusColorMap: Record<
+  Status,
+  "success" | "danger" | "warning" | "default"
+> = {
+  completed: "success",
+  pending: "warning",
+  cancelled: "danger",
+  fail: "danger",
+  success: "success",
+  muted: "default",
+};
 
 export const StatusBadge = ({ status }: { status: Status }) => {
   return (

types/components.ts

@@ -40,8 +40,8 @@ export interface FindingProps {
   id: string;
   attributes: {
     CheckTitle: string;
-    severity: string;
-    status: string;
+    severity: "critical" | "high" | "medium" | "low";
+    status: "fail" | "success" | "muted";
     region: string;
     service: string;
     account: string;