From d6ea8bf274728ee1e7912942ce7613d9713a4945 Mon Sep 17 00:00:00 2001
From: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
Date: Tue, 27 Oct 2026 11:00:35 +0100
Subject: [PATCH] fix(ui): use Status wording and capitalize invitation and
 role filters (#13175)

---
 .../_components/invitations-filters.tsx          | 16 ++++++++++++++++
 ui/app/(prowler)/invitations/page.tsx            |  9 +++------
 .../roles/_components/roles-filters.tsx          | 16 ++++++++++++++++
 ui/app/(prowler)/roles/page.tsx                  |  9 +++------
 .../invitations-roles-filter-labels.changed.md   |  1 +
 ui/components/filters/data-filters.ts            |  2 +-
 ui/components/invitations/invitation-details.tsx |  2 +-
 .../invitations/table/column-invitations.tsx     |  4 ++--
 ui/lib/utils.ts                                  |  5 +++++
 9 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 ui/app/(prowler)/invitations/_components/invitations-filters.tsx
 create mode 100644 ui/app/(prowler)/roles/_components/roles-filters.tsx
 create mode 100644 ui/changelog.d/invitations-roles-filter-labels.changed.md

diff --git a/ui/app/(prowler)/invitations/_components/invitations-filters.tsx b/ui/app/(prowler)/invitations/_components/invitations-filters.tsx
new file mode 100644
index 0000000000..0a5dfa411b
--- /dev/null
+++ b/ui/app/(prowler)/invitations/_components/invitations-filters.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { filterInvitations } from "@/components/filters/data-filters";
+import { DataTableFilterCustom } from "@/components/shadcn/table";
+import { capitalize } from "@/lib/utils";
+
+// Client-side so labelFormatter never crosses the RSC boundary.
+export const InvitationsFilters = () => (
+  <DataTableFilterCustom
+    filters={filterInvitations.map((filter) => ({
+      ...filter,
+      labelFormatter: capitalize,
+    }))}
+    gridClassName="w-fit grid-cols-[14rem_auto] items-center gap-4 sm:grid-cols-[14rem_auto] lg:grid-cols-[14rem_auto] xl:grid-cols-[14rem_auto] 2xl:grid-cols-[14rem_auto]"
+  />
+);
diff --git a/ui/app/(prowler)/invitations/page.tsx b/ui/app/(prowler)/invitations/page.tsx
index 1f79945da6..2d79316dc8 100644
--- a/ui/app/(prowler)/invitations/page.tsx
+++ b/ui/app/(prowler)/invitations/page.tsx
@@ -4,14 +4,14 @@ import { Suspense } from "react";
 
 import { getInvitations } from "@/actions/invitations/invitation";
 import { getRoles } from "@/actions/roles";
-import { filterInvitations } from "@/components/filters/data-filters";
+import { InvitationsFilters } from "@/app/(prowler)/invitations/_components/invitations-filters";
 import {
   ColumnsInvitation,
   SkeletonTableInvitation,
 } from "@/components/invitations/table";
 import { Button } from "@/components/shadcn";
 import { ContentLayout } from "@/components/shadcn/content-layout";
-import { DataTable, DataTableFilterCustom } from "@/components/shadcn/table";
+import { DataTable } from "@/components/shadcn/table";
 import { InvitationProps, Role, SearchParamsProps } from "@/types";
 
 export default async function Invitations({
@@ -26,10 +26,7 @@ export default async function Invitations({
     <ContentLayout title="Invitations" icon={<Mail />}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-row items-end justify-between">
-          <DataTableFilterCustom
-            filters={filterInvitations || []}
-            gridClassName="w-fit grid-cols-[14rem_auto] items-center gap-4 sm:grid-cols-[14rem_auto] lg:grid-cols-[14rem_auto] xl:grid-cols-[14rem_auto] 2xl:grid-cols-[14rem_auto]"
-          />
+          <InvitationsFilters />
 
           <Button asChild>
             <Link href="/invitations/new">Send Invitation</Link>
diff --git a/ui/app/(prowler)/roles/_components/roles-filters.tsx b/ui/app/(prowler)/roles/_components/roles-filters.tsx
new file mode 100644
index 0000000000..ca3fbcc74c
--- /dev/null
+++ b/ui/app/(prowler)/roles/_components/roles-filters.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { filterRoles } from "@/components/filters/data-filters";
+import { DataTableFilterCustom } from "@/components/shadcn/table";
+import { capitalize } from "@/lib/utils";
+
+// Client-side so labelFormatter never crosses the RSC boundary.
+export const RolesFilters = () => (
+  <DataTableFilterCustom
+    filters={filterRoles.map((filter) => ({
+      ...filter,
+      labelFormatter: capitalize,
+    }))}
+    gridClassName="w-fit grid-cols-[14rem_auto] items-center gap-4 sm:grid-cols-[14rem_auto] lg:grid-cols-[14rem_auto] xl:grid-cols-[14rem_auto] 2xl:grid-cols-[14rem_auto]"
+  />
+);
diff --git a/ui/app/(prowler)/roles/page.tsx b/ui/app/(prowler)/roles/page.tsx
index 7e53616f45..3314b196bb 100644
--- a/ui/app/(prowler)/roles/page.tsx
+++ b/ui/app/(prowler)/roles/page.tsx
@@ -3,11 +3,11 @@ import Link from "next/link";
 import { Suspense } from "react";
 
 import { getRoles } from "@/actions/roles";
-import { filterRoles } from "@/components/filters/data-filters";
+import { RolesFilters } from "@/app/(prowler)/roles/_components/roles-filters";
 import { ColumnsRoles, SkeletonTableRoles } from "@/components/roles/table";
 import { Button } from "@/components/shadcn";
 import { ContentLayout } from "@/components/shadcn/content-layout";
-import { DataTable, DataTableFilterCustom } from "@/components/shadcn/table";
+import { DataTable } from "@/components/shadcn/table";
 import { SearchParamsProps } from "@/types";
 
 export default async function Roles({
@@ -22,10 +22,7 @@ export default async function Roles({
     <ContentLayout title="Roles" icon={<UserCog />}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-row items-end justify-between">
-          <DataTableFilterCustom
-            filters={filterRoles || []}
-            gridClassName="w-fit grid-cols-[14rem_auto] items-center gap-4 sm:grid-cols-[14rem_auto] lg:grid-cols-[14rem_auto] xl:grid-cols-[14rem_auto] 2xl:grid-cols-[14rem_auto]"
-          />
+          <RolesFilters />
           <Button asChild>
             <Link href="/roles/new">Add Role</Link>
           </Button>
diff --git a/ui/changelog.d/invitations-roles-filter-labels.changed.md b/ui/changelog.d/invitations-roles-filter-labels.changed.md
new file mode 100644
index 0000000000..376e4e29a1
--- /dev/null
+++ b/ui/changelog.d/invitations-roles-filter-labels.changed.md
@@ -0,0 +1 @@
+Invitations page uses `Status` instead of `State` in the filter, table column and invitation details, and the Invitations and Roles filters show capitalized options
diff --git a/ui/components/filters/data-filters.ts b/ui/components/filters/data-filters.ts
index c4aa532bed..c9e31b1818 100644
--- a/ui/components/filters/data-filters.ts
+++ b/ui/components/filters/data-filters.ts
@@ -99,7 +99,7 @@ export const filterUsers = [
 export const filterInvitations = [
   {
     key: "state",
-    labelCheckboxGroup: "State",
+    labelCheckboxGroup: "Status",
     values: ["pending", "accepted", "expired", "revoked"],
   },
 ];
diff --git a/ui/components/invitations/invitation-details.tsx b/ui/components/invitations/invitation-details.tsx
index 55f1878140..cd9782173f 100644
--- a/ui/components/invitations/invitation-details.tsx
+++ b/ui/components/invitations/invitation-details.tsx
@@ -68,7 +68,7 @@ export const InvitationDetails = ({ attributes }: InvitationDetailsProps) => {
             <InfoField label="Token">{attributes.token}</InfoField>
 
             <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-              <InfoField label="State">
+              <InfoField label="Status">
                 <span className="capitalize">{attributes.state}</span>
               </InfoField>
 
diff --git a/ui/components/invitations/table/column-invitations.tsx b/ui/components/invitations/table/column-invitations.tsx
index 628f0c2788..009e35a577 100644
--- a/ui/components/invitations/table/column-invitations.tsx
+++ b/ui/components/invitations/table/column-invitations.tsx
@@ -27,11 +27,11 @@ export const ColumnsInvitation: ColumnDef<InvitationProps>[] = [
   {
     accessorKey: "state",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title={"State"} param="state" />
+      <DataTableColumnHeader column={column} title="Status" param="state" />
     ),
     cell: ({ row }) => {
       const { state } = getInvitationData(row);
-      return <p className="font-semibold">{state}</p>;
+      return <p className="font-semibold capitalize">{state}</p>;
     },
   },
   {
diff --git a/ui/lib/utils.ts b/ui/lib/utils.ts
index 0debaeaf3a..ddbda7fb7e 100644
--- a/ui/lib/utils.ts
+++ b/ui/lib/utils.ts
@@ -40,6 +40,11 @@ export function getOptionalText(value: unknown): string | undefined {
     : undefined;
 }
 
+/** Uppercases the first letter ("pending" → "Pending"). */
+export function capitalize(value: string): string {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
 interface IncludedApiItemRelationshipRef {
   id: string;
 }