212 lines
12 KiB
HTML
212 lines
12 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 Servicios - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
.fade-in { animation: fadeIn 0.3s ease-in-out; }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.card-hover:hover { transform: translateY(-2px); transition: all 0.2s; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-800 font-sans antialiased text-left">
|
|
|
|
<div class="flex h-screen overflow-hidden">
|
|
<div id="sidebar-container" class="h-full"></div>
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
<div id="header-container"></div>
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 no-scrollbar">
|
|
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h2 class="text-2xl font-black text-slate-800 tracking-tight">PANEL OPERATIVO</h2>
|
|
<p class="text-sm text-slate-500 font-medium">Gestión de expedientes activos y nuevas altas.</p>
|
|
</div>
|
|
<button onclick="openCreateModal()" class="bg-slate-900 hover:bg-blue-600 text-white px-6 py-3 rounded-2xl shadow-xl flex items-center gap-3 font-black text-xs uppercase tracking-widest transition-all active:scale-95">
|
|
<i data-lucide="plus-circle" class="w-5 h-5"></i> Nuevo Servicio
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-2 px-2">
|
|
<div class="w-2 h-2 rounded-full bg-amber-500"></div>
|
|
<h3 class="font-black text-slate-400 uppercase text-[10px] tracking-widest">Pendientes de Cita / Recién Aceptados</h3>
|
|
</div>
|
|
<div id="pending-list" class="space-y-3">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-2 px-2">
|
|
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
|
<h3 class="font-black text-slate-400 uppercase text-[10px] tracking-widest">Servicios en Curso / Con Cita</h3>
|
|
</div>
|
|
<div id="assigned-list" class="space-y-3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="createModal" class="fixed inset-0 bg-slate-900/80 hidden z-[100] flex items-center justify-center backdrop-blur-sm p-4 text-left">
|
|
<div class="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col fade-in">
|
|
<div class="p-8 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
|
<h3 class="font-black text-slate-800 uppercase tracking-tighter text-xl">Alta de Expediente Manual</h3>
|
|
<button onclick="closeCreateModal()" class="text-slate-400 hover:text-red-500 transition-colors"><i data-lucide="x"></i></button>
|
|
</div>
|
|
|
|
<form onsubmit="saveNewService(event)" class="p-8 overflow-y-auto no-scrollbar grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-4">
|
|
<div class="bg-blue-50/50 p-6 rounded-3xl border border-blue-100 space-y-4">
|
|
<h4 class="font-black text-blue-400 uppercase text-[10px] tracking-widest">Información del Cliente</h4>
|
|
<input type="tel" id="nPhone" placeholder="Teléfono" class="w-full bg-white border border-blue-100 px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-400 font-bold" required>
|
|
<input type="text" id="nName" placeholder="Nombre completo" class="w-full bg-white border border-blue-100 px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-400 font-bold" required>
|
|
<input type="text" id="nAddr" placeholder="Dirección, CP y Población" class="w-full bg-white border border-blue-100 px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-400 font-bold" required>
|
|
</div>
|
|
<textarea id="nDesc" placeholder="Descripción de la avería..." rows="4" class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-3xl outline-none focus:border-slate-400 text-sm font-medium"></textarea>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="space-y-2">
|
|
<label class="font-black text-slate-400 uppercase text-[10px] ml-2">Gremio Especialista</label>
|
|
<select id="nGuild" class="w-full bg-slate-100 border-none px-4 py-4 rounded-2xl font-bold appearance-none outline-none" onchange="loadOps(this.value)">
|
|
<option value="">Seleccionar Gremio...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="bg-slate-900 p-6 rounded-[2rem] text-white space-y-4 shadow-2xl">
|
|
<h4 class="font-black text-slate-500 uppercase text-[10px] tracking-widest text-center">Método de Asignación</h4>
|
|
<div class="grid grid-cols-1 gap-3">
|
|
<button type="submit" name="action" value="auto" class="bg-blue-600 hover:bg-blue-500 p-4 rounded-2xl flex items-center justify-between group transition-all">
|
|
<div class="text-left">
|
|
<p class="font-black uppercase text-xs">Mandar a la Cola</p>
|
|
<p class="text-[10px] text-blue-200 font-medium tracking-tight">WhatsApp automático al azar</p>
|
|
</div>
|
|
<i data-lucide="zap" class="w-6 h-6 group-hover:scale-125 transition-transform"></i>
|
|
</button>
|
|
|
|
<div class="bg-slate-800 p-4 rounded-2xl space-y-3">
|
|
<p class="font-black uppercase text-[10px] text-slate-500 text-center">O Asignar a Mano:</p>
|
|
<select id="nWorker" class="w-full bg-slate-700 border-none text-white px-3 py-2 rounded-xl text-sm outline-none">
|
|
<option value="">Seleccionar operario...</option>
|
|
</select>
|
|
<button type="submit" name="action" value="manual" class="w-full bg-white text-slate-900 font-black py-3 rounded-xl text-xs uppercase hover:bg-emerald-400 transition-colors">Confirmar Directo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/layout.js"></script>
|
|
<script>
|
|
let localData = [];
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
if (!localStorage.getItem("token")) window.location.href = "index.html";
|
|
refreshPanel();
|
|
loadGuilds();
|
|
setInterval(refreshPanel, 30000); // Auto-refresco
|
|
});
|
|
|
|
async function refreshPanel() {
|
|
try {
|
|
const res = await fetch(`${API_URL}/services/active`, {
|
|
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
|
|
});
|
|
const data = await res.json();
|
|
if (data.ok) {
|
|
localData = data.services;
|
|
renderLists();
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
function renderLists() {
|
|
const pending = localData.filter(s => !s.raw_data.scheduled_date);
|
|
const assigned = localData.filter(s => s.raw_data.scheduled_date);
|
|
|
|
document.getElementById('pending-list').innerHTML = pending.map(s => cardTemplate(s, 'amber')).join('');
|
|
document.getElementById('assigned-list').innerHTML = assigned.map(s => cardTemplate(s, 'emerald')).join('');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function cardTemplate(s, color) {
|
|
const raw = s.raw_data;
|
|
const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado";
|
|
const addr = raw["Dirección"] || raw["DOMICILIO"] || "---";
|
|
const worker = s.assigned_name || 'Sin operario';
|
|
|
|
return `
|
|
<div class="bg-white p-5 rounded-[2rem] border border-slate-100 shadow-sm card-hover text-left flex items-start justify-between gap-4">
|
|
<div class="space-y-1">
|
|
<span class="text-[9px] font-black bg-${color}-100 text-${color}-600 px-2 py-0.5 rounded-full uppercase">#${s.service_ref}</span>
|
|
<h4 class="font-black text-slate-800 uppercase text-sm leading-tight">${name}</h4>
|
|
<p class="text-[10px] text-slate-400 font-bold uppercase truncate max-w-[200px]">${addr}</p>
|
|
<div class="flex items-center gap-2 mt-2">
|
|
<div class="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center text-slate-400"><i data-lucide="user" class="w-3 h-3"></i></div>
|
|
<span class="text-[11px] font-black text-slate-600 uppercase">${worker}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<button class="p-3 bg-slate-50 rounded-2xl text-slate-400 hover:bg-blue-50 hover:text-blue-600 transition-all"><i data-lucide="calendar" class="w-5 h-5"></i></button>
|
|
<button class="p-3 bg-slate-50 rounded-2xl text-slate-400 hover:bg-emerald-50 hover:text-emerald-600 transition-all"><i data-lucide="message-square" class="w-5 h-5"></i></button>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
async function saveNewService(e) {
|
|
e.preventDefault();
|
|
const action = e.submitter.value;
|
|
const data = {
|
|
phone: document.getElementById('nPhone').value,
|
|
name: document.getElementById('nName').value,
|
|
address: document.getElementById('nAddr').value,
|
|
description: document.getElementById('nDesc').value,
|
|
guild_id: document.getElementById('nGuild').value,
|
|
assigned_to: document.getElementById('nWorker').value || null
|
|
};
|
|
|
|
try {
|
|
// Ruta que crea el registro inicial en scraped_services
|
|
const res = await fetch(`${API_URL}/services/manual-high`, {
|
|
method: 'POST',
|
|
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
|
body: JSON.stringify({ ...data, mode: action })
|
|
});
|
|
|
|
if (res.ok) {
|
|
closeCreateModal();
|
|
refreshPanel();
|
|
alert(action === 'auto' ? "Rueda lanzada por WhatsApp" : "Servicio creado y asignado");
|
|
}
|
|
} catch(e) { alert("Error al guardar"); }
|
|
}
|
|
|
|
// --- HELPERS MODAL ---
|
|
function openCreateModal() { document.getElementById('createModal').classList.remove('hidden'); }
|
|
function closeCreateModal() { document.getElementById('createModal').classList.add('hidden'); }
|
|
|
|
async function loadGuilds() {
|
|
const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
|
const data = await res.json();
|
|
if(data.ok) document.getElementById('nGuild').innerHTML += data.guilds.map(g => `<option value="${g.id}">${g.name}</option>`).join('');
|
|
}
|
|
|
|
async function loadOps(gid) {
|
|
if(!gid) return;
|
|
const res = await fetch(`${API_URL}/operators?guild_id=${gid}`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
|
const data = await res.json();
|
|
if(data.ok) document.getElementById('nWorker').innerHTML = '<option value="">Seleccionar operario...</option>' + data.operators.map(o => `<option value="${o.id}">${o.full_name}</option>`).join('');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |