- Creada sidebar para mejora visual.
- Removidos excesos de links.
- Modificado el footer para consistencia de estilos.
This commit is contained in:
Bryam105
2026-06-02 11:53:29 -03:00
parent 957f8f5bf0
commit cc44c2e8aa
9 changed files with 426 additions and 174 deletions
+6 -4
View File
@@ -1,13 +1,15 @@
<footer class="bg-slate-100 dark:bg-neutral-900 border-t border-black/5 dark:border-white/5 mt-auto z-10 w-full">
<div class="w-full max-w-7xl mx-auto p-8">
<div class="sm:flex sm:items-center sm:justify-between">
<a href="{{ url('/') }}" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all">
<svg class="h-8 text-lime-600 dark:text-neon-lime" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z"/></svg>
<a href="{{ url('/') }}" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse group grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all">
<div class="h-10 w-10 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
<svg class="w-6 h-6 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<span class="self-center text-xl font-bold whitespace-nowrap dark:text-white">Cicles Lauck</span>
</a>
<ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0">
<li><a href="#" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline me-4 md:me-6 transition-colors">Soporte</a></li>
<li><a href="#" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline transition-colors">Contacto</a></li>
<li><a href="{{ route('faq') }}" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline me-4 md:me-6 transition-colors">Soporte y FAQ</a></li>
<li><a href="{{ route('faq') }}#contact" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline transition-colors">Contacto</a></li>
</ul>
</div>
<hr class="my-6 border-neutral-200 dark:border-neutral-800 sm:mx-auto lg:my-8">
+32 -1
View File
@@ -34,6 +34,9 @@
<!-- Navbar Component -->
<x-navbar />
<!-- Sidebar Component -->
<x-sidebar />
<!-- Contenido Principal -->
<main class="grow flex flex-col items-center justify-start pt-10 pb-20 px-4 w-full max-w-7xl mx-auto z-10">
{{ $slot }}
@@ -47,14 +50,42 @@
<!-- Scripts globales -->
<script>
// Lógica del menú móvil
// Lógica del menú móvil tradicional (navbar)
const btn = document.querySelector('[data-collapse-toggle="navbar-default"]');
const menu = document.getElementById('navbar-default');
if(btn && menu) {
btn.addEventListener('click', () => menu.classList.toggle('hidden'));
}
// Lógica del Sidebar
const sidebar = document.getElementById('main-sidebar');
const backdrop = document.getElementById('sidebar-backdrop');
const openSidebarBtns = document.querySelectorAll('.open-sidebar-btn');
const closeSidebarBtn = document.getElementById('close-sidebar-btn');
function toggleSidebar() {
sidebar.classList.toggle('-translate-x-full');
backdrop.classList.toggle('hidden');
// Pequeño delay para la transición de opacidad
setTimeout(() => {
backdrop.classList.toggle('opacity-0');
}, 10);
// Prevenir scroll en el body cuando el sidebar está abierto
document.body.classList.toggle('overflow-hidden');
}
openSidebarBtns.forEach(btn => {
btn.addEventListener('click', toggleSidebar);
});
if (closeSidebarBtn) {
closeSidebarBtn.addEventListener('click', toggleSidebar);
}
if (backdrop) {
backdrop.addEventListener('click', toggleSidebar);
}
</script>
@stack('scripts')
+10 -32
View File
@@ -1,12 +1,19 @@
<nav class="bg-slate-100/90 dark:bg-neutral-900/90 backdrop-blur-md border-b border-black/10 dark:border-white/10 w-full z-50 sticky top-0">
<div class="max-w-7xl flex flex-wrap items-center justify-between mx-auto p-4">
<div class="flex items-center gap-3">
<!-- Sidebar Toggle Button -->
<button type="button" class="open-sidebar-btn inline-flex items-center p-2 justify-center text-neutral-500 dark:text-neutral-400 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neon-lime transition-colors">
<span class="sr-only">Abrir menú lateral</span>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<!-- Logo -->
@auth
<a href="{{ route('dashboard') }}" class="flex items-center space-x-3 rtl:space-x-reverse group">
<a href="{{ route('dashboard') }}" class="flex items-center space-x-2 rtl:space-x-reverse group">
@endauth
@guest
<a href="{{ url('/') }}" class="flex items-center space-x-3 rtl:space-x-reverse group">
<a href="{{ url('/') }}" class="flex items-center space-x-2 rtl:space-x-reverse group">
@endguest
<div class="h-10 w-10 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
<svg class="w-6 h-6 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
@@ -15,6 +22,7 @@
LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
</span>
</a>
</div>
<!-- Mobile Menu Button -->
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-gray-400 rounded-lg md:hidden hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neon-lime" aria-controls="navbar-default" aria-expanded="false">
@@ -35,36 +43,6 @@
Inicio
</a>
</li>
<li>
<a href="{{ url('/productos') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('productos*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Stock
</a>
</li>
<li>
<a href="{{ route('tags.index') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('tags*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Etiquetas
</a>
</li>
<li>
<a href="{{ route('taller.index') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('taller*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Taller
</a>
</li>
<li>
<a href="{{ route('sales.index') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('sales*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Ventas
</a>
</li>
<li>
<a href="{{ route('faq') }}"
class="block py-2 px-3 md:p-0 transition-colors {{ request()->routeIs('faq') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
Ayuda/FAQ
</a>
</li>
@endauth
@@ -0,0 +1,51 @@
@props(['active' => false, 'icon' => 'default'])
@php
$classes = $active
? 'flex items-center gap-3 px-3 py-2.5 rounded-lg font-bold text-lime-700 dark:text-neon-lime bg-lime-50 dark:bg-neon-lime/10 transition-colors'
: 'flex items-center gap-3 px-3 py-2.5 rounded-lg font-medium text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors';
@endphp
<a {{ $attributes->merge(['class' => $classes]) }}>
@switch($icon)
@case('home')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
@break
@case('catalog')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
@break
@case('sales')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
@break
@case('workshop')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
@break
@case('stock')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
@break
@case('tag')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
@break
@case('users')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
@break
@case('truck')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path></svg>
@break
@case('receipt')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
@break
@case('chart')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
@break
@case('database')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
@break
@case('question')
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
@break
@default
<svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
@endswitch
<span>{{ $slot }}</span>
</a>
@@ -0,0 +1,117 @@
<!-- Overlay / Backdrop -->
<div id="sidebar-backdrop" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] hidden transition-opacity duration-300 opacity-0 cursor-pointer"></div>
<!-- Sidebar Container -->
<aside id="main-sidebar" class="fixed top-0 left-0 z-[70] h-screen w-72 bg-neutral-100 dark:bg-neutral-900 border-r border-neutral-300 dark:border-neutral-800 shadow-2xl transition-transform duration-300 -translate-x-full flex flex-col">
<!-- Sidebar Header -->
<div class="flex items-center justify-between p-4 border-b border-neutral-300 dark:border-neutral-800">
<a href="{{ url('/') }}" class="flex items-center space-x-2 group">
<div class="h-8 w-8 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
<svg class="w-5 h-5 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<span class="text-xl font-black whitespace-nowrap dark:text-white italic tracking-wide group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors duration-300">
LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
</span>
</a>
<button id="close-sidebar-btn" class="p-2 text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors focus:outline-none focus:ring-2 focus:ring-neon-lime">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Sidebar Links (Scrollable area) -->
<div class="flex-1 overflow-y-auto py-4 px-3 space-y-1 scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700">
@auth
<x-sidebar-link href="{{ url('/dashboard') }}" :active="request()->is('dashboard')" icon="home">
Inicio
</x-sidebar-link>
@endauth
<x-sidebar-link href="{{ url('/catalogo') }}" :active="request()->is('catalogo*')" icon="catalog">
Catálogo
</x-sidebar-link>
@auth
<div class="pt-4 pb-2">
<p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Gestión</p>
</div>
<x-sidebar-link href="{{ url('/sales') }}" :active="request()->is('sales*')" icon="sales">
Ventas
</x-sidebar-link>
<x-sidebar-link href="{{ url('/taller') }}" :active="request()->is('taller*')" icon="workshop">
Taller
</x-sidebar-link>
<x-sidebar-link href="{{ url('/productos') }}" :active="request()->is('productos*')" icon="stock">
Stock
</x-sidebar-link>
<x-sidebar-link href="{{ route('tags.index') }}" :active="request()->is('tags*')" icon="tag">
Etiquetas
</x-sidebar-link>
<div class="pt-4 pb-2">
<p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Administración</p>
</div>
<x-sidebar-link href="{{ url('/clients') }}" :active="request()->is('clients*')" icon="users">
Clientes
</x-sidebar-link>
<x-sidebar-link href="{{ url('/suppliers') }}" :active="request()->is('suppliers*')" icon="truck">
Proveedores
</x-sidebar-link>
<x-sidebar-link href="{{ route('expenses.index') }}" :active="request()->routeIs('expenses.*')" icon="receipt">
Gastos
</x-sidebar-link>
<x-sidebar-link href="{{ route('reports.index') }}" :active="request()->routeIs('reports.*')" icon="chart">
Reportes
</x-sidebar-link>
@if(auth()->user()->role === 'admin')
<div class="pt-4 pb-2">
<p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Sistema</p>
</div>
<x-sidebar-link href="{{ route('admin.backups.index') }}" :active="request()->routeIs('admin.backups.*')" icon="database">
Respaldos
</x-sidebar-link>
@endif
<div class="pt-4 pb-2">
<p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Soporte</p>
</div>
<x-sidebar-link href="{{ route('faq') }}" :active="request()->routeIs('faq')" icon="question">
Ayuda/FAQ
</x-sidebar-link>
@endauth
</div>
<!-- Sidebar Footer (Logout) -->
@auth
<div class="p-4 border-t border-neutral-300 dark:border-neutral-800 bg-neutral-200 dark:bg-neutral-950">
<div class="mb-3 px-2 flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-lime-500 dark:bg-neon-lime text-black flex items-center justify-center font-bold text-sm">
{{ substr(auth()->user()->name, 0, 1) }}
</div>
<div class="flex flex-col">
<span class="text-sm font-bold text-black dark:text-white">{{ auth()->user()->name }}</span>
<span class="text-xs text-neutral-500 dark:text-neutral-400">{{ ucfirst(auth()->user()->role) }}</span>
</div>
</div>
<form action="{{ route('logout') }}" method="post" class="w-full">
@csrf
<button class="w-full flex items-center justify-center gap-2 font-bold text-sm text-red-600 dark:text-red-500 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 py-2.5 px-4 rounded-lg hover:bg-red-600 hover:text-white hover:border-red-600 dark:hover:bg-red-600 dark:hover:text-white transition-all duration-300 tracking-wide" type="submit">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
Cerrar Sesión
</button>
</form>
</div>
@endauth
</aside>
-39
View File
@@ -38,45 +38,6 @@
<svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
</x-ui.card>
<!-- Tarjeta Proveedores -->
<x-ui.card href="{{ url('/suppliers') }}" title="Proveedores" description="Base de datos de proveedores." linkText="Ver Proveedores"> <svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</x-ui.card>
<!-- Tarjeta Gastos -->
<x-ui.card href="{{ route('expenses.index') }}" title="Gastos" description="Registro de compras y pedidos a proovedores." linkText="Ver Gastos">
<svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-3 5h3m-6 0h.01M12 16h3m-6 0h.01M10 3v4h4V3h-4Z"/>
</svg>
</x-ui.card>
<!-- Tarjeta Reportes -->
<x-ui.card href="{{ route('reports.index') }}" title="Reportes" description="Estadísticas de ingresos y egresos." linkText="Ver Reportes">
<svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v-6M8 16V6m4 10v-3m4 3v-8m4 8v-5M4 20h16"/>
</svg>
</x-ui.card>
@if(auth()->user()->role === 'admin')
<!-- Tarjeta Respaldos (Solo Admin) -->
<x-ui.card href="{{ route('admin.backups.index') }}" title="Respaldos" description="Copias de seguridad de la base de datos." linkText="Administrar Copias">
<svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
</svg>
</x-ui.card>
@endif
</div>
<!-- Botón de Logout -->
<div class="w-full border-t border-neutral-800 pt-8 flex justify-end">
<form action="{{ route('logout') }}" method="post" class="flex items-center gap-4">
@csrf
<span class="text-sm text-gray-500">¿Sesión finalizada?</span>
<button class="font-bold text-sm text-red-500 border border-red-900/50 bg-red-900/10 py-2 px-6 rounded-md hover:bg-red-600 hover:text-white hover:border-red-600 transition-all duration-300 uppercase tracking-wide" type="submit">
Cerrar Sesión
</button>
</form>
</div>
</x-layout>
+1 -1
View File
@@ -170,7 +170,7 @@
</details>
</div>
<div class="mt-8 p-6 bg-lime-50 dark:bg-lime-900/10 border border-lime-200 dark:border-lime-900/30 rounded-xl text-center shadow-sm">
<div id="contact" class="mt-8 p-6 bg-lime-50 dark:bg-lime-900/10 border border-lime-200 dark:border-lime-900/30 rounded-xl text-center shadow-sm">
<h3 class="text-lg font-bold text-lime-800 dark:text-neon-lime mb-2">¿Necesitas más ayuda?</h3>
<p class="text-sm text-lime-700 dark:text-gray-400 mb-5">Si tienes alguna otra duda o experimentas problemas técnicos, nuestro equipo de soporte está disponible para ayudarte.</p>
<a href="mailto:soporte@lauck.com" class="inline-flex items-center justify-center px-6 py-3 text-sm font-bold text-neutral-900 bg-lime-400 dark:bg-neon-lime rounded-lg hover:bg-lime-500 hover:dark:bg-[#b3e600] transition-colors shadow-lg shadow-lime-500/20 dark:shadow-neon-lime/20 transform hover:-translate-y-0.5 duration-200 uppercase tracking-wide">
+98 -42
View File
@@ -87,66 +87,122 @@
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
/* Dark Theme & Neon Lime overrides for Select2 */
/* Estilos consistentes con el sistema para Select2 Múltiple */
.select2-container--default .select2-selection--multiple {
background-color: rgb(38 38 38); /* neutral-800 */
border-color: rgb(64 64 64); /* neutral-700 */
border-radius: 0.5rem;
background-color: rgb(209 213 219); /* bg-gray-300 */
border: 1px solid rgb(156 163 175); /* border-neutral-400 */
border-radius: 0.5rem; /* rounded-lg */
min-height: 42px;
padding: 0.15rem 0.35rem;
font-size: 0.875rem; /* text-sm */
color: #111827;
transition: all 0.2s;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #b3e600; /* neon-lime */
outline: 0;
box-shadow: 0 0 0 1px #b3e600;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #b3e600;
border-color: #99c200;
color: #171717; /* neutral-900 */
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #171717;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
background-color: #99c200;
color: #171717;
outline: none;
box-shadow: 0 0 0 2px rgba(179, 230, 0, 0.3); /* focus:ring-neon-lime */
}
.select2-dropdown {
background-color: rgb(209 213 219);
border: 1px solid rgb(156 163 175);
border-radius: 0.5rem;
font-size: 0.875rem;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.select2-search--dropdown .select2-search__field {
background-color: #f3f4f6; /* bg-gray-100 */
border: 1px solid rgb(156 163 175);
border-radius: 0.375rem;
color: #111827;
}
/* Pills (Etiquetas seleccionadas) */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #171717; /* neutral-900 */
border: 1px solid #000;
color: #b3e600; /* neon-lime text */
border-radius: 0.375rem;
padding: 2px 8px;
font-weight: 600;
display: flex;
flex-direction: row-reverse;
gap: 6px;
align-items: center;
margin-top: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #b3e600;
border-right: none;
border-left: 1px solid rgba(179, 230, 0, 0.3);
margin-right: 0;
padding-left: 6px;
font-weight: bold;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
background-color: transparent;
color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
color: #111827;
margin-top: 8px;
}
/* Dark mode overrides (para coincidir con dark:bg-neutral-800 dark:border-neutral-700 dark:text-white) */
html.dark .select2-container--default .select2-selection--multiple {
background-color: rgb(38 38 38); /* dark:bg-neutral-800 */
border-color: rgb(64 64 64); /* dark:border-neutral-700 */
color: #fff;
}
html.dark .select2-dropdown {
background-color: rgb(38 38 38);
border-color: rgb(64 64 64);
color: white;
color: #fff;
}
.select2-search--dropdown .select2-search__field {
background-color: rgb(23 23 23);
html.dark .select2-search--dropdown .select2-search__field {
background-color: rgb(23 23 23); /* neutral-900 */
border-color: rgb(64 64 64);
color: white;
color: #fff;
}
html.dark .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
color: #fff;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #b3e600; /* bg-neon-lime */
border-color: #99c200;
color: #171717; /* text-neutral-900 */
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #171717;
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #000;
}
/* Hover/Active states en dropdown */
.select2-container--default .select2-results__option--selected {
background-color: rgb(64 64 64);
background-color: rgba(179, 230, 0, 0.2); /* neon-lime opaco */
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #b3e600;
color: #171717;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
color: white;
}
html:not(.dark) .select2-container--default .select2-selection--multiple {
background-color: rgb(209 213 219); /* gray-300 */
border-color: rgb(156 163 175); /* neutral-400 */
}
html:not(.dark) .select2-dropdown {
background-color: rgb(209 213 219);
border-color: rgb(156 163 175);
color: black;
}
html:not(.dark) .select2-search--dropdown .select2-search__field {
background-color: white;
color: black;
}
html:not(.dark) .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
color: black;
}
</style>
@endpush
+98 -42
View File
@@ -83,66 +83,122 @@
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
/* Dark Theme & Neon Lime overrides for Select2 */
/* Estilos consistentes con el sistema para Select2 Múltiple */
.select2-container--default .select2-selection--multiple {
background-color: rgb(38 38 38); /* neutral-800 */
border-color: rgb(64 64 64); /* neutral-700 */
border-radius: 0.5rem;
background-color: rgb(209 213 219); /* bg-gray-300 */
border: 1px solid rgb(156 163 175); /* border-neutral-400 */
border-radius: 0.5rem; /* rounded-lg */
min-height: 42px;
padding: 0.15rem 0.35rem;
font-size: 0.875rem; /* text-sm */
color: #111827;
transition: all 0.2s;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #b3e600; /* neon-lime */
outline: 0;
box-shadow: 0 0 0 1px #b3e600;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #b3e600;
border-color: #99c200;
color: #171717; /* neutral-900 */
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #171717;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
background-color: #99c200;
color: #171717;
outline: none;
box-shadow: 0 0 0 2px rgba(179, 230, 0, 0.3); /* focus:ring-neon-lime */
}
.select2-dropdown {
background-color: rgb(209 213 219);
border: 1px solid rgb(156 163 175);
border-radius: 0.5rem;
font-size: 0.875rem;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.select2-search--dropdown .select2-search__field {
background-color: #f3f4f6; /* bg-gray-100 */
border: 1px solid rgb(156 163 175);
border-radius: 0.375rem;
color: #111827;
}
/* Pills (Etiquetas seleccionadas) */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #171717; /* neutral-900 */
border: 1px solid #000;
color: #b3e600; /* neon-lime text */
border-radius: 0.375rem;
padding: 2px 8px;
font-weight: 600;
display: flex;
flex-direction: row-reverse;
gap: 6px;
align-items: center;
margin-top: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #b3e600;
border-right: none;
border-left: 1px solid rgba(179, 230, 0, 0.3);
margin-right: 0;
padding-left: 6px;
font-weight: bold;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
background-color: transparent;
color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
color: #111827;
margin-top: 8px;
}
/* Dark mode overrides (para coincidir con dark:bg-neutral-800 dark:border-neutral-700 dark:text-white) */
html.dark .select2-container--default .select2-selection--multiple {
background-color: rgb(38 38 38); /* dark:bg-neutral-800 */
border-color: rgb(64 64 64); /* dark:border-neutral-700 */
color: #fff;
}
html.dark .select2-dropdown {
background-color: rgb(38 38 38);
border-color: rgb(64 64 64);
color: white;
color: #fff;
}
.select2-search--dropdown .select2-search__field {
background-color: rgb(23 23 23);
html.dark .select2-search--dropdown .select2-search__field {
background-color: rgb(23 23 23); /* neutral-900 */
border-color: rgb(64 64 64);
color: white;
color: #fff;
}
html.dark .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
color: #fff;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #b3e600; /* bg-neon-lime */
border-color: #99c200;
color: #171717; /* text-neutral-900 */
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #171717;
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #000;
}
/* Hover/Active states en dropdown */
.select2-container--default .select2-results__option--selected {
background-color: rgb(64 64 64);
background-color: rgba(179, 230, 0, 0.2); /* neon-lime opaco */
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #b3e600;
color: #171717;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
color: white;
}
html:not(.dark) .select2-container--default .select2-selection--multiple {
background-color: rgb(209 213 219); /* gray-300 */
border-color: rgb(156 163 175); /* neutral-400 */
}
html:not(.dark) .select2-dropdown {
background-color: rgb(209 213 219);
border-color: rgb(156 163 175);
color: black;
}
html:not(.dark) .select2-search--dropdown .select2-search__field {
background-color: white;
color: black;
}
html:not(.dark) .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
color: black;
}
</style>
@endpush