From 7f20399337da2a96983c7820fb9a20d16b9dbcf4 Mon Sep 17 00:00:00 2001
From: javier <javier.bgutierrez@gmail.com>
Date: Wed, 17 Jun 2026 17:44:58 +0200
Subject: [PATCH] feat(roles): collapsible permission groups with
 check/uncheck-all + single-column switches

Permissions tab in the role view:
1. Each section is now a collapsible card (Alpine, chevron rotates).
2. Section header has 'All' / 'None' buttons (setGroup grants/revokes every
   permission of that group for the role; Admin keeps 'manage all').
3. Permissions render in a single column: name+description on the left, control
   on the right.
4. Controls are DaisyUI toggle switches.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/Livewire/RoleView.php                     | 17 ++++++++++
 .../views/livewire/roles/role-view.blade.php  | 33 ++++++++++++++-----
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/app/Livewire/RoleView.php b/app/Livewire/RoleView.php
index 36006d3..f08071a 100644
--- a/app/Livewire/RoleView.php
+++ b/app/Livewire/RoleView.php
@@ -51,6 +51,23 @@ class RoleView extends Component
         $this->dispatch('notify', 'Permisos actualizados');
     }
 
+    public function setGroup(string $group, bool $enabled): void
+    {
+        $names = Permission::where('group', $group)->pluck('name');
+
+        foreach ($names as $name) {
+            // Admin must always keep the core permission
+            if (! $enabled && $this->role->name === 'Admin' && $name === self::CORE_PERMISSION) {
+                continue;
+            }
+            $enabled ? $this->role->givePermissionTo($name) : $this->role->revokePermissionTo($name);
+        }
+
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        $this->role->load('permissions');
+        $this->dispatch('notify', $enabled ? 'Permisos del grupo activados' : 'Permisos del grupo desactivados');
+    }
+
     public function delete()
     {
         if (in_array($this->role->name, self::PROTECTED_ROLES, true)) {
diff --git a/resources/views/livewire/roles/role-view.blade.php b/resources/views/livewire/roles/role-view.blade.php
index e5cb9ff..ce0279d 100644
--- a/resources/views/livewire/roles/role-view.blade.php
+++ b/resources/views/livewire/roles/role-view.blade.php
@@ -101,17 +101,34 @@
 
     {{-- ═══════════════ TAB PERMISOS ═══════════════ --}}
     @if($tab === 'permisos')
-        <div class="bg-white rounded-lg shadow p-6 space-y-6">
+        <div class="space-y-3">
             @forelse($grouped as $section => $perms)
-                <div>
-                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3 border-b border-base-200 pb-1">
-                        {{ $section }}
-                    </h3>
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2">
+                <div x-data="{ open: true }" class="bg-white rounded-lg shadow overflow-hidden">
+                    {{-- Cabecera del grupo: colapsable + marcar/desmarcar todo --}}
+                    <div class="flex items-center justify-between px-4 py-3 bg-base-200/60">
+                        <button type="button" @click="open = !open" class="flex items-center gap-2 flex-1 text-left">
+                            <span class="transition-transform duration-200" :class="open ? 'rotate-90' : ''">
+                                <x-heroicon-o-chevron-right class="w-4 h-4 text-gray-500" />
+                            </span>
+                            <span class="font-semibold text-gray-700">{{ $section }}</span>
+                            <span class="badge badge-ghost badge-sm">{{ $perms->count() }}</span>
+                        </button>
+                        <div class="flex items-center gap-1 shrink-0">
+                            <button wire:click="setGroup('{{ $section }}', true)" class="btn btn-xs btn-ghost gap-1" title="{{ __('Check all') }}">
+                                <x-heroicon-o-check class="w-3.5 h-3.5" /> {{ __('All') }}
+                            </button>
+                            <button wire:click="setGroup('{{ $section }}', false)" class="btn btn-xs btn-ghost gap-1" title="{{ __('Uncheck all') }}">
+                                <x-heroicon-o-x-mark class="w-3.5 h-3.5" /> {{ __('None') }}
+                            </button>
+                        </div>
+                    </div>
+
+                    {{-- Lista de permisos: una sola columna (permiso izquierda, switch derecha) --}}
+                    <div x-show="open" x-transition.opacity class="divide-y divide-base-200">
                         @foreach($perms as $perm)
-                            <label class="flex items-center justify-between gap-3 cursor-pointer py-1">
+                            <label class="flex items-center justify-between gap-3 px-4 py-2.5 cursor-pointer hover:bg-base-100">
                                 <div class="min-w-0">
-                                    <span class="text-sm">{{ $perm->name }}</span>
+                                    <span class="text-sm font-medium">{{ $perm->name }}</span>
                                     @if($perm->description)
                                         <p class="text-xs text-gray-400 leading-tight">{{ $perm->description }}</p>
                                     @endif