refactor(roles): role create/edit as a full page instead of a modal

Per feedback, 'New role' (and Edit) now open a dedicated page instead of a
modal:
- New RoleForm full-page component + view at /admin/roles/create and
  /admin/roles/{role}/edit (name, description, permission checkboxes; saves
  and redirects back to the list).
- RoleManager trimmed: the create/edit modal and its logic removed; 'New role'
  and the per-row/view-modal Edit are now links to the new pages.
- Kept the read-only View modal, single + bulk delete, and protections.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/Livewire/RoleForm.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use Livewire\Attributes\Layout;
+use Illuminate\Support\Facades\Auth;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+use Spatie\Permission\PermissionRegistrar;
+
+#[Layout('layouts.app')]
+class RoleForm extends Component
+{
+    public ?Role $role = null;
+
+    public string $name = '';
+    public string $description = '';
+    public array $rolePermissions = [];
+
+    private const PROTECTED_ROLES = ['Admin'];
+    private const CORE_PERMISSION = 'manage all';
+
+    public function mount(?Role $role = null): void
+    {
+        abort_unless(Auth::user()?->can(self::CORE_PERMISSION), 403);
+
+        if ($role && $role->exists) {
+            $this->role            = $role;
+            $this->name            = $role->name;
+            $this->description     = $role->description ?? '';
+            $this->rolePermissions = $role->permissions->pluck('name')->toArray();
+        }
+    }
+
+    public function save()
+    {
+        $this->validate([
+            'name'        => 'required|string|max:50|unique:roles,name' . ($this->role ? ',' . $this->role->id : ''),
+            'description' => 'nullable|string|max:255',
+        ], [], ['name' => 'nombre', 'description' => 'descripción']);
+
+        if ($this->role) {
+            $isProtected = in_array($this->role->name, self::PROTECTED_ROLES, true);
+            if (! $isProtected) {
+                $this->role->name = $this->name;
+            }
+            $this->role->description = $this->description ?: null;
+            $this->role->save();
+
+            $perms = $this->rolePermissions;
+            if ($this->role->name === 'Admin' && ! in_array(self::CORE_PERMISSION, $perms, true)) {
+                $perms[] = self::CORE_PERMISSION;
+            }
+            $this->role->syncPermissions($perms);
+        } else {
+            $role = Role::create([
+                'name'        => $this->name,
+                'description' => $this->description ?: null,
+            ]);
+            if (! empty($this->rolePermissions)) {
+                $role->syncPermissions($this->rolePermissions);
+            }
+        }
+
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        session()->flash('message', 'Rol guardado correctamente.');
+
+        return $this->redirect(route('admin.roles'), navigate: true);
+    }
+
+    public function render()
+    {
+        return view('livewire.roles.role-form', [
+            'permissions' => Permission::orderBy('name')->get(),
+            'isProtected' => $this->role && in_array($this->role->name, self::PROTECTED_ROLES, true),
+        ]);
+    }
+}

app/Livewire/RoleManager.php

@@ -6,19 +6,11 @@ use Livewire\Component;
 use Livewire\Attributes\Layout;
 use Illuminate\Support\Facades\Auth;
 use Spatie\Permission\Models\Role;
-use Spatie\Permission\Models\Permission;
 use Spatie\Permission\PermissionRegistrar;
 
 #[Layout('layouts.app')]
 class RoleManager extends Component
 {
-    // Create / edit modal
-    public bool $showForm = false;
-    public ?int $editingRole = null;
-    public string $name = '';
-    public string $description = '';
-    public array $rolePermissions = [];   // selected permission names
-
     // View modal
     public ?int $viewingRole = null;
 
@@ -46,77 +38,6 @@ class RoleManager extends Component
             : [];
     }
 
