From aa9affa16ded6d4f1c5668eb2c06a9091bba834f Mon Sep 17 00:00:00 2001
From: lukibeg <lucas.santoscv25@gmail.com>
Date: Sat, 15 Nov 2025 19:55:53 -0300
Subject: [PATCH] =?UTF-8?q?feat|in-progress:=20Adiciona=20componente=20de?=
 =?UTF-8?q?=20exclus=C3=A3o=20de=20cliente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/View/Components/AreYouSure.php            |  26 ++
 .../views/components/are-you-sure.blade.php   |  87 +++++++
 resources/views/dashboard.blade.php           | 226 +++++++++---------
 3 files changed, 232 insertions(+), 107 deletions(-)
 create mode 100644 app/View/Components/AreYouSure.php
 create mode 100644 resources/views/components/are-you-sure.blade.php

diff --git a/app/View/Components/AreYouSure.php b/app/View/Components/AreYouSure.php
new file mode 100644
index 0000000..5966c9c
--- /dev/null
+++ b/app/View/Components/AreYouSure.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\View\Component;
+use Illuminate\Contracts\View\View;
+
+class AreYouSure extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.are-you-sure');
+    }
+}
diff --git a/resources/views/components/are-you-sure.blade.php b/resources/views/components/are-you-sure.blade.php
new file mode 100644
index 0000000..b6d0c6e
--- /dev/null
+++ b/resources/views/components/are-you-sure.blade.php
@@ -0,0 +1,87 @@
+<!-- 
+  O contêiner principal do Alpine.
+  - 'showQuestion' controla a visibilidade.
+  - '@sure.window' é o evento que dispara a abertura.
+-->
+<div x-data="{showQuestion: false}" 
+     @sure.window="showQuestion = true"
+     x-cloak {{-- x-cloak é bom para evitar "piscadas" na tela --}}
+>
+
+    <!-- 
+      1. O OVERLAY (Fundo)
+      Copiado 1-para-1 do seu 'create-user'
+    -->
+    <div x-show="showQuestion" 
+         class="modal-overlay" 
+         x-transition:enter.duration.300ms 
+         x-transition:leave.duration.300ms
+    >
+        
+        <!-- 
+          2. O CONTAINER (Card)
+          Copiado 1-para-1 do seu 'create-user'
+        -->
+        <div x-on:click.outside="showQuestion = false" 
+             x-show="showQuestion" 
+             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 max-w-sm" {{-- Adicionei 'max-w-sm' para um modal de alerta menor --}}
+        >
+
+            <!-- 3. O NOVO CONTEÚDO (Confirmação) -->
+            
+            <!-- Ícone de Alerta -->
+            <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                </svg>
+            </div>
+
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                <!-- Título (usando a classe do 'create-user') -->
+                <h3 class="modal-title" id="modal-title">
+                    Confirmar Exclusão
+                </h3>
+                
+                <!-- Descrição -->
+                <div class="mt-2">
+                    <p class="text-sm text-gray-500">
+                        Você tem certeza que deseja excluir este cliente? 
+                        Todos os seus dados serão removidos permanentemente. 
+                        Esta ação não pode ser desfeita.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Botões (usando a estrutura do 'create-user') -->
+            <div class="form-footer mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                
+                <!-- 
+                  O botão "Sim, Excluir" deve vir primeiro no HTML 
+                  para o 'flex-row-reverse' funcionar.
+                -->
+                <button type="button" 
+                        {{-- 
+                          Aqui, ele dispara o evento 'confirm-delete' 
+                          (que seu Livewire pode ouvir) e fecha o modal.
+                        --}}
+                        @click="$dispatch('confirm-delete'); showQuestion = false" 
+                        class="btn-submit bg-red-600 hover:bg-red-700 focus:ring-red-500 w-full sm:w-auto">
+                    Sim, Excluir
+                </button>
+
+                <button type="button" 
+                        @click="showQuestion = false" 
+                        class="btn-cancel mt-3 sm:mt-0 w-full sm:w-auto">
+                    Cancelar
+                </button>
+            </div>
+
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 0919ae8..05f87b3 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -1,120 +1,132 @@
 @extends('layouts.app')
+<title> @yield('title', 'Nexus - Dashboard') </title>
 
 @section('content')
-<livewire:admin.create-user />
-<livewire:admin.add-client />
-<livewire:admin.show-users />
+    <livewire:admin.create-user />
+    <livewire:admin.add-client />
+    <livewire:admin.show-users />
+    <x-are-you-sure />
 
-<div class="container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+    <div class="container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
 
