PermissionPanel

A flexible multi-level permission management panel with collapsible nested categories and individual permission checkboxes.

Import

import { PermissionPanel } from '@akitectio/aki-ui'

Basic Usage

Permission Flags

3 active

Users2 / 3 enabled

Settings1 / 2 enabled

const categories = [
  {
    id: 'users',
    name: 'Users',
    variant: 'primary',
    permissions: [
      { id: 'create', name: 'Create', granted: true, variant: 'success' },
      { id: 'edit', name: 'Edit', granted: true, variant: 'warning' },
      { id: 'delete', name: 'Delete', granted: false, variant: 'danger' },
    ],
  },
  {
    id: 'settings',
    name: 'Settings',
    variant: 'secondary',
    permissions: [
      { id: 'view', name: 'View', granted: true, variant: 'primary' },
      { id: 'edit', name: 'Edit', granted: false, variant: 'warning' },
    ],
  },
];

<PermissionPanel categories={categories} />

Interactive Example

Interactive Permission Manager

15 active

All Permissions

Ads2 / 3 enabled

Announcements1 / 3 enabled

CMS

const [categories, setCategories] = useState(sampleCategories);

const updatePermissionInCategory = (
  cats: PermissionCategory[], 
  categoryId: string, 
  permissionId: string, 
  granted: boolean
): PermissionCategory[] => {
  return cats.map(category => {
    if (category.id === categoryId && category.permissions) {
      return {
        ...category,
        permissions: category.permissions.map(permission =>
          permission.id === permissionId
            ? { ...permission, granted }
            : permission
        )
      };
    }
    if (category.subcategories) {
      return {
        ...category,
        subcategories: updatePermissionInCategory(category.subcategories, categoryId, permissionId, granted)
      };
    }
    return category;
  });
};

const handlePermissionChange = (categoryId: string, permissionId: string, granted: boolean) => {
  setCategories(prev => updatePermissionInCategory(prev, categoryId, permissionId, granted));
};

<PermissionPanel
  categories={categories}
  onPermissionChange={handlePermissionChange}
  onAllPermissionsChange={handleAllPermissionsChange}
  showAllPermissions={true}
  showCollapseToggle={true}
  title="Interactive Permission Manager"
/>

Nested Structure

PermissionPanel supports unlimited nesting levels for complex permission hierarchies.

const nestedCategories = [
  {
    id: 'cms',
    name: 'CMS',
    variant: 'secondary',
    subcategories: [
      {
        id: 'media',
        name: 'Media',
        variant: 'primary',
        subcategories: [
          {
            id: 'file',
            name: 'File',
            variant: 'warning',
            permissions: [
              { id: 'create', name: 'Create', granted: true, variant: 'success' },
              { id: 'edit', name: 'Edit', granted: true, variant: 'warning' },
              { id: 'delete', name: 'Delete', granted: false, variant: 'danger' },
            ],
          },
        ],
      },
      {
        id: 'blog',
        name: 'Blog',
        variant: 'primary',
        subcategories: [
          {
            id: 'posts',
            name: 'Posts',
            variant: 'info',
            permissions: [
              { id: 'create', name: 'Create', granted: true, variant: 'success' },
              { id: 'edit', name: 'Edit', granted: true, variant: 'warning' },
              { id: 'delete', name: 'Delete', granted: false, variant: 'danger' },
            ],
          },
        ],
      },
    ],
  },
];

Props

Prop	Type	Default	Description
categories	PermissionCategory[]	-	Array of permission categories
onPermissionChange	function	-	Callback when a permission checkbox is toggled
onAllPermissionsChange	function	-	Callback when the "All Permissions" checkbox is toggled
showAllPermissions	boolean	true	Whether to show the "All Permissions" checkbox
showCollapseToggle	boolean	true	Whether to show the "Collapse all" / "Expand all" toggle
readOnly	boolean	false	Whether the panel is read-only
className	string	''	Additional CSS classes
title	string	'Permission Flags'	Custom title for the panel

Full Permission Management Example

This example demonstrates how the PermissionPanel can replicate complex permission management systems with deep nesting levels and organized layouts.

Permission Flags

18 active

All Permissions

Ads2 / 3 enabled

Announcements1 / 3 enabled

CMS

FOB Comments1 / 5 enabled

Newsletters0 / 1 enabled

Settings

System

// Complex permission structure with deep nesting
const complexPermissions = [
  {
    id: 'cms',
    name: 'CMS',
    variant: 'success',
    subcategories: [
      {
        id: 'media',
        name: 'Media', 
        variant: 'primary',
        subcategories: [
          {
            id: 'file',
            name: 'File',
            variant: 'warning',
            permissions: [
              { id: 'create', name: 'Create', granted: true },
              { id: 'edit', name: 'Edit', granted: true },
              { id: 'delete', name: 'Delete', granted: false },
            ],
          },
        ],
      },
      {
        id: 'blog',
        name: 'Blog',
        variant: 'primary',
        subcategories: [
          {
            id: 'posts',
            name: 'Posts',
            variant: 'warning',
            permissions: [
              { id: 'create', name: 'Create', granted: true },
              { id: 'edit', name: 'Edit', granted: true },
              { id: 'delete', name: 'Delete', granted: false },
            ],
          },
        ],
      },
    ],
  },
];

<PermissionPanel
  categories={complexPermissions}
  onPermissionChange={handlePermissionChange}
  showAllPermissions={true}
  showCollapseToggle={true}
/>

Color Variants

Both categories and permissions support color variants for better visual organization:

primaryBlue theme

secondaryGray theme

successGreen theme

warningYellow theme

dangerRed theme

infoCyan theme