-    // ── Create / Edit ────────────────────────────────────────────────────────
-
-    public function openCreate(): void
-    {
-        $this->resetForm();
-        $this->showForm = true;
-    }
-
-    public function openEdit(int $id): void
-    {
-        $role = Role::with('permissions')->findOrFail($id);
-        $this->editingRole     = $role->id;
-        $this->name            = $role->name;
-        $this->description     = $role->description ?? '';
-        $this->rolePermissions = $role->permissions->pluck('name')->toArray();
-        $this->resetErrorBag();
-        $this->viewingRole = null;   // close the view modal if open
-        $this->showForm = true;
-    }
-
-    public function save(): void
-    {
-        $this->validate([
-            'name'        => 'required|string|max:50|unique:roles,name' . ($this->editingRole ? ',' . $this->editingRole : ''),
-            'description' => 'nullable|string|max:255',
-        ], [], ['name' => 'nombre', 'description' => 'descripción']);
-
-        if ($this->editingRole) {
-            $role = Role::findOrFail($this->editingRole);
-            $isProtected = in_array($role->name, self::PROTECTED_ROLES, true);
-
-            // Protected roles can't be renamed
-            if (! $isProtected) {
-                $role->name = $this->name;
-            }
-            $role->description = $this->description ?: null;
-            $role->save();
-
-            $perms = $this->rolePermissions;
-            // Admin always keeps the core permission
-            if ($role->name === 'Admin' && ! in_array(self::CORE_PERMISSION, $perms, true)) {
-                $perms[] = self::CORE_PERMISSION;
-            }
-            $role->syncPermissions($perms);
-        } else {
-            $role = Role::create([
-                'name'        => $this->name,
-                'description' => $this->description ?: null,
-            ]);
-            if (! empty($this->rolePermissions)) {
-                $role->syncPermissions($this->rolePermissions);
-            }
-        }
-
-        $this->flushCache();
-        $this->closeForm();
-        $this->dispatch('notify', 'Rol guardado correctamente');
-    }
-
-    public function closeForm(): void
-    {
-        $this->showForm = false;
-        $this->resetForm();
-    }
-
-    private function resetForm(): void
-    {
-        $this->reset(['editingRole', 'name', 'description', 'rolePermissions']);
-        $this->resetErrorBag();
-    }
-
     // ── View ─────────────────────────────────────────────────────────────────
 
     public function openView(int $id): void
@@ -155,6 +76,7 @@ class RoleManager extends Component
             $deleted++;
         }
         $this->selected = [];
+        $this->selectAll = false;
         $this->flushCache();
         $msg = "{$deleted} rol(es) eliminados";
         if ($skipped) $msg .= " ({$skipped} protegido(s) omitido(s))";
