Compare commits
11 Commits
aecaef1509
...
b3ac0826aa
| Author | SHA1 | Date |
|---|---|---|
lukibeg
|
b3ac0826aa | |
|
lukibeg
|
607d6c3e25 | |
|
lukibeg
|
74ba08dd96 | |
|
lukibeg
|
bb782575fa | |
|
lukibeg
|
1996a7c33b | |
|
lukibeg
|
dde40993fe | |
|
lukibeg
|
42bb548599 | |
|
lukibeg
|
6d6749964e | |
|
lukibeg
|
b8dadb0292 | |
|
lukibeg
|
875f856660 | |
|
lukibeg
|
dcb9d796d1 |
|
|
@ -12,58 +12,39 @@ class AddClient extends Component
|
||||||
{
|
{
|
||||||
use WithFileUploads;
|
use WithFileUploads;
|
||||||
|
|
||||||
// 2. Declara as propriedades principais
|
// 1. Declara as propriedades principais
|
||||||
public ClientForm $form;
|
public ClientForm $form;
|
||||||
public $showModal = false;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ouve o evento para abrir o modal.
|
|
||||||
* Disparado por: wire:click="$dispatch('openAddClientModal')"
|
|
||||||
*/
|
|
||||||
#[On('openAddClientModal')]
|
|
||||||
public function openModal()
|
|
||||||
{
|
|
||||||
$this->form->reset(); // Limpa o formulário de dados antigos
|
|
||||||
$this->showModal = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fecha e limpa o modal.
|
|
||||||
*/
|
|
||||||
public function closeModal()
|
|
||||||
{
|
|
||||||
$this->showModal = false;
|
|
||||||
$this->form->reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Método principal chamado pelo wire:submit="save".
|
* Método principal chamado pelo wire:submit="save".
|
||||||
*/
|
*/
|
||||||
public function save()
|
public function save()
|
||||||
{
|
{
|
||||||
// 3. Valida os dados usando as 'rules' do ClientForm.php
|
|
||||||
|
|
||||||
|
// 2. Valida os dados usando as 'rules' do ClientForm.php
|
||||||
$this->form->validate();
|
$this->form->validate();
|
||||||
|
|
||||||
// 4. Pega todos os dados validados
|
try {
|
||||||
$data = $this->form->all();
|
$data = $this->form->all();
|
||||||
|
$data['name'] = $data['client_name'];
|
||||||
|
// 4. Lida com o upload do arquivo de imagem
|
||||||
|
if ($this->form->profile_image_path) {
|
||||||
|
$path = $this->form->profile_image_path->store('client_logos', 'public');
|
||||||
|
$data['profile_image_path'] = $path;
|
||||||
|
}
|
||||||
|
|
||||||
// 5. Lida com o upload do arquivo de imagem
|
// 5. Cria o cliente no banco de dados
|
||||||
if ($this->form->profile_image_path) {
|
Client::create($data);
|
||||||
$path = $this->form->profile_image_path->store('client_logos', 'public');
|
// 6. Despacha um evento para atualizar outros componentes (ex: o grid de clientes)
|
||||||
$data['profile_image_path'] = $path;
|
$this->dispatch('client-added');
|
||||||
|
// (Opcional) Envia uma notificação de sucesso
|
||||||
|
$this->dispatch('notify', message: 'Cliente adicionado com sucesso!');
|
||||||
|
} catch (\Exception $e) {
|
||||||
|
dd($e);
|
||||||
|
$this->dispatch('notify', message: 'Ocorreu um erro inesperado ao salvar.', type: 'error');
|
||||||
}
|
}
|
||||||
|
// 3. Pega todos os dados validados
|
||||||
|
|
||||||
// 6. Cria o cliente no banco de dados
|
|
||||||
Client::create($data);
|
|
||||||
|
|
||||||
// 7. Fecha o modal
|
|
||||||
$this->closeModal();
|
|
||||||
|
|
||||||
// 8. Despacha um evento para atualizar outros componentes (ex: o grid de clientes)
|
|
||||||
$this->dispatch('clientAdded');
|
|
||||||
|
|
||||||
// (Opcional) Envia uma notificação de sucesso
|
|
||||||
// $this->dispatch('notify', 'Cliente adicionado com sucesso!');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -73,4 +54,4 @@ public function render()
|
||||||
{
|
{
|
||||||
return view('livewire.admin.add-client');
|
return view('livewire.admin.add-client');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ class CreateUser extends Component
|
||||||
// Nota: Adicionei 'same:password' para garantir que as senhas batem.
|
// Nota: Adicionei 'same:password' para garantir que as senhas batem.
|
||||||
protected $rules = [
|
protected $rules = [
|
||||||
'name' => 'required|string|max:255',
|
'name' => 'required|string|max:255',
|
||||||
'email' => 'required|email',
|
'email' => 'required|email|unique:users,email',
|
||||||
'password' => 'required|string|min:8',
|
'password' => 'required|string|min:8',
|
||||||
'password_confirm' => 'required|string|same:password', // <-- Regra importante!
|
'password_confirm' => 'required|string|same:password', // <-- Regra importante!
|
||||||
'permission_level' => 'required|boolean' // ou 'required|in:0,1'
|
'permission_level' => 'required|boolean' // ou 'required|in:0,1'
|
||||||
|
|
@ -28,6 +28,7 @@ class CreateUser extends Component
|
||||||
protected $messages = [
|
protected $messages = [
|
||||||
'name' => 'Nome precisa ser informado.',
|
'name' => 'Nome precisa ser informado.',
|
||||||
'email' => 'O email precisa ser informado.',
|
'email' => 'O email precisa ser informado.',
|
||||||
|
'email.unique' => 'O email informado já foi cadastrado anteriormente.',
|
||||||
'password' => 'A senha precisa ter 8 ou mais caracteres.',
|
'password' => 'A senha precisa ter 8 ou mais caracteres.',
|
||||||
'password_confirm' => 'As senhas não coincidem.',
|
'password_confirm' => 'As senhas não coincidem.',
|
||||||
'permission_level' => 'Defina o nível de autorização do usuário.'
|
'permission_level' => 'Defina o nível de autorização do usuário.'
|
||||||
|
|
@ -59,7 +60,8 @@ public function createUser(UserService $userService)
|
||||||
$this->dispatch('user-created');
|
$this->dispatch('user-created');
|
||||||
|
|
||||||
// Envia a mesma mensagem de sucesso do seu controller
|
// Envia a mesma mensagem de sucesso do seu controller
|
||||||
session()->flash('message', 'Usuário cadastrado com sucesso!');
|
$this->dispatch('notify', message: 'Usuário cadastrado com sucesso!');
|
||||||
|
|
||||||
|
|
||||||
// (Opcional) Se sua tabela de usuários for outro componente Livewire,
|
// (Opcional) Se sua tabela de usuários for outro componente Livewire,
|
||||||
// você pode mandar ela atualizar assim:
|
// você pode mandar ela atualizar assim:
|
||||||
|
|
@ -70,9 +72,6 @@ public function createUser(UserService $userService)
|
||||||
// 7. O "Erro" (Tradução do Redirect de Erro)
|
// 7. O "Erro" (Tradução do Redirect de Erro)
|
||||||
// Em vez de redirecionar, adicionamos o erro ao formulário
|
// Em vez de redirecionar, adicionamos o erro ao formulário
|
||||||
// para que o usuário veja na tela, sem refresh.
|
// para que o usuário veja na tela, sem refresh.
|
||||||
if ($e->getMessage() == 'O e-mail já está cadastrado.') {
|
|
||||||
$this->addError('email', $e->getMessage());
|
|
||||||
}
|
|
||||||
|
|
||||||
$this->addError('general', $e->getMessage());
|
$this->addError('general', $e->getMessage());
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
class ClientForm extends Form
|
class ClientForm extends Form
|
||||||
{
|
{
|
||||||
// 2. ATRIBUTOS REMOVIDOS: Os #[Rule(...)] foram removidos daqui
|
// 2. ATRIBUTOS REMOVIDOS: Os #[Rule(...)] foram removidos daqui
|
||||||
public $name = '';
|
public $client_name = '';
|
||||||
public $legal_name = '';
|
public $legal_name = '';
|
||||||
public $cnpj = '';
|
public $cnpj = '';
|
||||||
public $profile_image_path;
|
public $profile_image_path;
|
||||||
|
|
@ -26,7 +26,7 @@ class ClientForm extends Form
|
||||||
public $whatsapp_activation_date;
|
public $whatsapp_activation_date;
|
||||||
|
|
||||||
// Método para preencher o formulário (para edição futura)
|
// Método para preencher o formulário (para edição futura)
|
||||||
public function addClient(Client $client)
|
public function addClient(Client $client)
|
||||||
{
|
{
|
||||||
$data = $client->toArray();
|
$data = $client->toArray();
|
||||||
$data['has_call_center'] = (bool) $client->has_call_center;
|
$data['has_call_center'] = (bool) $client->has_call_center;
|
||||||
|
|
@ -43,11 +43,10 @@ public function addClient(Client $client)
|
||||||
public function rules()
|
public function rules()
|
||||||
{
|
{
|
||||||
return [
|
return [
|
||||||
'name' => 'required|string|max:255',
|
'client_name' => 'required|string|max:255',
|
||||||
'legal_name' => 'nullable|string|max:255',
|
'legal_name' => 'required|string|max:255',
|
||||||
'cnpj' => 'nullable|string|max:20',
|
'cnpj' => 'required|string|max:20|unique:clients,cnpj',
|
||||||
'profile_image_path' => 'nullable|image|max:2048', // 2MB Max
|
'profile_image_path' => 'nullable|file|mimes:jpeg,png,bmp,gif,svg,webp|max:2048', // 2MB Max 'pbx_hosting' => 'nullable|string|max:255',
|
||||||
'pbx_hosting' => 'nullable|string|max:255',
|
|
||||||
'activation_date' => 'nullable|date',
|
'activation_date' => 'nullable|date',
|
||||||
'carrier' => 'nullable|string|max:255',
|
'carrier' => 'nullable|string|max:255',
|
||||||
'access_type' => 'nullable|string|max:255',
|
'access_type' => 'nullable|string|max:255',
|
||||||
|
|
@ -69,8 +68,10 @@ public function rules()
|
||||||
public function messages()
|
public function messages()
|
||||||
{
|
{
|
||||||
return [
|
return [
|
||||||
'name.required' => 'O campo Nome Fantasia é obrigatório.',
|
'client_name.required' => 'O campo Nome Fantasia é obrigatório.',
|
||||||
'name.max' => 'O Nome Fantasia não pode ter mais que 255 caracteres.',
|
'client_name.max' => 'O Nome Fantasia não pode ter mais que 255 caracteres.',
|
||||||
|
|
||||||
|
'cnpj.unique' => 'Este CNPJ já está cadastrado em outro cliente.',
|
||||||
|
|
||||||
'profile_image_path.image' => 'O arquivo deve ser uma imagem válida (jpg, png, etc.).',
|
'profile_image_path.image' => 'O arquivo deve ser uma imagem válida (jpg, png, etc.).',
|
||||||
'profile_image_path.max' => 'A imagem não pode ser maior que 2MB.',
|
'profile_image_path.max' => 'A imagem não pode ser maior que 2MB.',
|
||||||
|
|
@ -10,7 +10,8 @@ class ClientService
|
||||||
{
|
{
|
||||||
|
|
||||||
public function __construct(protected Client $client) {}
|
public function __construct(protected Client $client) {}
|
||||||
public function addClient($client) {
|
public function addClient(array $client)
|
||||||
|
{
|
||||||
return Client::create($client);
|
return Client::create($client);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,10 +11,6 @@ class UserService
|
||||||
public function __construct(protected User $user) {}
|
public function __construct(protected User $user) {}
|
||||||
public function createUser(array $user)
|
public function createUser(array $user)
|
||||||
{
|
{
|
||||||
if (User::where('email', '=', $user['email'])) {
|
|
||||||
throw new \Exception('O e-mail já está cadastrado.');
|
|
||||||
}
|
|
||||||
|
|
||||||
return User::create($user);
|
return User::create($user);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\View\Components;
|
||||||
|
|
||||||
|
use Closure;
|
||||||
|
use Illuminate\View\Component;
|
||||||
|
use Illuminate\Contracts\View\View;
|
||||||
|
|
||||||
|
class FlashMessages 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.flash-messages');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,12 @@
|
||||||
@source '../**/*.blade.php';
|
@source '../**/*.blade.php';
|
||||||
@source '../**/*.js';
|
@source '../**/*.js';
|
||||||
|
|
||||||
|
@import './toast.css';
|
||||||
|
@import './client-form.css';
|
||||||
|
@import './user-form-modal.css';
|
||||||
|
@import './header.css';
|
||||||
|
@import './client-cards.css';
|
||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||||
|
|
@ -43,125 +49,6 @@ @layer components {
|
||||||
|
|
||||||
/*End body */
|
/*End body */
|
||||||
|
|
||||||
/* Header - Navbar */
|
|
||||||
.nav-bar {
|
|
||||||
@apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10;
|
|
||||||
|
|
||||||
/* REMOVIDO: @apply relative; */
|
|
||||||
|
|
||||||
/* 1. ADICIONADO: 'top-0 left-0' para "colar" no topo */
|
|
||||||
@apply fixed top-0 left-0 z-50 w-full;
|
|
||||||
@apply bg-transparent text-black;
|
|
||||||
@apply border-b border-transparent;
|
|
||||||
@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,
|
|
||||||
.nav-bar>.navbar-items>a {
|
|
||||||
@apply transition-all duration-300 transform hover:scale-105;
|
|
||||||
@apply mr-7;
|
|
||||||
@apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-bar-logo {
|
|
||||||
/* Garante que a largura não ultrapasse 100% */
|
|
||||||
@apply rounded-md max-w-25 mr-10;
|
|
||||||
height: auto;
|
|
||||||
/* Altura proporcional à largura */
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-items {
|
|
||||||
@apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 mt-2;
|
|
||||||
|
|
||||||
@apply block w-full;
|
|
||||||
/* Adicionei mt-2 para descolar do ícone */
|
|
||||||
|
|
||||||
/* 2. Largura Fixa (Mais limpo) */
|
|
||||||
@apply w-56;
|
|
||||||
|
|
||||||
/* 3. Estilos do Contêiner (Profissional) */
|
|
||||||
@apply bg-white p-2 rounded-md shadow-xl;
|
|
||||||
/* Sombra mais forte */
|
|
||||||
@apply border border-gray-200;
|
|
||||||
|
|
||||||
/* 4. Divisórias Sutis entre os <li> */
|
|
||||||
@apply divide-y divide-gray-100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-link {
|
|
||||||
/* Você pode aplicar isso direto no <a> */
|
|
||||||
/* 1. FAZ O LINK PREENCHER O <li> */
|
|
||||||
@apply block w-full;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-items {
|
|
||||||
/* 1. Limpeza (Classes antigas removidas) */
|
|
||||||
|
|
||||||
/* 2. Espaçamento Interno (Respiro) */
|
|
||||||
@apply px-4 py-2;
|
|
||||||
|
|
||||||
/* 3. Estilos de Texto */
|
|
||||||
@apply text-sm text-gray-700;
|
|
||||||
|
|
||||||
/* 4. Interatividade */
|
|
||||||
@apply hover:bg-blue-100 cursor-pointer;
|
|
||||||
|
|
||||||
/* 5. Transição Suave */
|
|
||||||
@apply transition-colors duration-150 ease-in-out;
|
|
||||||
|
|
||||||
/* 6. Cantos do Hover */
|
|
||||||
@apply rounded-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-bar-logo img {
|
|
||||||
@apply w-full;
|
|
||||||
/* Largura 100% para se ajustar ao container */
|
|
||||||
height: auto;
|
|
||||||
/* Mantém a proporção original da imagem */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-bar>.navbar-items>form>button {
|
|
||||||
@apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*End Header - Navbar */
|
|
||||||
|
|
||||||
/* Container */
|
/* Container */
|
||||||
.container-title {
|
.container-title {
|
||||||
|
|
@ -206,71 +93,4 @@ @layer components {
|
||||||
|
|
||||||
.container h1 {
|
.container h1 {
|
||||||
@apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
|
@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-110;
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
@layer components {
|
||||||
|
|
||||||
|
/* 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-110;
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,375 @@
|
||||||
|
@layer components {
|
||||||
|
|
||||||
|
|
||||||
|
/* ================================================================== */
|
||||||
|
/* Estilos do Formulário do Modal (Slide-Over) - Versão Aprimorada */
|
||||||
|
/* ================================================================== */
|
||||||
|
|
||||||
|
/* Define o layout de duas colunas com gap responsivo */
|
||||||
|
.form-grid-container {
|
||||||
|
@apply lg:grid lg:grid-cols-3 lg:gap-8;
|
||||||
|
animation: fadeIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Coluna principal que ocupa 2/3 do espaço */
|
||||||
|
.form-main-panel-modal {
|
||||||
|
@apply lg:col-span-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Coluna da sidebar que ocupa 1/3 do espaço */
|
||||||
|
.form-sidebar-column {
|
||||||
|
@apply lg:col-span-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Faz a sidebar "grudar" no topo ao rolar a página com transição suave */
|
||||||
|
.form-sticky-sidebar-modal {
|
||||||
|
@apply lg:sticky lg:top-6;
|
||||||
|
transition: top 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Wrapper principal dentro do modal com padding otimizado */
|
||||||
|
.form-wrapper-modal {
|
||||||
|
@apply flex-1 px-4 py-6 sm:px-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bloco de um grupo de campos com espaçamento melhorado */
|
||||||
|
.form-group {
|
||||||
|
@apply py-5;
|
||||||
|
animation: slideInUp 0.4s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Título de uma seção com melhor hierarquia visual */
|
||||||
|
.form-section-title {
|
||||||
|
@apply text-base font-semibold leading-6 text-gray-900 text-gray-100;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Divisor com gradiente azul-roxo inspirado na imagem */
|
||||||
|
.form-divider {
|
||||||
|
@apply my-4;
|
||||||
|
background: linear-gradient(to right, transparent, #5bb5f0, #a8a3e8, transparent);
|
||||||
|
height: 1px;
|
||||||
|
border: none;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card com borda azul suave */
|
||||||
|
.form-section-card {
|
||||||
|
@apply rounded-lg p-4;
|
||||||
|
border: 1px solid #e3f2fd;
|
||||||
|
background: linear-gradient(135deg, #f8fbff 0%, #f5f8ff 100%);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section-card:hover {
|
||||||
|
border-color: #bbdefb;
|
||||||
|
box-shadow: 0 2px 8px rgba(91, 181, 240, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode para card */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.form-section-card {
|
||||||
|
background: linear-gradient(135deg, rgba(91, 181, 240, 0.05) 0%, rgba(168, 163, 232, 0.05) 100%);
|
||||||
|
border-color: rgba(91, 181, 240, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section-card:hover {
|
||||||
|
border-color: rgba(91, 181, 240, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================================================== */
|
||||||
|
/* Estilos dos Campos de Formulário */
|
||||||
|
/* ================================================================== */
|
||||||
|
|
||||||
|
/* Rótulo (Label) padrão dos campos com melhor contraste */
|
||||||
|
.form-label {
|
||||||
|
/* Ajustado para texto mais escuro e melhor contraste */
|
||||||
|
@apply block text-sm font-medium leading-6 text-gray-700 text-gray-300 mb-2;
|
||||||
|
transition: color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input com cores do tema azul-roxo */
|
||||||
|
.form-input {
|
||||||
|
/* Campos agora são brancos/claros com texto escuro para melhor contraste */
|
||||||
|
@apply block w-full rounded-md border-0 py-2 px-3 text-gray-900 text-gray-400 shadow-sm placeholder:text-gray-400 placeholder:text-gray-500 sm:text-sm sm:leading-6;
|
||||||
|
background-color: #ffffff;
|
||||||
|
ring-color: #bbdefb;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="date"] {
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:focus {
|
||||||
|
outline: none;
|
||||||
|
ring-width: 2px;
|
||||||
|
ring-color: #5bb5f0;
|
||||||
|
box-shadow: 0 0 0 3px rgba(91, 181, 240, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:hover:not(:focus) {
|
||||||
|
ring-color: #90caf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.form-input {
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
ring-color: rgba(91, 181, 240, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:focus {
|
||||||
|
ring-color: #5bb5f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:hover:not(:focus) {
|
||||||
|
ring-color: rgba(91, 181, 240, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input de arquivo com tema azul-roxo */
|
||||||
|
.form-file-input {
|
||||||
|
@apply block w-full text-sm text-gray-900 rounded-lg cursor-pointer bg-gray-50;
|
||||||
|
border: 1px solid #bbdefb;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-file-input::file-selector-button {
|
||||||
|
margin-right: 1rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.5rem 0 0 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
|
||||||
|
color: #1976d2;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-file-input:hover::file-selector-button {
|
||||||
|
background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-file-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #5bb5f0;
|
||||||
|
box-shadow: 0 0 0 2px rgba(91, 181, 240, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.form-file-input {
|
||||||
|
border-color: rgba(91, 181, 240, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-file-input::file-selector-button {
|
||||||
|
background: linear-gradient(135deg, rgba(91, 181, 240, 0.15) 0%, rgba(168, 163, 232, 0.15) 100%);
|
||||||
|
color: #90caf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-file-input:hover::file-selector-button {
|
||||||
|
background: linear-gradient(135deg, rgba(91, 181, 240, 0.25) 0%, rgba(168, 163, 232, 0.25) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grupo de checkboxes com melhor espaçamento */
|
||||||
|
.form-checkbox-group {
|
||||||
|
@apply space-y-3 mt-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Item individual do checkbox com hover suave */
|
||||||
|
.form-checkbox-item {
|
||||||
|
@apply flex items-center gap-x-3 p-2 rounded-md;
|
||||||
|
transition: background-color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-checkbox-item:hover {
|
||||||
|
background-color: rgba(91, 181, 240, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.form-checkbox-item:hover {
|
||||||
|
background-color: rgba(91, 181, 240, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checkbox com cores azul-roxo */
|
||||||
|
.form-checkbox {
|
||||||
|
@apply h-4 w-4 rounded cursor-pointer;
|
||||||
|
border: 2px solid #90caf9;
|
||||||
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
accent-color: #5bb5f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-checkbox:checked {
|
||||||
|
background-color: #5bb5f0;
|
||||||
|
border-color: #5bb5f0;
|
||||||
|
animation: checkboxPop 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-checkbox:hover {
|
||||||
|
border-color: #5bb5f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-checkbox:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px rgba(91, 181, 240, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.form-checkbox {
|
||||||
|
border-color: rgba(91, 181, 240, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================================================== */
|
||||||
|
/* Estilos dos Botões do Modal */
|
||||||
|
/* ================================================================== */
|
||||||
|
|
||||||
|
/* Botão Primário com gradiente azul-roxo */
|
||||||
|
.form-button-primary {
|
||||||
|
@apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-semibold text-white shadow-sm;
|
||||||
|
background: linear-gradient(135deg, #5bb5f0 0%, #2e9ae5 50%, #a8a3e8 100%);
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-primary::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-primary:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(91, 181, 240, 0.4);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-primary:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-primary:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: 0 2px 8px rgba(91, 181, 240, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-primary:focus-visible {
|
||||||
|
outline: 2px solid #5bb5f0;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-primary:disabled {
|
||||||
|
background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%);
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Botão Secundário com borda azul */
|
||||||
|
.form-button-secondary {
|
||||||
|
@apply rounded-md bg-white bg-gray-800 px-4 py-2 text-sm font-semibold text-gray-900 text-gray-100 shadow-sm;
|
||||||
|
border: 1px solid #bbdefb;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-secondary:hover {
|
||||||
|
background: linear-gradient(135deg, #f8fbff 0%, #f5f8ff 100%);
|
||||||
|
border-color: #5bb5f0;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 8px rgba(91, 181, 240, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-secondary:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: 0 2px 4px rgba(91, 181, 240, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-secondary:focus-visible {
|
||||||
|
outline: 2px solid #5bb5f0;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.form-button-secondary {
|
||||||
|
border-color: rgba(91, 181, 240, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button-secondary:hover {
|
||||||
|
background: linear-gradient(135deg, rgba(91, 181, 240, 0.05) 0%, rgba(168, 163, 232, 0.05) 100%);
|
||||||
|
border-color: #5bb5f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================================================== */
|
||||||
|
/* Animações */
|
||||||
|
/* ================================================================== */
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes checkboxPop {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================================================================== */
|
||||||
|
/* Estados de Validação */
|
||||||
|
/* ================================================================== */
|
||||||
|
|
||||||
|
.form-input.is-invalid {
|
||||||
|
ring-color: #ef5350;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input.is-valid {
|
||||||
|
ring-color: #66bb6a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-error-message {
|
||||||
|
@apply mt-2 text-sm;
|
||||||
|
color: #ef5350;
|
||||||
|
animation: slideInUp 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-helper-text {
|
||||||
|
@apply mt-2 text-sm text-gray-500 text-gray-400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
@layer components {
|
||||||
|
|
||||||
|
/* Header - Navbar */
|
||||||
|
.nav-bar {
|
||||||
|
@apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10;
|
||||||
|
|
||||||
|
/* REMOVIDO: @apply relative; */
|
||||||
|
|
||||||
|
/* 1. ADICIONADO: 'top-0 left-0' para "colar" no topo */
|
||||||
|
@apply fixed top-0 left-0 z-50 w-full;
|
||||||
|
@apply bg-transparent text-black;
|
||||||
|
@apply border-b border-transparent;
|
||||||
|
@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,
|
||||||
|
.nav-bar>.navbar-items>a {
|
||||||
|
@apply transition-all duration-300 transform hover:scale-105;
|
||||||
|
@apply mr-7;
|
||||||
|
@apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar-logo {
|
||||||
|
/* Garante que a largura não ultrapasse 100% */
|
||||||
|
@apply rounded-md max-w-25 mr-10;
|
||||||
|
height: auto;
|
||||||
|
/* Altura proporcional à largura */
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-items {
|
||||||
|
@apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 mt-2;
|
||||||
|
|
||||||
|
@apply block w-full;
|
||||||
|
/* Adicionei mt-2 para descolar do ícone */
|
||||||
|
|
||||||
|
/* 2. Largura Fixa (Mais limpo) */
|
||||||
|
@apply w-56;
|
||||||
|
|
||||||
|
/* 3. Estilos do Contêiner (Profissional) */
|
||||||
|
@apply bg-white p-2 rounded-md shadow-xl;
|
||||||
|
/* Sombra mais forte */
|
||||||
|
@apply border border-gray-200;
|
||||||
|
|
||||||
|
/* 4. Divisórias Sutis entre os <li> */
|
||||||
|
@apply divide-y divide-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-link {
|
||||||
|
/* Você pode aplicar isso direto no <a> */
|
||||||
|
/* 1. FAZ O LINK PREENCHER O <li> */
|
||||||
|
@apply block w-full;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-items {
|
||||||
|
/* 1. Limpeza (Classes antigas removidas) */
|
||||||
|
|
||||||
|
/* 2. Espaçamento Interno (Respiro) */
|
||||||
|
@apply px-4 py-2;
|
||||||
|
|
||||||
|
/* 3. Estilos de Texto */
|
||||||
|
@apply text-sm text-gray-700;
|
||||||
|
|
||||||
|
/* 4. Interatividade */
|
||||||
|
@apply hover:bg-blue-100 cursor-pointer;
|
||||||
|
|
||||||
|
/* 5. Transição Suave */
|
||||||
|
@apply transition-colors duration-150 ease-in-out;
|
||||||
|
|
||||||
|
/* 6. Cantos do Hover */
|
||||||
|
@apply rounded-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar-logo img {
|
||||||
|
@apply w-full;
|
||||||
|
/* Largura 100% para se ajustar ao container */
|
||||||
|
height: auto;
|
||||||
|
/* Mantém a proporção original da imagem */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar>.navbar-items>form>button {
|
||||||
|
@apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*End Header - Navbar */
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
@layer components {
|
||||||
|
/* ================================================================== */
|
||||||
|
/* Estilos Aprimorados do Componente TOAST */
|
||||||
|
/* resources/css/toast.css */
|
||||||
|
/* ================================================================== */
|
||||||
|
|
||||||
|
.toast-card {
|
||||||
|
@apply pointer-events-auto flex w-full max-w-sm items-start gap-x-3.5 rounded-xl bg-white shadow-xl ring-1 ring-black/5;
|
||||||
|
animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-card:hover {
|
||||||
|
@apply shadow-2xl ring-black/10;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes toast-slide-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilo do Toast de Sucesso (Verde) */
|
||||||
|
.toast-success {
|
||||||
|
@apply p-4 relative overflow-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success::before {
|
||||||
|
content: "";
|
||||||
|
@apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-green-400 to-green-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success .toast-icon-success {
|
||||||
|
@apply flex-shrink-0 text-green-600 transition-transform duration-200;
|
||||||
|
filter: drop-shadow(0 2px 4px rgb(34 197 94 / 0.2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success:hover .toast-icon-success {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success .toast-message {
|
||||||
|
@apply w-0 flex-1 text-sm font-semibold text-gray-900 leading-relaxed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success .toast-close-button {
|
||||||
|
@apply inline-flex flex-shrink-0 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-200;
|
||||||
|
padding: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success .toast-close-button:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilo do Toast de Erro (Vermelho) */
|
||||||
|
.toast-error {
|
||||||
|
@apply p-4 relative overflow-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error::before {
|
||||||
|
content: "";
|
||||||
|
@apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-red-400 to-red-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error .toast-icon-error {
|
||||||
|
@apply flex-shrink-0 text-red-600 transition-transform duration-200;
|
||||||
|
filter: drop-shadow(0 2px 4px rgb(239 68 68 / 0.2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error:hover .toast-icon-error {
|
||||||
|
transform: scale(1.1) rotate(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error .toast-message {
|
||||||
|
@apply w-0 flex-1 text-sm font-semibold text-gray-900 leading-relaxed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error .toast-close-button {
|
||||||
|
@apply inline-flex flex-shrink-0 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200;
|
||||||
|
padding: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error .toast-close-button:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animação de saída */
|
||||||
|
.toast-exit {
|
||||||
|
animation: toast-slide-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes toast-slide-out {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Variantes Adicionais (Opcional) */
|
||||||
|
.toast-info {
|
||||||
|
@apply p-4 relative overflow-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-info::before {
|
||||||
|
content: "";
|
||||||
|
@apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-400 to-blue-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-warning {
|
||||||
|
@apply p-4 relative overflow-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-warning::before {
|
||||||
|
content: "";
|
||||||
|
@apply absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-amber-400 to-amber-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode Support */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.toast-card {
|
||||||
|
@apply bg-white ring-black/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success .toast-message,
|
||||||
|
.toast-error .toast-message {
|
||||||
|
@apply text-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-success .toast-close-button {
|
||||||
|
@apply bg-blue-900/30 text-blue-400 hover:bg-blue-900/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error .toast-close-button {
|
||||||
|
@apply bg-red-900/30 text-red-400 hover:bg-red-900/50;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
@layer components {
|
||||||
|
|
||||||
|
/* Modal Overlay */
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 50;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: rgba(255, 255, 255, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Container */
|
||||||
|
.modal-container {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 32rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Titles */
|
||||||
|
.modal-title {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms */
|
||||||
|
.form-wrapper {
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inputs */
|
||||||
|
.form-input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
border: 2px solid #e5e7eb;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:hover,
|
||||||
|
.form-input:focus {
|
||||||
|
border-color: #93c5fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Labels */
|
||||||
|
.form-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Errors */
|
||||||
|
.error-text {
|
||||||
|
color: #ef4444;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-box {
|
||||||
|
padding: 0.75rem;
|
||||||
|
background-color: #fee2e2;
|
||||||
|
color: #b91c1c;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn-cancel {
|
||||||
|
background-color: #e5e7eb;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-submit {
|
||||||
|
background-color: #2563eb;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Select Component */
|
||||||
|
.select-wrapper {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-button {
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 10rem;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: 0.5rem 2.5rem 0.5rem 0.75rem;
|
||||||
|
text-align: left;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.5rem;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-svg {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-options {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 15rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-option {
|
||||||
|
padding: 0.5rem 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-option:hover {
|
||||||
|
background-color: #dbeafe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-option {
|
||||||
|
background-color: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<div x-data="{
|
||||||
|
toasts: [],
|
||||||
|
addToast(message, type = 'success') {
|
||||||
|
let id = Date.now();
|
||||||
|
this.toasts.push({ id, message, type });
|
||||||
|
|
||||||
|
// Remove o toast após 3 segundos
|
||||||
|
setTimeout(() => this.removeToast(id), 7000);
|
||||||
|
},
|
||||||
|
removeToast(id) {
|
||||||
|
this.toasts = this.toasts.filter(toast => toast.id !== id);
|
||||||
|
}
|
||||||
|
}" @notify.window="addToast($event.detail.message, $event.detail.type || 'success')"
|
||||||
|
@notifyError.window="addToast($event.detail.message, $event.detail.type || 'error')"
|
||||||
|
class="fixed top-5 right-5 z-50 flex w-full max-w-xs flex-col space-y-3">
|
||||||
|
<template x-for="toast in toasts" :key="toast.id">
|
||||||
|
<div x-show="true" x-transition:enter="transform ease-out duration-300 transition"
|
||||||
|
x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
||||||
|
x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
|
||||||
|
x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100"
|
||||||
|
x-transition:leave-end="opacity-0" class="toast-card"
|
||||||
|
:class="{ 'toast-success': toast.type === 'success', 'toast-error': toast.type === 'error' }">
|
||||||
|
<div x-show="toast.type === 'success'" class="toast-icon-success">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div x-show="toast.type === 'error'" class="toast-icon-error">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
|
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="toast-message" x-text="toast.message"></p>
|
||||||
|
|
||||||
|
<button @click="removeToast(toast.id)" class="toast-close-button">
|
||||||
|
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path
|
||||||
|
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<livewire:admin.create-user />
|
<livewire:admin.create-user />
|
||||||
|
<livewire:admin.add-client />
|
||||||
|
|
||||||
<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">
|
||||||
|
|
||||||
|
|
@ -114,280 +114,6 @@ class="w-32 h-32 rounded-full object-cover">
|
||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
|
|
||||||
|
|
||||||
<livewire:admin.add-client />
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -63,6 +63,12 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<li class="profile-items">
|
||||||
|
<a @click="$dispatch('open-add-client')" class="profile-link">
|
||||||
|
Adicionar clientes
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@endauth
|
@endauth
|
||||||
|
|
@ -73,6 +79,9 @@
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<!--Apresenta mensagens em formato de toasts -->
|
||||||
|
<x-flash-messages />
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@yield('content')
|
@yield('content')
|
||||||
@livewireScripts
|
@livewireScripts
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,31 @@
|
||||||
<div x-data="{ showModal: @entangle('showModal') }"
|
<div x-data="{ showClientModal: false }" x-cloak @keydown.escape.window="showClientModal = false"
|
||||||
x-cloak
|
x-on:open-add-client.window="showClientModal = true" x-on:client-added.window="showClientModal = false"
|
||||||
@keydown.escape.window="showModal = false"
|
class="relative z-50">
|
||||||
class="relative z-50">
|
|
||||||
|
|
||||||
<div x-show="showModal"
|
<div x-show="showClientModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
|
||||||
x-transition:enter="ease-out duration-300"
|
x-transition:enter-end="opacity-25" x-transition:leave="ease-in duration-200"
|
||||||
x-transition:enter-start="opacity-0"
|
x-transition:leave-start="opacity-0" x-transition:leave-end="opacity-0"
|
||||||
x-transition:enter-end="opacity-100"
|
class="fixed inset-0 bg-white/50 transition-opacity"></div>
|
||||||
x-transition:leave="ease-in duration-200"
|
|
||||||
x-transition:leave-start="opacity-100"
|
<div x-show="showClientModal" x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500"
|
||||||
x-transition:leave-end="opacity-0"
|
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
|
||||||
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
|
x-transition:leave="transform transition ease-in-out duration-300 sm:duration-500"
|
||||||
|
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
|
||||||
|
class="fixed inset-y-0 right-0 flex max-w-full pl-10" @click.away="showClientModal = false">
|
||||||
|
<div class="w-screen max-w-3xl">
|
||||||
|
|
||||||
<div x-show="showModal"
|
|
||||||
x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500"
|
|
||||||
x-transition:enter-start="translate-x-full"
|
|
||||||
x-transition:enter-end="translate-x-0"
|
|
||||||
x-transition:leave="transform transition ease-in-out duration-300 sm:duration-500"
|
|
||||||
x-transition:leave-start="translate-x-0"
|
|
||||||
x-transition:leave-end="translate-x-full"
|
|
||||||
class="fixed inset-y-0 right-0 flex max-w-full pl-10"
|
|
||||||
@click.away="showModal = false"> <div class="w-screen max-w-3xl">
|
|
||||||
|
|
||||||
<form wire:submit="save" class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
|
<form wire:submit="save" class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
|
||||||
|
|
||||||
<div class="bg-blue-600 px-4 py-6 sm:px-6">
|
<div class="bg-white px-4 py-6 sm:px-6">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h2 class="text-lg font-semibold leading-6 text-white" id="slide-over-title">
|
<h2 class="text-lg font-semibold leading-6 text-black" id="slide-over-title">
|
||||||
Adicionar Novo Cliente
|
Adicionar Novo Cliente
|
||||||
</h2>
|
</h2>
|
||||||
<button type="button" @click="showModal = false"
|
<button type="button" @click="showClientModal = false"
|
||||||
class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
|
class="rounded-md text-blue-200 hover:text-white cursor-pointer focus:outline-none focus:ring-2 focus:ring-white">
|
||||||
<span class="sr-only">Fechar painel</span>
|
<span class="sr-only">Fechar painel</span>
|
||||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
<svg class="h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -41,37 +34,46 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
||||||
|
|
||||||
<div class="form-wrapper-modal">
|
<div class="form-wrapper-modal">
|
||||||
<div class="form-grid-container">
|
<div class="form-grid-container">
|
||||||
|
|
||||||
<div class="form-main-panel-modal">
|
<div class="form-main-panel-modal">
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<h2 class="form-section-title">Informações Principais</h2>
|
<h2 class="form-section-title">Informações Principais</h2>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label for="name" class="form-label">Nome Fantasia</label>
|
<label for="client_name" class="form-label">Nome Fantasia *</label>
|
||||||
<input type="text" wire:model="form.name" id="name" class="form-input">
|
<input type="text" wire:model="form.client_name" id="client_name"
|
||||||
@error('form.name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
class="form-input">
|
||||||
|
@error('form.client_name') <span
|
||||||
|
class="text-red-500 text-sm">{{ $message }}</span>
|
||||||
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="legal_name" class="form-label">Razão Social</label>
|
<label for="legal_name" class="form-label">Razão Social *</label>
|
||||||
<input type="text" wire:model="form.legal_name" id="legal_name" class="form-input">
|
<input type="text" wire:model="form.legal_name" id="legal_name"
|
||||||
@error('form.legal_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
class="form-input">
|
||||||
|
@error('form.legal_name') <span
|
||||||
|
class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<label for="cnpj" class="form-label">CNPJ</label>
|
<label for="cnpj" class="form-label">CNPJ *</label>
|
||||||
<input type="text" wire:model="form.cnpj" id="cnpj" class="form-input">
|
<input type="text" wire:model="form.cnpj" id="cnpj" class="form-input">
|
||||||
@error('form.cnpj') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
@error('form.cnpj') <span class="text-red-500 text-sm">{{ $message }}</span>
|
||||||
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<label for="profile_image_path" class="form-label">Logo do Cliente</label>
|
<label for="profile_image_path" class="form-label">Logo do Cliente</label>
|
||||||
<input type="file" wire:model="form.profile_image_path" id="profile_image_path" class="form-file-input">
|
<input type="file" wire:model="form.profile_image_path" id="profile_image_path"
|
||||||
|
class="form-file-input">
|
||||||
<div wire:loading wire:target="form.profile_image_path" class="text-sm text-blue-600 mt-1">
|
|
||||||
|
<div wire:loading wire:target="form.profile_image_path"
|
||||||
|
class="text-sm text-blue-600 mt-1">
|
||||||
Enviando...
|
Enviando...
|
||||||
</div>
|
</div>
|
||||||
@error('form.profile_image_path') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
@error('form.profile_image_path') <span
|
||||||
|
class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -82,11 +84,13 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label for="pbx_hosting" class="form-label">Hospedagem PBX</label>
|
<label for="pbx_hosting" class="form-label">Hospedagem PBX</label>
|
||||||
<input type="text" wire:model="form.pbx_hosting" id="pbx_hosting" class="form-input" placeholder="Ex: Vultr, Local, AWS">
|
<input type="text" wire:model="form.pbx_hosting" id="pbx_hosting"
|
||||||
|
class="form-input" placeholder="Ex: Vultr, Local, AWS">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="activation_date" class="form-label">Data de Ativação</label>
|
<label for="activation_date" class="form-label">Data de Ativação</label>
|
||||||
<input type="date" wire:model="form.activation_date" id="activation_date" class="form-input">
|
<input type="date" wire:model="form.activation_date" id="activation_date"
|
||||||
|
class="form-input">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="carrier" class="form-label">Operadora</label>
|
<label for="carrier" class="form-label">Operadora</label>
|
||||||
|
|
@ -94,20 +98,24 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="access_type" class="form-label">Tipo de Acesso</label>
|
<label for="access_type" class="form-label">Tipo de Acesso</label>
|
||||||
<input type="text" wire:model="form.access_type" id="access_type" class.="form-input" placeholder="Ex: SSH, AnyDesk, VPN">
|
<input type="text" wire:model="form.access_type" id="access_type"
|
||||||
|
class.="form-input" placeholder="Ex: SSH, AnyDesk, VPN">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="server_ip" class="form-label">IP do Servidor</label>
|
<label for="server_ip" class="form-label">IP do Servidor</label>
|
||||||
<input type="text" wire:model="form.server_ip" id="server_ip" class="form-input">
|
<input type="text" wire:model="form.server_ip" id="server_ip"
|
||||||
@error('form.server_ip') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
class="form-input">
|
||||||
|
@error('form.server_ip') <span
|
||||||
|
class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="root_password" class="form-label">Senha (root)</label>
|
<label for="root_password" class="form-label">Senha (root)</label>
|
||||||
<input type="password" wire:model="form.root_password" id="root_password" class="form-input">
|
<input type="password" wire:model="form.root_password" id="root_password"
|
||||||
|
class="form-input">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="form-divider">
|
<hr class="form-divider">
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
@ -115,25 +123,31 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label for="whatsapp_number" class="form-label">Número do WhatsApp</label>
|
<label for="whatsapp_number" class="form-label">Número do WhatsApp</label>
|
||||||
<input type="text" wire:model="form.whatsapp_number" id="whatsapp_number" class="form-input">
|
<input type="text" wire:model="form.whatsapp_number" id="whatsapp_number"
|
||||||
|
class="form-input">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="whatsapp_activation_date" class="form-label">Data Ativação WhatsApp</label>
|
<label for="whatsapp_activation_date" class="form-label">Data Ativação
|
||||||
<input type="date" wire:model="form.whatsapp_activation_date" id="whatsapp_activation_date" class="form-input">
|
WhatsApp</label>
|
||||||
|
<input type="date" wire:model="form.whatsapp_activation_date"
|
||||||
|
id="whatsapp_activation_date" class="form-input">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <div class="form-sidebar-column">
|
</div>
|
||||||
|
<div class="form-sidebar-column">
|
||||||
<div class="form-sticky-sidebar-modal">
|
<div class="form-sticky-sidebar-modal">
|
||||||
<div class="form-section-card">
|
<div class="form-section-card">
|
||||||
<h2 class="form-section-title">Módulos & Recursos</h2>
|
<h2 class="form-section-title">Módulos & Recursos</h2>
|
||||||
<div class="form-checkbox-group">
|
<div class="form-checkbox-group">
|
||||||
<label class="form-checkbox-item">
|
<label class="form-checkbox-item">
|
||||||
<input type="checkbox" wire:model="form.has_call_center" class="form-checkbox">
|
<input type="checkbox" wire:model="form.has_call_center"
|
||||||
|
class="form-checkbox">
|
||||||
<span>Possui Call Center?</span>
|
<span>Possui Call Center?</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="form-checkbox-item">
|
<label class="form-checkbox-item">
|
||||||
<input type="checkbox" wire:model="form.has_voice_gateway" class="form-checkbox">
|
<input type="checkbox" wire:model="form.has_voice_gateway"
|
||||||
|
class="form-checkbox">
|
||||||
<span>Possui Gateway de Voz?</span>
|
<span>Possui Gateway de Voz?</span>
|
||||||
</label>
|
</label>
|
||||||
<label class="form-checkbox-item">
|
<label class="form-checkbox-item">
|
||||||
|
|
@ -143,22 +157,29 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<label for="modules" class="form-label">Módulos Adicionais (JSON)</label>
|
<label for="modules" class="form-label">Módulos Adicionais (JSON)</label>
|
||||||
<textarea wire:model="form.modules" id="modules" rows="3" class="form-input" placeholder="Ex: {"bi": true}"></textarea>
|
<textarea wire:model="form.modules" id="modules" rows="3" class="form-input"
|
||||||
@error('form.modules') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
placeholder="Ex: {"bi": true}"></textarea>
|
||||||
|
@error('form.modules') <span class="text-red-500 text-sm">{{ $message }}</span>
|
||||||
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> </div> </div> <div class="flex-shrink-0 border-t border-gray-200 px-4 py-4 sm:px-6">
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-0 border-t border-gray-200 px-4 py-4 sm:px-6">
|
||||||
<div class="flex justify-end space-x-3">
|
<div class="flex justify-end space-x-3">
|
||||||
|
|
||||||
<button type="button" @click="showModal = false" class="form-button-secondary">
|
<button type="button" @click="showClientModal = false" class="form-button-secondary">
|
||||||
Cancelar
|
Cancelar
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button type="submit" class="form-button-primary">
|
<button type="submit" class="form-button-primary">
|
||||||
Salvar Cliente
|
Salvar Cliente
|
||||||
|
|
||||||
<div wire:loading wire:target="save" class="ml-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
|
<div wire:loading wire:target="save"
|
||||||
|
class="ml-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent">
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -166,4 +187,6 @@ class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,128 +1,106 @@
|
||||||
<div x-data="{ showModal: false }" x-on:create-user.window="showModal = false" x-on:open-create-user.window="showModal = true">
|
<!-- create-user.blade.php -->
|
||||||
|
<div x-data="{ showModal: false }"
|
||||||
|
x-on:user-created.window="showModal = false"
|
||||||
|
x-on:open-create-user.window="showModal = true">
|
||||||
|
|
||||||
@if (session('message'))
|
<div x-show="showModal" class="modal-overlay">
|
||||||
<div class="p-3 bg-green-100 text-green-700 rounded mb-4">
|
<div x-on:click.outside="showModal = false"
|
||||||
{{ session('message') }}
|
x-show="showModal"
|
||||||
</div>
|
x-transition:enter="transition-enter"
|
||||||
@endif
|
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">
|
||||||
|
|
||||||
<div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-white/35">
|
<h3 class="modal-title">Novo Usuário Nexus</h3>
|
||||||
<div x-on:click.outside="showModal = false" x-show="showModal"
|
|
||||||
x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-90"
|
|
||||||
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150"
|
|
||||||
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90"
|
|
||||||
class="bg-white rounded-lg shadow-xl w-full max-w-lg p-6">
|
|
||||||
|
|
||||||
<h3 class="text-lg font-medium text-gray-900">Novo Usuário Nexus</h3>
|
|
||||||
|
|
||||||
<form wire:submit.prevent="createUser" class="mt-4 space-y-4">
|
|
||||||
|
|
||||||
|
<form wire:submit.prevent="createUser" class="form-wrapper">
|
||||||
@error('general')
|
@error('general')
|
||||||
<div class="p-3 bg-red-100 text-red-700 rounded">
|
<div class="error-box">
|
||||||
<strong>Erro:</strong> {{ $message }}
|
<strong>Erro:</strong> {{ $message }}
|
||||||
</div>
|
</div>
|
||||||
@enderror
|
@enderror
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="name" class="block text-sm ...">Nome</label>
|
<label for="name" class="form-label">Nome</label>
|
||||||
<input type="text" wire:model.defer="name" id="name"
|
<input type="text" wire:model.defer="name" id="name" class="form-input">
|
||||||
class="mt-1 block w-full border-2 border-gray-200 rounded-md outline-none hover:border-blue-200 transition delay-150 duration-300 ease-in-out focus:border-blue-200">
|
@error('name') <span class="error-text">{{ $message }}</span> @enderror
|
||||||
@error('name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="email" class="block text-sm ...">Email</label>
|
<label for="email" class="form-label">Email</label>
|
||||||
<input type="email" wire:model.defer="email" id="email"
|
<input type="email" wire:model.defer="email" id="email" class="form-input">
|
||||||
class="mt-1 block w-full border-2 border-gray-200 rounded-md outline-none hover:border-blue-200 transition delay-150 duration-300 ease-in-out focus:border-blue-200">
|
@error('email') <span class="error-text">{{ $message }}</span> @enderror
|
||||||
@error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="password" class="block text-sm ...">Senha</label>
|
<label for="password" class="form-label">Senha</label>
|
||||||
<input type="password" wire:model.defer="password" id="password"
|
<input type="password" wire:model.defer="password" id="password" class="form-input">
|
||||||
class="mt-1 block w-full border-2 border-gray-200 rounded-md outline-none hover:border-blue-200 transition delay-150 duration-300 ease-in-out focus:border-blue-200">
|
@error('password') <span class="error-text">{{ $message }}</span> @enderror
|
||||||
@error('password') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="password_confirm" class="block text-sm ...">Confirmar Senha</label>
|
<label for="password_confirm" class="form-label">Confirmar Senha</label>
|
||||||
<input type="password" wire:model="password_confirm" id="password_confirm"
|
<input type="password" wire:model="password_confirm" id="password_confirm" class="form-input">
|
||||||
class="mt-1 block w-full border-2 border-gray-200 rounded-md outline-none hover:border-blue-200 transition delay-150 duration-300 ease-in-out focus:border-blue-200">
|
@error('password_confirm') <span class="error-text">{{ $message }}</span> @enderror
|
||||||
@error('password_confirm') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="permissions" class="block text-sm font-medium text-gray-700">Permissões</label>
|
<label for="permissions" class="form-label">Permissões</label>
|
||||||
|
|
||||||
<div x-data="{
|
<div x-data="{
|
||||||
open: false,
|
open: false,
|
||||||
selected: @entangle('permission_level'),
|
selected: @entangle('permission_level'),
|
||||||
options: { '0': 'Usuário', '1': 'Admin' }
|
options: { '0': 'Usuário', '1': 'Admin' }
|
||||||
}" x-on:click.outside="open = false" class="relative mt-1">
|
}"
|
||||||
<button type="button" x-on:click="open = true"
|
x-on:click.outside="open = false"
|
||||||
class="relative h-10 w-40 cursor-default rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm p-2">
|
class="select-wrapper">
|
||||||
<span class="block truncate" x-text="options[selected]"></span>
|
|
||||||
|
|
||||||
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
<button type="button" x-on:click="open = true" class="select-button">
|
||||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg"
|
<span class="select-text" x-text="options[selected]"></span>
|
||||||
viewBox="0 0 20 20" fill="currentColor">
|
<span class="select-icon">
|
||||||
<path fill-rule="evenodd"
|
<svg class="select-svg" xmlns="http://www.w3.org/2000/svg"
|
||||||
d="M10 3a.75.75 0 01.53.22l3.5 3.5a.75.75 0 01-1.06 1.06L10 4.81 6.53 8.28a.75.75 0 01-1.06-1.06l3.5-3.5A.75.75 0 0110 3zm-3.5 9.28a.75.75 0 011.06 0L10 15.19l3.47-3.47a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 010-1.06z"
|
viewBox="0 0 20 20" fill="currentColor">
|
||||||
clip-rule="evenodd" />
|
<path fill-rule="evenodd"
|
||||||
|
d="M10 3a.75.75 0 01.53.22l3.5 3.5a.75.75 0 01-1.06 1.06L10 4.81 6.53 8.28a.75.75 0 01-1.06-1.06l3.5-3.5A.75.75 0 0110 3zm-3.5 9.28a.75.75 0 011.06 0L10 15.19l3.47-3.47a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 010-1.06z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div x-show="open" x-transition style="display: none;"
|
<div x-show="open" x-transition style="display: none;" class="select-options">
|
||||||
class="absolute z-10 mt-1 w-full max-h-60 overflow-auto rounded-md bg-white py-1 shadow-lg">
|
|
||||||
<div x-on:click="selected = '0'; open = false"
|
<div x-on:click="selected = '0'; open = false"
|
||||||
class="relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 hover:bg-blue-100"
|
class="select-option"
|
||||||
:class="{ 'bg-blue-50': selected == '0' }">
|
:class="{ 'selected-option': selected == '0' }">
|
||||||
<span class="block truncate"
|
<span class="option-label"
|
||||||
:class="{ 'font-semibold': selected == '0' }">Usuário</span>
|
:class="{ 'font-semibold': selected == '0' }">Usuário</span>
|
||||||
<span x-show="selected == '0'"
|
|
||||||
class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
|
|
||||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
|
||||||
fill="currentColor">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
|
||||||
clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div x-on:click="selected = '1'; open = false"
|
<div x-on:click="selected = '1'; open = false"
|
||||||
class="relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 hover:bg-blue-100"
|
class="select-option"
|
||||||
:class="{ 'bg-blue-50': selected == '1' }">
|
:class="{ 'selected-option': selected == '1' }">
|
||||||
<span class="block truncate" :class="{ 'font-semibold': selected == '1' }">Admin</span>
|
<span class="option-label"
|
||||||
<span x-show="selected == '1'"
|
:class="{ 'font-semibold': selected == '1' }">Admin</span>
|
||||||
class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600">
|
|
||||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
|
||||||
fill="currentColor">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
|
||||||
clip-rule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@error('permission_level') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
@error('permission_level') <span class="error-text">{{ $message }}</span> @enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-end space-x-3 pt-4">
|
<div class="form-footer">
|
||||||
<button type="button" @click="showModal = false"
|
<button type="button" @click="showModal = false" class="btn-cancel">
|
||||||
class="cursor-pointer px-4 py-2 rounded-md bg-gray-200 ...">
|
|
||||||
Cancelar
|
Cancelar
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" class="cursor-pointer px-4 py-2 bg-blue-600 rounded-md text-white ...">
|
|
||||||
|
<button type="submit" class="btn-submit">
|
||||||
<span wire:loading.remove wire:target="createUser">Salvar</span>
|
<span wire:loading.remove wire:target="createUser">Salvar</span>
|
||||||
<span wire:loading wire:target="createUser" class="cursor-progress">Salvando...</span>
|
<span wire:loading wire:target="createUser" class="loading">Salvando...</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue