From f18486b4c9526168822e74c8c489e9a2b7f85f30 Mon Sep 17 00:00:00 2001
From: lukibeg <lucas.santoscv25@gmail.com>
Date: Thu, 20 Nov 2025 19:50:41 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20Visualiza=C3=A7=C3=A3o=20de=20usu=C3=A1?=
 =?UTF-8?q?rios=20cadastrados=20no=20sistema.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Livewire/{ => Admin}/ShowUsers.php        |  9 +--
 app/Livewire/ShowClient.php                   |  2 +-
 resources/css/app.css                         |  1 +
 resources/css/user-view-modal.css             | 71 +++++++++++++++++++
 resources/views/dashboard.blade.php           | 10 +--
 resources/views/layouts/app.blade.php         |  1 +
 .../admin/{ => clients}/add-client.blade.php  |  0
 .../admin/{ => clients}/edit-client.blade.php |  0
 .../livewire/admin/show-client.blade.php      | 15 ++--
 .../views/livewire/admin/show-users.blade.php | 62 +++++++++++++++-
 .../admin/{ => users}/create-user.blade.php   |  0
 resources/views/users/users.blade.php         |  8 ---
 12 files changed, 147 insertions(+), 32 deletions(-)
 rename app/Livewire/{ => Admin}/ShowUsers.php (51%)
 create mode 100644 resources/css/user-view-modal.css
 rename resources/views/livewire/admin/{ => clients}/add-client.blade.php (100%)
 rename resources/views/livewire/admin/{ => clients}/edit-client.blade.php (100%)
 rename resources/views/livewire/admin/{ => users}/create-user.blade.php (100%)
 delete mode 100644 resources/views/users/users.blade.php

diff --git a/app/Livewire/ShowUsers.php b/app/Livewire/Admin/ShowUsers.php
similarity index 51%
rename from app/Livewire/ShowUsers.php
rename to app/Livewire/Admin/ShowUsers.php
index 13b104c..433f2ed 100644
--- a/app/Livewire/ShowUsers.php
+++ b/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();
-        return view('livewire.admin.show-users', ['users' => $users]);
+        $this->users = $userService->showUsers();
     }
+    public function show(UserService $userService) {}
     public function render()
     {
         return view('livewire.admin.show-users');
diff --git a/app/Livewire/ShowClient.php b/app/Livewire/ShowClient.php
index 8e29dba..3565f20 100644
--- a/app/Livewire/ShowClient.php
+++ b/app/Livewire/ShowClient.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Livewire\Admin\Client;
+namespace App\Livewire;
 
 use App\Models\Client;
 use Livewire\Component;
diff --git a/resources/css/app.css b/resources/css/app.css
index 9823b0e..ea7668d 100644
--- a/resources/css/app.css
+++ b/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',
diff --git a/resources/css/user-view-modal.css b/resources/css/user-view-modal.css
new file mode 100644
index 0000000..810c981
--- /dev/null
+++ b/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.
+*/
+}
\ No newline at end of file
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index bcb97c6..8c056f0 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -2,11 +2,11 @@
 <title> @yield('title', 'Nexus - Dashboard') </title>
 
 @section('content')
-<livewire:admin.create-user />
-<livewire:admin.add-client />
+<livewire:admin.user.create-user />
+<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:admin.edit-client />
+<livewire:show-client />
+<livewire:admin.client.edit-client />
 @endsection
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 7801ffc..4b99110 100644
--- a/resources/views/layouts/app.blade.php
+++ b/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
diff --git a/resources/views/livewire/admin/add-client.blade.php b/resources/views/livewire/admin/clients/add-client.blade.php
similarity index 100%
rename from resources/views/livewire/admin/add-client.blade.php
rename to resources/views/livewire/admin/clients/add-client.blade.php
diff --git a/resources/views/livewire/admin/edit-client.blade.php b/resources/views/livewire/admin/clients/edit-client.blade.php
similarity index 100%
rename from resources/views/livewire/admin/edit-client.blade.php
rename to resources/views/livewire/admin/clients/edit-client.blade.php
diff --git a/resources/views/livewire/admin/show-client.blade.php b/resources/views/livewire/admin/show-client.blade.php
index b75f38c..df7ead7 100644
--- a/resources/views/livewire/admin/show-client.blade.php
+++ b/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">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>
-                            <a href="#" class="client-option-item text-red-600"
-                                x-on:click.prevent="$dispatch('sure', { id: '{{ $client->id }}' })">
-                                Excluir Cliente
-                            </a>
-                        </li>
-
+                        <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" x-on:click.prevent="$dispatch('update-client', { id: '{{ $client->id }}' })">Editar Cliente</a></li>
+                        <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">
diff --git a/resources/views/livewire/admin/show-users.blade.php b/resources/views/livewire/admin/show-users.blade.php
index af30e71..e0b6a60 100644
--- a/resources/views/livewire/admin/show-users.blade.php
+++ b/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>
\ No newline at end of file
diff --git a/resources/views/livewire/admin/create-user.blade.php b/resources/views/livewire/admin/users/create-user.blade.php
similarity index 100%
rename from resources/views/livewire/admin/create-user.blade.php
rename to resources/views/livewire/admin/users/create-user.blade.php
diff --git a/resources/views/users/users.blade.php b/resources/views/users/users.blade.php
deleted file mode 100644
index dfb8177..0000000
--- a/resources/views/users/users.blade.php
+++ /dev/null
@@ -1,8 +0,0 @@
-@extends('layouts.app')
-
-@section('title', 'View Users')
-
-@section('content')
-<h1>View Users</h1>
-{{ dd($users) }}
-@endsection
\ No newline at end of file