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

components/filters/custom-select-provider.tsx

@@ -42,16 +42,16 @@ export const CustomSelectProvider: React.FC = () => {
     (value: string) => {
       const params = new URLSearchParams(searchParams.toString());
       if (value) {
-        params.set("filter[provider__in]", value);
+        params.set("filter[provider_type]", value);
       } else {
-        params.delete("filter[provider__in]");
+        params.delete("filter[provider_type]");
       }
       router.push(`?${params.toString()}`, { scroll: false });
     },
     [router, searchParams],
   );
 
-  const currentProvider = searchParams.get("filter[provider__in]") || "";
+  const currentProvider = searchParams.get("filter[provider_type]") || "";
 
   const selectedKeys = useMemo(() => {
     return dataInputsProvider.some(

components/findings/table/column-findings.tsx

@@ -5,19 +5,17 @@ import { ColumnDef } from "@tanstack/react-table";
 import { DataTableRowDetails } from "@/components/findings/table";
 import { PlusIcon } from "@/components/icons";
 import { TriggerSheet } from "@/components/ui/sheet";
-import { SeverityBadge, Status, StatusBadge } from "@/components/ui/table";
+import {
+  DataTableColumnHeader,
+  SeverityBadge,
+  StatusFindingBadge,
+} from "@/components/ui/table";
 import { FindingProps } from "@/types";
 
 import { DataTableRowActions } from "./data-table-row-actions";
 
-const statusMap: Record<"PASS" | "FAIL" | "MANUAL" | "MUTED", Status> = {
-  PASS: "completed",
-  FAIL: "failed",
-  MANUAL: "completed",
-  MUTED: "cancelled",
-};
-
 const getFindingsData = (row: { original: FindingProps }) => {
+  console.log(row.original, "finding");
   return row.original;
 };
 
@@ -29,6 +27,7 @@ const getResourceData = (
   row: { original: FindingProps },
   field: keyof FindingProps["relationships"]["resource"]["attributes"],
 ) => {
+  // console.log(row.original, "resource");
   return (
     row.original.relationships?.resource?.attributes?.[field] ||
     `No ${field} found in resource`
@@ -39,6 +38,7 @@ const getProviderData = (
   row: { original: FindingProps },
   field: keyof FindingProps["relationships"]["provider"]["attributes"],
 ) => {
+  // console.log(row.original, "provider");
   return (
     row.original.relationships?.provider?.attributes?.[field] ||
     `No ${field} found in provider`
@@ -49,6 +49,7 @@ const getScanData = (
   row: { original: FindingProps },
   field: keyof FindingProps["relationships"]["scan"]["attributes"],
 ) => {
+  // console.log(row.original, "scan");
   return (
     row.original.relationships?.scan?.attributes?.[field] ||
     `No ${field} found in scan`
@@ -58,30 +59,23 @@ const getScanData = (
 export const ColumnFindings: ColumnDef<FindingProps>[] = [
   {
     accessorKey: "check",
-    header: "Check",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Check"} param="check_id" />
+    ),
     cell: ({ row }) => {
       const { checktitle } = getFindingsMetadata(row);
-      return <p className="max-w-96 truncate text-medium">{checktitle}</p>;
-    },
-  },
-  {
-    accessorKey: "scanName",
-    header: "Scan Name",
-    cell: ({ row }) => {
-      const name = getScanData(row, "name");
-
-      return (
-        <p className="max-w-96 truncate text-medium">
-          {typeof name === "string" || typeof name === "number"
-            ? name
-            : "Invalid data"}
-        </p>
-      );
+      return <p className="max-w-96 truncate text-small">{checktitle}</p>;
     },
   },
   {
     accessorKey: "severity",
-    header: "Severity",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Severity"}
+        param="severity"
+      />
+    ),
     cell: ({ row }) => {
       const {
         attributes: { severity },
@@ -91,15 +85,30 @@ export const ColumnFindings: ColumnDef<FindingProps>[] = [
   },
   {
     accessorKey: "status",
-    header: "Status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Status"} param="status" />
+    ),
     cell: ({ row }) => {
       const {
         attributes: { status },
       } = getFindingsData(row);
 
-      const mappedStatus = statusMap[status];
+      return <StatusFindingBadge size="sm" status={status} />;
+    },
+  },
+  {
+    accessorKey: "scanName",
+    header: "Scan Name",
+    cell: ({ row }) => {
+      const name = getScanData(row, "name");
 
-      return <StatusBadge status={mappedStatus} />;
+      return (
+        <p className="text-small">
+          {typeof name === "string" || typeof name === "number"
+            ? name
+            : "Invalid data"}
+        </p>
+      );
     },
   },
   {
@@ -120,7 +129,7 @@ export const ColumnFindings: ColumnDef<FindingProps>[] = [
     header: "Service",
     cell: ({ row }) => {
       const { servicename } = getFindingsMetadata(row);
-      return <p className="max-w-96 truncate text-medium">{servicename}</p>;
+      return <p className="max-w-96 truncate text-small">{servicename}</p>;
     },
   },
   {
@@ -131,7 +140,9 @@ export const ColumnFindings: ColumnDef<FindingProps>[] = [
 
       return (
         <>
-          <div>{typeof account === "string" ? account : "Invalid account"}</div>
+          <p className="max-w-96 truncate text-small">
+            {typeof account === "string" ? account : "Invalid account"}
+          </p>
         </>
       );
     },

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>
+  );
+};