feat|fix: Constroe tabela de clientes e reformula dashboard do frontend.

app/Http/Controllers/AddClientController.php

@@ -2,9 +2,22 @@
 
 namespace App\Http\Controllers;
 
+use App\Services\ClientService;
 use Illuminate\Http\Request;
 
 class AddClientController extends Controller
 {
-    //
+
+    private ClientService $clientService;
+    public function __construct(ClientService $clientService)
+    {
+        $this->clientService = $clientService;
+    }
+
+
+    public function addClient(Request $request)
+    {
+
+        dd($this->clientService);
+    }
 }

app/Models/Client.php

@@ -2,9 +2,52 @@
 
 namespace App\Models;
 
+// 1. Importe o Trait
+use Illuminate\Database\Eloquent\Concerns\HasUuids;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
 
 class Client extends Model
 {
-    //
+    // 2. Use o Trait
+    use HasFactory, SoftDeletes, HasUuids;
+
+    /**
+     * Os atributos que podem ser preenchidos em massa.
+     *
+     * @var array<int, string>
+     */
+    protected $fillable = [
+        'name',
+        'legal_name',
+        'cnpj',
+        'profile_image_path',
+        'pbx_hosting',
+        'activation_date',
+        'carrier',
+        'access_type',
+        'server_ip',
+        'root_password', // Lembre-se de criptografar isso!
+        'has_call_center',
+        'has_voice_gateway',
+        'has_fop2',
+        'modules',
+        'whatsapp_number',
+        'whatsapp_activation_date',
+    ];
+
+    /**
+     * Os atributos que devem ser convertidos para tipos nativos.
+     *
+     * @var array<string, string>
+     */
+    protected $casts = [
+        'modules' => 'array',
+        'has_call_center' => 'boolean',
+        'has_voice_gateway' => 'boolean',
+        'has_fop2' => 'boolean',
+        'activation_date' => 'date',
+        'whatsapp_activation_date' => 'date',
+    ];
 }

app/Providers/ClientServiceProvider.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Providers;
+
+use App\Models\Client;
+use App\Services\ClientService;
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Support\ServiceProvider;
+
+class ClientServiceProvider extends ServiceProvider
+{
+    /**
+     * Register services.
+     */
+    public function register(): void
+    {
+        $this->app->bind(ClientService::class, function (Application $app) {
+            return new ClientService($app->make(Client::class));
+        });
+    }
+
+    /**
+     * Bootstrap services.
+     */
+    public function boot(): void
+    {
+        //
+    }
+}

app/Services/ClientService.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\Client;
+use App\Models\User;
+use Illuminate\Support\Facades\Gate;
+
+class ClientService
+{
+
+    public function __construct(protected Client $client) {}
+    public function addClient() {}
+}

bootstrap/providers.php

@@ -2,5 +2,6 @@
 
 return [
     App\Providers\AppServiceProvider::class,
+    App\Providers\ClientServiceProvider::class,
     App\Providers\UserServiceProvider::class,
 ];

database/migrations/2025_11_06_142841_create_clients_table.php

@@ -0,0 +1,56 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('clients', function (Blueprint $table) {
+            // 1. Alterado de $table->id() para $table->uuid()
+            $table->uuid('id')->primary(); 
+
+            // Informações de Cadastro
+            $table->string('name'); 
+            $table->string('legal_name'); 
+            $table->string('cnpj')->unique()->nullable(); 
+            
+            // 2. Adicionado o path da imagem
+            $table->string('profile_image_path')->nullable(); // "path da imagem do cliente"
+
+            // Informações Técnicas
+            $table->string('pbx_hosting')->nullable(); 
+            $table->date('activation_date')->nullable(); 
+            $table->string('carrier')->nullable(); 
+            $table->string('access_type')->nullable(); 
+            $table->ipAddress('server_ip')->nullable(); 
+            $table->text('root_password')->nullable(); 
+
+            // Módulos e Features
+            $table->boolean('has_call_center')->default(false); 
+            $table->boolean('has_voice_gateway')->default(false); 
+            $table->boolean('has_fop2')->default(false); 
+
+            // Módulos
+            $table->json('modules')->nullable(); 
+            $table->string('whatsapp_number')->nullable(); 
+            $table->date('whatsapp_activation_date')->nullable(); 
+
+            $table->timestamps();
+            $table->softDeletes();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('clients');
+    }
+};

