@anpdgovbr/rbac-admin

Interface Administrativa para RBAC — Componentes React para gerenciamento de perfis, usuários e permissões (em desenvolvimento).

⚠️ Status: Work In Progress

Este pacote está em desenvolvimento ativo e não é recomendado para uso em produção. A API pode mudar significativamente entre versões.

🎯 Visão Geral

O @anpdgovbr/rbac-admin fornecerá uma interface administrativa completa para:

• 👥 Gerenciamento de Usuários — CRUD de usuários e atribuição de perfis
• 🛡️ Gestão de Perfis — Criação e edição de perfis de acesso
• 🔗 Herança de Perfis — Interface visual para hierarquias complexas
• ✅ Permissões — Editor granular de ações e recursos
• 📊 Auditoria — Visualização de logs e atividades
• 📈 Relatórios — Analytics de uso e segurança

🏗️ Arquitetura Planejada

Componentes Principais

rbac-admin/
├── components/
│   ├── UsersList.tsx           # Lista de usuários
│   ├── CreateUserForm.tsx      # Formulário de criação
│   ├── ProfilesList.tsx        # Lista de perfis
│   ├── CreateProfileForm.tsx   # Formulário de perfis
│   ├── PermissionsEditor.tsx   # Editor de permissões
│   ├── ProfileHierarchy.tsx    # Visualizador de herança
│   ├── AuditLog.tsx           # Log de auditoria
│   └── Dashboard.tsx          # Dashboard principal
├── hooks/
│   ├── useRbacApi.ts          # Hook para APIs RBAC
│   ├── useUsers.ts            # Gerenciamento de usuários
│   ├── useProfiles.ts         # Gerenciamento de perfis
│   └── usePermissions.ts      # Gerenciamento de permissões
└── utils/
    ├── rbac-client.ts         # Cliente para APIs
    └── permissions-utils.ts   # Utilitários

📦 Instalação (Futura)

# Quando estiver pronto para produção
npm install @anpdgovbr/rbac-admin@stable

Dependencies:

npm install react@^19 @mui/material
npm install @anpdgovbr/rbac-core @anpdgovbr/rbac-react
npm install @anpdgovbr/shared-ui @anpdgovbr/shared-types

🎯 Uso Previsto

Dashboard Principal (Adaptável ao Tema)

O RbacAdminShell se adapta automaticamente ao tema MUI do contexto:

import { ThemeProvider, createTheme } from "@mui/material/styles"
import { RbacAdminShell } from "@anpdgovbr/rbac-admin"

const theme = createTheme({
  palette: {
    primary: { main: "#1976d2" },
  },
})

function AdminPage() {
  return (
    <ThemeProvider theme={theme}>
      {/* Usa automaticamente o tema acima */}
      <RbacAdminShell config={{ baseUrl: "/api" }} i18n={{ locale: "pt-BR" }} />
    </ThemeProvider>
  )
}

Customização de Cores e Estilos

import { RbacAdminShell } from "@anpdgovbr/rbac-admin"

function CustomAdminPage() {
  return (
    <RbacAdminShell
      config={{ baseUrl: "/api" }}
      styleConfig={{
        primaryColor: "#00796b",
        paperElevation: 2,
        containerMaxWidth: "xl",
        sx: {
          container: { backgroundColor: "background.default" },
          paper: { borderRadius: 2 },
          tabs: { "& .MuiTab-root": { textTransform: "none" } },
        },
      }}
    />
  )
}

Integração em Layout Existente

import { RbacAdminShell } from "@anpdgovbr/rbac-admin"

function DashboardPage() {
  return (
    <MyCustomLayout>
      <MyHeader />
      <MyContent>
        {/* Sem container próprio - usa o layout existente */}
        <RbacAdminShell config={{ baseUrl: "/api" }} disableContainer disableTitle />
      </MyContent>
    </MyCustomLayout>
  )
}

Controle de Tab e Callbacks

import { useState } from "react"
import { RbacAdminShell } from "@anpdgovbr/rbac-admin"

function AdminPage() {
  const [currentTab, setCurrentTab] = useState(0)

  return (
    <RbacAdminShell
      config={{ baseUrl: "/api" }}
      initialTab={currentTab}
      onTabChange={(tab) => {
        setCurrentTab(tab)
        console.log("Tab mudou para:", tab)
      }}
    />
  )
}

Ver mais exemplos em: USAGE-EXAMPLES.md

Componentes Individuais

import { UsersList, ProfilesEditor, PermissionsMatrix } from "@anpdgovbr/rbac-admin"

function CustomAdminPage() {
  return (
    <div>
      <h1>Administração RBAC</h1>

      {/* Lista de usuários com filtros */}
      <UsersList
        endpoint="/api/users"
        onEdit={handleUserEdit}
        filters={["ativo", "perfil", "setor"]}
      />

      {/* Editor de perfis com hierarquia visual */}
      <ProfilesEditor
        endpoint="/api/perfis"
        showHierarchy={true}
        onHierarchyChange={handleHierarchyUpdate}
      />

      {/* Matriz de permissões */}
      <PermissionsMatrix
        profileId="supervisor"
        endpoint="/api/permissoes"
        groupBy="recurso"
        editable={true}
      />
    </div>
  )
}