-    <div class="client-card">
-        <div class="client-card-header">
-            <div class="client-avatar">
-                <img src="{{ Vite::asset('resources/images/mr-distribuidora.svg') }}" alt="Avatar do Cliente"
-                    class="w-32 h-32 rounded-full object-cover">
+        @foreach ($clients as $client)
+            <div class="client-card">
+                <div class="client-card-header">
+                    <div class="client-avatar">
+                        <img src="{{ Vite::asset('resources/images/mr-distribuidora.svg') }}" alt="Avatar do Cliente"
+                            class="w-32 h-32 rounded-full object-cover">
+                    </div>
+                    <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
+                        <button @click="open = !open" class="client-options-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
+                                viewBox="0 0 20 20" fill="currentColor">
+                                <path
+                                    d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                            </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">Editar Cliente</a></li>
+                            <li>
+                                <a href="#" class="client-option-item text-red-600" x-on:click.prevent="$dispatch('sure')">
+
+                                    Excluir Cliente
+                                </a>
+                            </li>
+
+                        </ul>
+                    </div>
+                </div>
+                <div class="client-card-name">
+                    {{ $client->name }}
+                </div>
             </div>
-            <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
-                <button @click="open = !open" class="client-options-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
-                        viewBox="0 0 20 20" fill="currentColor">
-                        <path
-                            d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                    </svg>
-                </button>
+        @endforeach
 
-                <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">Editar Cliente</a></li>
-                    <li><a href="#" class="client-option-item text-red-600">Excluir Cliente</a></li>
-                </ul>
+        <div class="client-card">
+            <div class="client-card-header">
+                <div class="client-avatar">
+                    <img src="{{ Vite::asset('resources/images/maissaude.svg') }}" alt="Avatar do Cliente"
+                        class="w-32 h-32 rounded-full object-cover">
+                </div>
+                <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
+                    <button @click="open = !open" class="client-options-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
+                            viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                        </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">Editar Cliente</a></li>
+                        <li><a href="#" class="client-option-item text-red-600">Excluir Cliente</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="client-card-name">
+                Cliente 2
             </div>
         </div>
-        <div class="client-card-name">
-            Cliente 1
+
+        <div class="client-card">
+            <div class="client-card-header">
+                <div class="client-avatar">
+                    <img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Avatar do Cliente"
+                        class="w-32 h-32 rounded-full object-cover">
+                </div>
+                <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
+                    <button @click="open = !open" class="client-options-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
+                            viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                        </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">Editar Cliente</a></li>
+                        <li><a href="#" class="client-option-item text-red-600">Excluir Cliente</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="client-card-name">
+                Cliente 3
+            </div>
         </div>
+
+        <div class="client-card">
+            <div class="client-card-header">
+                <div class="client-avatar">
+                    <img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Avatar do Cliente"
+                        class="w-32 h-32 rounded-full object-cover">
+                </div>
+                <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
+                    <button @click="open = !open" class="client-options-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
+                            viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                        </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">Editar Cliente</a></li>
+                        <li><a href="#" class="client-option-item text-red-600">Excluir Cliente</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="client-card-name">
+                Cliente 4
+            </div>
+        </div>
+
     </div>
 
-    <div class="client-card">
-        <div class="client-card-header">
-            <div class="client-avatar">
-                <img src="{{ Vite::asset('resources/images/maissaude.svg') }}" alt="Avatar do Cliente"
-                    class="w-32 h-32 rounded-full object-cover">
-            </div>
-            <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
-                <button @click="open = !open" class="client-options-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
-                        viewBox="0 0 20 20" fill="currentColor">
-                        <path
-                            d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                    </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">Editar Cliente</a></li>
-                    <li><a href="#" class="client-option-item text-red-600">Excluir Cliente</a></li>
-                </ul>
-            </div>
-        </div>
-        <div class="client-card-name">
-            Cliente 2
-        </div>
-    </div>
-
-    <div class="client-card">
-        <div class="client-card-header">
-            <div class="client-avatar">
-                <img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Avatar do Cliente"
-                    class="w-32 h-32 rounded-full object-cover">
-            </div>
-            <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
-                <button @click="open = !open" class="client-options-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
-                        viewBox="0 0 20 20" fill="currentColor">
-                        <path
-                            d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                    </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">Editar Cliente</a></li>
-                    <li><a href="#" class="client-option-item text-red-600">Excluir Cliente</a></li>
-                </ul>
-            </div>
-        </div>
-        <div class="client-card-name">
-            Cliente 3
-        </div>
-    </div>
-
-    <div class="client-card">
-        <div class="client-card-header">
-            <div class="client-avatar">
-                <img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Avatar do Cliente"
-                    class="w-32 h-32 rounded-full object-cover">
-            </div>
-            <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
-                <button @click="open = !open" class="client-options-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
-                        viewBox="0 0 20 20" fill="currentColor">
-                        <path
-                            d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                    </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">Editar Cliente</a></li>
-                    <li><a href="#" class="client-option-item text-red-600">Excluir Cliente</a></li>
-                </ul>
-            </div>
-        </div>
-        <div class="client-card-name">
-            Cliente 4
-        </div>
-    </div>
-
-</div>
-
 @endsection
\ No newline at end of file