Initial

2026-07-21 16:53:38 -05:00
commit 69cc215954
12 changed files with 3478 additions and 0 deletions
@@ -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>