@asteby/metacore-runtime-react 18.14.0 → 18.16.0

package/src/permissions-manager.tsx

@@ -3,16 +3,21 @@
 // Transport-agnostic: every read/write arrives via props (loaders/mutators),
 // so each host wires them to its own api client (ops → /api/permissions/*).
 // The capability universe (modules × actions + general flags) is derived from
-// the installed manifests server-side; this component only renders it.
+// the installed manifests + the real sidebar nav server/host-side; this
+// component only renders it.
 //
-// Layout (reference: 7leguas "Permisos y Roles"):
+// Layout — a *flat list* that mirrors the app sidebar (NO accordions/folders):
 //   header   — title + "Nuevo rol" (primary) + "Guardar permisos" (green).
-//   left     — Card "Rol": searchable role selector with removable chip,
-//              Editar/Eliminar rol, "Permisos Generales" flag checkboxes.
-//            — Card "Módulo": searchable module selector grouped by addon,
-//              removable chip.
+//   left     — Card "Rol": clean role combobox with inline Editar/Eliminar
+//              icons (no removable chip) + "Permisos Generales" flags.
+//            — Card "Módulos": a searchable flat list. Each group renders a
+//              non-collapsible grey header (uppercase tracking, like "Módulos"
+//              / "Sistema" in the sidebar) followed by its modules as clickable
+//              rows (icon + label + granted-count badge). Clicking a row selects
+//              that module and reveals its action grid on the right.
 //   right    — Card "Acciones permitidas": granted counter N/M, mark-all /
-//              clear buttons, checkbox grid (icon + label per action).
+//              clear, checkbox grid (icon + label per action). Clear empty
+//              states for "pick a role" / "pick a module" / loading.
 //
 // Saving calls `syncRolePermissions(roleId, capabilities)` with the FULL
 // granted set of the active role (baseline + the edits made here). Dirty
@@ -27,9 +32,9 @@ import {
     Pencil,
     Plus,
     Save,
+    Search,
     Shield,
     Trash2,
-    X,
 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cn } from '@asteby/metacore-ui/lib'