🎨 Features Planejadas

✅ Implementado

• [x] Estrutura base de componentes
• [x] Types básicos
• [x] Setup de build
• [x] Text tokens de i18n (pt-BR/en) via I18nProvider com sobrescrita opcional
• [x] Interface moderna com Material-UI — Todos os componentes migrados para MUI
• [x] Integração com @anpdgovbr/shared-ui — Compatível com design system ANPD
• [x] Compatibilidade com shared-types ^0.3.1-beta.0 — Types atualizados
• [x] Hooks useAdminProfiles e useAdminPermissions
• [x] UsersList component — Lista de usuários com atribuição de perfis (MUI Table + Select)
• [x] ProfilesList component — Lista de perfis para seleção (MUI List)
• [x] CreateProfileForm component — Formulário de criação de perfis (MUI TextField + Button)
• [x] CreatePermissionForm component — Formulário de permissões (MUI Select + Checkbox)
• [x] PermissionsEditor component — Editor de permissões por perfil (MUI Table + Checkbox)
• [x] RbacAdminShell — Shell principal com interface em abas (MUI Tabs + Container)

I18n, estilização e UI

O rbac-admin agora utiliza Material-UI (MUI) v7 com imports individuais para otimizar o tree shaking e reduzir o tamanho do bundle. A integração com @anpdgovbr/shared-ui garante compatibilidade com o design system da ANPD.

import { RbacAdminShell } from "@anpdgovbr/rbac-admin"

// Interface completa com tabs para gerenciar Perfis, Usuários e Permissões
;<RbacAdminShell
  config={{ baseUrl: "/api" }}
  i18n={{ locale: "pt-BR", title: "Administração RBAC" }}
/>

Todos os imports MUI são individuais para melhor tree shaking:

// ✅ Correto - imports individuais
import Button from "@mui/material/Button"
import TextField from "@mui/material/TextField"

// ❌ Evitado - import agrupado
import { Button, TextField } from "@mui/material"

🚧 Em Desenvolvimento

• [ ] Dashboard com métricas
• [ ] Gestão de hierarquia de perfis com drag & drop
• [ ] Auditoria e logs de atividade
• [ ] Bulk operations para usuários
• [ ] Export/Import de configurações

📋 Roadmap

• [ ] Dashboard Principal
  • [ ] Métricas de usuários ativos
  • [ ] Gráficos de distribuição de perfis
  • [ ] Atividade recente
• [ ] Gerenciamento de Usuários
  • [ ] Lista paginada com filtros
  • [ ] Busca por nome/email/perfil
  • [ ] CRUD completo
  • [ ] Bulk operations
• [ ] Gestão de Perfis
  • [ ] Editor visual de hierarquia
  • [ ] Drag & drop para herança
  • [ ] Preview de permissões herdadas
  • [ ] Validação de ciclos
• [ ] Editor de Permissões
  • [ ] Matriz visual ação × recurso
  • [ ] Edição em lote
  • [ ] Import/export de configurações
  • [ ] Templates predefinidos
• [ ] Auditoria e Logs
  • [ ] Timeline de mudanças
  • [ ] Filtros avançados
  • [ ] Export de relatórios
  • [ ] Alertas de segurança

🛠️ Desenvolvimento

Setup Local

cd packages/rbac-admin

# Instalar dependências
npm install

# Desenvolvimento
npm run dev

# Build
npm run build

# Testes (quando implementados)
npm test

Estrutura Atual

src/
├── index.tsx              # Entry point
├── types.ts               # Types do admin
├── components/
│   ├── CreateProfileForm.tsx    # [SKELETON]
│   ├── CreatePermissionForm.tsx # [SKELETON]
│   ├── PermissionsEditor.tsx    # [SKELETON]
│   ├── ProfilesList.tsx         # [SKELETON]
│   └── UsersList.tsx           # [SKELETON]
└── jsx-shim.d.ts         # Types React

🤝 Contribuindo

Como este pacote está em desenvolvimento, contribuições são especialmente bem-vindas:

1. Feedback de UX — Como você gostaria que a interface funcionasse?
2. Component Design — Sugestões de API e props dos componentes
3. Feature Requests — Funcionalidades que seriam úteis
4. Code Contributions — Implementação dos componentes

Discussões em Aberto

• State Management — Context API, Zustand, ou Redux Toolkit?
• Data Fetching — SWR, React Query, ou fetch nativo?
• Validação — Zod, Yup, ou validação customizada?
• Hierarquia Visual — Biblioteca para drag & drop de perfis?

📚 Documentação Relacionada

• 📖 Consolidação de Features e Roadmap
• ⚛️ rbac-react (client components)
• 🚀 Guia de Início Rápido

📄 Licença

MIT © 2024 ANPD (Agência Nacional de Proteção de Dados)

💡 Interessado em contribuir? Entre em contato com a equipe DDSS/CGTI/ANPD ou abra uma issue para discussão.