chore: solve conflicts with main branch

components/findings/index.ts

@@ -0,0 +1,4 @@
+export * from "./table/ColumnsFindings";
+export * from "./table/DataTableFindings";
+export * from "./table/FindingsCard";
+export * from "./table/SkeletonTableFindings";

components/findings/table/ColumnsFindings.tsx

@@ -10,19 +10,20 @@ import {
 import { ColumnDef } from "@tanstack/react-table";
 
 import { VerticalDotsIcon } from "@/components/icons";
-import { FindingsProps } from "@/types";
+import { StatusBadge } from "@/components/ui";
+import { FindingProps } from "@/types";
 
-const getFindingsAttributes = (row: { original: FindingsProps }) => {
+const getFindingsAttributes = (row: { original: FindingProps }) => {
   return row.original.attributes;
 };
 
-export const ColumnsFindings: ColumnDef<FindingsProps>[] = [
+export const ColumnsFindings: ColumnDef<FindingProps>[] = [
   {
     accessorKey: "checkTitle",
     header: "Check",
     cell: ({ row }) => {
       const { CheckTitle } = getFindingsAttributes(row);
-      return <p className="text-medium">{CheckTitle}</p>;
+      return <p className="text-sm">{CheckTitle}</p>;
     },
   },
   {
@@ -30,7 +31,7 @@ export const ColumnsFindings: ColumnDef<FindingsProps>[] = [
     header: "Severity",
     cell: ({ row }) => {
       const { severity } = getFindingsAttributes(row);
-      return <p className="text-medium">{severity}</p>;
+      return <p className="text-sm text-nowrap">{severity}</p>;
     },
   },
   {
@@ -38,7 +39,7 @@ export const ColumnsFindings: ColumnDef<FindingsProps>[] = [
     header: "Status",
     cell: ({ row }) => {
       const { status } = getFindingsAttributes(row);
-      return <p className="text-medium">{status}</p>;
+      return <StatusBadge status={status} />;
     },
   },
   {
@@ -46,7 +47,7 @@ export const ColumnsFindings: ColumnDef<FindingsProps>[] = [
     header: "Region",
     cell: ({ row }) => {
       const { region } = getFindingsAttributes(row);
-      return <p className="text-medium">{region}</p>;
+      return <p className="text-sm text-nowrap">{region}</p>;
     },
   },
   {
@@ -54,7 +55,7 @@ export const ColumnsFindings: ColumnDef<FindingsProps>[] = [
     header: "Service",
     cell: ({ row }) => {
       const { service } = getFindingsAttributes(row);
-      return <p className="text-medium">{service}</p>;
+      return <p className="text-sm">{service}</p>;
     },
   },
   {
@@ -62,7 +63,7 @@ export const ColumnsFindings: ColumnDef<FindingsProps>[] = [
     header: "Account",
     cell: ({ row }) => {
       const { account } = getFindingsAttributes(row);
-      return <p className="text-medium">{account}</p>;
+      return <p className="text-sm">{account}</p>;
     },
   },
   {

components/findings/table/DataTableFindings.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Button } from "@nextui-org/react";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  Row,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { FindingsCard } from "@/components/findings/table/FindingsCard";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table/Table";
+import { FindingProps } from "@/types";
+
+interface DataTableFindingsProps<TData extends FindingProps, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTableFindings<TData extends FindingProps, TValue>({
+  columns,
+  data,
+}: DataTableFindingsProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  const selectedRow = table.getSelectedRowModel().rows[0]?.original;
+
+  const onClick = (row: Row<TData>) => {
+    table.resetRowSelection(true);
+    row.toggleSelected();
+    return;
+  };
+
+  return (
+    <>
+      <div className="flex flex-row w-full">
+        <div className="w-full">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                        </TableHead>
+                      );
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && "selected"}
+                      onClick={() => onClick(row)}
+                      className={"hover:cursor-pointer"}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      No results.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+          <div className="flex items-center justify-end space-x-2 py-4">
+            <Button
+              variant="solid"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="solid"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+        <FindingsCard selectedRow={selectedRow} />
+      </div>
+    </>
+  );
+}

components/findings/table/FindingsCard.tsx

@@ -0,0 +1,134 @@
+import { Button, Divider, Link } from "@nextui-org/react";
+import React from "react";
+
+import { FindingProps } from "@/types";
+interface FindingsCardProps {
+  selectedRow: FindingProps;
+}
+
+export const FindingsCard: React.FC<FindingsCardProps> = ({ selectedRow }) => {
+  const { attributes, card } = selectedRow || {};
+  const { CheckTitle } = attributes || {};
+  const {
+    resourceLink,
+    resourceId,
+    resourceARN,
+    checkLink,
+    checkId,
+    type,
+    scanTime,
+    findingLink,
+    findingId,
+    details,
+    riskDetails,
+    riskLink,
+    recommendationDetails,
+    recommendationLink,
+    referenceInformation,
+    referenceLink,
+  } = card || {};
+
+  return (
+    <>
+      <div
+        className={`rounded-md border bg-background transition-transform duration-300 ${selectedRow ? "w-2/5 translate-x-0 ml-2 p-3" : "translate-x-full w-0"}`}
+      >
+        <p className="font-bold mb-3">{CheckTitle}</p>
+        <Divider />
+        <div className="text-sm mt-3">
+          <p className="font-bold">Resource ID:</p>
+          <Link className="text-sm" href={resourceLink}>
+            {resourceId}
+          </Link>
+          <p className="font-bold mt-3">Resource ARN:</p>
+          <p>{resourceARN}</p>
+          <p className="font-bold mt-3">Check ID:</p>
+          <Link className="text-sm" href={checkLink}>
+            {checkId}
+          </Link>
+          <p className="font-bold mt-3">Type:</p>
+          <p>{type}</p>
+          <p className="font-bold mt-3">Scan Time:</p>
+          <p>{scanTime}</p>
+          <p className="font-bold mt-3">Prowler Finding ID:</p>
+          <Link className="text-sm" href={findingLink}>
+            {findingId}
+          </Link>
+        </div>
+
+        {details && (
+          <div className="text-sm mt-3 rounded-md border-2 border-yellow-500 p-2">
+            <p className="font-bold">Details:</p>
+            <p>{details}</p>
+          </div>
+        )}
+
+        {riskDetails && (
+          <div className="text-sm mt-3 rounded-md border-2 border-red-500 p-2">
+            <p className="font-bold flex justify-between items-center mb-2">
+              <span>Risk:</span>
+              {riskLink && (
+                <Button
+                  href={riskLink}
+                  as={Link}
+                  color="primary"
+                  variant="flat"
+                  isExternal
+                  size="sm"
+                  className="h-[28px] p-2"
+                >
+                  View Source
+                </Button>
+              )}
+            </p>
+            <p>{riskDetails}</p>
+          </div>
+        )}
+
+        {recommendationDetails && (
+          <div className="text-sm mt-3 rounded-md border-2 border-green-500 p-2">
+            <div className="font-bold flex justify-between items-center mb-2">
+              <span>Recommendation:</span>
+              {recommendationLink && (
+                <Button
+                  href={recommendationLink}
+                  as={Link}
+                  color="primary"
+                  variant="flat"
+                  isExternal
+                  size="sm"
+                  className="h-[28px] p-2"
+                >
+                  View Source
+                </Button>
+              )}
+            </div>
+            <p>{recommendationDetails}</p>
+          </div>
+        )}
+
+        {referenceInformation && (
+          <div className="text-sm mt-3 rounded-md border-2 border-gray-500 p-2">
+            <div className="font-bold flex justify-between items-center mb-2">
+              <span>Reference Information:</span>
+              {referenceLink && (
+                <Button
+                  href={referenceLink}
+                  as={Link}
+                  color="primary"
+                  variant="flat"
+                  isExternal
+                  size="sm"
+                  className="h-[28px] p-2"
+                >
+                  View Source
+                </Button>
+              )}
+            </div>
+            <p>{referenceInformation}</p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

components/index.ts

@@ -1,2 +0,0 @@
-export * from "./findings/ColumnsFindings";
-export * from "./findings/SkeletonTableFindings";

components/providers/table/DataTableProvider.tsx

@@ -23,7 +23,7 @@ import { MetaDataProps } from "@/types";
 
 import { DataTablePagination } from "./DataTablePagination";
 
-interface DataTableProps<TData, TValue> {
+interface DataTableProviderProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   metadata?: MetaDataProps;
@@ -33,7 +33,7 @@ export function DataTableProvider<TData, TValue>({
   columns,
   data,
   metadata,
-}: DataTableProps<TData, TValue>) {
+}: DataTableProviderProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const table = useReactTable({
     data,

components/ui/sidebar/SidebarWrap.tsx

@@ -35,7 +35,7 @@ export const SidebarWrap = () => {
   return (
     <div
       className={clsx(
-        "relative flex h-screen flex-col !border-r-small border-divider  transition-width",
+        "relative flex h-screen flex-col !border-r-small border-divider transition-width",
         {
           "w-72 p-6": !isCompact,
           "w-16 items-center px-2 py-6": isCompact,

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 (