@@ -72,32 +77,52 @@ import {
 import { DynamicIcon } from './dynamic-icon'
 
 // ---------------------------------------------------------------------------
-// Types (mirror of `GET /api/permissions/modules` / `/api/permissions/roles`)
+// Types (mirror of `GET /api/permissions/modules` + the host sidebar nav)
 // ---------------------------------------------------------------------------
 
 export interface PermissionActionDef {
-    /** Canonical action key (`index`, `create`, …, or a custom key like `pagar`). */
+    /** Canonical action key (`index`, `create`, …, a custom `pagar`, or `access`). */
     key: string
-    /** Localized label ("Listar", "Pagar"). */
+    /** Localized label ("Listar", "Pagar", "Acceder"). */
     label: string
     /** Lucide icon name from the manifest action (optional). */
     icon?: string
-    /** `crud` for the derived CRUD set, `custom` for manifest actions. */
-    kind?: 'crud' | 'custom' | string
+    /**
+     * `crud` for the derived CRUD set, `custom` for manifest actions,
+     * `screen` for the single `access` action of a non-model screen.
+     */
+    kind?: 'crud' | 'custom' | 'screen' | string
 }
 
 export interface PermissionModuleDef {
-    /** Module key = lowercase model table (`pos_orders`). */
+    /**
+     * Module key.
+     * - model:  lowercase model table (`pos_orders`).
+     * - screen: `screen.<navKey>` (the host prefixes it).
+     */
     key: string
-    /** Localized module label ("Pedidos POS"). */
+    /** Localized module label ("Pedidos POS", "Terminal"). */
     label: string
-    /** Owning addon key (`pos`). */
+    /** Module icon (lucide name) — mirrors the sidebar entry. */
+    icon?: string
+    /** Whether this entry is a data model or a non-model screen. */
+    kind?: 'model' | 'screen'
+    /** Owning addon key (`pos`) — legacy shape only, used for grouping. */
     addon_key?: string
-    /** Localized addon label ("Punto de venta") — used to group the selector. */
+    /** Localized addon label ("Punto de venta") — legacy shape only. */
     addon_label?: string
     actions: PermissionActionDef[]
 }
 
+/**
+ * A sidebar-style group: a grey (non-collapsible) header + its modules.
+ * `title === ''` → no header (e.g. core/infra modules).
+ */
+export interface ModuleGroup {
+    title: string
+    modules: PermissionModuleDef[]
+}
+
 export interface GeneralPermissionDef {
     /** Full capability key (`general.work_after_hours`). */
     key: string
@@ -105,11 +130,27 @@ export interface GeneralPermissionDef {
     description?: string
 }
 
-export interface PermissionsCatalog {
+/**
+ * What `loadModules()` may return.
+ *
+ * New (preferred) shape — pre-grouped flat list, mirrors the host sidebar:
+ *   { groups: ModuleGroup[], general }
+ *
+ * Legacy shape (still accepted, wrapped into a single untitled group) —
+ *   { modules: PermissionModuleDef[], general }
+ */
+export interface GroupedPermissionsCatalog {
+    groups: ModuleGroup[]
+    general: GeneralPermissionDef[]
+}
+
+export interface FlatPermissionsCatalog {
     modules: PermissionModuleDef[]
     general: GeneralPermissionDef[]
 }
 
+export type PermissionsCatalog = GroupedPermissionsCatalog | FlatPermissionsCatalog
+
 export interface RoleDef {
     id: string
     /** Stable role key ("cashier"). */
@@ -127,7 +168,7 @@ export interface RoleInput {
 }
 
 export interface PermissionsManagerProps {
-    /** Loads the module×action universe + general flags. */
+    /** Loads the module×action universe + general flags (grouped or flat). */
     loadModules: () => Promise<PermissionsCatalog>
     /** Loads every assignable role. */
     loadRoles: () => Promise<RoleDef[]>
@@ -135,7 +176,7 @@ export interface PermissionsManagerProps {
     loadRolePermissions: (roleId: string) => Promise<string[]>
     /** Persists the FULL granted capability set of a role. */
     syncRolePermissions: (roleId: string, capabilities: string[]) => Promise<void>
-    /** Optional role CRUD — omitting one hides its button. */
+    /** Optional role CRUD — omitting one hides its control. */
     createRole?: (input: RoleInput) => Promise<RoleDef | void>
     updateRole?: (roleId: string, input: RoleInput) => Promise<RoleDef | void>
     deleteRole?: (roleId: string) => Promise<void>
@@ -187,16 +228,32 @@ export function defaultActionIcon(actionKey: string, kind?: string): string {
             return 'Download'
         case 'import':
             return 'Upload'
+        case 'access':
+            return 'Eye'
         default:
-            return kind === 'crud' ? 'List' : 'Zap'
+            if (kind === 'crud') return 'List'
+            if (kind === 'screen') return 'Eye'
+            return 'Zap'
     }
 }
 
-function slugify(label: string): string {
-    return label
+/** Group label fallback when a legacy module has no addon ("Sistema" = core). */
+const SYSTEM_GROUP = 'Sistema'
+
+function legacyGroupLabel(mod: PermissionModuleDef): string {
+    return mod.addon_label || mod.addon_key || SYSTEM_GROUP
+}
+
+/** Accent-insensitive, lowercase fold for search. */
+function fold(s: string): string {
+    return s
         .normalize('NFD')
-        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[̀-ͯ]/g, '')
         .toLowerCase()
+}
+
+function slugify(label: string): string {
+    return fold(label)
         .trim()
         .replace(/[^a-z0-9]+/g, '_')
         .replace(/^_+|_+$/g, '')
@@ -214,6 +271,63 @@ const ROLE_COLORS = [
     '#6b7280',
 ]
 
+/**
+ * Normalize whatever `loadModules` returned into the canonical grouped shape.
+ *
+ * - New shape (`{ groups }`): passed through (modules default to kind:'model').
+ * - Legacy flat shape (`{ modules }`): grouped by `addon_label`/`addon_key`
+ *   (falling back to "Sistema") so old hosts keep their familiar buckets,
+ *   every module defaulting to kind:'model'. The grey headers still render,
+ *   just derived from the addon instead of the sidebar group.
+ */
+export function normalizeCatalogGroups(catalog: PermissionsCatalog): ModuleGroup[] {
+    const withKind = (m: PermissionModuleDef): PermissionModuleDef => ({
+        ...m,
+        kind: m.kind ?? 'model',
+    })
+
+    if ('groups' in catalog && Array.isArray(catalog.groups)) {
+        return catalog.groups.map((g) => ({
+            title: g.title ?? '',
+            modules: g.modules.map(withKind),
+        }))
+    }
+
+    const modules = ('modules' in catalog && catalog.modules) || []
+    const order: string[] = []
+    const byGroup = new Map<string, PermissionModuleDef[]>()
+    for (const raw of modules) {
+        const mod = withKind(raw)
+        const g = legacyGroupLabel(mod)
+        if (!byGroup.has(g)) {
+            byGroup.set(g, [])
+            order.push(g)
+        }
+        byGroup.get(g)!.push(mod)
+    }
+    return order.map((title) => ({ title, modules: byGroup.get(title)! }))
+}
+
+/** Flat list of every module across groups, in render order. */
+export function flattenGroups(groups: ModuleGroup[]): PermissionModuleDef[] {
+    return groups.flatMap((g) => g.modules)
+}
+
+/** Filter the grouped flat list by a folded query against module + group titles. */
+export function filterModuleGroups(groups: ModuleGroup[], query: string): ModuleGroup[] {
+    const q = fold(query).trim()
+    if (!q) return groups
+    const out: ModuleGroup[] = []
+    for (const g of groups) {
+        const groupMatches = g.title.length > 0 && fold(g.title).includes(q)
+        const mods = groupMatches
+            ? g.modules
+            : g.modules.filter((m) => fold(m.label).includes(q) || fold(m.key).includes(q))
+        if (mods.length) out.push({ title: g.title, modules: mods })
+    }
+    return out
+}
+
 // ---------------------------------------------------------------------------
 // Internal sub-components
 // ---------------------------------------------------------------------------
@@ -276,37 +390,46 @@ function CapabilityCheck({
     )
 }
 
-/** Removable selection chip (role / module). */
-function SelectionChip({
-    label,
-    color,
-    onRemove,
-    removeAriaLabel,
+/** One clickable module row in the flat list (mirrors a sidebar item). */
+function ModuleRow({
+    module,
+    active,
+    granted,
+    total,
+    onSelect,
 }: {
-    label: string
-    color?: string
-    onRemove: () => void
-    removeAriaLabel: string
+    module: PermissionModuleDef
+    active: boolean
+    granted: number
+    total: number
+    onSelect: () => void
 }) {
     return (
-        <Badge variant="secondary" className="gap-1.5 pr-1 text-sm font-medium">
-            {color && (
-                <span
-                    className="h-2 w-2 rounded-full"
-                    style={{ background: color }}
-                    aria-hidden="true"
-                />
+        <button
+            type="button"
+            onClick={onSelect}
+            aria-current={active || undefined}
+            className={cn(
+                'group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
+                active
+                    ? 'bg-primary/10 font-medium text-foreground'
+                    : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground',
             )}
-            <span className="max-w-[180px] truncate">{label}</span>
-            <button
-                type="button"
-                aria-label={removeAriaLabel}
-                onClick={onRemove}
-                className="rounded-sm p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
-            >
-                <X className="h-3 w-3" />
-            </button>
-        </Badge>
+        >
+            <DynamicIcon
+                name={module.icon || (module.kind === 'screen' ? 'Eye' : 'Square')}
+                className={cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground')}
+            />
+            <span className="min-w-0 flex-1 truncate">{module.label}</span>
+            {granted > 0 && (
+                <Badge
+                    variant={granted === total ? 'default' : 'secondary'}
+                    className="h-5 shrink-0 px-1.5 text-[10px] tabular-nums"
+                >
+                    {granted}/{total}
+                </Badge>
+            )}
+        </button>
     )
 }
 
@@ -325,7 +448,8 @@ export function PermissionsManager({
     title = 'Permisos y Roles',
     className,
 }: PermissionsManagerProps) {
-    const [catalog, setCatalog] = React.useState<PermissionsCatalog | null>(null)
+    const [groups, setGroups] = React.useState<ModuleGroup[] | null>(null)
+    const [general, setGeneral] = React.useState<GeneralPermissionDef[] | null>(null)
     const [roles, setRoles] = React.useState<RoleDef[] | null>(null)
     const [loadError, setLoadError] = React.useState(false)
 
@@ -339,7 +463,7 @@ export function PermissionsManager({
     const [saving, setSaving] = React.useState(false)
 
     const [roleOpen, setRoleOpen] = React.useState(false)
-    const [moduleOpen, setModuleOpen] = React.useState(false)
+    const [moduleQuery, setModuleQuery] = React.useState('')
 
     // Pending role switch while there are unsaved changes.
     const [pendingRoleId, setPendingRoleId] = React.useState<string | null>(null)
@@ -354,7 +478,9 @@ export function PermissionsManager({
     const [deleteOpen, setDeleteOpen] = React.useState(false)
     const [deleting, setDeleting] = React.useState(false)
 
-    const loading = catalog === null || roles === null
+    const loading = groups === null || roles === null
+
+    const allModules = React.useMemo(() => (groups ? flattenGroups(groups) : []), [groups])
 
     // ---- initial load: catalog + roles in parallel -------------------------
     React.useEffect(() => {
@@ -362,10 +488,14 @@ export function PermissionsManager({
         Promise.all([loadModules(), loadRoles()])
             .then(([cat, rs]) => {
                 if (cancelled) return
-                setCatalog(cat)
+                const grouped = normalizeCatalogGroups(cat)
+                setGroups(grouped)
+                setGeneral(cat.general ?? [])
                 setRoles(rs)
                 setActiveRoleId((prev) => prev ?? rs[0]?.id ?? null)
-                setActiveModuleKey((prev) => prev ?? cat.modules[0]?.key ?? null)
+                setActiveModuleKey(
+                    (prev) => prev ?? flattenGroups(grouped)[0]?.key ?? null,
+                )
             })
             .catch(() => {
                 if (!cancelled) setLoadError(true)
@@ -411,23 +541,17 @@ export function PermissionsManager({
         [roles, activeRoleId],
     )
     const activeModule = React.useMemo(
-        () => catalog?.modules.find((m) => m.key === activeModuleKey) ?? null,
-        [catalog, activeModuleKey],
+        () => allModules.find((m) => m.key === activeModuleKey) ?? null,
+        [allModules, activeModuleKey],
     )
 
     const dirty = baseline !== null && draft !== null && !capabilitySetsEqual(baseline, draft)
 
-    // Selector groups: modules bucketed by addon label, stable order.
-    const moduleGroups = React.useMemo(() => {
-        const groups = new Map<string, PermissionModuleDef[]>()
-        for (const mod of catalog?.modules ?? []) {
-            const group = mod.addon_label || mod.addon_key || 'Otros'
-            const list = groups.get(group) ?? []
-            list.push(mod)
-            groups.set(group, list)
-        }
-        return Array.from(groups.entries())
-    }, [catalog])
+    // Flat module list, optionally filtered by the search.
+    const visibleGroups = React.useMemo(
+        () => filterModuleGroups(groups ?? [], moduleQuery),
+        [groups, moduleQuery],
+    )
 
     // ---- capability edits ---------------------------------------------------
     const toggleCapability = React.useCallback((cap: string) => {
@@ -518,7 +642,9 @@ export function PermissionsManager({
             }
             setRoleDialog((d) => ({ ...d, open: false }))
         } catch {
-            toast.error(roleDialog.mode === 'create' ? 'No se pudo crear el rol' : 'No se pudo actualizar el rol')
+            toast.error(
+                roleDialog.mode === 'create' ? 'No se pudo crear el rol' : 'No se pudo actualizar el rol',
+            )
         } finally {
             setRoleSaving(false)
         }
@@ -541,15 +667,35 @@ export function PermissionsManager({
         }
     }
 
+    const openEditRole = () => {
+        if (!activeRole) return
+        setRoleDialog({
+            open: true,
+            mode: 'edit',
+            label: activeRole.label || activeRole.name,
+            color: activeRole.color || ROLE_COLORS[5],
+        })
+    }
+
     // ---- derived for the right panel ----------------------------------------
     const moduleGranted = activeModule && draft ? grantedCountForModule(draft, activeModule) : 0
     const moduleTotal = activeModule?.actions.length ?? 0
     const checksDisabled = !activeRole || !draft || loadingPerms || saving
+    const activeModuleGroupTitle = React.useMemo(() => {
+        if (!activeModule || !groups) return ''
+        const g = groups.find((grp) => grp.modules.some((m) => m.key === activeModule.key))
+        return g?.title ?? ''
+    }, [activeModule, groups])
 
     // ---- render --------------------------------------------------------------
     if (loadError) {
         return (
-            <div className={cn('flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground', className)}>
+            <div
+                className={cn(
+                    'flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground',
+                    className,
+                )}
+            >
                 <Shield className="h-8 w-8 opacity-40" />
                 <p className="text-sm">No se pudo cargar el catálogo de permisos.</p>
             </div>
@@ -568,8 +714,8 @@ export function PermissionsManager({
                 </div>
                 <div className="grid gap-4 lg:grid-cols-[340px_1fr]">
                     <div className="flex flex-col gap-4">
-                        <Skeleton className="h-64 w-full" />
-                        <Skeleton className="h-28 w-full" />
+                        <Skeleton className="h-40 w-full" />
+                        <Skeleton className="h-80 w-full" />
                     </div>
                     <Skeleton className="h-96 w-full" />
                 </div>
@@ -596,7 +742,12 @@ export function PermissionsManager({
                     {createRole && (
                         <Button
                             onClick={() =>
-                                setRoleDialog({ open: true, mode: 'create', label: '', color: ROLE_COLORS[5] })
+                                setRoleDialog({
+                                    open: true,
+                                    mode: 'create',
+                                    label: '',
+                                    color: ROLE_COLORS[5],
+                                })
                             }
                         >
                             <Plus className="mr-1.5 h-4 w-4" /> Nuevo rol
@@ -623,101 +774,103 @@ export function PermissionsManager({
                             <CardDescription>Selecciona el rol a configurar.</CardDescription>
                         </CardHeader>
                         <CardContent className="flex flex-col gap-3">
-                            {activeRole ? (
-                                <div className="flex items-center justify-between gap-2">
-                                    <SelectionChip
-                                        label={activeRole.label || activeRole.name}
-                                        color={activeRole.color}
-                                        onRemove={() => requestRoleSwitch(null)}
-                                        removeAriaLabel="Quitar rol seleccionado"
-                                    />
-                                    <div className="flex items-center gap-1">
-                                        {updateRole && (
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                className="h-8 px-2"
-                                                aria-label="Editar rol"
-                                                onClick={() =>
-                                                    setRoleDialog({
-                                                        open: true,
-                                                        mode: 'edit',
-                                                        label: activeRole.label || activeRole.name,
-                                                        color: activeRole.color || ROLE_COLORS[5],
-                                                    })
-                                                }
-                                            >
-                                                <Pencil className="h-3.5 w-3.5" />
-                                            </Button>
-                                        )}
-                                        {deleteRole && (
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                className="h-8 px-2 text-destructive hover:text-destructive"
-                                                aria-label="Eliminar rol"
-                                                onClick={() => setDeleteOpen(true)}
-                                            >
-                                                <Trash2 className="h-3.5 w-3.5" />
-                                            </Button>
-                                        )}
-                                    </div>
-                                </div>
-                            ) : (
-                                <p className="text-sm text-muted-foreground">Ningún rol seleccionado.</p>
-                            )}
-
-                            <Popover open={roleOpen} onOpenChange={setRoleOpen}>
-                                <PopoverTrigger asChild>
+                            {/* Clean role combobox with inline edit/delete. */}
+                            <div className="flex items-center gap-1.5">
+                                <Popover open={roleOpen} onOpenChange={setRoleOpen}>
+                                    <PopoverTrigger asChild>
+                                        <Button
+                                            variant="outline"
+                                            role="combobox"
+                                            aria-expanded={roleOpen}
+                                            className="min-w-0 flex-1 justify-between font-normal"
+                                        >
+                                            <span className="flex min-w-0 items-center gap-2">
+                                                {activeRole && (
+                                                    <span
+                                                        className="h-2.5 w-2.5 shrink-0 rounded-full"
+                                                        style={{
+                                                            background: activeRole.color || '#6b7280',
+                                                        }}
+                                                        aria-hidden="true"
+                                                    />
+                                                )}
+                                                <span className="truncate">
+                                                    {activeRole
+                                                        ? activeRole.label || activeRole.name
+                                                        : 'Seleccionar rol…'}
+                                                </span>
+                                            </span>
+                                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                        </Button>
+                                    </PopoverTrigger>
+                                    <PopoverContent className="w-[280px] p-0" align="start">
+                                        <Command>
+                                            <CommandInput placeholder="Buscar rol…" />
+                                            <CommandList>
+                                                <CommandEmpty>Sin resultados.</CommandEmpty>
+                                                <CommandGroup>
+                                                    {(roles ?? []).map((role) => (
+                                                        <CommandItem
+                                                            key={role.id}
+                                                            value={`${role.label || ''} ${role.name}`}
+                                                            onSelect={() => {
+                                                                requestRoleSwitch(role.id)
+                                                                setRoleOpen(false)
+                                                            }}
+                                                        >
+                                                            <span
+                                                                className="mr-2 h-2 w-2 shrink-0 rounded-full"
+                                                                style={{
+                                                                    background: role.color || '#6b7280',
+                                                                }}
+                                                                aria-hidden="true"
+                                                            />
+                                                            <span className="truncate">
+                                                                {role.label || role.name}
+                                                            </span>
+                                                            {role.id === activeRoleId && (
+                                                                <Check className="ml-auto h-4 w-4" />
+                                                            )}
+                                                        </CommandItem>
+                                                    ))}
+                                                </CommandGroup>
+                                            </CommandList>
+                                        </Command>
+                                    </PopoverContent>
+                                </Popover>
+                                {updateRole && (
                                     <Button
                                         variant="outline"
-                                        role="combobox"
-                                        aria-expanded={roleOpen}
-                                        className="w-full justify-between font-normal"
+                                        size="icon"
+                                        className="h-9 w-9 shrink-0"
+                                        aria-label="Editar rol"
+                                        disabled={!activeRole}
+                                        onClick={openEditRole}
                                     >
-                                        {activeRole ? activeRole.label || activeRole.name : 'Seleccionar rol…'}
-                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                        <Pencil className="h-4 w-4" />
                                     </Button>
-                                </PopoverTrigger>
-                                <PopoverContent className="w-[300px] p-0" align="start">
-                                    <Command>
-                                        <CommandInput placeholder="Buscar rol…" />
-                                        <CommandList>
-                                            <CommandEmpty>Sin resultados.</CommandEmpty>
-                                            <CommandGroup>
-                                                {(roles ?? []).map((role) => (
-                                                    <CommandItem
-                                                        key={role.id}
-                                                        value={`${role.label || ''} ${role.name}`}
-                                                        onSelect={() => {
-                                                            requestRoleSwitch(role.id)
-                                                            setRoleOpen(false)
-                                                        }}
-                                                    >
-                                                        <span
-                                                            className="mr-2 h-2 w-2 shrink-0 rounded-full"
-                                                            style={{ background: role.color || '#6b7280' }}
-                                                            aria-hidden="true"
-                                                        />
-                                                        <span className="truncate">{role.label || role.name}</span>
-                                                        {role.id === activeRoleId && (
-                                                            <Check className="ml-auto h-4 w-4" />
-                                                        )}
-                                                    </CommandItem>
-                                                ))}
-                                            </CommandGroup>
-                                        </CommandList>
-                                    </Command>
-                                </PopoverContent>
-                            </Popover>
-
-                            {(catalog?.general.length ?? 0) > 0 && (
+                                )}
+                                {deleteRole && (
+                                    <Button
+                                        variant="outline"
+                                        size="icon"
+                                        className="h-9 w-9 shrink-0 text-destructive hover:text-destructive"
+                                        aria-label="Eliminar rol"
+                                        disabled={!activeRole}
+                                        onClick={() => setDeleteOpen(true)}
+                                    >
+                                        <Trash2 className="h-4 w-4" />
+                                    </Button>
+                                )}
+                            </div>
+
+                            {(general?.length ?? 0) > 0 && (
                                 <>
                                     <Separator />
                                     <div>
                                         <h3 className="mb-2 text-sm font-semibold">Permisos Generales</h3>
                                         <div className="flex flex-col gap-2">
-                                            {catalog!.general.map((g) => (
+                                            {general!.map((g) => (
                                                 <CapabilityCheck
                                                     key={g.key}
                                                     checked={draft?.has(g.key) ?? false}
@@ -734,62 +887,73 @@ export function PermissionsManager({
                         </CardContent>
                     </Card>
 
-                    {/* Card: Módulo */}
+                    {/* Card: Módulos (flat list, mirrors the sidebar — no folders) */}
                     <Card>
                         <CardHeader>
-                            <CardTitle className="text-base">Módulo</CardTitle>
-                            <CardDescription>Elige el módulo cuyas acciones quieres configurar.</CardDescription>
+                            <CardTitle className="text-base">Módulos</CardTitle>
+                            <CardDescription>
+                                Elige el módulo cuyas acciones quieres configurar.
+                            </CardDescription>
                         </CardHeader>
                         <CardContent className="flex flex-col gap-3">
-                            {activeModule ? (
-                                <SelectionChip
-                                    label={activeModule.label}
-                                    onRemove={() => setActiveModuleKey(null)}
-                                    removeAriaLabel="Quitar módulo seleccionado"
+                            <div className="relative">
+                                <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                                <Input
+                                    value={moduleQuery}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                        setModuleQuery(e.target.value)
+                                    }
+                                    placeholder="Buscar módulo…"
+                                    aria-label="Buscar módulo"
+                                    className="pl-8"
                                 />
-                            ) : (
-                                <p className="text-sm text-muted-foreground">Ningún módulo seleccionado.</p>
-                            )}
-                            <Popover open={moduleOpen} onOpenChange={setModuleOpen}>
-                                <PopoverTrigger asChild>
-                                    <Button
-                                        variant="outline"
-                                        role="combobox"
-                                        aria-expanded={moduleOpen}
-                                        className="w-full justify-between font-normal"
-                                    >
-                                        {activeModule ? activeModule.label : 'Seleccionar módulo…'}
-                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                    </Button>
-                                </PopoverTrigger>
-                                <PopoverContent className="w-[300px] p-0" align="start">
-                                    <Command>
-                                        <CommandInput placeholder="Buscar módulo…" />
-                                        <CommandList>
-                                            <CommandEmpty>Sin resultados.</CommandEmpty>
-                                            {moduleGroups.map(([group, mods]) => (
-                                                <CommandGroup key={group} heading={group}>
-                                                    {mods.map((mod) => (
-                                                        <CommandItem
-                                                            key={mod.key}
-                                                            value={`${mod.label} ${mod.key} ${group}`}
-                                                            onSelect={() => {
-                                                                setActiveModuleKey(mod.key)
-                                                                setModuleOpen(false)
-                                                            }}
-                                                        >
-                                                            <span className="truncate">{mod.label}</span>
-                                                            {mod.key === activeModuleKey && (
-                                                                <Check className="ml-auto h-4 w-4" />
-                                                            )}
-                                                        </CommandItem>
-                                                    ))}
-                                                </CommandGroup>
+                            </div>
+
+                            <div
+                                role="list"
+                                aria-label="Módulos"
+                                className="-mx-1 flex max-h-[460px] flex-col gap-0.5 overflow-y-auto px-1"
+                            >
+                                {visibleGroups.length === 0 ? (
+                                    <p className="px-2 py-6 text-center text-sm text-muted-foreground">
+                                        Sin módulos.
+                                    </p>
+                                ) : (
+                                    visibleGroups.map((group, gi) => (
+                                        <div
+                                            key={group.title || `__untitled_${gi}`}
+                                            className="flex flex-col gap-0.5"
+                                        >
+                                            {group.title && (
+                                                <div
+                                                    role="heading"
+                                                    aria-level={3}
+                                                    className={cn(
+                                                        'px-2 pb-1 pt-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground',
+                                                        gi === 0 && 'pt-1',
+                                                    )}
+                                                >
+                                                    {group.title}
+                                                </div>
+                                            )}
+                                            {group.modules.map((mod) => (
+                                                <ModuleRow
+                                                    key={mod.key}
+                                                    module={mod}
+                                                    active={mod.key === activeModuleKey}
+                                                    granted={
+                                                        draft
+                                                            ? grantedCountForModule(draft, mod)
+                                                            : 0
+                                                    }
+                                                    total={mod.actions.length}
+                                                    onSelect={() => setActiveModuleKey(mod.key)}
+                                                />
                                             ))}
-                                        </CommandList>
-                                    </Command>
-                                </PopoverContent>
-                            </Popover>
+                                        </div>
+                                    ))
+                                )}
+                            </div>
                         </CardContent>
                     </Card>
                 </div>
@@ -798,11 +962,30 @@ export function PermissionsManager({
                 <Card>
                     <CardHeader>
                         <div className="flex flex-wrap items-start justify-between gap-2">
-                            <div>
-                                <CardTitle className="text-base">Acciones permitidas</CardTitle>
-                                <CardDescription>Configura los permisos para este módulo.</CardDescription>
+                            <div className="min-w-0">
+                                <CardTitle className="flex items-center gap-2 text-base">
+                                    {activeModule && (
+                                        <DynamicIcon
+                                            name={
+                                                activeModule.icon ||
+                                                (activeModule.kind === 'screen' ? 'Eye' : 'Square')
+                                            }
+                                            className="h-4 w-4 shrink-0 text-primary"
+                                        />
+                                    )}
+                                    <span className="truncate">
+                                        {activeModule ? activeModule.label : 'Acciones permitidas'}
+                                    </span>
+                                </CardTitle>
+                                <CardDescription>
+                                    {activeModule
+                                        ? `${
+                                              activeModuleGroupTitle || 'Sistema'
+                                          } · configura las acciones permitidas`
+                                        : 'Configura los permisos del módulo seleccionado.'}
+                                </CardDescription>
                             </div>
-                            {activeModule && (
+                            {activeRole && activeModule && (
                                 <div className="flex items-center gap-2">
                                     <Badge variant="secondary" className="tabular-nums">
                                         {moduleGranted}/{moduleTotal}
@@ -832,14 +1015,14 @@ export function PermissionsManager({
                     <CardContent>
                         {!activeRole ? (
                             <EmptyHint text="Selecciona un rol para configurar sus permisos." />
-                        ) : !activeModule ? (
-                            <EmptyHint text="Selecciona un módulo para ver sus acciones." />
                         ) : loadingPerms ? (
                             <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
                                 {Array.from({ length: 6 }).map((_, i) => (
                                     <Skeleton key={i} className="h-11 w-full" />
                                 ))}
                             </div>
+                        ) : !activeModule ? (
+                            <EmptyHint text="Selecciona un módulo de la lista para ver sus acciones." />
                         ) : (
                             <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
                                 {activeModule.actions.map((action) => {
@@ -894,7 +1077,9 @@ export function PermissionsManager({
             >
                 <DialogContent className="sm:max-w-md">
                     <DialogHeader>
-                        <DialogTitle>{roleDialog.mode === 'create' ? 'Nuevo rol' : 'Editar rol'}</DialogTitle>
+                        <DialogTitle>
+                            {roleDialog.mode === 'create' ? 'Nuevo rol' : 'Editar rol'}
+                        </DialogTitle>
                     </DialogHeader>
                     <div className="flex flex-col gap-4 py-2">
                         <div className="flex flex-col gap-2">
@@ -937,22 +1122,32 @@ export function PermissionsManager({
                         >
                             Cancelar
                         </Button>
-                        <Button onClick={handleRoleSubmit} disabled={roleSaving || !roleDialog.label.trim()}>
-                            {roleSaving ? 'Guardando…' : roleDialog.mode === 'create' ? 'Crear rol' : 'Guardar'}
+                        <Button
+                            onClick={handleRoleSubmit}
+                            disabled={roleSaving || !roleDialog.label.trim()}
+                        >
+                            {roleSaving
+                                ? 'Guardando…'
+                                : roleDialog.mode === 'create'
+                                  ? 'Crear rol'
+                                  : 'Guardar'}
                         </Button>
                     </DialogFooter>
                 </DialogContent>
             </Dialog>
 
             {/* Role delete confirm */}
-            <AlertDialog open={deleteOpen} onOpenChange={(open: boolean) => !deleting && setDeleteOpen(open)}>
+            <AlertDialog
+                open={deleteOpen}
+                onOpenChange={(open: boolean) => !deleting && setDeleteOpen(open)}
+            >
                 <AlertDialogContent>
                     <AlertDialogHeader>
                         <AlertDialogTitle>¿Eliminar el rol?</AlertDialogTitle>
                         <AlertDialogDescription>
                             Se eliminará el rol{' '}
-                            <strong>{activeRole ? activeRole.label || activeRole.name : ''}</strong> y sus
-                            asignaciones de permisos. Esta acción no se puede deshacer.
+                            <strong>{activeRole ? activeRole.label || activeRole.name : ''}</strong> y
+                            sus asignaciones de permisos. Esta acción no se puede deshacer.
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>