feat(fsm): modulo de asignacion de tareas y visitas tecnicas integrado con tareas.telcotronics.com
This commit is contained in:
+242
-1
@@ -58,6 +58,144 @@
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MÓDULO VISITAS TÉCNICAS (FSM / tareas.telcotronics.com) -->
|
||||
<div class="card mb-3 border-warning">
|
||||
<div class="card-header bg-warning bg-opacity-25 d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0 text-dark"><i class="fas fa-truck-pickup me-1"></i> Visita Técnica (FSM)</h6>
|
||||
<% if (visita) { %>
|
||||
<span class="badge bg-<%= visita.estado === 'completada' ? 'success' : visita.estado === 'en_sitio' ? 'warning' : visita.estado === 'en_camino' ? 'primary' : 'info' %> text-uppercase">
|
||||
<%= visita.estado %>
|
||||
</span>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if (!visita) { %>
|
||||
<p class="small text-muted mb-3">Si este ticket requiere intervención presencial en sitio o avería física, puedes programar la visita técnica directamente en el sistema central de tareas.</p>
|
||||
<button type="button" class="btn btn-warning btn-sm w-100 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalVisita">
|
||||
<i class="fas fa-calendar-plus me-1"></i> Programar Visita Técnica
|
||||
</button>
|
||||
<% } else { %>
|
||||
<!-- MINI-TIMELINE OPERATIVO DE SEGUIMIENTO EN VIVO -->
|
||||
<div class="timeline-operativo">
|
||||
<!-- 1. Programación -->
|
||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<span class="badge bg-info text-dark me-2">1</span>
|
||||
<strong class="small">📅 Programada</strong>
|
||||
</div>
|
||||
<div class="small ps-4">
|
||||
<div><strong>Técnico:</strong> <%= visita.tecnico_nombre %></div>
|
||||
<div class="text-muted"><%= visita.tecnico_email %></div>
|
||||
<div class="mt-1"><i class="fas fa-clock text-secondary"></i> <%= visita.fecha_visita ? new Date(visita.fecha_visita).toLocaleString('es-EC') : 'Sin fecha' %></div>
|
||||
<% if (visita.ubicacion) { %>
|
||||
<div class="mt-1"><i class="fas fa-map-marker-alt text-danger"></i> <%= visita.ubicacion %></div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Check-in GPS -->
|
||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<span class="badge <%= (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) ? 'bg-success' : 'bg-secondary' %> me-2">2</span>
|
||||
<strong class="small">📍 Check-in en Sitio</strong>
|
||||
</div>
|
||||
<div class="small ps-4">
|
||||
<% if (visita.historial && visita.historial.checkIn && visita.historial.checkIn.fecha) { %>
|
||||
<div class="text-success fw-bold"><i class="fas fa-check-circle"></i> Arribo confirmado</div>
|
||||
<div class="text-muted"><%= new Date(visita.historial.checkIn.fecha).toLocaleTimeString('es-EC') %></div>
|
||||
<% if (visita.historial.checkIn.latitud) { %>
|
||||
<div class="text-muted"><i class="fas fa-crosshairs"></i> GPS: <%= visita.historial.checkIn.latitud %>, <%= visita.historial.checkIn.longitud %></div>
|
||||
<% } %>
|
||||
<% } else { %>
|
||||
<span class="text-muted"><i class="fas fa-hourglass-half"></i> Pendiente de validación GPS</span>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Checklist y Evidencias -->
|
||||
<div class="timeline-step mb-3 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<span class="badge <%= (visita.historial && visita.historial.progreso_checklist && visita.historial.progreso_checklist.porcentaje > 0) ? 'bg-primary' : 'bg-secondary' %> me-2">3</span>
|
||||
<strong class="small">📸 Avance y Evidencias</strong>
|
||||
</div>
|
||||
<div class="small ps-4">
|
||||
<% if (visita.historial && visita.historial.progreso_checklist) { %>
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span>Checklist:</span>
|
||||
<strong><%= visita.historial.progreso_checklist.completados %>/<%= visita.historial.progreso_checklist.total %></strong>
|
||||
</div>
|
||||
<div class="progress mb-2" style="height: 8px;">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: <%= visita.historial.progreso_checklist.porcentaje %>%;"></div>
|
||||
</div>
|
||||
<% if (visita.historial.progreso_checklist.items && visita.historial.progreso_checklist.items.length > 0) { %>
|
||||
<ul class="list-unstyled mb-2" style="font-size: 0.8rem;">
|
||||
<% visita.historial.progreso_checklist.items.forEach(item => { %>
|
||||
<li class="<%= item.completado ? 'text-success fw-bold' : 'text-muted' %>">
|
||||
<i class="fas <%= item.completado ? 'fa-check-square' : 'fa-square' %> me-1"></i> <%= item.texto %>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
<% } %>
|
||||
<% } else { %>
|
||||
<div class="text-muted mb-2">Checklist en proceso</div>
|
||||
<% } %>
|
||||
|
||||
<!-- Fotos de Evidencia -->
|
||||
<% if (visita.historial && visita.historial.evidencias && visita.historial.evidencias.length > 0) { %>
|
||||
<div class="mb-2">
|
||||
<div class="fw-bold mb-1">Fotos de campo:</div>
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
<% visita.historial.evidencias.forEach(foto => { %>
|
||||
<a href="<%= foto.url %>" target="_blank" title="<%= foto.descripcion || 'Evidencia' %>">
|
||||
<img src="<%= foto.url %>" class="img-thumbnail" style="width: 50px; height: 50px; object-fit: cover;" alt="Evidencia">
|
||||
</a>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- Firma del cliente -->
|
||||
<% if (visita.historial && visita.historial.firma_cliente && visita.historial.firma_cliente.firmado) { %>
|
||||
<div class="badge bg-success bg-opacity-75 text-white w-100 py-1">
|
||||
<i class="fas fa-file-signature me-1"></i> Firmado: <%= visita.historial.firma_cliente.nombreFirmante %>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<small class="text-muted d-block"><i class="fas fa-pen"></i> Pendiente firma cliente</small>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Cierre y Sincronización -->
|
||||
<div class="timeline-step">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<span class="badge <%= visita.estado === 'completada' ? 'bg-success' : 'bg-secondary' %> me-2">4</span>
|
||||
<strong class="small">🏁 Finalización</strong>
|
||||
</div>
|
||||
<div class="small ps-4">
|
||||
<% if (visita.estado === 'completada') { %>
|
||||
<div class="text-success fw-bold"><i class="fas fa-check-circle"></i> Visita Finalizada</div>
|
||||
<% } else { %>
|
||||
<div class="text-muted">En gestión por personal de campo</div>
|
||||
<% } %>
|
||||
|
||||
<form action="/agent/ticket/<%= ticket.id %>/visita/sync" method="POST" class="mt-2">
|
||||
<button type="submit" class="btn btn-outline-primary btn-sm w-100" title="Actualizar progreso desde tareas.telcotronics.com">
|
||||
<i class="fas fa-sync-alt me-1"></i> Sincronizar estado con Hub
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3 pt-2 border-top">
|
||||
<a href="https://tareas.telcotronics.com" target="_blank" class="small text-muted text-decoration-none">
|
||||
<i class="fas fa-external-link-alt me-1"></i> Abrir en tareas.telcotronics.com
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
@@ -81,7 +219,9 @@
|
||||
<span class="badge bg-<%= r.usuario_rol === 'admin' ? 'danger' : r.usuario_rol === 'agent' ? 'info' : 'secondary' %> ms-1"><%= r.usuario_rol %></span>
|
||||
<span class="text-muted float-end"><%= r.created_at %></span>
|
||||
</div>
|
||||
<div class="card-body"><p class="mb-0"><%= r.mensaje %></p></div>
|
||||
<div class="card-body">
|
||||
<p class="mb-0" style="white-space: pre-wrap;"><%= r.mensaje %></p>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
|
||||
@@ -99,4 +239,105 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL PROGRAMAR VISITA TÉCNICA (FSM / tareas.telcotronics.com) -->
|
||||
<div class="modal fade" id="modalVisita" tabindex="-1" aria-labelledby="modalVisitaLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<form action="/agent/ticket/<%= ticket.id %>/visita" method="POST">
|
||||
<div class="modal-header bg-warning text-dark">
|
||||
<h5 class="modal-title" id="modalVisitaLabel"><i class="fas fa-truck-pickup me-2"></i>Programar Visita Técnica en Terreno</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="hidden" name="tecnicoNombre" id="inputTecnicoNombre" value="<%= (tecnicosHub && tecnicosHub.length > 0) ? (tecnicosHub[0].nombre || tecnicosHub[0].email) : '' %>">
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-7">
|
||||
<label class="form-label fw-bold">Técnico Responsable (Hub Telcotronics) <span class="text-danger">*</span></label>
|
||||
<select name="emailTecnico" id="selectTecnicoHub" class="form-select" required>
|
||||
<% if (tecnicosHub && tecnicosHub.length > 0) { %>
|
||||
<% tecnicosHub.forEach(t => { %>
|
||||
<option value="<%= t.email %>" data-nombre="<%= t.nombre || t.email %>">
|
||||
<%= t.nombre ? t.nombre + ' (' + t.email + ')' : t.email %>
|
||||
</option>
|
||||
<% }) %>
|
||||
<% } else { %>
|
||||
<option value="pablinux@hotmail.es" data-nombre="pablinux">pablinux (pablinux@hotmail.es)</option>
|
||||
<% } %>
|
||||
</select>
|
||||
<small class="text-muted">Lista en vivo conectada con tareas.telcotronics.com</small>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label class="form-label fw-bold">Prioridad de Campo</label>
|
||||
<select name="prioridad" class="form-select">
|
||||
<option value="Media" <%= ticket.prioridad === 'media' ? 'selected' : '' %>>Media</option>
|
||||
<option value="Alta" <%= ticket.prioridad === 'alta' || ticket.prioridad === 'critica' ? 'selected' : '' %>>Alta / Urgente</option>
|
||||
<option value="Baja" <%= ticket.prioridad === 'baja' ? 'selected' : '' %>>Baja</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-bold">Fecha y Hora de la Visita <span class="text-danger">*</span></label>
|
||||
<input type="datetime-local" name="fechaVisita" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-bold">Fecha / Hora Límite Estimada</label>
|
||||
<input type="datetime-local" name="fechaFin" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<label class="form-label fw-bold">Dirección / Ubicación en Sitio <span class="text-danger">*</span></label>
|
||||
<input type="text" name="ubicacion" class="form-control" placeholder="Ej: Av. Amazonas N34-120 y Colón" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label fw-bold">Coordenadas GPS (Lat, Lng)</label>
|
||||
<input type="text" name="coordenadas" class="form-control" placeholder="-0.180653, -78.467834">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold">Referencia de Llegada</label>
|
||||
<input type="text" name="referencia" class="form-control" placeholder="Ej: Frente al centro comercial, edificio azul 3er piso">
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold">Instrucciones / Asunto para el Técnico</label>
|
||||
<input type="text" name="titulo" class="form-control" value="Visita Técnica: <%= ticket.asunto %>" required>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold">Detalles / Síntomas Reportados por el Cliente</label>
|
||||
<textarea name="descripcion" class="form-control" rows="2"><%= ticket.mensaje %></textarea>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-bold">Checklist Inicial para el Técnico en Terreno (un ítem por línea)</label>
|
||||
<textarea name="checklist_items" class="form-control" rows="3">Revisión física de acometida y equipamiento
|
||||
Verificación de niveles y potencia óptica
|
||||
Pruebas de servicio con el cliente y firma</textarea>
|
||||
<small class="text-muted">El técnico marcará estos ítems desde tareas.telcotronics.com conforme avance en la visita.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-warning"><i class="fas fa-paper-plane me-1"></i> Asignar y Enviar al Hub</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const selectTec = document.getElementById('selectTecnicoHub');
|
||||
const inputNombre = document.getElementById('inputTecnicoNombre');
|
||||
if (selectTec && inputNombre) {
|
||||
selectTec.addEventListener('change', function() {
|
||||
const opt = this.options[this.selectedIndex];
|
||||
inputNombre.value = opt.getAttribute('data-nombre') || opt.value;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<%- include('../partials/footer') %>
|
||||
|
||||
Reference in New Issue
Block a user