feat: migrar dashboard a React 19 + TypeScript + Vite + Tailwind v4

- Módulo HITL (/cases): 6 patrones de formularios dinámicos para 53 tipos de caso con validación Zod - Módulo Monitor (/monitor): streaming token-a-token en tiempo real, auto-scroll y notas internas vía WebSocket - Arquitectura híbrida: REST (canal autoritativo) + WebSocket (difusión/streaming) - MSW para desarrollo sin backend, hooks de notificaciones/sonido/título preservados - Backend legacy movido a legacy/, archivos residuales eliminados de raíz
2026-07-23 18:27:03 -05:00
parent 69cc215954
commit 8f044567c0
78 changed files with 11818 additions and 1563 deletions
@@ -0,0 +1,659 @@
+// Claro Cases Frontend Controller
+let requests = [];
+let selectedRequest = null;
+let searchQuery = '';
+let currentTab = 'all';
+
+// Independent Multi-Timer State
+// Structure: { [caseId]: { elapsed: 0, isRunning: false, lastStarted: timestamp } }
+let caseTimers = {};
+
+// Tab/Title Notification State
+let unreadCount = 0;
+let titleInterval = null;
+let isTabFocused = true;
+
+// Audio Context State
+let audioCtx = null;
+
+// DOM Elements
+const casesList = document.getElementById('cases-list');
+const casesCount = document.getElementById('cases-count');
+const caseDetails = document.getElementById('case-details');
+const searchInput = document.getElementById('search-input');
+const connectionStatus = document.getElementById('connection-status');
+const connectionText = document.getElementById('connection-text');
+
+// Initialize
+window.addEventListener('DOMContentLoaded', () => {
+  loadTimers();
+  fetchRequests();
+  setupSSE();
+  setupSearch();
+  setupTheme();
+  setupTabs();
+  setupWindowFocusListeners();
+  startGlobalInterval();
+
+  // Request desktop notification permissions
+  if (window.Notification && Notification.permission === 'default') {
+    Notification.requestPermission();
+  }
+});
+
+// Window Focus Listeners to clear unread counts
+function setupWindowFocusListeners() {
+  window.addEventListener('focus', () => {
+    isTabFocused = true;
+    unreadCount = 0;
+    stopTitleFlashing();
+    document.title = 'Claro Cases Dashboard';
+  });
+
+  window.addEventListener('blur', () => {
+    isTabFocused = false;
+  });
+
+  // Enable AudioContext on first click/keypress gesture to bypass Chrome's autoplay policies
+  const resumeAudio = () => {
+    if (!audioCtx) {
+      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    if (audioCtx.state === 'suspended') {
+      audioCtx.resume();
+    }
+  };
+  document.addEventListener('click', resumeAudio);
+  document.addEventListener('keydown', resumeAudio);
+}
+
+// Load case timers from localStorage and calculate offset elapsed time for running ones
+function loadTimers() {
+  const saved = localStorage.getItem('caseTimers');
+  if (saved) {
+    try {
+      caseTimers = JSON.parse(saved);
+      // For any running timer, calculate elapsed time since last reload
+      for (const [id, timer] of Object.entries(caseTimers)) {
+        if (timer.isRunning) {
+          const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
+          timer.elapsed += (timeDiff > 0 ? timeDiff : 0);
+          timer.lastStarted = Date.now(); // reset start mark to now
+        }
+      }
+      saveTimers();
+    } catch (e) {
+      console.error('Failed to parse saved timers:', e);
+      caseTimers = {};
+    }
+  }
+}
+
+// Save case timers to localStorage
+function saveTimers() {
+  localStorage.setItem('caseTimers', JSON.stringify(caseTimers));
+}
+
+// Fetch all existing requests
+async function fetchRequests() {
+  try {
+    const response = await fetch('/api/requests');
+    if (!response.ok) throw new Error('Error al obtener solicitudes');
+    requests = await response.json();
+    renderList();
+  } catch (error) {
+    console.error('Fetch error:', error);
+    casesList.innerHTML = `<div class="loading-placeholder" style="color: #ff3b30">Error al cargar solicitudes. Verifica la base de datos.</div>`;
+  }
+}
+
+// Connect to Server-Sent Events (SSE) for real-time updates
+function setupSSE() {
+  const sse = new EventSource('/api/sse');
+
+  sse.onopen = () => {
+    connectionStatus.className = 'status-dot connected';
+    connectionText.textContent = 'En línea';
+  };
+
+  sse.onerror = (error) => {
+    console.error('SSE Error:', error);
+    connectionStatus.className = 'status-dot disconnected';
+    connectionText.textContent = 'Reconectando...';
+  };
+
+  sse.onmessage = (event) => {
+    try {
+      const newRequest = JSON.parse(event.data);
+      // Prepend new request to local state
+      requests.unshift(newRequest);
+      renderList();
+      
+      // Play alert chime, send desktop notification and flash tab title
+      playNotificationSound();
+      showDesktopNotification(newRequest);
+      triggerTitleNotification();
+      
+      console.log('🔔 Nueva solicitud recibida:', newRequest);
+    } catch (err) {
+      console.error('Error parsing SSE data:', err);
+    }
+  };
+}
+
+// Search Filter
+function setupSearch() {
+  searchInput.addEventListener('input', (e) => {
+    searchQuery = e.target.value.toLowerCase().trim();
+    renderList();
+  });
+}
+
+// Render Request Cards List
+function renderList() {
+  const filtered = requests.filter(req => {
+    // Tab filter
+    if (currentTab === 'pending' && req.status.toLowerCase() === 'finalizado') {
+      return false;
+    }
+    if (currentTab === 'finalizado' && req.status.toLowerCase() !== 'finalizado') {
+      return false;
+    }
+
+    const titleMatch = req.title.toLowerCase().includes(searchQuery);
+    const extIdMatch = req.external_id && req.external_id.toLowerCase().includes(searchQuery);
+    const descMatch = req.description && req.description.toLowerCase().includes(searchQuery);
+    const cedulaMatch = req.cedula && req.cedula.toLowerCase().includes(searchQuery);
+    const tipoMatch = req.tipo_solicitud && req.tipo_solicitud.toLowerCase().includes(searchQuery);
+    return titleMatch || extIdMatch || descMatch || cedulaMatch || tipoMatch;
+  });
+
+  casesCount.textContent = filtered.length;
+
+  if (filtered.length === 0) {
+    casesList.innerHTML = `<div class="loading-placeholder">No se encontraron solicitudes.</div>`;
+    return;
+  }
+
+  casesList.innerHTML = '';
+  filtered.forEach(req => {
+    const card = document.createElement('div');
+    const isActive = selectedRequest && selectedRequest.id === req.id;
+    card.className = `case-card ${isActive ? 'active' : ''}`;
+    
+    const formattedDate = new Date(req.created_at).toLocaleString();
+    const statusClass = `status-${req.status.toLowerCase()}`;
+
+    // Get time from this case's timer if active
+    const timer = caseTimers[req.id];
+    let timerTag = '';
+    if (timer) {
+      const elapsedTotal = timer.elapsed + (timer.isRunning ? Math.floor((Date.now() - timer.lastStarted) / 1000) : 0);
+      timerTag = ` <span class="timing-badge" id="card-timer-${req.id}">⏳ ${formatTime(elapsedTotal)}</span>`;
+    }
+
+    card.innerHTML = `
+      <div class="case-card-header">
+        <span class="case-title">${escapeHTML(req.title)}${timerTag}</span>
+        <span class="case-status-badge ${statusClass}">${escapeHTML(req.status)}</span>
+      </div>
+      <p class="case-desc-preview">${escapeHTML(req.description || 'Sin descripción')}</p>
+      <div class="case-footer">
+        <span class="case-id">${req.external_id ? escapeHTML(req.external_id) : '#' + req.id}</span>
+        ${req.tipo_solicitud ? `<span class="case-type-badge">${escapeHTML(req.tipo_solicitud)}</span>` : ''}
+        <span class="case-time">${formattedDate}</span>
+      </div>
+    `;
+
+    card.addEventListener('click', () => {
+      document.querySelectorAll('.case-card').forEach(c => c.classList.remove('active'));
+      card.classList.add('active');
+      
+      selectedRequest = req;
+      renderDetails();
+    });
+
+    casesList.appendChild(card);
+  });
+}
+
+// Render Selected Request Details
+function renderDetails() {
+  if (!selectedRequest) {
+    caseDetails.innerHTML = `
+      <div class="empty-state">
+        <div class="empty-icon">📁</div>
+        <h3>Selecciona una solicitud</h3>
+        <p>Haz clic en cualquier elemento de la lista de la izquierda para ver su información detallada y acciones de gestión.</p>
+      </div>
+    `;
+    return;
+  }
+
+  const formattedDate = new Date(selectedRequest.created_at).toLocaleString();
+  const statusClass = `status-${selectedRequest.status.toLowerCase()}`;
+  
+  // Parse Payload JSON
+  let payloadObj = selectedRequest.payload;
+  if (typeof payloadObj === 'string') {
+    try {
+      payloadObj = JSON.parse(payloadObj);
+    } catch (e) {
+      payloadObj = {};
+    }
+  }
+
+  // Try to find cedula in root or payload fallbacks
+  let displayCedula = selectedRequest.cedula;
+  if (!displayCedula && payloadObj) {
+    displayCedula = payloadObj.cedula || payloadObj.cédula || payloadObj.documento || payloadObj.identification || payloadObj.id || payloadObj.cc;
+  }
+
+  // Generate HTML for payload fields
+  let payloadFieldsHTML = '';
+  if (payloadObj && Object.keys(payloadObj).length > 0) {
+    payloadFieldsHTML = '<div class="info-grid">';
+    for (const [key, value] of Object.entries(payloadObj)) {
+      const displayValue = typeof value === 'object' ? JSON.stringify(value) : value;
+      payloadFieldsHTML += `
+        <div class="info-item">
+          <span class="info-label">${escapeHTML(key)}</span>
+          <span class="info-value">${escapeHTML(displayValue)}</span>
+        </div>
+      `;
+    }
+    payloadFieldsHTML += '</div>';
+  } else {
+    payloadFieldsHTML = '<div class="no-payload">Sin datos adicionales</div>';
+  }
+
+  // Interactive buttons and status management panel HTML
+  let actionsPanelHTML = '';
+  const isFinalizado = selectedRequest.status.toLowerCase() === 'finalizado';
+  const timer = caseTimers[selectedRequest.id];
+
+  if (isFinalizado) {
+    const formattedHandlingTime = formatSavedTime(selectedRequest.handling_time);
+    actionsPanelHTML = `
+      <div class="actions-panel finished-panel">
+        <div class="timer-display">
+          <span class="timer-lbl">Tiempo de Gestión:</span>
+          <span class="timer-val">${formattedHandlingTime}</span>
+        </div>
+        <button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar Caso</button>
+      </div>
+    `;
+  } else if (timer && timer.isRunning) {
+    const elapsedTotal = timer.elapsed + Math.floor((Date.now() - timer.lastStarted) / 1000);
+    const isValidation = selectedRequest.tipo_solicitud && 
+      selectedRequest.tipo_solicitud.toLowerCase().includes('validacion');
+    actionsPanelHTML = `
+      <div class="actions-panel active-panel">
+        <div class="timer-display">
+          <span class="timer-lbl animate-pulse">⏳ Tiempo transcurrido:</span>
+          <span class="timer-val" id="active-timer">${formatTime(elapsedTotal)}</span>
+        </div>
+        ${isValidation ? `
+          <div class="validation-section" style="display: flex; flex-direction: column; gap: 8px;">
+            <span style="font-weight: 600; color: var(--text-primary); font-size: 12px; margin-bottom: 4px;">¿El usuario es válido?</span>
+            <div class="button-group">
+              <button class="btn btn-success" onclick="finalizeCase(${selectedRequest.id})">Sí</button>
+              <button class="btn btn-danger" onclick="finalizeCase(${selectedRequest.id})">No</button>
+            </div>
+          </div>
+        ` : `
+          <div class="input-resolution-section" style="display: flex; flex-direction: column; gap: 8px; width: 100%;">
+            <span style="font-weight: 600; color: var(--text-primary); font-size: 12px; margin-bottom: 2px;">Ingrese el valor de resolución:</span>
+            <input type="text" id="resolution-input-${selectedRequest.id}" placeholder="Ej. Pago verificado, Pendiente por revisar..." style="padding: 8px 12px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); outline: none; margin-bottom: 4px;" />
+            <div class="button-group">
+              <button class="btn btn-success" onclick="submitResolution(${selectedRequest.id})">Finalizar Caso</button>
+              <button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar</button>
+            </div>
+          </div>
+        `}
+      </div>
+    `;
+  } else {
+    // Show total handling time if there was some time saved, otherwise none
+    const timeDisplay = selectedRequest.handling_time ? `
+      <div class="timer-display">
+        <span class="timer-lbl">Último tiempo guardado:</span>
+        <span class="timer-val">${formatSavedTime(selectedRequest.handling_time)}</span>
+      </div>
+    ` : '';
+
+    actionsPanelHTML = `
+      <div class="actions-panel idle-panel">
+        ${timeDisplay}
+        <div class="button-group">
+          <button class="btn btn-primary" onclick="startTimer(${selectedRequest.id})">Gestionar Caso</button>
+          <button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar Caso</button>
+        </div>
+      </div>
+    `;
+  }
+
+  caseDetails.innerHTML = `
+    <div class="detail-view">
+      <div class="detail-header">
+        <div class="detail-meta">
+          <span class="case-status-badge ${statusClass}">${escapeHTML(selectedRequest.status)}</span>
+          <span class="detail-time">Creado el ${formattedDate}</span>
+        </div>
+        <h2 class="detail-title">${escapeHTML(selectedRequest.title)}</h2>
+        
+        <div class="header-metadata-grid">
+          <div class="meta-item">
+            <span class="meta-label">ID de Referencia:</span>
+            <strong class="meta-value">${selectedRequest.external_id ? escapeHTML(selectedRequest.external_id) : '#' + selectedRequest.id}</strong>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">Cédula del Cliente:</span>
+            <strong class="meta-value highlight-meta">${displayCedula ? escapeHTML(String(displayCedula)) : 'No especificada'}</strong>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">Tipo de Solicitud:</span>
+            <strong class="meta-value">${selectedRequest.tipo_solicitud ? escapeHTML(selectedRequest.tipo_solicitud) : 'No especificado'}</strong>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action Panel with Buttons and Stopwatch -->
+      <div class="detail-section">
+        <h4>Panel de Operación</h4>
+        ${actionsPanelHTML}
+      </div>
+
+      <div class="detail-section">
+        <h4>Descripción</h4>
+        <p class="description-text">${escapeHTML(selectedRequest.description || 'No se proporcionó una descripción.')}</p>
+      </div>
+
+      <div class="detail-section">
+        <h4>Datos de la Solicitud</h4>
+        ${payloadFieldsHTML}
+      </div>
+    </div>
+  `;
+}
+
+// Timer Functions
+function startTimer(requestId) {
+  // Initialize timer entry if not existing
+  if (!caseTimers[requestId]) {
+    caseTimers[requestId] = {
+      elapsed: 0,
+      isRunning: false,
+      lastStarted: 0
+    };
+  }
+
+  const timer = caseTimers[requestId];
+  timer.isRunning = true;
+  timer.lastStarted = Date.now();
+  saveTimers();
+  
+  // Re-render UI to show ticking elements
+  renderDetails();
+  renderList();
+}
+
+// Global ticking function running once per second for all active timers
+let globalInterval = null;
+function startGlobalInterval() {
+  if (globalInterval) clearInterval(globalInterval);
+  globalInterval = setInterval(() => {
+    for (const [id, timer] of Object.entries(caseTimers)) {
+      if (timer.isRunning) {
+        const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
+        const currentTotal = timer.elapsed + timeDiff;
+
+        // Update list card if visible
+        const cardTimer = document.getElementById(`card-timer-${id}`);
+        if (cardTimer) {
+          cardTimer.textContent = `⏳ ${formatTime(currentTotal)}`;
+        }
+
+        // Update active details stopwatch if selected
+        if (selectedRequest && selectedRequest.id === parseInt(id)) {
+          const activeTimer = document.getElementById('active-timer');
+          if (activeTimer) {
+            activeTimer.textContent = formatTime(currentTotal);
+          }
+        }
+      }
+    }
+  }, 1000);
+}
+
+function formatTime(totalSeconds) {
+  const mins = Math.floor(totalSeconds / 60);
+  const secs = totalSeconds % 60;
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+
+function formatSavedTime(totalSeconds) {
+  if (!totalSeconds) return '0s';
+  const mins = Math.floor(totalSeconds / 60);
+  const secs = totalSeconds % 60;
+  return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+}
+
+async function finalizeCase(requestId, additionalPayload = null) {
+  const timer = caseTimers[requestId];
+  let finalTime = 0;
+
+  if (timer) {
+    if (timer.isRunning) {
+      const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
+      finalTime = timer.elapsed + timeDiff;
+    } else {
+      finalTime = timer.elapsed;
+    }
+    // Delete timer entry from tracking
+    delete caseTimers[requestId];
+    saveTimers();
+  }
+
+  try {
+    const bodyData = { status: 'Finalizado', handling_time: finalTime };
+    if (additionalPayload) {
+      const currentReq = requests.find(r => r.id === requestId);
+      let payloadObj = {};
+      if (currentReq && currentReq.payload) {
+        try {
+          payloadObj = typeof currentReq.payload === 'string' ? JSON.parse(currentReq.payload) : currentReq.payload;
+        } catch (e) {
+          payloadObj = {};
+        }
+      }
+      bodyData.payload = { ...payloadObj, ...additionalPayload };
+    }
+
+    const response = await fetch(`/api/requests/${requestId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(bodyData)
+    });
+    if (!response.ok) throw new Error('Error al finalizar caso');
+    const updated = await response.json();
+    
+    // Update local state list
+    const index = requests.findIndex(r => r.id === requestId);
+    if (index !== -1) {
+      requests[index] = updated;
+    }
+    selectedRequest = updated;
+    renderList();
+    renderDetails();
+  } catch (error) {
+    console.error(error);
+    alert('Error al actualizar el estado del caso en el servidor.');
+  }
+}
+
+function submitResolution(requestId) {
+  const input = document.getElementById(`resolution-input-${requestId}`);
+  const val = input ? input.value.trim() : '';
+  finalizeCase(requestId, { valor_cierre: val || 'No especificado' });
+}
+
+async function deleteCase(requestId) {
+  if (!confirm('¿Estás seguro de que deseas eliminar esta solicitud?')) return;
+  
+  // Clear timer tracking for this case
+  if (caseTimers[requestId]) {
+    delete caseTimers[requestId];
+    saveTimers();
+  }
+
+  try {
+    const response = await fetch(`/api/requests/${requestId}`, {
+      method: 'DELETE'
+    });
+    if (!response.ok) throw new Error('Error al eliminar');
+    
+    // Remove from local state
+    requests = requests.filter(r => r.id !== requestId);
+    selectedRequest = null;
+    renderList();
+    renderDetails();
+  } catch (error) {
+    console.error(error);
+    alert('Error al eliminar la solicitud.');
+  }
+}
+
+// Helper to escape HTML tags
+function escapeHTML(str) {
+  if (!str) return '';
+  return str.replace(/[&<>'"]/g, 
+    tag => ({
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      "'": '&#39;',
+      '"': '&quot;'
+    }[tag] || tag)
+  );
+}
+
+// Theme Switcher
+function setupTheme() {
+  const themeToggle = document.getElementById('theme-toggle');
+  
+  // Check theme settings in local storage
+  const currentTheme = localStorage.getItem('theme') || 'light';
+  if (currentTheme === 'dark') {
+    document.body.classList.add('dark-mode');
+    themeToggle.textContent = '☀️';
+  } else {
+    themeToggle.textContent = '🌙';
+  }
+
+  themeToggle.addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+    const isDark = document.body.classList.contains('dark-mode');
+    themeToggle.textContent = isDark ? '☀️' : '🌙';
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  });
+}
+
+// Tab Switcher
+function setupTabs() {
+  const tabs = document.querySelectorAll('.tab-btn');
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      tabs.forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+      currentTab = tab.dataset.tab;
+      renderList();
+    });
+  });
+}
+
+// Play notification sound using Web Audio API
+function playNotificationSound() {
+  try {
+    // If not initialized yet due to autoplay limits
+    if (!audioCtx) {
+      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    
+    // If it's still suspended (needs user gesture first)
+    if (audioCtx.state === 'suspended') {
+      console.warn('AudioContext is suspended. Click on the dashboard page first to enable sound alerts.');
+      return;
+    }
+
+    const now = audioCtx.currentTime;
+    
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    
+    osc.type = 'sine';
+    osc.connect(gain);
+    gain.connect(audioCtx.destination);
+    
+    // Play a friendly two-tone notification sound (chime)
+    osc.frequency.setValueAtTime(523.25, now);       // Tone C5
+    osc.frequency.setValueAtTime(659.25, now + 0.12); // Tone E5
+    
+    gain.gain.setValueAtTime(0.08, now);
+    gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
+    
+    osc.start(now);
+    osc.stop(now + 0.5);
+  } catch (error) {
+    console.warn('AudioContext is blocked or unsupported:', error);
+  }
+}
+
+// Show HTML5 desktop notification
+function showDesktopNotification(request) {
+  if (!window.Notification) return;
+
+  if (Notification.permission === 'granted') {
+    const title = `Claro Cases: ${request.title}`;
+    const options = {
+      body: request.description || `ID Referencia: ${request.external_id || '#' + request.id}`,
+      icon: 'favicon.ico'
+    };
+    
+    const notification = new Notification(title, options);
+    
+    // Clicking the notification automatically selects the request in the UI
+    notification.onclick = () => {
+      window.focus();
+      selectedRequest = request;
+      renderList();
+      renderDetails();
+    };
+  }
+}
+
+// Tab Title Flashing Alert (Unread cases)
+function triggerTitleNotification() {
+  if (isTabFocused) return;
+  unreadCount++;
+  startTitleFlashing();
+}
+
+function startTitleFlashing() {
+  if (titleInterval) clearInterval(titleInterval);
+  
+  let showAlt = false;
+  titleInterval = setInterval(() => {
+    showAlt = !showAlt;
+    document.title = showAlt 
+      ? `(🔔 ${unreadCount}) ¡Nuevo Caso!` 
+      : `(${unreadCount}) Claro Cases Dashboard`;
+  }, 1000);
+}
+
+function stopTitleFlashing() {
+  if (titleInterval) {
+    clearInterval(titleInterval);
+    titleInterval = null;
+  }
+}