Compare commits
No commits in common. "b3ac0826aac344934c04ddf041b82bb500d27749" and "aecaef1509b661e8404c8fb39bac7dcf936bfd66" have entirely different histories.
b3ac0826aa
...
aecaef1509
|
|
@ -12,39 +12,58 @@ class AddClient extends Component
|
|||
{
|
||||
use WithFileUploads;
|
||||
|
||||
// 1. Declara as propriedades principais
|
||||
// 2. Declara as propriedades principais
|
||||
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".
|
||||
*/
|
||||
public function save()
|
||||
{
|
||||
|
||||
|
||||
// 2. Valida os dados usando as 'rules' do ClientForm.php
|
||||
// 3. Valida os dados usando as 'rules' do ClientForm.php
|
||||
$this->form->validate();
|
||||
|
||||
try {
|
||||
$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;
|
||||
}
|
||||
// 4. Pega todos os dados validados
|
||||
$data = $this->form->all();
|
||||
|
||||
// 5. Cria o cliente no banco de dados
|
||||
Client::create($data);
|
||||
// 6. Despacha um evento para atualizar outros componentes (ex: o grid de clientes)
|
||||
$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');
|
||||
// 5. 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;
|
||||
}
|
||||
// 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!');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -54,4 +73,4 @@ public function render()
|
|||
{
|
||||
return view('livewire.admin.add-client');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
class ClientForm extends Form
|
||||
{
|
||||
// 2. ATRIBUTOS REMOVIDOS: Os #[Rule(...)] foram removidos daqui
|
||||
public $client_name = '';
|
||||
public $name = '';
|
||||
public $legal_name = '';
|
||||
public $cnpj = '';
|
||||
public $profile_image_path;
|
||||
|
|
@ -26,7 +26,7 @@ class ClientForm extends Form
|
|||
public $whatsapp_activation_date;
|
||||
|
||||
// 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['has_call_center'] = (bool) $client->has_call_center;
|
||||
|
|
@ -43,10 +43,11 @@ public function addClient(Client $client)
|
|||
public function rules()
|
||||
{
|
||||
return [
|
||||
'client_name' => 'required|string|max:255',
|
||||
'legal_name' => 'required|string|max:255',
|
||||
'cnpj' => 'required|string|max:20|unique:clients,cnpj',
|
||||
'profile_image_path' => 'nullable|file|mimes:jpeg,png,bmp,gif,svg,webp|max:2048', // 2MB Max 'pbx_hosting' => 'nullable|string|max:255',
|
||||
'name' => 'required|string|max:255',
|
||||
'legal_name' => 'nullable|string|max:255',
|
||||
'cnpj' => 'nullable|string|max:20',
|
||||
'profile_image_path' => 'nullable|image|max:2048', // 2MB Max
|
||||
'pbx_hosting' => 'nullable|string|max:255',
|
||||
'activation_date' => 'nullable|date',
|
||||
'carrier' => 'nullable|string|max:255',
|
||||
'access_type' => 'nullable|string|max:255',
|
||||
|
|
@ -68,10 +69,8 @@ public function rules()
|
|||
public function messages()
|
||||
{
|
||||
return [
|
||||
'client_name.required' => 'O campo Nome Fantasia é obrigatório.',
|
||||
'client_name.max' => 'O Nome Fantasia não pode ter mais que 255 caracteres.',
|
||||
|
||||
'cnpj.unique' => 'Este CNPJ já está cadastrado em outro cliente.',
|
||||
'name.required' => 'O campo Nome Fantasia é obrigatório.',
|
||||
'name.max' => 'O Nome Fantasia não pode ter mais que 255 caracteres.',
|
||||
|
||||
'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.',
|
||||
|
|
@ -19,7 +19,7 @@ class CreateUser extends Component
|
|||
// Nota: Adicionei 'same:password' para garantir que as senhas batem.
|
||||
protected $rules = [
|
||||
'name' => 'required|string|max:255',
|
||||
'email' => 'required|email|unique:users,email',
|
||||
'email' => 'required|email',
|
||||
'password' => 'required|string|min:8',
|
||||
'password_confirm' => 'required|string|same:password', // <-- Regra importante!
|
||||
'permission_level' => 'required|boolean' // ou 'required|in:0,1'
|
||||
|
|
@ -28,7 +28,6 @@ class CreateUser extends Component
|
|||
protected $messages = [
|
||||
'name' => 'Nome 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_confirm' => 'As senhas não coincidem.',
|
||||
'permission_level' => 'Defina o nível de autorização do usuário.'
|
||||
|
|
@ -60,8 +59,7 @@ public function createUser(UserService $userService)
|
|||
$this->dispatch('user-created');
|
||||
|
||||
// Envia a mesma mensagem de sucesso do seu controller
|
||||
$this->dispatch('notify', message: 'Usuário cadastrado com sucesso!');
|
||||
|
||||
session()->flash('message', 'Usuário cadastrado com sucesso!');
|
||||
|
||||
// (Opcional) Se sua tabela de usuários for outro componente Livewire,
|
||||
// você pode mandar ela atualizar assim:
|
||||
|
|
@ -72,6 +70,9 @@ public function createUser(UserService $userService)
|
|||
// 7. O "Erro" (Tradução do Redirect de Erro)
|
||||
// Em vez de redirecionar, adicionamos o erro ao formulário
|
||||
// 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());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ class ClientService
|
|||
{
|
||||
|
||||
public function __construct(protected Client $client) {}
|
||||
public function addClient(array $client)
|
||||
{
|
||||
public function addClient($client) {
|
||||
return Client::create($client);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ class UserService
|
|||
public function __construct(protected User $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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
<?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,12 +5,6 @@
|
|||
@source '../**/*.blade.php';
|
||||
@source '../**/*.js';
|
||||
|
||||
@import './toast.css';
|
||||
@import './client-form.css';
|
||||
@import './user-form-modal.css';
|
||||
@import './header.css';
|
||||
@import './client-cards.css';
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
|
@ -49,6 +43,125 @@ @layer components {
|
|||
|
||||
/*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-title {
|
||||
|
|
@ -93,4 +206,71 @@ @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-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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,375 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
@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 */
|
||||
}
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<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')
|
||||
<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">
|
||||
|
||||
|
|
@ -114,6 +114,280 @@ class="w-32 h-32 rounded-full object-cover">
|
|||
</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>
|
||||
|
||||
@endsection
|
||||
|
|
@ -63,12 +63,6 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
<li class="profile-items">
|
||||
<a @click="$dispatch('open-add-client')" class="profile-link">
|
||||
Adicionar clientes
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
@endauth
|
||||
|
|
@ -79,9 +73,6 @@
|
|||
</nav>
|
||||
</header>
|
||||
|
||||
<!--Apresenta mensagens em formato de toasts -->
|
||||
<x-flash-messages />
|
||||
|
||||
<body>
|
||||
@yield('content')
|
||||
@livewireScripts
|
||||
|
|
|
|||
|
|
@ -1,31 +1,38 @@
|
|||
<div x-data="{ showClientModal: false }" x-cloak @keydown.escape.window="showClientModal = false"
|
||||
x-on:open-add-client.window="showClientModal = true" x-on:client-added.window="showClientModal = false"
|
||||
class="relative z-50">
|
||||
<div x-data="{ showModal: @entangle('showModal') }"
|
||||
x-cloak
|
||||
@keydown.escape.window="showModal = false"
|
||||
class="relative z-50">
|
||||
|
||||
<div x-show="showClientModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-25" x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-0" x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 bg-white/50 transition-opacity"></div>
|
||||
|
||||
<div x-show="showClientModal" 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="showClientModal = false">
|
||||
<div class="w-screen max-w-3xl">
|
||||
<div x-show="showModal"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
|
||||
|
||||
<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">
|
||||
|
||||
<div class="bg-white px-4 py-6 sm:px-6">
|
||||
|
||||
<div class="bg-blue-600 px-4 py-6 sm:px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold leading-6 text-black" id="slide-over-title">
|
||||
<h2 class="text-lg font-semibold leading-6 text-white" id="slide-over-title">
|
||||
Adicionar Novo Cliente
|
||||
</h2>
|
||||
<button type="button" @click="showClientModal = false"
|
||||
class="rounded-md text-blue-200 hover:text-white cursor-pointer focus:outline-none focus:ring-2 focus:ring-white">
|
||||
<button type="button" @click="showModal = false"
|
||||
class="rounded-md bg-blue-600 text-blue-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
|
||||
<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" />
|
||||
</svg>
|
||||
</button>
|
||||
|
|
@ -34,46 +41,37 @@ class="rounded-md text-blue-200 hover:text-white cursor-pointer focus:outline-no
|
|||
|
||||
<div class="form-wrapper-modal">
|
||||
<div class="form-grid-container">
|
||||
|
||||
|
||||
<div class="form-main-panel-modal">
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<h2 class="form-section-title">Informações Principais</h2>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="client_name" class="form-label">Nome Fantasia *</label>
|
||||
<input type="text" wire:model="form.client_name" id="client_name"
|
||||
class="form-input">
|
||||
@error('form.client_name') <span
|
||||
class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
<label for="name" class="form-label">Nome Fantasia</label>
|
||||
<input type="text" wire:model="form.name" id="name" class="form-input">
|
||||
@error('form.name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
@error('form.legal_name') <span
|
||||
class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
<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">
|
||||
@error('form.legal_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
@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 class="mt-4">
|
||||
<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">
|
||||
|
||||
<div wire:loading wire:target="form.profile_image_path"
|
||||
class="text-sm text-blue-600 mt-1">
|
||||
<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">
|
||||
Enviando...
|
||||
</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>
|
||||
|
||||
|
|
@ -84,13 +82,11 @@ class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
|||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
<label for="carrier" class="form-label">Operadora</label>
|
||||
|
|
@ -98,24 +94,20 @@ class="form-input">
|
|||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<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">
|
||||
@error('form.server_ip') <span
|
||||
class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
<input type="text" wire:model="form.server_ip" id="server_ip" class="form-input">
|
||||
@error('form.server_ip') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
|
||||
<hr class="form-divider">
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -123,31 +115,25 @@ class="form-input">
|
|||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<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>
|
||||
<label for="whatsapp_activation_date" class="form-label">Data Ativação
|
||||
WhatsApp</label>
|
||||
<input type="date" wire:model="form.whatsapp_activation_date"
|
||||
id="whatsapp_activation_date" class="form-input">
|
||||
<label for="whatsapp_activation_date" class="form-label">Data Ativação WhatsApp</label>
|
||||
<input type="date" wire:model="form.whatsapp_activation_date" id="whatsapp_activation_date" class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-sidebar-column">
|
||||
</div> <div class="form-sidebar-column">
|
||||
<div class="form-sticky-sidebar-modal">
|
||||
<div class="form-section-card">
|
||||
<h2 class="form-section-title">Módulos & Recursos</h2>
|
||||
<div class="form-checkbox-group">
|
||||
<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>
|
||||
</label>
|
||||
<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>
|
||||
</label>
|
||||
<label class="form-checkbox-item">
|
||||
|
|
@ -157,29 +143,22 @@ class="form-checkbox">
|
|||
</div>
|
||||
<div class="mt-4">
|
||||
<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>
|
||||
@error('form.modules') <span class="text-red-500 text-sm">{{ $message }}</span>
|
||||
@enderror
|
||||
<textarea wire:model="form.modules" id="modules" rows="3" class="form-input" 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 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">
|
||||
|
||||
<button type="button" @click="showClientModal = false" class="form-button-secondary">
|
||||
|
||||
<button type="button" @click="showModal = false" class="form-button-secondary">
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
|
||||
<button type="submit" class="form-button-primary">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -187,6 +166,4 @@ class="ml-2 h-4 w-4 animate-spin rounded-full border-2 border-white border-t-tra
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -1,106 +1,128 @@
|
|||
<!-- create-user.blade.php -->
|
||||
<div x-data="{ showModal: false }"
|
||||
x-on:user-created.window="showModal = false"
|
||||
x-on:open-create-user.window="showModal = true">
|
||||
<div x-data="{ showModal: false }" x-on:create-user.window="showModal = false" x-on:open-create-user.window="showModal = true">
|
||||
|
||||
<div x-show="showModal" class="modal-overlay">
|
||||
<div x-on:click.outside="showModal = false"
|
||||
x-show="showModal"
|
||||
x-transition:enter="transition-enter"
|
||||
x-transition:enter-start="transition-enter-start"
|
||||
x-transition:enter-end="transition-enter-end"
|
||||
x-transition:leave="transition-leave"
|
||||
x-transition:leave-start="transition-leave-start"
|
||||
x-transition:leave-end="transition-leave-end"
|
||||
class="modal-container">
|
||||
@if (session('message'))
|
||||
<div class="p-3 bg-green-100 text-green-700 rounded mb-4">
|
||||
{{ session('message') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<h3 class="modal-title">Novo Usuário Nexus</h3>
|
||||
<div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-white/35">
|
||||
<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')
|
||||
<div class="error-box">
|
||||
<div class="p-3 bg-red-100 text-red-700 rounded">
|
||||
<strong>Erro:</strong> {{ $message }}
|
||||
</div>
|
||||
@enderror
|
||||
|
||||
<div>
|
||||
<label for="name" class="form-label">Nome</label>
|
||||
<input type="text" wire:model.defer="name" id="name" class="form-input">
|
||||
@error('name') <span class="error-text">{{ $message }}</span> @enderror
|
||||
<label for="name" class="block text-sm ...">Nome</label>
|
||||
<input type="text" wire:model.defer="name" id="name"
|
||||
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="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" wire:model.defer="email" id="email" class="form-input">
|
||||
@error('email') <span class="error-text">{{ $message }}</span> @enderror
|
||||
<label for="email" class="block text-sm ...">Email</label>
|
||||
<input type="email" wire:model.defer="email" id="email"
|
||||
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="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="form-label">Senha</label>
|
||||
<input type="password" wire:model.defer="password" id="password" class="form-input">
|
||||
@error('password') <span class="error-text">{{ $message }}</span> @enderror
|
||||
<label for="password" class="block text-sm ...">Senha</label>
|
||||
<input type="password" wire:model.defer="password" id="password"
|
||||
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="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password_confirm" class="form-label">Confirmar Senha</label>
|
||||
<input type="password" wire:model="password_confirm" id="password_confirm" class="form-input">
|
||||
@error('password_confirm') <span class="error-text">{{ $message }}</span> @enderror
|
||||
<label for="password_confirm" class="block text-sm ...">Confirmar Senha</label>
|
||||
<input type="password" wire:model="password_confirm" id="password_confirm"
|
||||
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="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="permissions" class="form-label">Permissões</label>
|
||||
<label for="permissions" class="block text-sm font-medium text-gray-700">Permissões</label>
|
||||
|
||||
<div x-data="{
|
||||
open: false,
|
||||
selected: @entangle('permission_level'),
|
||||
options: { '0': 'Usuário', '1': 'Admin' }
|
||||
}"
|
||||
x-on:click.outside="open = false"
|
||||
class="select-wrapper">
|
||||
}" x-on:click.outside="open = false" class="relative mt-1">
|
||||
<button type="button" x-on:click="open = true"
|
||||
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">
|
||||
<span class="block truncate" x-text="options[selected]"></span>
|
||||
|
||||
<button type="button" x-on:click="open = true" class="select-button">
|
||||
<span class="select-text" x-text="options[selected]"></span>
|
||||
<span class="select-icon">
|
||||
<svg class="select-svg" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20" fill="currentColor">
|
||||
<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" />
|
||||
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20" fill="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div x-show="open" x-transition style="display: none;" class="select-options">
|
||||
<div x-show="open" x-transition style="display: none;"
|
||||
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"
|
||||
class="select-option"
|
||||
:class="{ 'selected-option': selected == '0' }">
|
||||
<span class="option-label"
|
||||
:class="{ 'font-semibold': selected == '0' }">Usuário</span>
|
||||
class="relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 hover:bg-blue-100"
|
||||
:class="{ 'bg-blue-50': selected == '0' }">
|
||||
<span class="block truncate"
|
||||
: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 x-on:click="selected = '1'; open = false"
|
||||
class="select-option"
|
||||
:class="{ 'selected-option': selected == '1' }">
|
||||
<span class="option-label"
|
||||
:class="{ 'font-semibold': selected == '1' }">Admin</span>
|
||||
class="relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 hover:bg-blue-100"
|
||||
:class="{ 'bg-blue-50': selected == '1' }">
|
||||
<span class="block truncate" :class="{ 'font-semibold': selected == '1' }">Admin</span>
|
||||
<span x-show="selected == '1'"
|
||||
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>
|
||||
|
||||
@error('permission_level') <span class="error-text">{{ $message }}</span> @enderror
|
||||
@error('permission_level') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="button" @click="showModal = false" class="btn-cancel">
|
||||
<div class="flex justify-end space-x-3 pt-4">
|
||||
<button type="button" @click="showModal = false"
|
||||
class="cursor-pointer px-4 py-2 rounded-md bg-gray-200 ...">
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
<button type="submit" class="btn-submit">
|
||||
<button type="submit" class="cursor-pointer px-4 py-2 bg-blue-600 rounded-md text-white ...">
|
||||
<span wire:loading.remove wire:target="createUser">Salvar</span>
|
||||
<span wire:loading wire:target="createUser" class="loading">Salvando...</span>
|
||||
<span wire:loading wire:target="createUser" class="cursor-progress">Salvando...</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue