NEW:
- Creada sidebar para mejora visual. - Removidos excesos de links. - Modificado el footer para consistencia de estilos.
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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')
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user