131 lines
7.7 KiB
HTML
131 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Panel de Control - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
/* Animación suave para cargar */
|
|
.fade-in { animation: fadeIn 0.5s ease-in-out; }
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
|
|
|
|
<div class="flex h-screen overflow-hidden">
|
|
|
|
<aside class="w-64 bg-slate-900 text-white flex flex-col hidden md:flex shadow-xl z-20">
|
|
<div class="h-16 flex items-center justify-center border-b border-slate-800">
|
|
<h1 class="text-xl font-bold tracking-wider text-blue-400">INTEGRA<span class="text-white">REPARA</span></h1>
|
|
</div>
|
|
|
|
<nav class="flex-1 px-4 py-6 space-y-2">
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 bg-blue-600 rounded-lg text-white transition-all shadow-lg shadow-blue-500/30">
|
|
<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-all">
|
|
<i data-lucide="calendar" class="w-5 h-5"></i>
|
|
<span>Calendario</span>
|
|
</a>
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-all">
|
|
<i data-lucide="users" class="w-5 h-5"></i>
|
|
<span>Clientes</span>
|
|
</a>
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-all">
|
|
<i data-lucide="zap" class="w-5 h-5"></i>
|
|
<span>Automatizaciones</span>
|
|
</a>
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-all">
|
|
<i data-lucide="settings" class="w-5 h-5"></i>
|
|
<span>Configuración</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="p-4 border-t border-slate-800">
|
|
<button onclick="logout()" class="flex items-center gap-2 text-slate-400 hover:text-red-400 transition-colors w-full">
|
|
<i data-lucide="log-out" class="w-5 h-5"></i>
|
|
<span>Cerrar Sesión</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden relative">
|
|
|
|
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 shadow-sm">
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative hidden lg:block">
|
|
<i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
|
|
<input type="text" placeholder="Buscar cliente, servicio..."
|
|
class="pl-10 pr-4 py-2 bg-gray-100 border-none rounded-full focus:ring-2 focus:ring-blue-500 focus:bg-white text-sm w-64 transition-all">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<button class="p-2 text-gray-400 hover:text-blue-600 transition-colors relative">
|
|
<i data-lucide="bell" class="w-5 h-5"></i>
|
|
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
|
|
</button>
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-right hidden sm:block">
|
|
<p class="text-sm font-semibold text-gray-700" id="userName">Cargando...</p>
|
|
<p class="text-xs text-gray-500" id="userEmail">...</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg" id="userAvatar">
|
|
U
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-8 fade-in">
|
|
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-800">Panel de Control</h2>
|
|
<button onclick="openNewServiceModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg shadow-lg shadow-blue-500/30 flex items-center gap-2 transition-all transform hover:scale-105">
|
|
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
|
Nuevo Servicio
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-500 uppercase">Servicios Activos</p>
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1" id="countServices">0</h3>
|
|
</div>
|
|
<div class="p-2 bg-blue-50 text-blue-600 rounded-lg">
|
|
<i data-lucide="briefcase" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-500 uppercase">Citas Hoy</p>
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">3</h3>
|
|
</div>
|
|
<div class="p-2 bg-purple-50 text-purple-600 rounded-lg">
|
|
<i data-lucide="calendar-clock" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-500 uppercase">Clientes Nuevos</p>
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">+12</h3>
|
|
</div>
|
|
<div class="p-2 bg-green-50 text-green-600 rounded-lg">
|
|
<i data-lucide="users" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-500 uppercase">Mensajes WA</p>
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1"> |