resources/css/app.css

@@ -17,8 +17,8 @@ @layer components {
     body {
         @apply bg-white h-screen w-screen;
         background-image: url('../images/bg-primary.png');
-        @apply bg-cover bg-center;
-        @apply overflow-y-hidden;
+        @apply bg-cover bg-center bg-fixed;
+        @apply overflow-y-auto overflow-x-hidden;
     }
 
     /*End body */
@@ -27,10 +27,42 @@ @layer components {
     .nav-bar {
         @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10;
         @apply relative;
-        /* Colors */
-        @apply bg-white text-black;
-        /* Border */
-        @apply border-b border-white shadow-md shadow-blue-400;
+        @apply bg-transparent text-black;
+        @apply fixed z-50 w-full;
+
+        /* 1. ADICIONADO: A borda agora mora aqui */
+        @apply border-b;
+
+        /* 2. ESTADO BASE (Topo): A borda começa transparente */
+        @apply border-transparent;
+
+        /* 3. ADICIONADO: Também transiciona a cor da borda */
+        @apply transition-colors duration-700 ease-in-out;
+    }
+
+    .nav-bar::before {
+        content: '';
+        @apply absolute top-0 left-0 w-full h-full;
+
+        /* 2. ESTADO BASE (Topo): Fundo e Sombra */
+        @apply bg-white;
+        @apply shadow-md shadow-blue-400;
+        /* 4. REMOVIDO: As classes 'border-b border-white' saíram daqui */
+
+        /* 3. TRANSIÇÃO (Correto) */
+        @apply transition-all duration-700 ease-in-out;
+
+        @apply -z-10;
+    }
+
+
+    .navbar-scrolled {
+        @apply border-white shadow-md;
+    }
+
+    .navbar-scrolled::before {
+        @apply opacity-0;
+        @apply shadow-none;
     }
 
     .nav-bar>.navbar-items>a:hover,
@@ -53,11 +85,13 @@ @layer components {
 
     .profile-menu {
         @apply absolute right-5;
+        @apply rounded-xl;
+        @apply max-w-7 max-h-7;
     }
 
     .profile-list-items {
         /* 1. Posicionamento (Correto) */
-        @apply absolute top-full right-0 ml-4;
+        @apply absolute top-full right-0 ml-4 mt-2;
 
         @apply block w-full;
         /* Adicionei mt-2 para descolar do ícone */
@@ -122,7 +156,8 @@ @layer components {
     }
 
     .container {
-        @apply flex flex-col justify-center items-center w-full h-full mx-auto px-4 sm:px-6 lg:px-8;
+        /* Deixe APENAS as classes de largura, margem e padding */
+        @apply w-full mx-auto px-4 sm:px-6 lg:px-8 mt-10 mb-10;
     }
 
     .form-class {
@@ -141,4 +176,70 @@ @layer components {
     .container h1 {
         @apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
     }
+
+    /* Estilos para o card do cliente */
+    /* CONTAINER PRINCIPAL DO CARD */
+    .client-card {
+        /* Layout: Flex-col (vertical) */
+        @apply flex flex-col justify-between;
+        @apply hover:transition duration-150 ease-in-out hover:scale-120;
+
+        /* Estilo: Sombra, borda, fundo branco */
+        @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out;
+        @apply border border-gray-100;
+
+        /* Garante que o conteúdo não vaze */
+        @apply overflow-hidden;
+    }
+
+    /* O "RETÂNGULO" SUPERIOR (Avatar + Opções) */
+    .client-card-header {
+        /* 1. POSIÇÃO: 'relative' para ancorar o menu de opções */
+        @apply relative;
+
+        /* 2. LAYOUT: Centraliza o avatar */
+        @apply flex justify-center items-center;
+
+        /* 3. ESPAÇAMENTO: Padding interno */
+        @apply p-6;
+
+        /* 4. (Opcional) Fundo sutil para o retângulo */
+        @apply bg-gray-50;
+    }
+
+    /* AVATAR DO CLIENTE */
+    .client-avatar {
+        /* A imagem <img> interna já tem as classes de tamanho (w-32 h-32) */
+    }
+
+    /* MENU DE OPÇÕES (Três Pontinhos) */
+    .client-options-menu {
+        /* 1. POSIÇÃO: Flutua sobre o header */
+        @apply absolute top-4 right-4;
+    }
+
+    .client-options-button {
+        @apply p-2 rounded-full hover:bg-gray-200 transition-colors;
+        @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
+    }
+
+    /* LISTA DE OPÇÕES (Dropdown) */
+    .client-options-list {
+        @apply absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg py-1 z-10;
+        @apply divide-y divide-gray-100;
+    }
+
+    .client-option-item {
+        @apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-100 hover:text-blue-800 transition-colors;
+        @apply cursor-pointer;
+    }
+
+
+    /* NOME DO CLIENTE (Área inferior) */
+    .client-card-name {
+        @apply text-lg font-semibold text-gray-800 text-center;
+
+        /* Espaçamento e uma borda sutil no topo */
+        @apply p-4 border-t border-gray-100;
+    }
 }

resources/views/dashboard.blade.php

@@ -1,14 +1,391 @@
 @extends('layouts.app')
 
-
 @section('content')
 
     <h1>Dashboard</h1>
 
     <livewire:admin.create-user />
 
-    @foreach ($users as $user)
-        <h1> {{ $user->name }}</h1>
-    @endforeach
+    <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">
+                </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 1
+            </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 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 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 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 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 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 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 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 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 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 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

resources/views/layouts/app.blade.php

@@ -15,7 +15,8 @@
 
 </head>
 <header>
-    <nav class="nav-bar">
+    <nav class="nav-bar" x-data="{ scrolled: false }" x-init="scrolled = (window.scrollY > 50)"
+        @scroll.window="scrolled = (window.scrollY > 50)" :class="{ 'navbar-scrolled': scrolled }">
         @auth
             <div class="navbar-items">
                 <a href="{{ route('dashboard') }}">Início</a>
@@ -33,17 +34,20 @@
                 </form>
             </div>
 
-            <div x-data="{open: false}" x-on:click.outside="open = false" class="profile-menu max-w-12">
-                <a x-on:click="open = !open" class="cursor-pointer">
-                    <img class="w-15 h-15 rounded-full object-cover"
+            <div x-data="{open: false}" x-on:click.outside="open = false" class="profile-menu">
+
+                <a x-on:click="open = !open" class="cursor-pointer rounded-full overflow-hidden">
+
+                    <img class="object-cover w-full h-full rounded-full"
                         src="{{ Vite::asset('resources/images/avatar-nexus.svg') }}" alt="Avatar">
                 </a>
 
                 <ul class="profile-list-items" x-show="open">
+                    <h2 class="font-weight-bold text-center">Nexus</h2>
 
                     <li class="profile-items">
-                        <a href="" class="profile-link">
-                            Adicionar Clientes
+                        <a @click="$dispatch('open-create-user')" class="profile-link">
+                            Criar novo usuário
                         </a>
                     </li>
 

resources/views/livewire/admin/create-user.blade.php

@@ -1,7 +1,4 @@
-<div x-data="{ showModal: false }" x-on:create-user.window="showModal = false">
-    <button x-on:click="showModal = true" class="cursor-pointer px-4 py-2 bg-blue-600 text-white rounded ...">
-        Criar Novo Usuário
-    </button>
+<div x-data="{ showModal: false }" x-on:create-user.window="showModal = false" x-on:open-create-user.window="showModal = true">
 
     @if (session('message'))
         <div class="p-3 bg-green-100 text-green-700 rounded mb-4">

routes/web.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\AddClientController;
 use Illuminate\Support\Facades\Route;
 
 use App\Http\Controllers\UserController;
@@ -28,6 +29,8 @@
     Route::get('/create-users', function () {
         return view('users.create-users');
     })->name('users.create')->middleware('authorization');
+
+    Route::get('/add-client', [AddClientController::class, 'addClient']);
 });
 
 Route::controller(LoginController::class)->group(function () {