feat: Visualização de usuários cadastrados no sistema.

app/Livewire/Admin/ShowUsers.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Livewire\Admin\User;
+namespace App\Livewire\Admin;
 
 use App\Models\User;
 use App\Services\UserService;
@@ -8,12 +8,13 @@
 
 class ShowUsers extends Component
 {
+    public $users = [];
 
-    public function show(UserService $userService)
+    public function mount(UserService $userService)
     {
-        $users = $userService->showUsers();
+        $this->users = $userService->showUsers();
-        return view('livewire.admin.show-users', ['users' => $users]);
     }
+    public function show(UserService $userService) {}
     public function render()
     {
         return view('livewire.admin.show-users');

app/Livewire/ShowClient.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Livewire\Admin\Client;
+namespace App\Livewire;
 
 use App\Models\Client;
 use Livewire\Component;

resources/css/app.css

@@ -10,6 +10,7 @@
 @import './user-form-modal.css';
 @import './header.css';
 @import './client-cards.css';
+@import './user-view-modal.css';
 
 @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',

resources/css/user-view-modal.css

@@ -0,0 +1,71 @@
+@layer components {
+
+
+    /* Adicione estas classes à camada @layer components do seu CSS */
+
+    /* --- Estrutura da Lista de Usuários --- */
+    .user-list-content {
+        /* Padding e limite de altura com scroll */
+        @apply p-4 max-h-[500px] overflow-y-auto;
+    }
+
+    .user-grid {
+        @apply grid gap-4;
+    }
+
+    .user-card-item {
+        /* Estilo básico de cada item na lista */
+        @apply flex justify-between items-center bg-gray-50 p-3 rounded-lg border border-gray-200 transition-shadow duration-150;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    }
+
+    .user-card-item:hover {
+        @apply shadow-md border-blue-300;
+    }
+
+    .user-info {
+        @apply flex flex-col;
+    }
+
+    .user-name {
+        @apply font-semibold text-gray-900;
+    }
+
+    .user-email {
+        @apply text-sm text-gray-500;
+    }
+
+    .user-details {
+        /* Garante que os itens fiquem alinhados e espaçados */
+        @apply flex items-center space-x-3;
+    }
+
+    .user-actions-group {
+        /* Define o grupo de botões de ação */
+        @apply flex space-x-2 ml-4;
+        /* Espaçamento à esquerda para separar dos detalhes */
+    }
+
+    .action-button {
+        /* Estilo base para os ícones clicáveis */
+        @apply p-1 rounded-full transition-colors duration-150;
+        /* Cores já definidas inline: text-blue-600, text-red-600 */
+    }
+
+    .action-button:hover {
+        @apply bg-gray-200;
+    }
+
+    .user-permission {
+        /* Estilo para a tag de permissão */
+        @apply text-xs font-medium px-2 py-0.5 rounded-full bg-blue-100 text-blue-800;
+    }
+
+    .user-status {
+        @apply text-xs text-green-600;
+    }
+
+    /* *IMPORTANTE*: Se o modal ficar muito estreito, adicione w-full max-w-2xl à classe .modal-container 
+   ou crie uma classe específica para este modal.
+*/
+}

resources/views/dashboard.blade.php

@@ -2,11 +2,11 @@
 <title> @yield('title', 'Nexus - Dashboard') </title>
 
 @section('content')
-<livewire:admin.create-user />
+<livewire:admin.user.create-user />
-<livewire:admin.add-client />
+<livewire:admin.client.add-client />
 <livewire:admin.show-users />
-<livewire:admin.delete-client />
+<livewire:admin.client.delete-client />
 <x-are-you-sure />
-<livewire:admin.show-client />
+<livewire:show-client />
-<livewire:admin.edit-client />
+<livewire:admin.client.edit-client />
 @endsection

resources/views/layouts/app.blade.php

@@ -69,6 +69,7 @@
                     </a>
                 </li>
 
+
                 <li class="profile-items">
                     <a @click="$dispatch('open-add-client')" class="profile-link">
                         Adicionar clientes

resources/views/livewire/admin/show-client.blade.php

@@ -15,19 +15,12 @@ class="w-32 h-32 rounded-full object-cover">
                         </svg>
                     </button>
 
-
                     <ul x-show="open" class="client-options-list" x-transition>
-
+                        <li><a href="#" class="client-option-item" x-on:click.prevent="$dispatch('view-client', { id: '{{ $client->id }}' })">Ver Detalhes</a></li>
-                        <li><a href="#" class="client-option-item">Ver Detalhes</a></li>
                         <li><a href=" #" class="client-option-item" x-on:click.prevent="$dispatch('update-client', { id: '{{ $client->id }}' })">Editar Cliente</a></li>
-                        <li>
+                        <li><a href="#" class="client-option-item text-red-600" x-on:click.prevent="$dispatch('sure', { id: '{{ $client->id }}' })"> Excluir Cliente</a></li>
-                            <a href="#" class="client-option-item text-red-600"
-                                x-on:click.prevent="$dispatch('sure', { id: '{{ $client->id }}' })">
-                                Excluir Cliente
-                            </a>
-                        </li>
-
                     </ul>
+                    
                 </div>
             </div>
             <div class="client-card-name">

resources/views/livewire/admin/show-users.blade.php

@@ -1,4 +1,60 @@
-<div x-data="{showUsers: false}" x-on:show-users.window="showUsers = true">
+<div x-data="{ showUsers: @entangle('showUsers') }" x-cloak
-
+    x-on:show-users.window="showUsers = true"
+    x-on:close-users-modal.window="showUsers = false"
+    class="relative z-50"
+>
+    <div x-show="showUsers" class="modal-overlay" x-transition:enter.duration.300ms x-transition:leave.duration.300ms>
+        <div x-on:click.outside="showUsers = false" x-show="showUsers" 
+             x-transition:enter="transition-enter" x-transition:enter-start="transition-enter-start" 
+             x-transition:enter-end="transition-enter-end" x-transition:leave="transition-leave" 
+             x-transition:leave-start="transition-leave-start" x-transition:leave-end="transition-leave-end" 
+             class="modal-container w-full max-w-2xl" 
+        >
+            <h3 class="modal-title">Usuários Cadastrados no Nexus</h3>
             
+            <div class="user-list-content">
+                <div class="user-grid">
+                    @forelse ($users as $user)
+                        <div class="user-card-item">
+                            <div class="user-info">
+                                <span class="user-name">{{ $user->name }}</span>
+                                <span class="user-email">{{ $user->email }}</span>
+                            </div>
+                            <div class="user-details">
+                                {{-- <span class="user-permission">{{ ucfirst($user->permissions) }}</span> --}}
+                                <span class="user-status">Ativo</span>
+                                
+                                <div class="user-actions-group">
+                                    
+                                    <button @click="$dispatch('open-edit-user', { id: '{{ $user->id }}' }); showUsers = false" 
+                                            class="action-button text-blue-600 hover:text-blue-800 cursor-pointer"
+                                            title="Editar Usuário">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                                        </svg>
+                                    </button>
+                                    
+                                    <button @click="$dispatch('confirm-delete-user', { id: '{{ $user->id }}' }); showUsers = false" 
+                                            class="action-button text-red-600 hover:text-red-800 cursor-pointer"
+                                            title="Excluir Usuário">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.86 11.2a2 2 0 01-2 1.8H7.86a2 2 0 01-2-1.8L4.01 7h14.98zM9 5h6" />
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    @empty
+                        <p class="text-gray-500 col-span-full p-4">Nenhum usuário cadastrado.</p>
+                    @endforelse
+                </div>
+            </div>
+            
+            <div class="form-footer">
+                <button type="button" @click="showUsers = false" class="btn-cancel">
+                    Fechar
+                </button>
+            </div>
+        </div>
+    </div>
 </div>

resources/views/users/users.blade.php

@@ -1,8 +0,0 @@
-@extends('layouts.app')
-
-@section('title', 'View Users')
-
-@section('content')
-<h1>View Users</h1>
-{{ dd($users) }}
-@endsection