Actualizar servicios.html
This commit is contained in:
479
servicios.html
479
servicios.html
@@ -9,33 +9,11 @@
|
||||
<style>
|
||||
.fade-in { animation: fadeIn 0.3s ease-in-out; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* Ocultar barra de scroll pero mantener funcionalidad */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.card-hover:hover { transform: translateY(-2px); transition: all 0.2s; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
|
||||
|
||||
/* Scroll horizontal bonito para el Kanban */
|
||||
.kanban-board {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
gap: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.kanban-board::-webkit-scrollbar { height: 8px; }
|
||||
.kanban-board::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
|
||||
.kanban-board::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||||
.kanban-board::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
|
||||
.kanban-column {
|
||||
min-width: 320px;
|
||||
max-width: 320px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.card-hover { transition: all 0.2s ease; cursor: pointer; }
|
||||
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1); border-color: #93c5fd; }
|
||||
|
||||
/* ANIMACIÓN DE TEMBLOR (SHAKE) PARA TARJETAS BLOQUEADAS */
|
||||
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
|
||||
@keyframes shake {
|
||||
10%, 90% { transform: translate3d(-2px, 0, 0); }
|
||||
@@ -55,45 +33,76 @@
|
||||
<div class="flex-1 flex flex-col overflow-hidden relative">
|
||||
<div id="header-container"></div>
|
||||
|
||||
<main class="flex-1 overflow-hidden flex flex-col bg-slate-50 p-6 relative">
|
||||
|
||||
<div class="flex justify-between items-center bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 shrink-0 mb-6">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-800 tracking-tight flex items-center gap-3">
|
||||
<span class="bg-blue-600 p-2.5 rounded-xl text-white shadow-lg shadow-blue-200"><i data-lucide="kanban"></i></span>
|
||||
PANEL OPERATIVO
|
||||
</h2>
|
||||
<p class="text-sm text-slate-500 mt-1 font-medium">Tablero Kanban de gestión de expedientes activos.</p>
|
||||
</div>
|
||||
<button onclick="openCreateModal()" class="bg-slate-900 hover:bg-blue-600 text-white px-6 py-3.5 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="flex flex-wrap gap-4 items-center bg-white p-4 rounded-[1.5rem] shadow-sm border border-slate-100 mb-6 shrink-0">
|
||||
<div class="relative flex-1 min-w-[250px]">
|
||||
<i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
||||
<input type="text" id="searchFilter" oninput="renderBoard()" placeholder="Buscar por cliente, REF, población, teléfono, compañía..." class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-blue-500 outline-none transition-all">
|
||||
</div>
|
||||
<div class="flex gap-3 w-full md:w-auto">
|
||||
<div class="relative min-w-[200px]">
|
||||
<select id="opFilter" onchange="renderBoard()" class="w-full bg-slate-50 border border-slate-200 text-xs font-black px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 uppercase tracking-widest text-slate-600 appearance-none pr-10 cursor-pointer">
|
||||
<option value="ALL">TODOS LOS OPERARIOS</option>
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-slate-50 p-6 no-scrollbar text-left relative">
|
||||
<div class="fade-in max-w-[1400px] mx-auto space-y-6">
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 gap-4">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-800 tracking-tight flex items-center gap-3">
|
||||
<span class="bg-blue-600 p-2.5 rounded-xl text-white shadow-lg shadow-blue-200"><i data-lucide="layout-grid"></i></span>
|
||||
PANEL OPERATIVO
|
||||
</h2>
|
||||
<p class="text-sm text-slate-500 mt-1 font-medium">Gestión inteligente de expedientes activos.</p>
|
||||
</div>
|
||||
<div class="relative min-w-[200px]">
|
||||
<select id="statusFilter" onchange="renderBoard()" class="w-full bg-slate-50 border border-slate-200 text-xs font-black px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 uppercase tracking-widest text-slate-600 appearance-none pr-10 cursor-pointer">
|
||||
<option value="ALL">TODOS LOS ESTADOS</option>
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
<button onclick="openCreateModal()" class="bg-slate-900 hover:bg-blue-600 text-white px-6 py-3.5 rounded-2xl shadow-xl flex items-center gap-3 font-black text-xs uppercase tracking-widest transition-all active:scale-95 shrink-0">
|
||||
<i data-lucide="plus-circle" class="w-5 h-5"></i> Nuevo Servicio
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-rose-50 flex items-center justify-center text-rose-500 shrink-0"><i data-lucide="inbox" class="w-6 h-6"></i></div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Sin Asignar</p>
|
||||
<h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-unassigned">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-500 shrink-0"><i data-lucide="calendar-check" class="w-6 h-6"></i></div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Agendados</p>
|
||||
<h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-scheduled">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-amber-500 shrink-0"><i data-lucide="wrench" class="w-6 h-6"></i></div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">En Curso</p>
|
||||
<h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-active">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center text-red-500 shrink-0"><i data-lucide="alert-triangle" class="w-6 h-6"></i></div>
|
||||
<div>
|
||||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Incidencias</p>
|
||||
<h3 class="text-2xl font-black text-slate-800 leading-none mt-1" id="kpi-issues">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="kanbanBoard" class="kanban-board flex-1">
|
||||
<div class="bg-white p-4 rounded-[1.5rem] shadow-sm border border-slate-100 space-y-4 sticky top-0 z-10">
|
||||
<div class="flex flex-wrap gap-4 items-center">
|
||||
<div class="relative flex-1 min-w-[250px]">
|
||||
<i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
||||
<input type="text" id="searchFilter" oninput="renderLists()" placeholder="Buscar por cliente, REF, población, compañía, teléfono..." class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-blue-500 outline-none transition-all">
|
||||
</div>
|
||||
<div class="relative w-full md:w-64">
|
||||
<select id="opFilter" onchange="renderLists()" class="w-full bg-slate-50 border border-slate-200 text-xs font-black px-4 py-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 uppercase tracking-widest text-slate-600 appearance-none pr-10 cursor-pointer">
|
||||
<option value="ALL">TODOS LOS OPERARIOS</option>
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 items-center border-t border-slate-100 pt-3" id="statusPills">
|
||||
<span class="text-[10px] font-black text-slate-400 uppercase mr-2"><i data-lucide="loader-2" class="w-3 h-3 animate-spin inline"></i> Cargando estados...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="servicesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-12">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,6 +158,7 @@
|
||||
<h3 class="font-black text-slate-800 text-xl leading-none tracking-tight">#<span id="detRef"></span></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end text-right">
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Compañía Aseguradora</p>
|
||||
<span id="detCompany" class="bg-white border border-slate-200 px-3 py-1 rounded-lg text-xs font-black text-slate-700 mt-1 uppercase shadow-sm truncate max-w-[250px]"></span>
|
||||
@@ -183,6 +193,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-2">Descripción de la Avería</p>
|
||||
<div class="bg-amber-50/60 border border-amber-100 p-5 rounded-[1.5rem] text-sm font-medium text-slate-700 min-h-[120px] max-h-48 overflow-y-auto no-scrollbar shadow-inner leading-relaxed" id="detDesc"></div>
|
||||
@@ -211,7 +222,7 @@
|
||||
<p class="text-[10px] font-black text-slate-800 uppercase ml-1 flex items-center gap-1.5"><i data-lucide="arrow-right-left" class="w-4 h-4 text-blue-500"></i> Cambio de Estado</p>
|
||||
<div class="relative">
|
||||
<select id="detStatusMap" class="w-full bg-slate-800 text-white border-none p-4 rounded-xl text-xs font-bold shadow-lg outline-none cursor-pointer appearance-none pr-10">
|
||||
</select>
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -262,48 +273,84 @@
|
||||
<script src="js/layout.js"></script>
|
||||
<script>
|
||||
let localData = [];
|
||||
let systemStatuses = []; // Guardará todos los estados de la DB
|
||||
let systemStatuses = [];
|
||||
let activeStatusFilter = 'ALL';
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const colorDict = {
|
||||
'gray': { bg: 'bg-slate-100', text: 'text-slate-600', dot: 'bg-slate-500', border: 'border-slate-200' },
|
||||
'blue': { bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500', border: 'border-blue-200' },
|
||||
'emerald': { bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500', border: 'border-emerald-200' },
|
||||
'amber': { bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500', border: 'border-amber-200' },
|
||||
'orange': { bg: 'bg-orange-100', text: 'text-orange-700', dot: 'bg-orange-500', border: 'border-orange-200' },
|
||||
'red': { bg: 'bg-red-100', text: 'text-red-700', dot: 'bg-red-500', border: 'border-red-200' },
|
||||
'purple': { bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500', border: 'border-purple-200' },
|
||||
'indigo': { bg: 'bg-indigo-100', text: 'text-indigo-700', dot: 'bg-indigo-500', border: 'border-indigo-200' },
|
||||
'rose': { bg: 'bg-rose-100', text: 'text-rose-700', dot: 'bg-rose-500', border: 'border-rose-200' }
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
if (!localStorage.getItem("token")) window.location.href = "index.html";
|
||||
loadInitialData();
|
||||
setInterval(refreshPanelOnly, 20000);
|
||||
await loadStatuses();
|
||||
refreshPanel();
|
||||
loadGuilds();
|
||||
setInterval(refreshPanel, 20000);
|
||||
});
|
||||
|
||||
async function loadInitialData() {
|
||||
await loadStatuses();
|
||||
await loadGuilds();
|
||||
await refreshPanelOnly();
|
||||
}
|
||||
|
||||
// NUEVO: Cargar los estados reales desde la DB
|
||||
// 1. CARGAMOS LOS ESTADOS DEL SISTEMA
|
||||
async function loadStatuses() {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
||||
const data = await res.json();
|
||||
if (data.ok) {
|
||||
systemStatuses = data.statuses;
|
||||
renderStatusPills();
|
||||
|
||||
// Rellenar filtro superior
|
||||
const filterSelect = document.getElementById('statusFilter');
|
||||
filterSelect.innerHTML = '<option value="ALL">TODOS LOS ESTADOS</option>';
|
||||
systemStatuses.forEach(st => {
|
||||
// Omitimos los finales (Terminado/Anulado) por defecto en el panel operativo para no saturarlo,
|
||||
// pero los dejamos en el filtro para que se puedan buscar
|
||||
filterSelect.innerHTML += `<option value="${st.id}">${st.name}</option>`;
|
||||
});
|
||||
|
||||
// Rellenar selector del modal de detalles
|
||||
// Llenar el selector del Modal
|
||||
const modalSelect = document.getElementById('detStatusMap');
|
||||
modalSelect.innerHTML = '';
|
||||
systemStatuses.forEach(st => {
|
||||
modalSelect.innerHTML += `<option value="${st.id}">👉 ${st.name}</option>`;
|
||||
modalSelect.innerHTML += `<option value="${st.id}">👉 ${st.name.toUpperCase()}</option>`;
|
||||
});
|
||||
}
|
||||
} catch (e) { console.error("Error cargando estados:", e); }
|
||||
}
|
||||
|
||||
async function refreshPanelOnly() {
|
||||
// 2. RENDERIZAR BOTONERA DE ESTADOS (CHIPS)
|
||||
function renderStatusPills() {
|
||||
const container = document.getElementById('statusPills');
|
||||
let html = `
|
||||
<button onclick="setStatusFilter('ALL')" class="px-5 py-2 rounded-xl text-xs font-bold transition-all border ${activeStatusFilter === 'ALL' ? 'bg-slate-800 text-white border-slate-800 shadow-md' : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'}">
|
||||
TODOS
|
||||
</button>
|
||||
`;
|
||||
|
||||
systemStatuses.forEach(st => {
|
||||
// Por defecto no mostramos los finales en la botonera principal para no saturar, salvo que haya muchos.
|
||||
if(st.is_final) return;
|
||||
|
||||
const isActive = activeStatusFilter === String(st.id);
|
||||
const colorData = colorDict[st.color] || colorDict['gray'];
|
||||
|
||||
const activeClasses = `bg-white border-${st.color}-400 text-${st.color}-700 shadow-md ring-2 ring-${st.color}-100`;
|
||||
const inactiveClasses = `bg-white border-slate-200 text-slate-500 hover:bg-slate-50`;
|
||||
|
||||
html += `
|
||||
<button onclick="setStatusFilter('${st.id}')" class="px-4 py-2 rounded-xl text-xs font-bold border transition-all flex items-center gap-2 ${isActive ? activeClasses : inactiveClasses}">
|
||||
<div class="w-2 h-2 rounded-full ${colorData.dot}"></div>
|
||||
${st.name}
|
||||
</button>
|
||||
`;
|
||||
});
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function setStatusFilter(id) {
|
||||
activeStatusFilter = id;
|
||||
renderStatusPills();
|
||||
renderLists();
|
||||
}
|
||||
|
||||
async function refreshPanel() {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/services/active`, {
|
||||
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
|
||||
@@ -312,7 +359,7 @@
|
||||
if (data.ok) {
|
||||
localData = data.services;
|
||||
updateOperatorFilter();
|
||||
renderBoard();
|
||||
renderLists();
|
||||
}
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
@@ -328,180 +375,176 @@
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 🚀 NUEVO RENDERIZADOR DE KANBAN DINÁMICO
|
||||
// 🚀 CÁLCULO DE ESTADOS Y RENDERIZADO GRID
|
||||
// ==========================================
|
||||
function renderBoard() {
|
||||
if(systemStatuses.length === 0) return; // Si no hay estados cargados, no hace nada
|
||||
function getServiceStateInfo(s) {
|
||||
const raw = s.raw_data || {};
|
||||
const dbStat = raw.status_operativo;
|
||||
|
||||
// 1. Si está en la bolsa buscando (Prioridad máxima visual)
|
||||
if (!s.assigned_name && (s.automation_status === 'in_progress' || s.automation_status === 'failed')) {
|
||||
return { id: 'bolsa', name: s.automation_status === 'in_progress' ? 'Buscando Operario' : 'Fallo en Bolsa', color: s.automation_status === 'in_progress' ? 'amber' : 'red', isBlocked: true };
|
||||
}
|
||||
|
||||
// 2. Fallbacks históricos para compatibilidad
|
||||
if (!s.assigned_name || dbStat === 'sin_asignar') {
|
||||
const found = systemStatuses.find(st => st.name.toLowerCase().includes('pendiente de asignar')) || systemStatuses[0];
|
||||
return { id: found?.id, name: found?.name || 'Sin Asignar', color: found?.color || 'gray', isBlocked: false };
|
||||
}
|
||||
if (dbStat === 'asignado_operario') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('asignado')) || systemStatuses[1], isBlocked: false };
|
||||
if (dbStat === 'citado') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('citado')) || systemStatuses[3], isBlocked: false };
|
||||
if (dbStat === 'de_camino') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('camino')) || systemStatuses[4], isBlocked: false };
|
||||
if (dbStat === 'trabajando') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('trabajando')) || systemStatuses[5], isBlocked: false };
|
||||
if (dbStat === 'incidencia') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('incidencia')) || systemStatuses[6], isBlocked: false };
|
||||
if (dbStat === 'terminado') return { ...systemStatuses.find(st => st.name.toLowerCase().includes('terminado')) || systemStatuses[7], isBlocked: false };
|
||||
|
||||
// 3. Match directo por ID Numérico (El nuevo estándar)
|
||||
const foundObj = systemStatuses.find(st => String(st.id) === String(dbStat));
|
||||
if (foundObj) return { ...foundObj, isBlocked: false };
|
||||
|
||||
// 4. Último recurso inferido
|
||||
if (s.assigned_name && (!raw.scheduled_date || raw.scheduled_date === "")) {
|
||||
const f = systemStatuses.find(st => st.name.toLowerCase().includes('pendiente de cita') || st.name.toLowerCase().includes('falta fecha')) || systemStatuses[2];
|
||||
return { ...f, isBlocked: false };
|
||||
}
|
||||
if (s.assigned_name && raw.scheduled_date) {
|
||||
const f = systemStatuses.find(st => st.name.toLowerCase().includes('citado')) || systemStatuses[3];
|
||||
return { ...f, isBlocked: false };
|
||||
}
|
||||
|
||||
return { id: 'unknown', name: 'Desconocido', color: 'gray', isBlocked: false };
|
||||
}
|
||||
|
||||
function renderLists() {
|
||||
if(systemStatuses.length === 0) return;
|
||||
|
||||
const searchTerm = document.getElementById('searchFilter').value.toLowerCase();
|
||||
const selectedOp = document.getElementById('opFilter').value;
|
||||
const selectedStatus = document.getElementById('statusFilter').value;
|
||||
|
||||
// Filtro Global
|
||||
// KPIs
|
||||
let kpiUnassigned = 0;
|
||||
let kpiScheduled = 0;
|
||||
let kpiActive = 0;
|
||||
let kpiIssues = 0;
|
||||
|
||||
const filteredData = localData.filter(s => {
|
||||
const raw = s.raw_data;
|
||||
const raw = s.raw_data || {};
|
||||
const name = (raw["Nombre Cliente"] || raw["CLIENTE"] || "").toLowerCase();
|
||||
const addr = (raw["Dirección"] || raw["DOMICILIO"] || "").toLowerCase();
|
||||
const comp = (raw["Compañía"] || raw["COMPAÑIA"] || raw["Procedencia"] || "").toLowerCase();
|
||||
const pop = (raw["Población"] || raw["POBLACION-PROVINCIA"] || "").toLowerCase();
|
||||
const phone = (raw["Teléfono"] || raw["TELEFONO"] || "").toLowerCase();
|
||||
const comp = (raw["Compañía"] || raw["COMPAÑIA"] || raw["Procedencia"] || "").toLowerCase();
|
||||
const ref = (s.service_ref || "").toLowerCase();
|
||||
const assigned = s.assigned_name || "";
|
||||
|
||||
// Mapeo inverso: El backend antiguo de "scraped" guarda textos como 'citado'.
|
||||
// Ahora debemos casarlos con los IDs reales de systemStatuses.
|
||||
// Para no romper la DB existente, buscamos por ID o por coincidencia de nombre.
|
||||
let currentStatusId = "ALL";
|
||||
const dbStatusText = s.raw_data.status_operativo;
|
||||
|
||||
if (!s.assigned_name || dbStatusText === 'sin_asignar') {
|
||||
currentStatusId = systemStatuses.find(st => st.name.toLowerCase().includes('pendiente'))?.id || "ALL";
|
||||
} else if (dbStatusText === 'asignado_operario') {
|
||||
currentStatusId = systemStatuses.find(st => st.name.toLowerCase() === 'asignado')?.id || "ALL";
|
||||
} else if (dbStatusText === 'citado' || (!dbStatusText && s.raw_data.scheduled_date)) {
|
||||
currentStatusId = systemStatuses.find(st => st.name.toLowerCase().includes('citado'))?.id || "ALL";
|
||||
} else {
|
||||
// Si el status_operativo de la DB ya es un ID numérico (del nuevo selector)
|
||||
const foundStatus = systemStatuses.find(st => String(st.id) === String(dbStatusText));
|
||||
if (foundStatus) currentStatusId = foundStatus.id;
|
||||
}
|
||||
|
||||
// Guardamos el ID calculado en el objeto para poder agruparlo luego fácilmente
|
||||
s._calculated_status_id = String(currentStatusId);
|
||||
|
||||
// Calculamos el estado real
|
||||
const stateInfo = getServiceStateInfo(s);
|
||||
s._stateInfo = stateInfo; // Lo guardamos para pintar la tarjeta
|
||||
|
||||
// Lógica de KPIs
|
||||
const stName = stateInfo.name.toLowerCase();
|
||||
if (stName.includes('asignar') || stateInfo.isBlocked) kpiUnassigned++;
|
||||
else if (stName.includes('citado')) kpiScheduled++;
|
||||
else if (stName.includes('camino') || stName.includes('trabajando')) kpiActive++;
|
||||
else if (stName.includes('incidencia') || stName.includes('pausa')) kpiIssues++;
|
||||
|
||||
const matchesSearch = searchTerm === "" || name.includes(searchTerm) || ref.includes(searchTerm) || addr.includes(searchTerm) || pop.includes(searchTerm) || phone.includes(searchTerm) || comp.includes(searchTerm);
|
||||
const matchesOp = selectedOp === "ALL" || assigned === selectedOp;
|
||||
const matchesStatus = selectedStatus === "ALL" || String(currentStatusId) === String(selectedStatus);
|
||||
|
||||
// Filtro por la botonera de chips
|
||||
const matchesStatus = activeStatusFilter === "ALL" || String(stateInfo.id) === activeStatusFilter;
|
||||
|
||||
return matchesSearch && matchesOp && matchesStatus;
|
||||
});
|
||||
|
||||
const board = document.getElementById('kanbanBoard');
|
||||
board.innerHTML = ""; // Limpiamos el tablero
|
||||
// Actualizamos Dashboards Superiores
|
||||
document.getElementById('kpi-unassigned').innerText = kpiUnassigned;
|
||||
document.getElementById('kpi-scheduled').innerText = kpiScheduled;
|
||||
document.getElementById('kpi-active').innerText = kpiActive;
|
||||
document.getElementById('kpi-issues').innerText = kpiIssues;
|
||||
|
||||
// Mapeo de colores de Tailwind para los estados dinámicos
|
||||
const colorMap = {
|
||||
'gray': { bg: 'bg-slate-100/50', border: 'border-slate-200/60', dot: 'bg-slate-500', shadow: 'shadow-slate-500/50' },
|
||||
'blue': { bg: 'bg-blue-50/50', border: 'border-blue-200/60', dot: 'bg-blue-500', shadow: 'shadow-blue-500/50' },
|
||||
'emerald': { bg: 'bg-emerald-50/50', border: 'border-emerald-200/60', dot: 'bg-emerald-500', shadow: 'shadow-emerald-500/50' },
|
||||
'rose': { bg: 'bg-rose-50/50', border: 'border-rose-200/60', dot: 'bg-rose-500', shadow: 'shadow-rose-500/50' },
|
||||
'amber': { bg: 'bg-amber-50/50', border: 'border-amber-200/60', dot: 'bg-amber-500', shadow: 'shadow-amber-500/50' },
|
||||
'indigo': { bg: 'bg-indigo-50/50', border: 'border-indigo-200/60', dot: 'bg-indigo-500', shadow: 'shadow-indigo-500/50' },
|
||||
'purple': { bg: 'bg-purple-50/50', border: 'border-purple-200/60', dot: 'bg-purple-500', shadow: 'shadow-purple-500/50' },
|
||||
'red': { bg: 'bg-red-50/50', border: 'border-red-200/60', dot: 'bg-red-500', shadow: 'shadow-red-500/50' }
|
||||
};
|
||||
|
||||
// Creamos una columna para cada estado (Ocultamos los finales a menos que se filtren explícitamente)
|
||||
systemStatuses.forEach(st => {
|
||||
if (st.is_final && selectedStatus !== String(st.id) && searchTerm === "") return; // No pintar Finalizados en vista general salvo que se busque
|
||||
|
||||
const servicesInThisStatus = filteredData.filter(s => s._calculated_status_id === String(st.id));
|
||||
const colors = colorMap[st.color] || colorMap['gray'];
|
||||
|
||||
const column = document.createElement('div');
|
||||
column.className = `kanban-column space-y-4 p-4 rounded-[2rem] border ${colors.bg} ${colors.border}`;
|
||||
|
||||
let cardsHtml = servicesInThisStatus.length > 0
|
||||
? servicesInThisStatus.map(s => cardTemplate(s, st.color, st.name)).join('')
|
||||
: '<p class="text-center py-10 text-slate-400 text-xs font-bold uppercase border-2 border-dashed border-slate-200/50 rounded-[1.5rem] bg-white/30">Vacío</p>';
|
||||
|
||||
column.innerHTML = `
|
||||
<div class="flex items-center justify-between px-2 pb-2 border-b ${colors.border}">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2.5 h-2.5 rounded-full ${colors.dot} shadow-[0_0_10px_currentColor]"></div>
|
||||
<h3 class="font-black text-slate-700 uppercase text-[10px] tracking-widest">${st.name}</h3>
|
||||
</div>
|
||||
<span class="text-[10px] font-black text-slate-400 bg-white px-2 py-0.5 rounded-lg shadow-sm">${servicesInThisStatus.length}</span>
|
||||
</div>
|
||||
<div class="space-y-3 overflow-y-auto max-h-[calc(100vh-280px)] no-scrollbar pb-10">
|
||||
${cardsHtml}
|
||||
</div>
|
||||
`;
|
||||
board.appendChild(column);
|
||||
});
|
||||
const grid = document.getElementById('servicesGrid');
|
||||
grid.innerHTML = filteredData.length > 0
|
||||
? filteredData.map(s => buildGridCard(s)).join('')
|
||||
: `<div class="col-span-full py-20 text-center bg-white rounded-[2rem] border-2 border-dashed border-slate-200">
|
||||
<i data-lucide="inbox" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>
|
||||
<p class="text-slate-400 font-bold uppercase tracking-widest text-sm">No hay servicios que coincidan con los filtros</p>
|
||||
</div>`;
|
||||
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// RESTO DE FUNCIONES INTACTAS
|
||||
// ==========================================
|
||||
|
||||
function cardTemplate(s, colorName, label) {
|
||||
function buildGridCard(s) {
|
||||
const raw = s.raw_data || {};
|
||||
const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Asegurado Sin Nombre";
|
||||
const addr = raw["Dirección"] || raw["DOMICILIO"] || "---";
|
||||
const pop = raw["Población"] || raw["POBLACION-PROVINCIA"] || "";
|
||||
const fullAddr = `${addr} ${pop}`.trim();
|
||||
|
||||
const cita = raw.scheduled_date ? `${raw.scheduled_date} | ${raw.scheduled_time}` : 'Pendiente Cita';
|
||||
const companyName = raw['Compañía'] || raw['COMPAÑIA'] || raw['Procedencia'] || (s.provider === 'MANUAL' ? 'PARTICULAR' : 'ASEGURADORA');
|
||||
|
||||
const isUrgent = s.is_urgent === true || (raw['Urgente'] && raw['Urgente'].toLowerCase() === 'sí') || (raw['URGENTE'] && raw['URGENTE'].toLowerCase() === 'si');
|
||||
|
||||
const stateInfo = s._stateInfo;
|
||||
const colorData = colorDict[stateInfo.color] || colorDict['gray'];
|
||||
|
||||
let iconEstado = 'tag';
|
||||
if(raw.scheduled_date) iconEstado = 'calendar';
|
||||
if(label.toLowerCase().includes('camino')) iconEstado = 'car';
|
||||
if(label.toLowerCase().includes('reparaci') || label.toLowerCase().includes('trabaja')) iconEstado = 'wrench';
|
||||
if(label.toLowerCase().includes('incidencia')) iconEstado = 'alert-triangle';
|
||||
if(label.toLowerCase().includes('terminad') || label.toLowerCase().includes('finaliz')) iconEstado = 'check-circle';
|
||||
if(stateInfo.name.toLowerCase().includes('camino')) iconEstado = 'car';
|
||||
if(stateInfo.name.toLowerCase().includes('reparaci') || stateInfo.name.toLowerCase().includes('trabaja')) iconEstado = 'wrench';
|
||||
if(stateInfo.name.toLowerCase().includes('incidencia')) iconEstado = 'alert-triangle';
|
||||
|
||||
const colorClasses = {
|
||||
'rose': 'bg-rose-100 text-rose-600',
|
||||
'blue': 'bg-blue-100 text-blue-600',
|
||||
'emerald': 'bg-emerald-100 text-emerald-600',
|
||||
'amber': 'bg-amber-100 text-amber-600',
|
||||
'orange': 'bg-orange-100 text-orange-600',
|
||||
'red': 'bg-red-100 text-red-600',
|
||||
'purple': 'bg-purple-100 text-purple-600',
|
||||
'indigo': 'bg-indigo-100 text-indigo-600',
|
||||
'gray': 'bg-slate-200 text-slate-600'
|
||||
};
|
||||
const badgeClass = colorClasses[colorName] || colorClasses['gray'];
|
||||
|
||||
const isBlocked = !s.assigned_name && (s.automation_status === 'in_progress' || s.automation_status === 'failed');
|
||||
const isBlocked = stateInfo.isBlocked;
|
||||
const clickAction = isBlocked ? `shakeCard(this, '${s.automation_status}'); event.stopPropagation();` : `openDetail(${s.id})`;
|
||||
const cursorStyle = isBlocked ? 'cursor-not-allowed' : 'cursor-pointer';
|
||||
|
||||
return `
|
||||
<div class="bg-white p-4 rounded-3xl border border-slate-200 shadow-sm card-hover text-left flex flex-col gap-3 relative ${cursorStyle}" onclick="${clickAction}">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<span class="text-[9px] font-black ${badgeClass} px-2.5 py-1 rounded-lg uppercase tracking-wider shadow-sm flex items-center gap-1.5 truncate max-w-[60%]">
|
||||
${isBlocked ? '<span class="w-1.5 h-1.5 bg-current rounded-full pulse-slow opacity-70 shrink-0"></span>' : ''}
|
||||
<span class="truncate">${label}</span>
|
||||
</span>
|
||||
<span class="text-[9px] text-slate-400 font-bold uppercase bg-slate-50 border border-slate-100 px-2 py-1 rounded-lg shrink-0">#${s.service_ref}</span>
|
||||
<div class="bg-white p-5 rounded-3xl border border-slate-200 shadow-sm card-hover text-left flex flex-col justify-between relative ${cursorStyle}" onclick="${clickAction}">
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start justify-between w-full gap-2">
|
||||
<span class="text-[9px] font-black ${colorData.bg} ${colorData.text} px-2.5 py-1.5 rounded-lg uppercase tracking-wider flex items-center gap-1.5 truncate border ${colorData.border}">
|
||||
${isBlocked ? `<span class="w-1.5 h-1.5 bg-current rounded-full pulse-slow opacity-70 shrink-0"></span>` : `<div class="w-2 h-2 rounded-full ${colorData.dot}"></div>`}
|
||||
<span class="truncate">${stateInfo.name}</span>
|
||||
</span>
|
||||
${isUrgent ? `<span class="bg-red-500 text-white px-2 py-1 rounded-lg text-[9px] font-black uppercase shadow-sm animate-pulse shrink-0">🔥 URGENTE</span>` : `<span class="text-[10px] text-slate-400 font-bold uppercase bg-slate-50 border border-slate-100 px-2.5 py-1 rounded-lg shrink-0">#${s.service_ref}</span>`}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-blue-500 uppercase tracking-widest mb-0.5 truncate">${companyName}</p>
|
||||
<h4 class="font-black text-slate-800 uppercase text-base leading-tight line-clamp-2" title="${name}">${name}</h4>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50/50 p-3 rounded-xl border border-slate-100">
|
||||
<p class="text-[10px] text-slate-600 font-medium uppercase line-clamp-2 flex items-start gap-1.5" title="${fullAddr}">
|
||||
<i data-lucide="map-pin" class="w-3.5 h-3.5 mt-0.5 text-slate-400 shrink-0"></i> ${fullAddr}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-blue-500 uppercase tracking-widest mb-0.5 truncate">${companyName}</p>
|
||||
<h4 class="font-black text-slate-800 uppercase text-sm leading-tight line-clamp-1" title="${name}">${name}</h4>
|
||||
</div>
|
||||
<div class="bg-slate-50/50 p-2.5 rounded-xl border border-slate-100">
|
||||
<p class="text-[10px] text-slate-600 font-medium uppercase line-clamp-1 flex items-center gap-1.5" title="${fullAddr}">
|
||||
<i data-lucide="map-pin" class="w-3 h-3 text-slate-400 shrink-0"></i> ${fullAddr}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-1 pt-3 border-t border-slate-100">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<div class="bg-slate-100 p-1 rounded-md text-slate-500 shrink-0"><i data-lucide="hard-hat" class="w-3 h-3"></i></div>
|
||||
<span class="text-[9px] font-black text-slate-600 uppercase truncate" title="${s.assigned_name || 'Sin asignar'}">${s.assigned_name || 'Sin asignar'}</span>
|
||||
|
||||
<div class="flex items-center justify-between mt-4 pt-4 border-t border-slate-100">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="bg-slate-100 p-1.5 rounded-lg text-slate-500 shrink-0"><i data-lucide="hard-hat" class="w-3.5 h-3.5"></i></div>
|
||||
<span class="text-[10px] font-black text-slate-600 uppercase truncate" title="${s.assigned_name || 'Sin asignar'}">${s.assigned_name || 'Sin asignar'}</span>
|
||||
</div>
|
||||
${raw.scheduled_date && !isBlocked ? `
|
||||
<div class="flex items-center gap-1.5 text-blue-600 shrink-0 ml-2">
|
||||
<i data-lucide="${iconEstado}" class="w-3 h-3"></i>
|
||||
<div class="flex items-center gap-1.5 text-blue-600 shrink-0 ml-2 bg-blue-50 px-2 py-1 rounded-md border border-blue-100">
|
||||
<i data-lucide="${iconEstado}" class="w-3.5 h-3.5"></i>
|
||||
<span class="text-[9px] font-black uppercase">${cita}</span>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// FUNCIONES DE MODALES Y ACCIONES
|
||||
// ==========================================
|
||||
|
||||
function shakeCard(element, status) {
|
||||
element.classList.add('shake');
|
||||
setTimeout(() => element.classList.remove('shake'), 400);
|
||||
|
||||
if (status === 'in_progress') {
|
||||
showToast("⏳ El robot está asignando este servicio por WhatsApp...", "warning");
|
||||
} else {
|
||||
showToast("📍 Este servicio está en la bolsa esperando a que un operario lo coja.", "warning");
|
||||
}
|
||||
if (status === 'in_progress') { showToast("⏳ El robot está asignando este servicio por WhatsApp...", "warning"); }
|
||||
else { showToast("📍 Este servicio está en la bolsa esperando a que un operario lo coja.", "warning"); }
|
||||
}
|
||||
|
||||
function showToast(msg, type = 'success') {
|
||||
@@ -552,7 +595,9 @@
|
||||
document.getElementById('detAddrText').innerText = `${raw["Dirección"] || "Dirección no especificada"} ${raw["Población"] || ""}`;
|
||||
document.getElementById('detDesc').innerHTML = (raw["Descripción"] || raw["DESCRIPCION"] || "Sin notas.").replace(/\n/g, '<br>');
|
||||
|
||||
if (s.assigned_name && s._calculated_status_id !== 'sin_asignar') {
|
||||
const stateInfo = s._stateInfo;
|
||||
|
||||
if (s.assigned_name && stateInfo.id !== 'bolsa' && !stateInfo.name.toLowerCase().includes('asignar')) {
|
||||
document.getElementById('panelAsignado').classList.remove('hidden');
|
||||
document.getElementById('panelSinAsignar').classList.add('hidden');
|
||||
|
||||
@@ -561,14 +606,15 @@
|
||||
document.getElementById('timeInput').value = raw.scheduled_time || "";
|
||||
|
||||
// Mapeo del estado calculado al selector
|
||||
document.getElementById('detStatusMap').value = s._calculated_status_id;
|
||||
document.getElementById('detStatusMap').value = stateInfo.id;
|
||||
} else {
|
||||
document.getElementById('panelAsignado').classList.add('hidden');
|
||||
document.getElementById('panelSinAsignar').classList.remove('hidden');
|
||||
|
||||
if(raw.guild_id) {
|
||||
document.getElementById('reGremio').value = raw.guild_id;
|
||||
loadOps(raw.guild_id, 'reOperario');
|
||||
const rawGuildId = s.guild_id || raw['guild_id'] || raw.guild_id;
|
||||
if(rawGuildId) {
|
||||
document.getElementById('reGremio').value = String(rawGuildId);
|
||||
loadOps(rawGuildId, 'reOperario');
|
||||
} else {
|
||||
document.getElementById('reGremio').value = "";
|
||||
document.getElementById('reOperario').innerHTML = '<option value="">-- Elija gremio primero --</option>';
|
||||
@@ -585,7 +631,6 @@
|
||||
const time = document.getElementById('timeInput').value;
|
||||
const statusMap = document.getElementById('detStatusMap').value;
|
||||
|
||||
// Busca el estado seleccionado en el array real de la base de datos
|
||||
const selectedSt = systemStatuses.find(st => String(st.id) === String(statusMap));
|
||||
|
||||
if (selectedSt && !selectedSt.is_final && !date && !selectedSt.name.toLowerCase().includes('pausa')) {
|
||||
@@ -598,14 +643,13 @@
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
// Guarda directamente el ID del estado en status_operativo
|
||||
await fetch(`${API_URL}/services/set-appointment/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||
body: JSON.stringify({ date, time, status_operativo: statusMap })
|
||||
});
|
||||
|
||||
closeDetailModal(); showToast("Estado actualizado"); refreshPanelOnly();
|
||||
closeDetailModal(); showToast("Estado actualizado"); refreshPanel();
|
||||
} catch (e) { alert("Error"); }
|
||||
finally { btn.innerHTML = originalContent; btn.disabled = false; }
|
||||
}
|
||||
@@ -630,7 +674,7 @@
|
||||
body: JSON.stringify({ guild_id, cp, useDelay })
|
||||
});
|
||||
const data = await res.json();
|
||||
if(data.ok) { closeDetailModal(); showToast("Enviado a la rueda de WhatsApp"); refreshPanelOnly(); }
|
||||
if(data.ok) { closeDetailModal(); showToast("Enviado a la rueda de WhatsApp"); refreshPanel(); }
|
||||
else { alert(data.error || "No hay operarios en esa zona para ese gremio"); btn.innerHTML = '<div><p class="font-black uppercase text-xs">Mandar a la Cola</p><p class="text-[9px] text-blue-200">Rueda automática (WA)</p></div><i data-lucide="zap" class="w-5 h-5"></i>'; lucide.createIcons(); }
|
||||
} catch (e) { alert("Error"); }
|
||||
}
|
||||
@@ -645,6 +689,7 @@
|
||||
try {
|
||||
const select = document.getElementById('reOperario');
|
||||
const name = select.options[select.selectedIndex].text;
|
||||
const estadoAsignado = systemStatuses.find(st => st.name.toLowerCase() === 'asignado') || systemStatuses[1];
|
||||
|
||||
await fetch(`${API_URL}/providers/scraped/${id}`, {
|
||||
method: 'PUT',
|
||||
@@ -654,10 +699,10 @@
|
||||
assigned_to: assigned_to,
|
||||
assigned_name: name,
|
||||
guild_id: guild_id,
|
||||
status_operativo: 'asignado_operario'
|
||||
status_operativo: estadoAsignado ? String(estadoAsignado.id) : 'asignado_operario'
|
||||
})
|
||||
});
|
||||
closeDetailModal(); showToast("Asignado correctamente"); refreshPanelOnly();
|
||||
closeDetailModal(); showToast("Asignado correctamente"); refreshPanel();
|
||||
} catch (e) { alert("Error"); }
|
||||
}
|
||||
|
||||
@@ -674,7 +719,7 @@
|
||||
method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
|
||||
body: JSON.stringify({ ...data, mode: action })
|
||||
});
|
||||
if (res.ok) { closeCreateModal(); refreshPanelOnly(); }
|
||||
if (res.ok) { closeCreateModal(); refreshPanel(); }
|
||||
} catch(e) { alert("Error al guardar"); }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user