@@ -164,9 +86,8 @@ class RoleManager extends Component
     public function render()
     {
         return view('livewire.role-manager', [
-            'roles'       => Role::with('permissions')->withCount('users')->orderBy('name')->get(),
-            'permissions' => Permission::orderBy('name')->get(),
-            'viewing'     => $this->viewingRole
+            'roles'   => Role::with('permissions')->withCount('users')->orderBy('name')->get(),
+            'viewing' => $this->viewingRole
                 ? Role::with('permissions')->withCount('users')->find($this->viewingRole)
                 : null,
         ]);

resources/views/livewire/role-manager.blade.php

@@ -10,9 +10,9 @@
             <a href="{{ route('admin.permissions') }}" class="btn btn-outline btn-sm gap-1" wire:navigate>
                 <x-heroicon-o-table-cells class="w-4 h-4" /> {{ __('Matrix view') }}
             </a>
-            <button wire:click="openCreate" class="btn btn-primary btn-sm gap-1">
+            <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm gap-1" wire:navigate>
                 <x-heroicon-o-plus class="w-4 h-4" /> {{ __('New role') }}
-            </button>
+            </a>
         </div>
     </div>
 
@@ -68,9 +68,9 @@
                                 <button wire:click="openView({{ $role->id }})" class="btn btn-ghost btn-xs" title="{{ __('View') }}">
                                     <x-heroicon-o-eye class="w-4 h-4" />
                                 </button>
-                                <button wire:click="openEdit({{ $role->id }})" class="btn btn-ghost btn-xs text-info" title="{{ __('Edit') }}">
+                                <a href="{{ route('admin.roles.edit', $role->id) }}" class="btn btn-ghost btn-xs text-info" title="{{ __('Edit') }}" wire:navigate>
                                     <x-heroicon-o-pencil class="w-4 h-4" />
-                                </button>
+                                </a>
                                 @unless(in_array($role->name, ['Admin'], true))
                                     <button wire:click="delete({{ $role->id }})"
                                             wire:confirm="{{ __('Delete role') }} '{{ $role->name }}'?"
@@ -88,62 +88,6 @@
         </table>
     </div>
 
-    {{-- ════════════════ MODAL CREAR / EDITAR ════════════════ --}}
-    @if($showForm)
-        <div class="modal modal-open z-[1500]">
-            <div class="modal-box max-w-xl">
-                <div class="flex items-center justify-between mb-4">
-                    <h3 class="font-bold text-lg">{{ $editingRole ? __('Edit role') : __('New role') }}</h3>
-                    <button wire:click="closeForm" class="btn btn-sm btn-circle btn-ghost"><x-heroicon-o-x-mark class="w-5 h-5" /></button>
-                </div>
-
-                <form wire:submit.prevent="save" class="space-y-4">
-                    {{-- Nombre --}}
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-medium">{{ __('Name') }} <span class="text-error">*</span></span></label>
-                        <input type="text" wire:model="name"
-                               class="input input-bordered w-full @error('name') input-error @enderror"
-                               placeholder="{{ __('e.g. Site Supervisor') }}"
-                               @if($editingRole && in_array($name, ['Admin'], true)) readonly @endif />
-                        @error('name') <span class="text-error text-xs mt-1">{{ $message }}</span> @enderror
-                    </div>
-
-                    {{-- Descripción --}}
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-medium">{{ __('Description') }}</span></label>
-                        <textarea wire:model="description" rows="2"
-                                  class="textarea textarea-bordered w-full @error('description') textarea-error @enderror"
-                                  placeholder="{{ __('What is this role for?') }}"></textarea>
-                        @error('description') <span class="text-error text-xs mt-1">{{ $message }}</span> @enderror
-                    </div>
-
-                    {{-- Permisos --}}
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-medium">{{ __('Permissions') }}</span></label>
-                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-1 border border-base-300 rounded-lg p-3 max-h-60 overflow-y-auto">
-                            @foreach($permissions as $perm)
-                                <label class="flex items-center gap-2 text-sm cursor-pointer py-0.5">
-                                    <input type="checkbox" class="checkbox checkbox-sm checkbox-primary"
-                                           value="{{ $perm->name }}" wire:model="rolePermissions" />
-                                    {{ $perm->name }}
-                                </label>
-                            @endforeach
-                        </div>
-                    </div>
-
-                    <div class="modal-action">
-                        <button type="button" wire:click="closeForm" class="btn btn-ghost">{{ __('Cancel') }}</button>
-                        <button type="submit" class="btn btn-primary gap-1" wire:loading.attr="disabled" wire:target="save">
-                            <span wire:loading wire:target="save" class="loading loading-spinner loading-sm"></span>
-                            {{ $editingRole ? __('Update') : __('Create') }}
-                        </button>
-                    </div>
-                </form>
-            </div>
-            <div class="modal-backdrop bg-black/40" wire:click="closeForm"></div>
-        </div>
-    @endif
-
     {{-- ════════════════ MODAL VER ════════════════ --}}
     @if($viewing)
         <div class="modal modal-open z-[1500]">
@@ -170,9 +114,9 @@
                 @endif
 
                 <div class="modal-action">
-                    <button wire:click="openEdit({{ $viewing->id }})" class="btn btn-sm btn-info gap-1">
+                    <a href="{{ route('admin.roles.edit', $viewing->id) }}" class="btn btn-sm btn-info gap-1" wire:navigate>
                         <x-heroicon-o-pencil class="w-4 h-4" /> {{ __('Edit') }}
-                    </button>
+                    </a>
                     <button wire:click="closeView" class="btn btn-sm">{{ __('Close') }}</button>
                 </div>
             </div>

resources/views/livewire/roles/role-form.blade.php

@@ -0,0 +1,73 @@
+<div class="py-8 max-w-3xl mx-auto sm:px-6 lg:px-8">
+
+    <div class="flex items-center justify-between mb-6">
+        <h2 class="text-2xl font-bold text-gray-800">
+            {{ $role ? __('Edit role') : __('New role') }}
+        </h2>
+        <a href="{{ route('admin.roles') }}" class="btn btn-ghost btn-sm gap-1" wire:navigate>
+            <x-heroicon-o-arrow-left class="w-4 h-4" /> {{ __('Back') }}
+        </a>
+    </div>
+
+    <div class="bg-white rounded-lg shadow p-6">
+        <form wire:submit.prevent="save" class="space-y-5">
+
+            {{-- Nombre --}}
+            <div class="flex items-start gap-4">
+                <label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
+                    {{ __('Name') }} <span class="text-error">*</span>
+                </label>
+                <div class="flex-1">
+                    <input type="text" wire:model="name"
+                           class="input input-bordered w-full @error('name') input-error @enderror"
+                           placeholder="{{ __('e.g. Site Supervisor') }}"
+                           @if($isProtected) readonly @endif />
+                    @error('name') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
+                    @if($isProtected)
+                        <p class="text-xs text-gray-400 mt-1">{{ __('This role is protected and cannot be renamed.') }}</p>
+                    @endif
+                </div>
+            </div>
+
+            {{-- Descripción --}}
+            <div class="flex items-start gap-4">
+                <label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
+                    {{ __('Description') }}
+                </label>
+                <div class="flex-1">
+                    <textarea wire:model="description" rows="2"
+                              class="textarea textarea-bordered w-full @error('description') textarea-error @enderror"
+                              placeholder="{{ __('What is this role for?') }}"></textarea>
+                    @error('description') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
+                </div>
+            </div>
+
+            {{-- Permisos --}}
+            <div class="flex items-start gap-4">
+                <label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
+                    {{ __('Permissions') }}
+                </label>
+                <div class="flex-1">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-1 border border-base-300 rounded-lg p-3 max-h-72 overflow-y-auto">
+                        @foreach($permissions as $perm)
+                            <label class="flex items-center gap-2 text-sm cursor-pointer py-0.5">
+                                <input type="checkbox" class="checkbox checkbox-sm checkbox-primary"
+                                       value="{{ $perm->name }}" wire:model="rolePermissions" />
+                                {{ $perm->name }}
+                            </label>
+                        @endforeach
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex items-center justify-end gap-3 pt-2 border-t border-base-200">
+                <a href="{{ route('admin.roles') }}" class="btn btn-ghost" wire:navigate>{{ __('Cancel') }}</a>
+                <button type="submit" class="btn btn-primary gap-2" wire:loading.attr="disabled" wire:target="save">
+                    <span wire:loading wire:target="save" class="loading loading-spinner loading-sm"></span>
+                    <x-heroicon-o-check class="w-4 h-4" />
+                    {{ $role ? __('Update role') : __('Create role') }}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

routes/web.php

@@ -137,6 +137,8 @@ Route::get('/reports/dashboard', ReportsDashboard::class)->name('reports.dashboa
         Route::get('/users/{user}',       \App\Livewire\UserView::class)->name('users.show');
         Route::get('/users/{user}/edit',  \App\Livewire\UserForm::class)->name('users.edit');
         Route::get('/roles',               \App\Livewire\RoleManager::class)->name('roles');
+        Route::get('/roles/create',        \App\Livewire\RoleForm::class)->name('roles.create');
+        Route::get('/roles/{role}/edit',   \App\Livewire\RoleForm::class)->name('roles.edit');
         Route::get('/permissions',         \App\Livewire\RolePermissionManager::class)->name('permissions');
     });