You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
17 KiB
277 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - PrestamosTec</title>
|
|
<link rel="icon" href="{{ asset('css/logo.png') }}">
|
|
|
|
<!-- Tailwind CSS desde CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Alpine.js -->
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<!-- En el head, después de los otros scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<!-- Agregamos animate.css para más animaciones -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
|
|
|
<style>
|
|
/* Animaciones personalizadas */
|
|
.nav-item-hover {
|
|
@apply transition-all duration-300 ease-in-out transform hover:translate-x-2;
|
|
}
|
|
|
|
.sidebar {
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
.menu-item {
|
|
@apply transition-colors duration-200 ease-in-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
<div class="min-h-screen flex">
|
|
<!-- Sidebar modernizado -->
|
|
<aside class="sidebar bg-gradient-to-b from-[#1E40AF] to-[#6B5B9A] text-white w-64 min-h-screen px-4 py-6 hidden md:block shadow-xl">
|
|
<div class="flex items-center justify-center mb-12">
|
|
<span class="text-2xl font-bold tracking-wider animate__animated animate__fadeIn">PrestamosTecmm</span>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="space-y-4">
|
|
<!-- Inicio -->
|
|
<li>
|
|
<a href="/dashboard" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('dashboard') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-home text-white/80"></i>
|
|
<span class="font-light">Inicio</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Préstamos -->
|
|
<li x-data="{ open: false }" class="relative">
|
|
<button @click="open = !open"
|
|
class="nav-item-hover flex items-center justify-between w-full px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('prestamos*') ? 'bg-white/20' : '' }}">
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-book text-white/80"></i>
|
|
<span class="font-light">Préstamos</span>
|
|
</div>
|
|
<i class="fas fa-chevron-down text-sm transition-transform duration-200"
|
|
:class="{ 'transform rotate-180': open }"></i>
|
|
</button>
|
|
|
|
<!-- Submenú de Préstamos -->
|
|
<ul x-show="open"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
|
class="pl-4 mt-2 space-y-1 text-sm">
|
|
|
|
<li>
|
|
<a href="{{ route('prestamos.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('tiposLicencias*') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-plus text-white/80"></i>
|
|
<span class="font-light">Nuevo Préstamo</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/prestamos/pendientes" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('prestamos/pendientes') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-clock text-white/80"></i>
|
|
<span class="font-light">Préstamos Pendientes</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/prestamos/rechazados" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('prestamos/rechazados') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-times text-white/80"></i>
|
|
<span class="font-light">Préstamos Rechazados</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/prestamos/aceptados" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('prestamos/aceptados') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-check text-white/80"></i>
|
|
<span class="font-light">Préstamos Aceptados</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/prestamos/historial" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('prestamos/historial') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-history text-white/80"></i>
|
|
<span class="font-light">Historial</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- Usuarios -->
|
|
<li>
|
|
<a href="/usuarios" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('usuarios') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-users text-white/80"></i>
|
|
<span class="font-light">Usuarios</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Mantenimiento -->
|
|
<li>
|
|
<a href="/maintenance" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('maintenance') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-tools text-white/80"></i>
|
|
<span class="font-light">Mantenimiento</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Configuración con Submenú -->
|
|
<li x-data="{ open: false }" class="relative">
|
|
<button @click="open = !open"
|
|
class="nav-item-hover flex items-center justify-between w-full px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fas fa-cog text-white/80"></i>
|
|
<span class="font-light">Configuración</span>
|
|
</div>
|
|
<i class="fas fa-chevron-down text-sm transition-transform duration-200"
|
|
:class="{ 'transform rotate-180': open }"></i>
|
|
</button>
|
|
|
|
<!-- Submenú de Configuración -->
|
|
<ul x-show="open"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
|
class="pl-4 mt-2 space-y-1 text-sm">
|
|
|
|
<!-- Marca -->
|
|
<li>
|
|
<a href="{{ route('marca.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('marca*') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-trademark text-white/80"></i>
|
|
<span class="font-light">Marca</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Tipos -->
|
|
<li>
|
|
<a href="{{ route('vehiculos.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('vehiculos*') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-car text-white/80"></i>
|
|
<span class="font-light">Tipos de Vehiculos</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Tipos de Licencia -->
|
|
<li>
|
|
<a href="{{ route('tiposLicencias.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('tiposLicencias*') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-id-card text-white/80"></i>
|
|
<span class="font-light">Tipos de Licencia</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Capacidad -->
|
|
<li>
|
|
<a href="{{ route('capacidades.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('capacidades*') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-database text-white/80"></i>
|
|
<span class="font-light">Capacidad</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/configuracion/capacidad" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('configuracion/capacidad') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-gas-pump text-white/80"></i>
|
|
<span class="font-light">Tipo de Gasolina</span>
|
|
</a>
|
|
</li>
|
|
<!-- Puestos -->
|
|
<li x-data="{ openPuestos: false }" class="relative">
|
|
<button @click="openPuestos = !openPuestos"
|
|
class="nav-item-hover flex items-center justify-between w-full px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fas fa-user-tie text-white/80"></i>
|
|
<span class="font-light">Puestos</span>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-xs"
|
|
:class="{ 'transform rotate-90': openPuestos }"></i>
|
|
</button>
|
|
|
|
<!-- Submenú de Puestos -->
|
|
<ul x-show="openPuestos"
|
|
class="pl-4 mt-1 space-y-1">
|
|
<li>
|
|
<a href="{{ route('docentes.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('docentes*') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-chalkboard-teacher text-white/80"></i>
|
|
<span class="font-light">Docentes</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/configuracion/puestos/choferes" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('configuracion/puestos/choferes') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-car text-white/80"></i>
|
|
<span class="font-light">Choferes</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/configuracion/puestos/admin" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('configuracion/puestos/admin') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-user-shield text-white/80"></i>
|
|
<span class="font-light">Administradores</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- Estatus -->
|
|
<li>
|
|
<a href="/configuracion/estatus" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm {{ request()->is('configuracion/estatus') ? 'bg-white/20' : '' }}">
|
|
<i class="fas fa-toggle-on text-white/80"></i>
|
|
<span class="font-light">Estatus</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<div class="flex-1 flex flex-col">
|
|
<!-- Navbar modernizado -->
|
|
<header class="bg-white/80 backdrop-blur-md shadow-sm">
|
|
<div class="flex items-center justify-between px-8 py-4">
|
|
<div class="flex items-center bg-gray-100 rounded-full px-3 py-1 shadow-sm">
|
|
<img src="https://ui-avatars.com/api/?name={{ Auth::user()->name }}&background=E5E7EB&color=374151&rounded=true&size=32" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
|
|
<span class="font-semibold text-gray-800">{{ Auth::user()->name }}</span>
|
|
</div>
|
|
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: inline; margin: 0;">
|
|
@csrf
|
|
<button type="submit" class="flex items-center text-red-600 hover:text-red-800 font-semibold px-3 py-1 rounded transition-colors duration-150" title="Cerrar Sesión">
|
|
<i class="fas fa-sign-out-alt mr-2"></i> Cerrar Sesión
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 p-8 animate__animated animate__fadeIn">
|
|
@yield('content')
|
|
</main>
|
|
|
|
<!-- Footer modernizado -->
|
|
<footer class="bg-white/80 backdrop-blur-md shadow-sm mt-auto">
|
|
<div class="max-w-7xl mx-auto py-4 px-8">
|
|
<div class="flex justify-between items-center">
|
|
<p class="text-gray-600 text-sm">© 2024 PrestamosTecmm</p>
|
|
<div class="flex space-x-6">
|
|
<a href="#" class="text-gray-400 hover:text-[#1E40AF] transition-colors duration-200">
|
|
<i class="fab fa-facebook"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-[#1E40AF] transition-colors duration-200">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-[#1E40AF] transition-colors duration-200">
|
|
<i class="fab fa-instagram"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|