more i18n

src/app/[orgId]/settings/access/roles/RolesDataTable.tsx

@@ -4,6 +4,7 @@ import {
     ColumnDef,
 } from "@tanstack/react-table";
 import { DataTable } from "@app/components/ui/data-table";
+import { useTranslations } from 'next-intl';
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -16,15 +17,18 @@ export function RolesDataTable<TData, TValue>({
     data,
     createRole
 }: DataTableProps<TData, TValue>) {
+
+    const t = useTranslations();
+
     return (
         <DataTable
             columns={columns}
             data={data}
             title="Roles"
-            searchPlaceholder="Search roles..."
+            searchPlaceholder={t('accessRolesSearch')}
             searchColumn="name"
             onAdd={createRole}
-            addButtonText="Add Role"
+            addButtonText={t('accessRolesAdd')}
         />
     );
 }

src/app/[orgId]/settings/access/roles/RolesTable.tsx

@@ -19,6 +19,7 @@ import CreateRoleForm from "./CreateRoleForm";
 import DeleteRoleForm from "./DeleteRoleForm";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTranslations } from 'next-intl';
 
 export type RoleRow = Role;
 
@@ -38,6 +39,8 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
 
     const { org } = useOrgContext();
 
+    const t = useTranslations();
+
     const columns: ColumnDef<RoleRow>[] = [
         {
             id: "actions",
@@ -58,7 +61,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
                                             className="h-8 w-8 p-0"
                                         >
                                             <span className="sr-only">
-                                                Open menu
+                                                {t('openMenu')}
                                             </span>
                                             <MoreHorizontal className="h-4 w-4" />
                                         </Button>
@@ -71,7 +74,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
                                             }}
                                         >
                                             <span className="text-red-500">
-                                                Delete Role
+                                                {t('accessRoleDelete')}
                                             </span>
                                         </DropdownMenuItem>
                                     </DropdownMenuContent>
@@ -92,7 +95,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
                             column.toggleSorting(column.getIsSorted() === "asc")
                         }
                     >
-                        Name
+                        {t('name')}
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );
@@ -100,7 +103,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
         },
         {
             accessorKey: "description",
-            header: "Description"
+            header: t('description')
         }
     ];
 

src/app/[orgId]/settings/access/roles/page.tsx

@@ -9,6 +9,7 @@ import RolesTable, { RoleRow } from "./RolesTable";
 import { SidebarSettings } from "@app/components/SidebarSettings";
 import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { getTranslations } from 'next-intl/server';
 
 type RolesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -62,12 +63,13 @@ export default async function RolesPage(props: RolesPageProps) {
     }
 
     const roleRows: RoleRow[] = roles;
+    const t = await getTranslations();
 
     return (
         <>
             <SettingsSectionTitle
-                title="Manage Roles"
-                description="Configure roles to manage access to your organization"
+                title={t('accessRolesManage')}
+                description={t('accessRolesDescription')}
             />
             <OrgProvider org={org}>
                 <RolesTable roles={roleRows} />