feat: add permission column to roles table

ui/app/(prowler)/roles/page.tsx

@@ -3,7 +3,7 @@ import { Suspense } from "react";
 
 import { getRoles } from "@/actions/roles";
 import { FilterControls } from "@/components/filters";
-import { filterInvitations } from "@/components/filters/data-filters";
+import { filterRoles } from "@/components/filters/data-filters";
 import { AddRoleButton } from "@/components/roles";
 import { ColumnsRoles } from "@/components/roles/table";
 import { SkeletonTableRoles } from "@/components/roles/table";
@@ -26,7 +26,7 @@ export default async function Roles({
       <Spacer y={8} />
       <AddRoleButton />
       <Spacer y={4} />
-      <DataTableFilterCustom filters={filterInvitations || []} />
+      <DataTableFilterCustom filters={filterRoles || []} />
       <Spacer y={8} />
 
       <Suspense key={searchParamsKey} fallback={<SkeletonTableRoles />}>

ui/components/filters/data-filters.ts

@@ -72,3 +72,11 @@ export const filterInvitations = [
     values: ["pending", "accepted", "expired", "revoked"],
   },
 ];
+
+export const filterRoles = [
+  {
+    key: "permission_state",
+    labelCheckboxGroup: "Permissions",
+    values: ["unlimited", "limited", "none"],
+  },
+];

ui/components/roles/table/column-roles.tsx

@@ -42,7 +42,7 @@ export const ColumnsRoles: ColumnDef<RolesProps["data"][number]>[] = [
       const relationships = getRoleRelationships(row);
       const count = relationships.users.meta.count;
       return (
-        <p className="font-semibold">
+        <p className="text-xs font-semibold">
           {count === 0
             ? "No Users"
             : `${count} ${count === 1 ? "User" : "Users"}`}
@@ -62,7 +62,7 @@ export const ColumnsRoles: ColumnDef<RolesProps["data"][number]>[] = [
     cell: ({ row }) => {
       const relationships = getRoleRelationships(row);
       return (
-        <p className="font-semibold">
+        <p className="text-xs font-semibold">
           {relationships.invitations.meta.count === 0
             ? "No Invitations"
             : `${relationships.invitations.meta.count} ${
@@ -74,26 +74,31 @@ export const ColumnsRoles: ColumnDef<RolesProps["data"][number]>[] = [
       );
     },
   },
-  // {
-  //   accessorKey: "updated_at",
-  //   header: ({ column }) => (
-  //     <DataTableColumnHeader
-  //       column={column}
-  //       title={"Updated At"}
-  //       param="updated_at"
-  //     />
-  //   ),
-  //   cell: ({ row }) => {
-  //     const { updated_at } = getRoleAttributes(row);
-  //     return <DateWithTime dateTime={updated_at} showTime={false} />;
-  //   },
-  // },
+  {
+    accessorKey: "permission_state",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Permissions"}
+        param="permission_state"
+      />
+    ),
+    cell: ({ row }) => {
+      const { permission_state } = getRoleAttributes(row);
+      return (
+        <p className="text-xs font-semibold">
+          {permission_state[0].toUpperCase() +
+            permission_state.slice(1).toLowerCase()}
+        </p>
+      );
+    },
+  },
   {
     accessorKey: "inserted_at",
     header: ({ column }) => (
       <DataTableColumnHeader
         column={column}
-        title={"Added At"}
+        title={"Added"}
         param="inserted_at"
       />
     ),

ui/types/components.ts

@@ -247,6 +247,7 @@ export interface RolesProps {
       manage_integrations: boolean;
       manage_scans: boolean;
       unlimited_visibility: boolean;
+      permission_state: "unlimited" | "limited" | "none";
       inserted_at: string;
       updated_at: string;
     };