@tuturuuu/ui 0.19.0 → 0.20.1

package/src/components/ui/custom/workspace-access/workspace-access-page.tsx

@@ -3,7 +3,8 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { TriangleAlert } from '@tuturuuu/icons';
 import type { SupabaseUser } from '@tuturuuu/supabase/next/user';
-import type { WorkspaceDefaultPermissionMemberType } from '@tuturuuu/types';
+import type { InternalApiEnhancedWorkspaceMember } from '@tuturuuu/types';
+import { Button } from '@tuturuuu/ui/button';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
 import { toast } from '@tuturuuu/ui/sonner';
 import { Tabs, TabsContent } from '@tuturuuu/ui/tabs';
@@ -31,6 +32,7 @@ import type {
 import { WorkspaceAccessDefaultRoleCard } from './workspace-access-default-role-card';
 import { WorkspaceAccessInviteDialog } from './workspace-access-invite-dialog';
 import { getWorkspaceAccessLabels } from './workspace-access-labels';
+import { WorkspaceAccessMemberProfileDialog } from './workspace-access-member-profile-dialog';
 import { WorkspaceAccessMembers } from './workspace-access-members';
 import { WorkspaceAccessPageHeader } from './workspace-access-page-header';
 import { WorkspaceAccessPeopleFilters } from './workspace-access-people-filters';
@@ -44,6 +46,7 @@ export function WorkspaceAccessPage({
   initialContext,
   initialTab = 'people',
   mode = 'workspace',
+  showHeader = true,
 }: WorkspaceAccessPageProps) {
   const t = useTranslations() as (key: string) => string;
   const queryClient = useQueryClient();
@@ -51,8 +54,11 @@ export function WorkspaceAccessPage({
   const [status, setStatus] = useState<WorkspaceAccessMemberStatus>('all');
   const [search, setSearch] = useState('');
   const [inviteEmails, setInviteEmails] = useState('');
-  const [inviteMemberType, setInviteMemberType] =
-    useState<WorkspaceDefaultPermissionMemberType>('MEMBER');
+  const [inviteAccessPreset, setInviteAccessPreset] = useState<
+    'guest' | 'member' | 'pos_operator'
+  >('member');
+  const [confirmDefaultAdminMigration, setConfirmDefaultAdminMigration] =
+    useState(false);
   const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
   const [filters, setFilters] = useState<MemberFiltersState>({
     permissionIds: [],
@@ -60,9 +66,12 @@ export function WorkspaceAccessPage({
   });
   const [roleEditorState, setRoleEditorState] =
     useState<WorkspaceAccessRoleEditorState | null>(null);
+  const [profileMember, setProfileMember] =
+    useState<InternalApiEnhancedWorkspaceMember | null>(null);
 
+  const fetchesOwnContext = Boolean(adapter.getContext);
   const contextQuery = useQuery({
-    enabled: Boolean(adapter.getContext),
+    enabled: fetchesOwnContext,
     initialData: initialContext,
     queryFn: async () =>
       adapter.getContext
@@ -71,7 +80,15 @@ export function WorkspaceAccessPage({
     queryKey: ['workspace-access', initialContext.workspaceId, 'context'],
     staleTime: 30_000,
   });
-  const context = contextQuery.data ?? initialContext;
+  // Only trust the query when the adapter actually fetches a context. Otherwise
+  // `initialData` seeds a *disabled* query, which then serves that first snapshot
+  // forever — and callers resolve their permissions asynchronously, so the first
+  // snapshot is the one taken before they arrived. That is what left admins
+  // looking at a permanently disabled Roles tab: the permission turned true a
+  // moment later and this component never saw it.
+  const context = fetchesOwnContext
+    ? (contextQuery.data ?? initialContext)
+    : initialContext;
   const workspaceId = context.workspaceId;
   const canManageMembers = context.canManageMembers;
   const canManageRoles = context.canManageRoles;
@@ -158,13 +175,17 @@ export function WorkspaceAccessPage({
   const inviteMutation = useMutation({
     mutationFn: () =>
       adapter.inviteMembers(workspaceId, {
+        accessPreset: inviteAccessPreset,
+        confirmDefaultAdminMigration,
         emails: parseInviteEmails(inviteEmails),
-        memberType: inviteMemberType,
+        memberType: inviteAccessPreset === 'guest' ? 'GUEST' : 'MEMBER',
       }),
     onError: (error) =>
       toast.error(error instanceof Error ? error.message : t('common.error')),
     onSuccess: async (result) => {
       setInviteEmails('');
+      setInviteAccessPreset('member');
+      setConfirmDefaultAdminMigration(false);
       setInviteDialogOpen(false);
       toast.success(result.message ?? t('ws-members.invitation-sent'));
       await invalidateAccessData();
@@ -180,6 +201,36 @@ export function WorkspaceAccessPage({
       await invalidateAccessData();
     },
   });
+  const updateMemberProfileMutation = useMutation({
+    mutationFn: ({
+      displayName,
+      member,
+    }: {
+      displayName: null | string;
+      member: InternalApiEnhancedWorkspaceMember;
+    }) => {
+      if (!adapter.updateMemberProfile) {
+        throw new Error(t('common.error'));
+      }
+
+      return adapter.updateMemberProfile(workspaceId, {
+        displayName,
+        email: member.id ? null : member.email,
+        userId: member.id,
+      });
+    },
+    onError: (error) =>
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t('ws-members.profile_display_name_update_error')
+      ),
+    onSuccess: async () => {
+      setProfileMember(null);
+      toast.success(t('ws-members.profile_display_name_updated'));
+      await invalidateAccessData();
+    },
+  });
   const roleMembershipMutation = useMutation({
     mutationFn: (payload: {
       action: 'add' | 'remove';
@@ -205,6 +256,46 @@ export function WorkspaceAccessPage({
       await invalidateAccessData();
     },
   });
+  const hardenDefaultAdminMutation = useMutation({
+    mutationFn: async () => {
+      if (!adapter.hardenDefaultAdmin) {
+        throw new Error(t('common.error'));
+      }
+
+      const existingAdminRole = (rolesQuery.data?.data ?? []).find((role) =>
+        role.permissions.some(
+          (permission) => permission.id === 'admin' && permission.enabled
+        )
+      );
+      const alreadyAssigned = new Set(
+        existingAdminRole?.members?.map((member) => member.id) ?? []
+      );
+      const memberIds = (membersQuery.data ?? [])
+        .filter(
+          (member) =>
+            !member.pending &&
+            member.id &&
+            member.workspace_member_type !== 'GUEST' &&
+            !alreadyAssigned.has(member.id)
+        )
+        .map((member) => member.id as string);
+
+      return adapter.hardenDefaultAdmin(workspaceId, {
+        memberIds,
+        permissions: [{ enabled: true, id: 'admin' }],
+        roleId: existingAdminRole?.id,
+        roleName: t('ws-roles.admin'),
+      });
+    },
+    onError: async (error) => {
+      toast.error(error instanceof Error ? error.message : t('common.error'));
+      await invalidateAccessData();
+    },
+    onSuccess: async () => {
+      toast.success(t('common.saved'));
+      await invalidateAccessData();
+    },
+  });
 
   const roles = rolesQuery.data?.data ?? [];
   const sortedMembers = sortMembers(membersQuery.data ?? []);
@@ -215,6 +306,11 @@ export function WorkspaceAccessPage({
   });
   const joinedCount = sortedMembers.filter((member) => !member.pending).length;
   const invitedCount = sortedMembers.filter((member) => member.pending).length;
+  const defaultAdminEnabled = Boolean(
+    memberDefaultQuery.data?.permissions.some(
+      (permission) => permission.id === 'admin' && permission.enabled
+    )
+  );
   const filterOptions = getMemberFilterOptions(
     sortedMembers,
     permissionDefinitions
@@ -222,7 +318,7 @@ export function WorkspaceAccessPage({
 
   if (contextQuery.isPending) {
     return (
-      <div className="space-y-6">
+      <div className="space-y-4 sm:space-y-6">
         <Skeleton className="h-32 rounded-xl" />
         <Skeleton className="h-10 rounded-xl" />
         <Skeleton className="h-96 rounded-xl" />
@@ -231,14 +327,43 @@ export function WorkspaceAccessPage({
   }
 
   return (
-    <div className="space-y-6">
-      <WorkspaceAccessPageHeader
-        context={context}
-        invitedCount={invitedCount}
-        joinedCount={joinedCount}
-        mode={mode}
-        totalCount={sortedMembers.length}
-      />
+    <div className="space-y-4 sm:space-y-6">
+      {showHeader ? (
+        <WorkspaceAccessPageHeader
+          context={context}
+          invitedCount={invitedCount}
+          joinedCount={joinedCount}
+          mode={mode}
+          totalCount={sortedMembers.length}
+        />
+      ) : null}
+
+      {mode === 'workspace' &&
+      canManageRoles &&
+      defaultAdminEnabled &&
+      adapter.hardenDefaultAdmin ? (
+        <div className="flex flex-col gap-3 rounded-xl border border-dynamic-orange/25 bg-dynamic-orange/5 p-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex min-w-0 items-start gap-3">
+            <TriangleAlert className="mt-0.5 size-4 shrink-0 text-dynamic-orange" />
+            <div>
+              <div className="font-medium text-sm">
+                {t('ws-roles.admin_enabled_title')}
+              </div>
+              <p className="mt-1 text-muted-foreground text-sm">
+                {t('ws-members.pos_operator_admin_migration_note')}
+              </p>
+            </div>
+          </div>
+          <Button
+            size="sm"
+            className="shrink-0"
+            disabled={hardenDefaultAdminMutation.isPending}
+            onClick={() => hardenDefaultAdminMutation.mutate()}
+          >
+            {t('ws-roles.create')}: {t('ws-roles.admin')}
+          </Button>
+        </div>
+      ) : null}
 
       <Tabs
         value={activeTab}
@@ -255,7 +380,7 @@ export function WorkspaceAccessPage({
           search={search}
         />
 
-        <TabsContent value="people" className="mt-6 space-y-4">
+        <TabsContent value="people" className="mt-4 space-y-3 sm:mt-6">
           <WorkspaceAccessPeopleFilters
             filterOptions={filterOptions}
             filters={filters}
@@ -266,17 +391,22 @@ export function WorkspaceAccessPage({
           />
 
           <WorkspaceAccessMembers
+            canEditProfiles={Boolean(adapter.updateMemberProfile)}
             canManageMembers={canManageMembers}
             canManageRoles={canManageRoles}
+            defaultAdminEnabled={defaultAdminEnabled}
             isLoading={membersQuery.isPending}
             isMutating={
-              removeMemberMutation.isPending || roleMembershipMutation.isPending
+              removeMemberMutation.isPending ||
+              roleMembershipMutation.isPending ||
+              updateMemberProfileMutation.isPending
             }
             labels={labels}
             members={visibleMembers}
             onAssignRole={(payload) =>
               roleMembershipMutation.mutate({ ...payload, action: 'add' })
             }
+            onEditMemberProfile={setProfileMember}
             onRemoveMember={(payload) => removeMemberMutation.mutate(payload)}
             onRemoveRole={(payload) =>
               roleMembershipMutation.mutate({ ...payload, action: 'remove' })
@@ -287,7 +417,7 @@ export function WorkspaceAccessPage({
           />
         </TabsContent>
 
-        <TabsContent value="roles" className="mt-6">
+        <TabsContent value="roles" className="mt-4 sm:mt-6">
           <WorkspaceAccessRoles
             canManageRoles={canManageRoles}
             isLoading={rolesQuery.isPending}
@@ -306,7 +436,7 @@ export function WorkspaceAccessPage({
           />
         </TabsContent>
 
-        <TabsContent value="defaults-member" className="mt-6">
+        <TabsContent value="defaults-member" className="mt-4 sm:mt-6">
           <WorkspaceAccessDefaultRoleCard
             canManageRoles={canManageRoles}
             isLoading={memberDefaultQuery.isPending}
@@ -324,7 +454,7 @@ export function WorkspaceAccessPage({
           />
         </TabsContent>
 
-        <TabsContent value="defaults-guest" className="mt-6">
+        <TabsContent value="defaults-guest" className="mt-4 sm:mt-6">
           <WorkspaceAccessDefaultRoleCard
             canManageRoles={canManageRoles}
             isLoading={guestDefaultQuery.isPending}
@@ -344,16 +474,44 @@ export function WorkspaceAccessPage({
       </Tabs>
 
       <WorkspaceAccessInviteDialog
+        accessPreset={inviteAccessPreset}
+        canManageRoles={canManageRoles}
+        confirmDefaultAdminMigration={confirmDefaultAdminMigration}
+        defaultAdminEnabled={defaultAdminEnabled}
         emails={inviteEmails}
         isSubmitting={inviteMutation.isPending}
-        memberType={inviteMemberType}
+        joinedMemberCount={joinedCount}
+        onAccessPresetChange={(value) => {
+          setInviteAccessPreset(value);
+          if (value !== 'pos_operator') {
+            setConfirmDefaultAdminMigration(false);
+          }
+        }}
+        onConfirmDefaultAdminMigrationChange={setConfirmDefaultAdminMigration}
         onEmailsChange={setInviteEmails}
-        onMemberTypeChange={setInviteMemberType}
         onOpenChange={setInviteDialogOpen}
         onSubmit={() => inviteMutation.mutate()}
         open={inviteDialogOpen}
       />
 
+      {profileMember ? (
+        <WorkspaceAccessMemberProfileDialog
+          key={`${profileMember.id ?? profileMember.email}-profile`}
+          isSubmitting={updateMemberProfileMutation.isPending}
+          member={profileMember}
+          onOpenChange={(open) => {
+            if (!open) setProfileMember(null);
+          }}
+          onSubmit={(displayName) =>
+            updateMemberProfileMutation.mutate({
+              displayName,
+              member: profileMember,
+            })
+          }
+          open
+        />
+      ) : null}
+
       {roleEditorState ? (
         <WorkspaceAccessRoleEditorDialog
           key={

package/src/components/ui/custom/workspace-access/workspace-access-people-filters.tsx

@@ -52,38 +52,47 @@ export function WorkspaceAccessPeopleFilters({
     filters.permissionIds.length + filters.roleIds.length;
 
   return (
-    <div className="flex flex-col gap-3 rounded-xl border border-border bg-foreground/[0.02] p-3 sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex flex-wrap items-center gap-2">
-        <div className="mr-1 flex items-center gap-2 text-muted-foreground text-sm">
+    <div className="grid gap-2 rounded-xl border border-border bg-foreground/[0.02] p-2.5 sm:p-3">
+      <div className="grid min-w-0 gap-2 sm:grid-cols-[auto_1fr] sm:items-center">
+        <div className="hidden items-center gap-2 text-muted-foreground text-sm sm:flex">
           <ListFilter className="h-4 w-4" />
           <span className="font-medium">{t('ws-members.filters')}</span>
         </div>
 
         <Tabs
+          className="w-full sm:w-auto"
           value={status}
           onValueChange={(value) =>
             onStatusChange(value as WorkspaceAccessMemberStatus)
           }
         >
-          <TabsList className="h-8">
-            <TabsTrigger value="all">{t('ws-members.all')}</TabsTrigger>
-            <TabsTrigger value="joined">{t('ws-members.joined')}</TabsTrigger>
-            <TabsTrigger value="invited">{t('ws-members.invited')}</TabsTrigger>
+          <TabsList className="grid h-9 w-full grid-cols-3 p-1 sm:w-auto">
+            <TabsTrigger className="h-full min-h-0" value="all">
+              {t('ws-members.all')}
+            </TabsTrigger>
+            <TabsTrigger className="h-full min-h-0" value="joined">
+              {t('ws-members.joined')}
+            </TabsTrigger>
+            <TabsTrigger className="h-full min-h-0" value="invited">
+              {t('ws-members.invited')}
+            </TabsTrigger>
           </TabsList>
         </Tabs>
       </div>
 
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex min-w-0 items-center justify-end gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
               variant="outline"
               size="sm"
-              className="h-8 gap-1.5 border-dashed bg-background/60"
+              className="h-8 min-w-0 flex-1 gap-1.5 border-dashed bg-background/60 px-2 sm:flex-none sm:px-3"
               disabled={filterOptions.roles.length === 0}
             >
               <ShieldCheck className="h-4 w-4 text-dynamic-purple" />
-              {labels.filterByRole}
+              <span className="truncate sm:max-w-36">
+                {labels.filterByRole}
+              </span>
               {filters.roleIds.length > 0 ? (
                 <>
                   <Separator className="mx-1 h-4" orientation="vertical" />
@@ -132,11 +141,13 @@ export function WorkspaceAccessPeopleFilters({
             <Button
               variant="outline"
               size="sm"
-              className="h-8 gap-1.5 border-dashed bg-background/60"
+              className="h-8 min-w-0 flex-1 gap-1.5 border-dashed bg-background/60 px-2 sm:flex-none sm:px-3"
               disabled={filterOptions.permissions.length === 0}
             >
               <KeyRound className="h-4 w-4 text-dynamic-blue" />
-              {labels.filterByPermission}
+              <span className="truncate sm:max-w-44">
+                {labels.filterByPermission}
+              </span>
               {filters.permissionIds.length > 0 ? (
                 <>
                   <Separator className="mx-1 h-4" orientation="vertical" />
@@ -181,16 +192,19 @@ export function WorkspaceAccessPeopleFilters({
           <Button
             variant="ghost"
             size="sm"
-            className="h-8 gap-1.5 px-2 text-muted-foreground hover:text-foreground"
+            className="size-8 shrink-0 px-0 text-muted-foreground hover:text-foreground"
             onClick={() => onFiltersChange({ permissionIds: [], roleIds: [] })}
+            aria-label={labels.clearFiltersAction}
           >
             <X className="h-3.5 w-3.5" />
-            {labels.clearFiltersAction}
           </Button>
         ) : null}
 
         {activeFilterCount > 0 ? (
-          <Badge variant="outline" className="rounded-full">
+          <Badge
+            variant="outline"
+            className="hidden rounded-full sm:inline-flex"
+          >
             {activeFilterCount}
           </Badge>
         ) : null}

package/src/components/ui/custom/workspace-access/workspace-access-permission-checklist.tsx

@@ -3,6 +3,7 @@ import { Checkbox } from '@tuturuuu/ui/checkbox';
 import { ScrollArea } from '@tuturuuu/ui/scroll-area';
 import { cn } from '@tuturuuu/utils/format';
 import type { permissionGroups } from '@tuturuuu/utils/permissions';
+import { useTranslations } from 'next-intl';
 
 type PermissionGroups = ReturnType<typeof permissionGroups>;
 
@@ -17,11 +18,55 @@ export function WorkspaceAccessPermissionChecklist({
   onSelectedPermissionsChange,
   selectedPermissions,
 }: Props) {
+  const t = useTranslations() as (key: string) => string;
+  const adminPermission = groups
+    .flatMap((group) => group.permissions)
+    .find((permission) => permission.id === 'admin');
+  const regularGroups = groups
+    .map((group) => ({
+      ...group,
+      permissions: group.permissions.filter(
+        (permission) => permission.id !== 'admin'
+      ),
+    }))
+    .filter((group) => group.permissions.length > 0);
+  const adminEnabled = selectedPermissions.has('admin');
+
   return (
-    <ScrollArea className="h-[52vh] rounded-lg border">
-      <div className="space-y-4 p-4">
-        {groups.map((group) => (
-          <section key={group.id} className="rounded-lg border p-4">
+    <ScrollArea className="h-auto rounded-lg border sm:h-[52vh]">
+      <div className="space-y-3 p-3 sm:space-y-4 sm:p-4">
+        {adminPermission ? (
+          <section className="rounded-lg border border-dynamic-green/30 bg-dynamic-green/5 p-3 sm:p-4">
+            <label className="flex items-start gap-3">
+              <Checkbox
+                checked={adminEnabled}
+                onCheckedChange={(checked) => {
+                  const next = new Set(selectedPermissions);
+                  if (checked) next.add('admin');
+                  else next.delete('admin');
+                  onSelectedPermissionsChange(next);
+                }}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2 font-semibold">
+                  <ShieldCheck className="size-4 text-dynamic-green" />
+                  {adminPermission.title}
+                </div>
+                <p className="mt-1 text-muted-foreground text-sm">
+                  {adminPermission.description}
+                </p>
+                {adminEnabled ? (
+                  <p className="mt-2 rounded-md bg-dynamic-green/10 px-2.5 py-2 text-dynamic-green text-sm">
+                    {t('ws-roles.admin_enabled_description')}
+                  </p>
+                ) : null}
+              </div>
+            </label>
+          </section>
+        ) : null}
+
+        {regularGroups.map((group) => (
+          <section key={group.id} className="rounded-lg border p-3 sm:p-4">
             <div className="flex items-start gap-3">
               <span className="text-muted-foreground">{group.icon}</span>
               <div>
@@ -33,17 +78,16 @@ export function WorkspaceAccessPermissionChecklist({
                 ) : null}
               </div>
             </div>
-            <div className="mt-4 grid gap-2">
+            <div className="mt-3 grid gap-2 sm:mt-4">
               {group.permissions.map((permission) => {
                 const checked = selectedPermissions.has(permission.id);
-                const adminLocked =
-                  selectedPermissions.has('admin') && permission.id !== 'admin';
+                const adminLocked = adminEnabled;
 
                 return (
                   <label
                     key={permission.id}
                     className={cn(
-                      'flex items-start gap-3 rounded-lg border p-3',
+                      'flex items-start gap-3 rounded-lg border p-2.5 sm:p-3',
                       checked || adminLocked
                         ? 'border-dynamic-green/30 bg-dynamic-green/10'
                         : 'bg-background'
@@ -67,8 +111,10 @@ export function WorkspaceAccessPermissionChecklist({
                           {permission.icon}
                         </span>
                         <span>{permission.title}</span>
-                        {permission.id === 'admin' ? (
-                          <ShieldCheck className="h-4 w-4 text-dynamic-green" />
+                        {adminLocked ? (
+                          <span className="ml-auto text-dynamic-green text-xs">
+                            {t('ws-roles.granted_via_admin')}
+                          </span>
                         ) : null}
                       </div>
                       <p className="mt-1 text-muted-foreground text-sm">

package/src/components/ui/custom/workspace-access/workspace-access-permission-preview.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { enabledPermissionCount } from './workspace-access-permission-preview';
+
+describe('enabledPermissionCount', () => {
+  it('treats administrator access as granting the full permission catalog', () => {
+    expect(
+      enabledPermissionCount(
+        {
+          id: 'admin-role',
+          name: 'Administrator',
+          permissions: [{ enabled: true, id: 'admin' }],
+        },
+        42
+      )
+    ).toBe(42);
+  });
+
+  it('counts explicit permissions for non-administrator roles', () => {
+    expect(
+      enabledPermissionCount(
+        {
+          id: 'operator-role',
+          name: 'Operator',
+          permissions: [
+            { enabled: true, id: 'initiate_pos_checkout' },
+            { enabled: false, id: 'update_inventory' },
+          ],
+        },
+        42
+      )
+    ).toBe(1);
+  });
+});

package/src/components/ui/custom/workspace-access/workspace-access-permission-preview.tsx

@@ -1,7 +1,19 @@
 import { Badge } from '@tuturuuu/ui/badge';
 import type { WorkspaceAccessRole } from './types';
 
-export function enabledPermissionCount(role?: WorkspaceAccessRole | null) {
+export function enabledPermissionCount(
+  role?: WorkspaceAccessRole | null,
+  permissionCount?: number
+) {
+  if (
+    permissionCount !== undefined &&
+    role?.permissions.some(
+      (permission) => permission.id === 'admin' && permission.enabled
+    )
+  ) {
+    return permissionCount;
+  }
+
   return (
     role?.permissions.filter((permission) => permission.enabled).length ?? 0
   );
@@ -18,6 +30,9 @@ export function WorkspaceAccessPermissionPreview({
 }) {
   const enabledPermissions =
     role?.permissions.filter((permission) => permission.enabled) ?? [];
+  const adminEnabled = enabledPermissions.some(
+    (permission) => permission.id === 'admin'
+  );
 
   if (enabledPermissions.length === 0) {
     return (
@@ -27,6 +42,14 @@ export function WorkspaceAccessPermissionPreview({
     );
   }
 
+  if (adminEnabled) {
+    return (
+      <Badge className="rounded-full border-dynamic-green/30 bg-dynamic-green/10 text-dynamic-green">
+        {permissionTitles.get('admin') ?? 'Administrator'}
+      </Badge>
+    );
+  }
+
   return enabledPermissions.slice(0, 5).map((permission) => (
     <Badge key={permission.id} variant="secondary" className="rounded-full">
       {permissionTitles.get(permission.id) ?? permission.id}