marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar panel.html

Browse Source
This commit is contained in:
marsalva
2026-02-07 22:59:04 +00:00
parent 769ddeb20b
commit aeebffd698
1 changed files with 124 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
panel.html
View File

@@ -7,7 +7,6 @@
<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>
@@ -34,10 +33,6 @@
<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>
@@ -45,7 +40,7 @@
</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">
<button id="btnLogout" class="flex items-center gap-2 text-slate-400 hover:text-red-400 transition-colors w-full p-2 rounded hover:bg-slate-800">
<i data-lucide="log-out" class="w-5 h-5"></i>
<span>Cerrar Sesión</span>
</button>
@@ -58,24 +53,17 @@
<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">
<input type="text" placeholder="Buscar..." 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 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>
@@ -84,48 +72,143 @@
<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">
<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">
<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="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<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 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>
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<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>
<p class="text-xs font-semibold text-gray-500 uppercase">Clientes</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 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>
<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">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
<h3 class="font-bold text-gray-800">Servicios Recientes</h3>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-gray-50 text-gray-600 text-sm uppercase tracking-wider">
<th class="p-4 font-semibold">Cliente</th>
<th class="p-4 font-semibold">Servicio</th>
<th class="p-4 font-semibold">Fecha</th>
<th class="p-4 font-semibold">Estado</th>
</tr>
</thead>
<tbody id="servicesTableBody" class="text-sm divide-y divide-gray-100">
<tr><td class="p-4 text-center text-gray-500" colspan="4">Cargando datos...</td></tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<script>
const API_URL = "https://integrarepara-api.integrarepara.es";
// ==========================================
// 1. FUNCIÓN LOGOUT (GLOBAL Y SEGURA)
// ==========================================
// La definimos fuera de todo para que esté disponible siempre
function logout() {
console.log("Cerrando sesión...");
localStorage.removeItem("token");
window.location.href = "index.html";
}
// Asignar evento al botón directamente por ID (Más robusto)
document.getElementById('btnLogout').addEventListener('click', logout);
// ==========================================
// 2. LÓGICA DE CARGA
// ==========================================
document.addEventListener("DOMContentLoaded", () => {
lucide.createIcons();
const token = localStorage.getItem("token");
if (!token) {
window.location.href = "index.html";
return;
}
try {
// Decodificar token visualmente
const payload = JSON.parse(atob(token.split('.')[1]));
document.getElementById("userEmail").innerText = payload.email || "Usuario";
document.getElementById("userName").innerText = payload.fullName || "Bienvenido";
document.getElementById("userAvatar").innerText = (payload.email[0] || "U").toUpperCase();
// Cargar datos
loadServices(token);
} catch (e) {
console.error("Error leyendo token", e);
// Si el token está corrupto, cerramos sesión
logout();
}
});
async function loadServices(token) {
try {
const res = await fetch(`${API_URL}/services`, {
headers: { "Authorization": `Bearer ${token}` }
});
const data = await res.json();
if (data.ok) {
renderTable(data.services);
document.getElementById("countServices").innerText = data.services.length;
}
} catch (error) {
console.error("Error cargando servicios:", error);
}
}
function renderTable(services) {
const tbody = document.getElementById("servicesTableBody");
tbody.innerHTML = "";
if (services.length === 0) {
tbody.innerHTML = `<tr><td colspan="4" class="p-4 text-center text-gray-400">No hay servicios registrados.</td></tr>`;
return;
}
services.forEach(service => {
const date = new Date(service.created_at).toLocaleDateString("es-ES");
tbody.innerHTML += `
<tr class="hover:bg-gray-50 transition-colors">
<td class="p-4 font-medium text-gray-800">${service.client_name || "Sin nombre"}</td>
<td class="p-4 text-gray-600">${service.title}</td>
<td class="p-4 text-gray-500">${date}</td>
<td class="p-4"><span class="bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full text-xs font-semibold">En Proceso</span></td>
</tr>
`;
});
}
function openNewServiceModal() {
alert("Próximamente: Crear nuevo servicio");
}
</script>
</body>
</html>