Initial

2026-07-21 16:53:38 -05:00
commit 69cc215954
12 changed files with 3478 additions and 0 deletions
@@ -0,0 +1,2 @@
+PORT=3000
+DATABASE_FILE=database.sqlite
@@ -0,0 +1,3 @@
+PORT=3000
+# SQLite database filename (creates a local file in the project folder)
+DATABASE_FILE=database.sqlite
@@ -0,0 +1,122 @@
+# Claro Cases Tracking System - Manual Técnico
+
+Este documento detalla el funcionamiento técnico, arquitectura y endpoints de la aplicación **Claro Cases**, un sistema en tiempo real para rastrear solicitudes de clientes, gestionar casos y registrar métricas de tiempo de atención.
+
+---
+
+## 🏗️ Arquitectura del Sistema
+
+La aplicación sigue una arquitectura desacoplada monolítica simple basada en Node.js, Express y SQLite:
+
+```mermaid
+graph TD
+    Client[Cliente Externo / API Client] -->|POST /api/requests| ExpressServer[Express Server Node.js]
+    ExpressServer -->|Guarda Datos| SQLite[SQLite database.sqlite]
+    ExpressServer -->|SSE Broadcast| Frontend[Frontend SPA HTML/JS]
+    Frontend -->|Interacción de Operador| ExpressServer
+```
+
+1. **Frontend (SPA - Single Page Application)**: Desarrollado con Vanilla HTML5, Javascript (ES6) y CSS3 adaptativo con soporte para temas Claro/Oscuro.
+2. **Backend**: Servidor REST Express que provee persistencia y notificaciones en tiempo real a través de Server-Sent Events (SSE).
+3. **Persistencia**: Base de datos ligera embebida SQLite gestionada eficientemente de manera síncrona por medio del driver `better-sqlite3`.
+
+---
+
+## 🗄️ Esquema de la Base de Datos
+
+La tabla principal es `requests`. La inicialización del esquema y las migraciones automáticas de columnas se gestionan dinámicamente en el módulo [db.js](file:///c:/Users/pepit/Desktop/doc/NODE/autonomus/Claro%20Cases/db.js).
+
+```sql
+CREATE TABLE IF NOT EXISTS requests (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  title TEXT NOT NULL,
+  description TEXT,
+  status TEXT DEFAULT 'Pending',
+  external_id TEXT,
+  cedula TEXT,
+  tipo_solicitud TEXT,
+  payload TEXT,                           -- Objeto JSON guardado como String
+  handling_time INTEGER DEFAULT 0,         -- Tiempo de gestión en segundos
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+---
+
+## 🔌 API Endpoints (Backend)
+
+### 1. Registrar Nuevo Caso
+* **Endpoint**: `POST /api/requests`
+* **Content-Type**: `application/json`
+* **Payload**:
+  ```json
+  {
+    "title": "Título del Caso",
+    "description": "Detalle descriptivo",
+    "external_id": "EXT-12345",
+    "cedula": "10203040",
+    "tipo_solicitud": "validacion_usuario",
+    "payload": {
+      "nombre": "Juan Pérez",
+      "telefono": "31000000"
+    }
+  }
+  ```
+* **Comportamiento**: Guarda la solicitud y transmite en tiempo real la información a todos los operadores conectados usando SSE.
+
+### 2. Stream de Actualizaciones en Tiempo Real
+* **Endpoint**: `GET /api/sse`
+* **Content-Type**: `text/event-stream`
+* **Comportamiento**: Registra el cliente para recibir eventos unidireccionales desde el servidor en tiempo real.
+
+### 3. Obtener Solicitudes
+* **Endpoint**: `GET /api/requests`
+* **Comportamiento**: Devuelve todos los casos de la base de datos en orden descendente por fecha de creación.
+
+### 4. Actualizar Estado / Finalizar Caso
+* **Endpoint**: `PUT /api/requests/:id`
+* **Payload**:
+  ```json
+  {
+    "status": "Finalizado",
+    "handling_time": 125,
+    "payload": {
+      "valor_cierre": "Comentario de finalización"
+    }
+  }
+  ```
+
+### 5. Eliminar Solicitud
+* **Endpoint**: `DELETE /api/requests/:id`
+
+---
+
+## ⚡ Lógica del Operador (Frontend)
+
+El flujo interactivo se gestiona en [public/app.js](file:///c:/Users/pepit/Desktop/doc/NODE/autonomus/Claro%20Cases/public/app.js) y se compone de:
+
+* **Sincronización en Tiempo Real (SSE)**: Permite la llegada instantánea de nuevos casos al panel de control del operador sin recargar la página. Al ingresar un caso nuevo:
+  - Se reproduce una alerta de sonido usando la API nativa de **Web Audio**.
+  - Se genera una **Notificación de Escritorio HTML5** en el sistema operativo.
+  - El título de la pestaña del navegador destella con la cantidad de casos pendientes.
+* **Filtros e Historial**:
+  - Buscador integrado que busca en tiempo real por título, ID de referencia, descripción, cédula y tipo de solicitud.
+  - Pestañas rápidas para clasificar casos entre *Todos*, *Pendientes* y *Finalizados*.
+* **Flujos Especiales al Gestionar Casos**:
+  - Al dar clic en **Gestionar Caso**, se inicia un cronómetro individual para medir el tiempo que el operador tarda en resolver la solicitud.
+  - **Solicitud de Validación**: Si el caso contiene la palabra `"validacion"` en su campo `tipo_solicitud`, la UI cambia dinámicamente y despliega los botones **Sí** y **No** integrados bajo la pregunta *"¿El usuario es válido?"*. Al hacer clic en cualquiera de ellos, el caso se cierra.
+  - **Otras Solicitudes**: Si es de cualquier otro tipo, la interfaz le exige al operador ingresar un valor de resolución en una entrada de texto antes de dar clic en **Finalizar Caso**. Este valor se inyecta en el objeto JSON de `payload` del caso.
+
+---
+
+## 🛠️ Ejecución Local
+
+1. Instalar dependencias:
+   ```cmd
+   npm install
+   ```
+2. Ejecutar servidor en modo desarrollo (con recarga automática vía nodemon):
+   ```cmd
+   npm run dev
+   ```
+   El servidor levantará en http://localhost:3000.
@@ -0,0 +1,59 @@
+const Database = require('better-sqlite3');
+const fs = require('fs');
+const path = require('path');
+require('dotenv').config();
+
+const dbFile = process.env.DATABASE_FILE || 'database.sqlite';
+const dbPath = path.isAbsolute(dbFile) ? dbFile : path.join(__dirname, dbFile);
+
+let db;
+try {
+  // better-sqlite3 creates the database file synchronously on creation
+  db = new Database(dbPath);
+  console.log(`📂 SQLite database connected via better-sqlite3: ${dbPath}`);
+} catch (err) {
+  console.error('💥 Failed to open SQLite database:', err.message);
+  process.exit(1);
+}
+
+// Wrap operations in async functions to maintain compatibility with server.js
+async function query(sql, params = []) {
+  const stmt = db.prepare(sql);
+  const trimmedSql = sql.trim().toUpperCase();
+  const isMutating = trimmedSql.startsWith('INSERT') || 
+                     trimmedSql.startsWith('UPDATE') || 
+                     trimmedSql.startsWith('DELETE');
+
+  if (isMutating) {
+    const result = stmt.run(params);
+    return { insertId: result.lastInsertRowid, changes: result.changes };
+  } else {
+    return stmt.all(params);
+  }
+}
+
+async function initializeSchema() {
+  try {
+    const schemaPath = path.join(__dirname, 'schema.sql');
+    if (fs.existsSync(schemaPath)) {
+      const sql = fs.readFileSync(schemaPath, 'utf8');
+      // Executes multiple SQL statements in schema.sql
+      db.exec(sql);
+      try {
+        db.exec('ALTER TABLE requests ADD COLUMN tipo_solicitud TEXT;');
+        console.log('➕ Added tipo_solicitud column to existing requests table');
+      } catch (e) {
+        // Ignore if column already exists
+      }
+      console.log('✅ Database schema initialized/verified successfully');
+    }
+  } catch (error) {
+    console.error('⚠️ Failed to initialize schema automatically:', error.message);
+  }
+}
+
+module.exports = {
+  query,
+  initializeSchema,
+  db
+};
@@ -0,0 +1,19 @@
+{
+  "name": "claro-cases",
+  "version": "1.0.0",
+  "description": "Claro Cases tracking system with Postgres and live UI updates",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "better-sqlite3": "^12.11.1",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0"
+  }
+}
@@ -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;
+  }
+}
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Claro Cases Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="app-container">
+    <header class="app-header">
+      <div class="logo-area">
+        <span class="logo-icon">🔴</span>
+        <h1>Claro Cases</h1>
+        <span class="badge live-badge">En vivo</span>
+      </div>
+      <div class="status-area">
+        <span id="connection-status" class="status-dot disconnected"></span>
+        <span id="connection-text">Desconectado</span>
+        <button id="theme-toggle" class="theme-toggle-btn" aria-label="Cambiar tema">🌙</button>
+      </div>
+    </header>
+
+    <main class="app-main">
+      <!-- Left sidebar: Cases List -->
+      <section class="cases-sidebar">
+        <div class="sidebar-header">
+          <h2>Solicitudes</h2>
+          <span id="cases-count" class="cases-count">0</span>
+        </div>
+        <div class="search-bar">
+          <input type="text" id="search-input" placeholder="Buscar por título o ID..." autocomplete="off">
+        </div>
+        <div class="tabs-container">
+          <button class="tab-btn active" data-tab="all">Todos</button>
+          <button class="tab-btn" data-tab="pending">Pendientes</button>
+          <button class="tab-btn" data-tab="finalizado">Finalizados</button>
+        </div>
+        <div class="cases-list" id="cases-list">
+          <div class="loading-placeholder">Cargando solicitudes...</div>
+        </div>
+      </section>
+
+      <!-- Right panel: Case Details -->
+      <section class="case-details" id="case-details">
+        <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 carga útil (payload).</p>
+        </div>
+      </section>
+    </main>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>
@@ -0,0 +1,731 @@
+/* Claro Cases Styling - Replicating Autonomus Brand Line */
+
+:root {
+  --bg-base:      #f0f2f5;
+  --bg-surface:   #ffffff;
+  --bg-elevated:  #f8fafc;
+  --bg-hover:     #e2e8f0;
+  --border:       rgba(0, 0, 0, 0.08);
+  --border-accent: rgba(255, 78, 0, 0.25);
+
+  --text-primary:   #1e293b;
+  --text-secondary: #475569;
+  --text-muted:     #94a3b8;
+
+  --accent-orange: #ff4e00;
+  --accent-yellow: #ffa600;
+  --accent-red:    #f80018;
+  --accent-green:  #10b981;
+
+  --gradient-a: linear-gradient(135deg, #ff4e00, #ffa600);
+  --gradient-b: linear-gradient(135deg, #f80018, #ff4e00);
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
+
+  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+  --font-family: 'Inter', system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-family);
+  background-color: var(--bg-base);
+  color: var(--text-primary);
+  height: 100vh;
+  overflow: hidden;
+  font-size: 13px;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* Header */
+.app-header {
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
+  z-index: 10;
+  box-shadow: var(--shadow-sm);
+}
+
+.logo-area {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo-icon {
+  font-size: 1.1rem;
+}
+
+.logo-area h1 {
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--gradient-a);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: 0.5px;
+}
+
+.live-badge {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--accent-green);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.status-area {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.status-dot.connected {
+  background-color: var(--accent-green);
+  box-shadow: 0 0 6px var(--accent-green);
+}
+
+.status-dot.disconnected {
+  background-color: var(--accent-red);
+  box-shadow: 0 0 6px var(--accent-red);
+}
+
+/* Main Layout */
+.app-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Sidebar List */
+.cases-sidebar {
+  width: 320px;
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  z-index: 5;
+}
+
+.sidebar-header {
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header h2 {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.cases-count {
+  background: var(--bg-base);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.search-bar {
+  padding: 0 16px 12px;
+}
+
+.search-bar input {
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: 12px;
+  outline: none;
+  transition: var(--transition);
+}
+
+.search-bar input:focus {
+  border-color: var(--accent-orange);
+  box-shadow: 0 0 0 3px rgba(255, 78, 0, 0.1);
+}
+
+.tabs-container {
+  display: flex;
+  gap: 6px;
+  padding: 0 16px 12px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 12px;
+}
+
+.tab-btn {
+  flex: 1;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 6px 0;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--font-family);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: var(--transition);
+  text-align: center;
+}
+
+.tab-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.tab-btn.active {
+  background: rgba(255, 78, 0, 0.08);
+  color: var(--accent-orange);
+  border-color: var(--accent-orange);
+  font-weight: 600;
+}
+
+body.dark-mode .tab-btn.active {
+  background: rgba(255, 78, 0, 0.15);
+}
+
+.cases-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Case Card */
+.case-card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  cursor: pointer;
+  transition: var(--transition);
+  position: relative;
+  overflow: hidden;
+  animation: slideIn 0.25s ease-out;
+}
+
+.case-card:hover {
+  background: var(--bg-hover);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+.case-card.active {
+  background: rgba(255, 78, 0, 0.04);
+  border-color: var(--accent-orange);
+}
+
+.case-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.case-title {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1.3;
+  color: var(--text-primary);
+}
+
+.case-status-badge {
+  font-size: 9px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.timing-badge {
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--accent-orange);
+  background: rgba(255, 78, 0, 0.08);
+  padding: 1px 5px;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+
+/* Status-specific Badges */
+.status-pending { background: rgba(255, 166, 0, 0.12); color: var(--accent-yellow); }
+.status-resolved { background: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
+.status-failed { background: rgba(248, 0, 24, 0.1); color: var(--accent-red); }
+.status-finalizado { background: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
+
+.case-desc-preview {
+  font-size: 11px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+}
+
+.case-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 10px;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border);
+  padding-top: 6px;
+}
+
+.case-id {
+  font-family: monospace;
+  background: var(--bg-hover);
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+
+/* Right Detail Panel */
+.case-details {
+  flex: 1;
+  background: var(--bg-surface);
+  padding: 30px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Empty State */
+.empty-state {
+  margin: auto;
+  text-align: center;
+  max-width: 380px;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 16px;
+  opacity: 0.4;
+}
+
+.empty-state h3 {
+  font-size: 14px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.empty-state p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+  font-size: 12px;
+}
+
+/* Full Detail View Layout */
+.detail-view {
+  animation: fadeIn 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.detail-header {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 16px;
+}
+
+.detail-meta {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.detail-title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.detail-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.header-metadata-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  background: var(--bg-base);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  margin-top: 12px;
+}
+
+.meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.meta-label {
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.meta-value {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.highlight-meta {
+  color: var(--accent-orange);
+  font-weight: 600;
+}
+
+/* Operation / Timer Panel */
+.actions-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  gap: 16px;
+}
+
+.actions-panel.active-panel {
+  border-color: var(--accent-orange);
+  background: rgba(255, 78, 0, 0.02);
+}
+
+.actions-panel.finished-panel {
+  border-color: var(--accent-green);
+  background: rgba(16, 185, 129, 0.02);
+}
+
+.timer-display {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.timer-lbl {
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.timer-val {
+  font-size: 20px;
+  font-weight: 700;
+  font-family: monospace;
+  color: var(--text-primary);
+}
+
+.active-panel .timer-val {
+  color: var(--accent-orange);
+}
+
+.finished-panel .timer-val {
+  color: var(--accent-green);
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+/* Buttons */
+.btn {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--font-family);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.btn-primary {
+  background: var(--accent-orange);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #e04400;
+}
+
+.btn-success {
+  background: var(--accent-green);
+  color: white;
+}
+
+.btn-success:hover {
+  background: #0d9668;
+}
+
+.btn-danger {
+  background: transparent;
+  color: var(--accent-red);
+  border: 1px solid rgba(248, 0, 24, 0.2);
+}
+
+.btn-danger:hover {
+  background: rgba(248, 0, 24, 0.06);
+  border-color: var(--accent-red);
+}
+
+.detail-section h4 {
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.detail-section p.description-text {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  padding: 16px;
+  border-radius: var(--radius-md);
+}
+
+/* Info Grid (Payload Key-Value) */
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.info-item {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.info-label {
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.info-value {
+  font-size: 12px;
+  color: var(--text-primary);
+  word-break: break-all;
+  font-weight: 500;
+}
+
+.no-payload {
+  color: var(--text-muted);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* Custom Scrollbars */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-hover);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* Placeholders */
+.loading-placeholder {
+  text-align: center;
+  color: var(--text-secondary);
+  padding: 30px 0;
+}
+
+/* Animations */
+@keyframes slideIn {
+  from { transform: translateY(8px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-pulse {
+  animation: pulse-op 1.5s infinite;
+}
+
+@keyframes pulse-op {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Theme Toggle Button */
+.theme-toggle-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  font-size: 14px;
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  margin-left: 12px;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary);
+}
+
+.theme-toggle-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--text-muted);
+}
+
+/* Dark Mode Overrides */
+body.dark-mode {
+  --bg-base:      #0c0d14;
+  --bg-surface:   #141622;
+  --bg-elevated:  #1d2030;
+  --bg-hover:     #2b2f46;
+  --border:       rgba(255, 255, 255, 0.08);
+
+  --text-primary:   #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted:     #64748b;
+}
+
+body.dark-mode ::-webkit-scrollbar-thumb {
+  background: var(--bg-hover);
+}
+
+/* Request Type Badges */
+.case-type-badge {
+  background: rgba(255, 78, 0, 0.1);
+  color: var(--accent-orange);
+  border: 1px solid rgba(255, 78, 0, 0.25);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+  text-transform: uppercase;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+/* Custom Modal Dialog */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modal-content {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  padding: 24px;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  max-width: 400px;
+  width: 90%;
+  text-align: center;
+  animation: slideIn 0.2s ease-out;
+}
+
+.modal-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+}
+
+.modal-message {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 24px;
+}
+
+.modal-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.modal-buttons .btn {
+  padding: 8px 24px;
+}
@@ -0,0 +1,13 @@
+-- Table structure for Claro Cases requests (SQLite)
+CREATE TABLE IF NOT EXISTS requests (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  title TEXT NOT NULL,
+  description TEXT,
+  status TEXT DEFAULT 'Pending',
+  external_id TEXT,
+  cedula TEXT,
+  tipo_solicitud TEXT,
+  payload TEXT,
+  handling_time INTEGER DEFAULT 0,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
@@ -0,0 +1,151 @@
+const express = require('express');
+const cors = require('cors');
+const path = require('path');
+const db = require('./db');
+require('dotenv').config();
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+app.use(cors());
+app.use(express.json());
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Store active Server-Sent Events (SSE) clients
+let sseClients = [];
+
+// SSE Registration Endpoint
+app.get('/api/sse', (req, res) => {
+  res.setHeader('Content-Type', 'text/event-stream');
+  res.setHeader('Cache-Control', 'no-cache');
+  res.setHeader('Connection', 'keep-alive');
+  res.flushHeaders();
+
+  sseClients.push(res);
+  console.log(`🔌 Client connected to SSE stream. Total clients: ${sseClients.length}`);
+
+  req.on('close', () => {
+    sseClients = sseClients.filter(client => client !== res);
+    console.log(`🔌 Client disconnected. Total clients: ${sseClients.length}`);
+  });
+});
+
+// Function to broadcast new request details to all connected SSE clients
+function broadcastNewRequest(request) {
+  const data = JSON.stringify(request);
+  sseClients.forEach(client => {
+    client.write(`data: ${data}\n\n`);
+  });
+}
+
+// API: Get all requests (ordered by newest first)
+app.get('/api/requests', async (req, res) => {
+  try {
+    const rows = await db.query('SELECT * FROM requests ORDER BY created_at DESC');
+    res.json(rows);
+  } catch (error) {
+    console.error('Error fetching requests:', error);
+    res.status(500).json({ error: 'Database query failed' });
+  }
+});
+
+// API: Post new request (receives external data)
+app.post('/api/requests', async (req, res) => {
+  const { title, description, external_id, status, payload, cedula } = req.body;
+  const tipo_solicitud = req.body.tipo_solicitud || req.body['Tipo de solicitud'] || req.body.tipo_de_solicitud || null;
+
+  if (!title) {
+    return res.status(400).json({ error: 'Title is required' });
+  }
+
+  try {
+    const queryText = `
+      INSERT INTO requests (title, description, external_id, status, cedula, tipo_solicitud, payload)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
+    `;
+    
+    const parsedPayload = payload ? (typeof payload === 'object' ? payload : { raw: payload }) : {};
+    
+    const values = [
+      title,
+      description || '',
+      external_id || null,
+      status || 'Pending',
+      cedula || null,
+      tipo_solicitud,
+      JSON.stringify(parsedPayload)
+    ];
+
+    const result = await db.query(queryText, values);
+    const insertId = result.insertId;
+
+    // Fetch the newly inserted record to broadcast
+    const rows = await db.query('SELECT * FROM requests WHERE id = ?', [insertId]);
+    const newRequest = rows[0];
+
+    // Broadcast the new request to UI clients in real time
+    broadcastNewRequest(newRequest);
+
+    res.status(201).json(newRequest);
+  } catch (error) {
+    console.error('Error saving new request:', error);
+    res.status(500).json({ error: 'Database insertion failed' });
+  }
+});
+
+// API: Update request (save status, handling time, and optionally payload)
+app.put('/api/requests/:id', async (req, res) => {
+  const { id } = req.params;
+  const { status, handling_time, payload } = req.body;
+
+  try {
+    if (payload !== undefined) {
+      const parsedPayload = typeof payload === 'object' ? payload : { raw: payload };
+      await db.query(
+        'UPDATE requests SET status = ?, handling_time = ?, payload = ? WHERE id = ?',
+        [status || 'Pending', handling_time || 0, JSON.stringify(parsedPayload), id]
+      );
+    } else {
+      await db.query(
+        'UPDATE requests SET status = ?, handling_time = ? WHERE id = ?',
+        [status || 'Pending', handling_time || 0, id]
+      );
+    }
+
+    const rows = await db.query('SELECT * FROM requests WHERE id = ?', [id]);
+    if (rows.length === 0) {
+      return res.status(404).json({ error: 'Request not found' });
+    }
+
+    res.json(rows[0]);
+  } catch (error) {
+    console.error('Error updating request:', error);
+    res.status(500).json({ error: 'Database update failed' });
+  }
+});
+
+// API: Delete request
+app.delete('/api/requests/:id', async (req, res) => {
+  const { id } = req.params;
+
+  try {
+    await db.query('DELETE FROM requests WHERE id = ?', [id]);
+    res.json({ success: true, message: 'Request deleted successfully' });
+  } catch (error) {
+    console.error('Error deleting request:', error);
+    res.status(500).json({ error: 'Database deletion failed' });
+  }
+});
+
+// Start server after ensuring DB connection and schema setup
+async function startServer() {
+  await db.initializeSchema();
+
+  app.listen(PORT, () => {
+    console.log(`🚀 Claro Cases server running at http://localhost:${PORT}`);
+  });
+}
+
+startServer().catch(err => {
+  console.error('💥 Server startup failed:', err);
+});