From 3be46dbfa85370517703941a42b06c5cacad1fdc Mon Sep 17 00:00:00 2001
From: consultoria-as <ialcarazsalazar@consultoria-as.com>
Date: Mon, 19 Jan 2026 03:30:39 +0000
Subject: [PATCH] feat: Integrar analytics, reportes y predicciones en
 dashboard principal

Dashboard unificado con todas las funcionalidades:
- Grafica de tendencias de ventas (7/14/30 dias)
- Predicciones para proximos 7 dias con indicador de confianza
- Comparativas semanales y mensuales con graficas
- Barra de comparativas rapidas (vs semana/mes anterior)
- Tabla de Top Performers con % de meta y racha
- Botones para generar PDF (diario/ejecutivo)
- Modal de generacion de reportes
- Toast notifications
- Boton FAB de camara para mobile
- Auto-refresh cada 30 segundos

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 sales-bot/templates/dashboard.html | 992 ++++++++++++++++++++++++++++-
 1 file changed, 961 insertions(+), 31 deletions(-)

diff --git a/sales-bot/templates/dashboard.html b/sales-bot/templates/dashboard.html
index d36baa9..a1860f4 100644
--- a/sales-bot/templates/dashboard.html
+++ b/sales-bot/templates/dashboard.html
@@ -8,9 +8,14 @@
         <h1><span>Sales</span> Bot Dashboard</h1>
         <p class="fecha" id="fecha-actual"></p>
     </div>
-    <button class="refresh-btn" onclick="cargarDatos()">Actualizar</button>
+    <div class="header-actions">
+        <button class="btn btn-secondary" onclick="generarReporte('diario')">PDF Diario</button>
+        <button class="btn btn-secondary" onclick="generarReporte('ejecutivo')">PDF Ejecutivo</button>
+        <button class="refresh-btn" onclick="cargarTodosDatos()">Actualizar</button>
+    </div>
 </header>
 
+<!-- Stats Grid Principal -->
 <div class="stats-grid">
     <div class="stat-card">
         <div class="label">Ventas Hoy</div>
@@ -23,55 +28,653 @@
         <div class="subvalue" id="monto-mes">$0.00</div>
     </div>
     <div class="stat-card orange">
-        <div class="label">Vendedores Activos Hoy</div>
+        <div class="label">Vendedores Activos</div>
         <div class="value" id="vendedores-activos">-</div>
+        <div class="subvalue">hoy</div>
     </div>
     <div class="stat-card purple">
-        <div class="label">Meta Diaria</div>
-        <div class="value">3</div>
-        <div class="subvalue">tubos por vendedor</div>
+        <div class="label">Prediccion Manana</div>
+        <div class="value" id="prediccion-dia">-</div>
+        <div class="subvalue" id="tendencia-text">calculando...</div>
     </div>
 </div>
 
+<!-- Comparativas Rapidas -->
+<div class="comparison-bar">
+    <div class="comparison-item">
+        <span class="comp-label">vs Semana Anterior:</span>
+        <span class="comp-value" id="comp-semana">--</span>
+    </div>
+    <div class="comparison-item">
+        <span class="comp-label">vs Mes Anterior:</span>
+        <span class="comp-value" id="comp-mes">--</span>
+    </div>
+    <div class="comparison-item">
+        <span class="comp-label">Promedio Diario:</span>
+        <span class="comp-value" id="promedio-diario">--</span>
+    </div>
+</div>
+
+<!-- Graficas de Tendencias -->
+<div class="charts-section">
+    <div class="panel chart-panel">
+        <div class="panel-header">
+            <h2>Tendencia de Ventas (30 dias)</h2>
+            <div class="chart-controls">
+                <button class="chart-btn active" data-days="30" onclick="cambiarPeriodo(30)">30D</button>
+                <button class="chart-btn" data-days="14" onclick="cambiarPeriodo(14)">14D</button>
+                <button class="chart-btn" data-days="7" onclick="cambiarPeriodo(7)">7D</button>
+            </div>
+        </div>
+        <div class="chart-container">
+            <canvas id="chart-tendencias"></canvas>
+        </div>
+    </div>
+
+    <div class="panel chart-panel-small">
+        <h2>Comparativa Semanal</h2>
+        <div class="chart-container-small">
+            <canvas id="chart-semanal"></canvas>
+        </div>
+        <div class="comparison-details" id="detalles-semana">
+            <div class="detail-row">
+                <span>Esta semana:</span>
+                <span id="semana-actual">$0</span>
+            </div>
+            <div class="detail-row">
+                <span>Semana anterior:</span>
+                <span id="semana-anterior">$0</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Ranking y Ventas Recientes -->
 <div class="main-grid">
     <div class="panel">
-        <h2><span class="icon">&#127942;</span> Ranking del Mes (Tubos)</h2>
+        <div class="panel-header">
+            <h2>Ranking del Mes</h2>
+            <span class="badge" id="total-vendedores">0 vendedores</span>
+        </div>
         <ul class="ranking-list" id="ranking-list">
             <li class="loading"><div class="loading-spinner"></div></li>
         </ul>
     </div>
 
     <div class="panel">
-        <h2><span class="icon">&#128203;</span> Ventas Recientes</h2>
+        <div class="panel-header">
+            <h2>Ventas Recientes</h2>
+            <span class="badge" id="ventas-hoy-badge">0 hoy</span>
+        </div>
         <div class="ventas-list" id="ventas-list">
             <div class="loading"><div class="loading-spinner"></div></div>
         </div>
     </div>
 </div>
 
+<!-- Analisis y Predicciones -->
+<div class="analytics-section">
+    <div class="panel">
+        <h2>Prediccion Proximos 7 Dias</h2>
+        <div class="prediction-grid">
+            <div class="prediction-card">
+                <div class="pred-label">Manana</div>
+                <div class="pred-value" id="pred-dia-1">$0</div>
+            </div>
+            <div class="prediction-card">
+                <div class="pred-label">En 3 dias</div>
+                <div class="pred-value" id="pred-dia-3">$0</div>
+            </div>
+            <div class="prediction-card">
+                <div class="pred-label">Proxima semana</div>
+                <div class="pred-value" id="pred-semana">$0</div>
+            </div>
+            <div class="prediction-card">
+                <div class="pred-label">Confianza</div>
+                <div class="pred-value" id="pred-confianza">--%</div>
+            </div>
+        </div>
+        <div class="prediction-trend" id="prediction-trend">
+            <span class="trend-icon" id="trend-icon">--</span>
+            <span class="trend-text" id="trend-text">Calculando tendencia...</span>
+        </div>
+    </div>
+
+    <div class="panel">
+        <h2>Comparativa Mensual</h2>
+        <div class="chart-container-small">
+            <canvas id="chart-mensual"></canvas>
+        </div>
+        <div class="comparison-details">
+            <div class="detail-row">
+                <span>Este mes:</span>
+                <span id="mes-actual">$0</span>
+            </div>
+            <div class="detail-row">
+                <span>Mes anterior:</span>
+                <span id="mes-anterior">$0</span>
+            </div>
+            <div class="detail-row highlight">
+                <span>Diferencia:</span>
+                <span id="mes-diferencia">$0 (0%)</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Top Performers -->
+<div class="panel full-width">
+    <div class="panel-header">
+        <h2>Top Performers del Mes</h2>
+        <button class="btn btn-sm" onclick="exportarDatos()">Exportar</button>
+    </div>
+    <div class="performers-table">
+        <table>
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Vendedor</th>
+                    <th>Ventas</th>
+                    <th>Tubos</th>
+                    <th>Monto Total</th>
+                    <th>Comision</th>
+                    <th>Racha</th>
+                    <th>% Meta</th>
+                </tr>
+            </thead>
+            <tbody id="performers-tbody">
+                <tr><td colspan="8" class="loading">Cargando...</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
 <!-- Camera Button for Mobile -->
-<button class="btn btn-primary" id="btn-camera" onclick="abrirCamara()" style="position: fixed; bottom: 20px; right: 20px; border-radius: 50%; width: 60px; height: 60px; font-size: 24px; display: none;">
-    &#128247;
+<button class="fab-button" id="btn-camera" onclick="abrirCamara()">
+    <span>&#128247;</span>
 </button>
 
 <!-- Camera Modal -->
-<div class="camera-modal" id="camera-modal">
-    <div class="camera-container">
-        <video id="camera-video" autoplay playsinline></video>
-        <div class="camera-controls">
-            <button class="camera-btn close" onclick="cerrarCamara()">&#10005;</button>
-            <button class="camera-btn capture" onclick="capturarFoto()">&#128247;</button>
+<div class="modal" id="camera-modal">
+    <div class="modal-content camera-modal-content">
+        <div class="camera-container">
+            <video id="camera-video" autoplay playsinline></video>
+            <div class="camera-overlay">
+                <div class="camera-frame"></div>
+            </div>
+            <div class="camera-controls">
+                <button class="camera-btn close" onclick="cerrarCamara()">&#10005;</button>
+                <button class="camera-btn capture" onclick="capturarFoto()">&#128247;</button>
+            </div>
         </div>
     </div>
 </div>
 <canvas id="camera-canvas" style="display: none;"></canvas>
+
+<!-- Report Modal -->
+<div class="modal" id="report-modal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>Generando Reporte</h3>
+            <button class="modal-close" onclick="cerrarModalReporte()">&#10005;</button>
+        </div>
+        <div class="modal-body" id="report-modal-body">
+            <div class="loading-spinner"></div>
+            <p>Generando PDF...</p>
+        </div>
+    </div>
+</div>
+
+<!-- Toast Notifications -->
+<div class="toast-container" id="toast-container"></div>
+{% endblock %}
+
+{% block extra_css %}
+<style>
+/* Header Actions */
+.header-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+/* Comparison Bar */
+.comparison-bar {
+    display: flex;
+    gap: 20px;
+    padding: 16px 20px;
+    background: rgba(255,255,255,0.03);
+    border-radius: 12px;
+    margin-bottom: 24px;
+    flex-wrap: wrap;
+}
+
+.comparison-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.comp-label {
+    color: #888;
+    font-size: 13px;
+}
+
+.comp-value {
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.comp-value.positive { color: #00ff88; }
+.comp-value.negative { color: #ff4444; }
+.comp-value.neutral { color: #888; }
+
+/* Charts Section */
+.charts-section {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+@media (max-width: 1000px) {
+    .charts-section { grid-template-columns: 1fr; }
+}
+
+.chart-panel {
+    min-height: 350px;
+}
+
+.chart-panel-small {
+    min-height: 350px;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.chart-controls {
+    display: flex;
+    gap: 4px;
+}
+
+.chart-btn {
+    padding: 6px 12px;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 6px;
+    color: #888;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.chart-btn:hover, .chart-btn.active {
+    background: rgba(0,212,255,0.2);
+    border-color: #00d4ff;
+    color: #00d4ff;
+}
+
+.chart-container {
+    height: 280px;
+    position: relative;
+}
+
+.chart-container-small {
+    height: 180px;
+    position: relative;
+    margin-bottom: 16px;
+}
+
+.comparison-details {
+    padding-top: 12px;
+    border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.detail-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    font-size: 14px;
+}
+
+.detail-row span:first-child { color: #888; }
+.detail-row span:last-child { font-weight: 600; }
+.detail-row.highlight span:last-child { color: #00d4ff; }
+
+/* Analytics Section */
+.analytics-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+@media (max-width: 800px) {
+    .analytics-section { grid-template-columns: 1fr; }
+}
+
+.prediction-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+@media (max-width: 600px) {
+    .prediction-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+.prediction-card {
+    background: rgba(255,255,255,0.03);
+    padding: 16px;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.pred-label {
+    font-size: 11px;
+    color: #888;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+}
+
+.pred-value {
+    font-size: 20px;
+    font-weight: 700;
+    color: #00d4ff;
+}
+
+.prediction-trend {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 12px;
+    background: rgba(255,255,255,0.03);
+    border-radius: 8px;
+}
+
+.trend-icon {
+    font-size: 24px;
+}
+
+.trend-icon.up { color: #00ff88; }
+.trend-icon.down { color: #ff4444; }
+.trend-icon.stable { color: #ffaa00; }
+
+.trend-text {
+    color: #ccc;
+    font-size: 14px;
+}
+
+/* Full Width Panel */
+.panel.full-width {
+    margin-bottom: 24px;
+}
+
+.performers-table {
+    overflow-x: auto;
+}
+
+.performers-table table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.performers-table th,
+.performers-table td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.performers-table th {
+    color: #888;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+.performers-table td {
+    font-size: 14px;
+}
+
+.performers-table tr:hover {
+    background: rgba(255,255,255,0.02);
+}
+
+.performers-table .highlight {
+    color: #00d4ff;
+    font-weight: 600;
+}
+
+/* Badge */
+.badge {
+    background: rgba(0,212,255,0.2);
+    color: #00d4ff;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 12px;
+}
+
+/* FAB Button */
+.fab-button {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #00d4ff, #00ff88);
+    border: none;
+    color: #000;
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: 0 4px 20px rgba(0,212,255,0.4);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    transition: transform 0.2s;
+}
+
+.fab-button:hover {
+    transform: scale(1.1);
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.8);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.active {
+    display: flex;
+}
+
+.modal-content {
+    background: #1a1a2e;
+    border-radius: 16px;
+    padding: 24px;
+    max-width: 500px;
+    width: 90%;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.camera-modal-content {
+    max-width: 600px;
+    padding: 0;
+    overflow: hidden;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    color: #888;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.modal-body {
+    text-align: center;
+    padding: 20px;
+}
+
+/* Camera Styles */
+.camera-container {
+    position: relative;
+    background: #000;
+}
+
+.camera-container video {
+    width: 100%;
+    max-height: 70vh;
+    display: block;
+}
+
+.camera-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+
+.camera-frame {
+    width: 80%;
+    height: 60%;
+    border: 2px dashed rgba(0,212,255,0.5);
+    border-radius: 8px;
+}
+
+.camera-controls {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    padding: 16px;
+    background: rgba(0,0,0,0.8);
+}
+
+.camera-btn {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.camera-btn.capture {
+    background: linear-gradient(135deg, #00d4ff, #00ff88);
+    color: #000;
+}
+
+.camera-btn.close {
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+}
+
+.camera-btn:hover {
+    transform: scale(1.1);
+}
+
+/* Toast */
+.toast-container {
+    position: fixed;
+    bottom: 100px;
+    right: 24px;
+    z-index: 2000;
+}
+
+.toast {
+    background: #1a1a2e;
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 8px;
+    padding: 12px 20px;
+    margin-top: 10px;
+    color: #fff;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+    animation: slideIn 0.3s ease;
+}
+
+.toast.success { border-color: #00ff88; }
+.toast.error { border-color: #ff4444; }
+
+@keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+/* Button Variants */
+.btn-secondary {
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2);
+}
+
+.btn-secondary:hover {
+    background: rgba(255,255,255,0.15);
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 12px;
+}
+
+/* Progress Bar */
+.progress-bar {
+    height: 6px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-top: 8px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #00d4ff, #00ff88);
+    border-radius: 3px;
+    transition: width 0.5s ease;
+}
+</style>
 {% endblock %}
 
 {% block extra_js %}
+<script src="/static/js/charts.js"></script>
+<script src="/static/js/camera.js"></script>
 <script>
-// Helper functions
+// ============== VARIABLES GLOBALES ==============
+let chartTendencias = null;
+let chartSemanal = null;
+let chartMensual = null;
+let periodoActual = 30;
+
+// ============== HELPERS ==============
 function formatMoney(amount) {
-    return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(amount);
+    return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(amount || 0);
 }
 
 function formatDate(dateStr) {
@@ -80,17 +683,39 @@ function formatDate(dateStr) {
     return date.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' });
 }
 
-// Data loading functions
+function formatPercent(value, showSign = true) {
+    const num = parseFloat(value) || 0;
+    const sign = showSign && num > 0 ? '+' : '';
+    return `${sign}${num.toFixed(1)}%`;
+}
+
+function showToast(message, type = 'success') {
+    const container = document.getElementById('toast-container');
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    toast.textContent = message;
+    container.appendChild(toast);
+    setTimeout(() => toast.remove(), 4000);
+}
+
+// ============== CARGA DE DATOS ==============
 async function cargarResumen() {
     try {
         const res = await fetch('/api/dashboard/resumen');
         const data = await res.json();
 
         document.getElementById('ventas-hoy').textContent = data.ventas_hoy || 0;
-        document.getElementById('monto-hoy').textContent = formatMoney(data.monto_hoy || 0);
+        document.getElementById('monto-hoy').textContent = formatMoney(data.monto_hoy);
         document.getElementById('ventas-mes').textContent = data.ventas_mes || 0;
-        document.getElementById('monto-mes').textContent = formatMoney(data.monto_mes || 0);
+        document.getElementById('monto-mes').textContent = formatMoney(data.monto_mes);
         document.getElementById('vendedores-activos').textContent = data.vendedores_activos_hoy || 0;
+        document.getElementById('ventas-hoy-badge').textContent = `${data.ventas_hoy || 0} hoy`;
+
+        // Promedio diario
+        const diasDelMes = new Date().getDate();
+        const promedio = (data.monto_mes || 0) / diasDelMes;
+        document.getElementById('promedio-diario').textContent = formatMoney(promedio);
+
         document.getElementById('fecha-actual').textContent = new Date().toLocaleDateString('es-MX', {
             weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
         });
@@ -104,12 +729,17 @@ async function cargarRanking() {
         const res = await fetch('/api/dashboard/ranking');
         const data = await res.json();
         const lista = document.getElementById('ranking-list');
+        const tbody = document.getElementById('performers-tbody');
 
         if (!data || data.length === 0) {
             lista.innerHTML = '<li class="loading">No hay datos de ventas</li>';
+            tbody.innerHTML = '<tr><td colspan="8">No hay datos</td></tr>';
             return;
         }
 
+        document.getElementById('total-vendedores').textContent = `${data.length} vendedores`;
+
+        // Ranking lateral (top 10)
         lista.innerHTML = data.slice(0, 10).map((v, i) => {
             const posClass = i === 0 ? 'gold' : i === 1 ? 'silver' : i === 2 ? 'bronze' : 'default';
             const tubos = v.tubos_totales || 0;
@@ -123,7 +753,7 @@ async function cargarRanking() {
                     <div class="ranking-position ${posClass}">${i + 1}</div>
                     <div class="ranking-info">
                         <div class="ranking-name">${nombre}</div>
-                        <div class="ranking-stats">@${username} - ${ventas} ventas - ${v.dias_activos || 0} dias activos</div>
+                        <div class="ranking-stats">@${username} - ${ventas} ventas</div>
                     </div>
                     <div class="ranking-value">
                         <div class="ranking-tubos">${tubos}</div>
@@ -132,6 +762,33 @@ async function cargarRanking() {
                 </li>
             `;
         }).join('');
+
+        // Tabla de performers
+        tbody.innerHTML = data.map((v, i) => {
+            const nombre = v.nombre_completo || v.vendedor_username || v.vendedor;
+            const porcentaje = v.porcentaje_completado || 0;
+            const racha = v.dias_consecutivos || v.racha || 0;
+
+            return `
+                <tr>
+                    <td>${i + 1}</td>
+                    <td><strong>${nombre}</strong><br><small style="color:#888">@${v.vendedor_username || v.vendedor}</small></td>
+                    <td>${v.cantidad_ventas || 0}</td>
+                    <td class="highlight">${v.tubos_totales || 0}</td>
+                    <td>${formatMoney(v.total_vendido || v.monto_total)}</td>
+                    <td style="color:#00ff88">${formatMoney(v.comision_total)}</td>
+                    <td>${racha > 0 ? racha + ' dias' : '-'}</td>
+                    <td>
+                        <div style="display:flex;align-items:center;gap:8px;">
+                            <span>${porcentaje.toFixed(0)}%</span>
+                            <div class="progress-bar" style="flex:1;max-width:60px;">
+                                <div class="progress-fill" style="width:${Math.min(porcentaje, 100)}%"></div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            `;
+        }).join('');
     } catch (e) {
         console.error('Error cargando ranking:', e);
     }
@@ -156,7 +813,7 @@ async function cargarVentasRecientes() {
                     <div class="vendedor">${nombre}</div>
                     <div class="cliente">${v.cliente || 'Sin cliente'} - ${formatDate(v.fecha_venta)}</div>
                 </div>
-                <div class="venta-monto">${formatMoney(v.monto || 0)}</div>
+                <div class="venta-monto">${formatMoney(v.monto)}</div>
             </div>
         `}).join('');
     } catch (e) {
@@ -164,20 +821,293 @@ async function cargarVentasRecientes() {
     }
 }
 
-function cargarDatos() {
+async function cargarTendencias(dias = 30) {
+    try {
+        const res = await fetch(`/api/analytics/trends?days=${dias}`);
+        const data = await res.json();
+
+        if (data.error) {
+            console.warn('Analytics no disponible:', data.error);
+            return;
+        }
+
+        // Crear/actualizar grafica de tendencias
+        const ctx = document.getElementById('chart-tendencias');
+
+        if (chartTendencias) {
+            chartTendencias.destroy();
+        }
+
+        const datasets = [
+            {
+                label: 'Ventas',
+                data: data.ventas || [],
+                borderColor: '#00d4ff',
+                backgroundColor: 'rgba(0, 212, 255, 0.1)',
+                fill: true,
+                tension: 0.4
+            }
+        ];
+
+        // Agregar linea de prediccion si existe
+        if (data.prediccion && data.prediccion.length > 0) {
+            datasets.push({
+                label: 'Prediccion',
+                data: data.prediccion,
+                borderColor: '#00ff88',
+                borderDash: [5, 5],
+                fill: false,
+                tension: 0.4
+            });
+        }
+
+        chartTendencias = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: data.labels || [],
+                datasets: datasets
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: { display: true, position: 'top', labels: { color: '#888' } }
+                },
+                scales: {
+                    x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#888' } },
+                    y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#888' } }
+                }
+            }
+        });
+    } catch (e) {
+        console.error('Error cargando tendencias:', e);
+    }
+}
+
+async function cargarPredicciones() {
+    try {
+        const res = await fetch('/api/analytics/predictions?days=30&predict=7');
+        const data = await res.json();
+
+        if (data.error) {
+            console.warn('Predicciones no disponibles:', data.error);
+            return;
+        }
+
+        // Actualizar cards de prediccion
+        document.getElementById('prediccion-dia').textContent = formatMoney(data.next_day);
+        document.getElementById('pred-dia-1').textContent = formatMoney(data.next_day);
+
+        const predicciones = data.predicciones || [];
+        document.getElementById('pred-dia-3').textContent = formatMoney(predicciones[2] || 0);
+        document.getElementById('pred-semana').textContent = formatMoney(data.next_week);
+        document.getElementById('pred-confianza').textContent = `${((data.confidence || 0) * 100).toFixed(0)}%`;
+
+        // Tendencia
+        const trend = data.tendencia || data.trend || 'stable';
+        const trendIcon = document.getElementById('trend-icon');
+        const trendText = document.getElementById('trend-text');
+        const tendenciaText = document.getElementById('tendencia-text');
+
+        if (trend === 'increasing') {
+            trendIcon.textContent = '&#8593;';
+            trendIcon.className = 'trend-icon up';
+            trendText.textContent = 'Tendencia al alza - Las ventas estan mejorando';
+            tendenciaText.textContent = 'tendencia al alza';
+            tendenciaText.style.color = '#00ff88';
+        } else if (trend === 'decreasing') {
+            trendIcon.textContent = '&#8595;';
+            trendIcon.className = 'trend-icon down';
+            trendText.textContent = 'Tendencia a la baja - Atencion requerida';
+            tendenciaText.textContent = 'tendencia a la baja';
+            tendenciaText.style.color = '#ff4444';
+        } else {
+            trendIcon.textContent = '&#8594;';
+            trendIcon.className = 'trend-icon stable';
+            trendText.textContent = 'Tendencia estable - Ventas consistentes';
+            tendenciaText.textContent = 'tendencia estable';
+            tendenciaText.style.color = '#ffaa00';
+        }
+    } catch (e) {
+        console.error('Error cargando predicciones:', e);
+    }
+}
+
+async function cargarComparativas() {
+    try {
+        // Comparativa semanal
+        const resSemanal = await fetch('/api/analytics/comparisons?type=weekly');
+        const semanal = await resSemanal.json();
+
+        if (!semanal.error) {
+            document.getElementById('semana-actual').textContent = formatMoney(semanal.current_week);
+            document.getElementById('semana-anterior').textContent = formatMoney(semanal.previous_week);
+
+            const compSemana = document.getElementById('comp-semana');
+            compSemana.textContent = formatPercent(semanal.diff_percent);
+            compSemana.className = `comp-value ${semanal.diff_percent > 0 ? 'positive' : semanal.diff_percent < 0 ? 'negative' : 'neutral'}`;
+
+            // Grafica semanal
+            const ctxSemanal = document.getElementById('chart-semanal');
+            if (chartSemanal) chartSemanal.destroy();
+
+            chartSemanal = new Chart(ctxSemanal, {
+                type: 'bar',
+                data: {
+                    labels: ['Anterior', 'Actual'],
+                    datasets: [{
+                        data: [semanal.previous_week || 0, semanal.current_week || 0],
+                        backgroundColor: ['rgba(255,255,255,0.1)', 'rgba(0,212,255,0.5)'],
+                        borderColor: ['rgba(255,255,255,0.2)', '#00d4ff'],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { grid: { display: false }, ticks: { color: '#888' } },
+                        y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#888' } }
+                    }
+                }
+            });
+        }
+
+        // Comparativa mensual
+        const resMensual = await fetch('/api/analytics/comparisons?type=monthly');
+        const mensual = await resMensual.json();
+
+        if (!mensual.error) {
+            document.getElementById('mes-actual').textContent = formatMoney(mensual.current_month);
+            document.getElementById('mes-anterior').textContent = formatMoney(mensual.previous_month);
+            document.getElementById('mes-diferencia').textContent = `${formatMoney(mensual.difference)} (${formatPercent(mensual.diff_percent)})`;
+
+            const compMes = document.getElementById('comp-mes');
+            compMes.textContent = formatPercent(mensual.diff_percent);
+            compMes.className = `comp-value ${mensual.diff_percent > 0 ? 'positive' : mensual.diff_percent < 0 ? 'negative' : 'neutral'}`;
+
+            // Grafica mensual (3 meses)
+            const ctxMensual = document.getElementById('chart-mensual');
+            if (chartMensual) chartMensual.destroy();
+
+            chartMensual = new Chart(ctxMensual, {
+                type: 'bar',
+                data: {
+                    labels: mensual.months || ['Mes -2', 'Mes -1', 'Actual'],
+                    datasets: [{
+                        data: mensual.values || [0, 0, 0],
+                        backgroundColor: ['rgba(255,255,255,0.1)', 'rgba(255,255,255,0.1)', 'rgba(0,212,255,0.5)'],
+                        borderColor: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.2)', '#00d4ff'],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { grid: { display: false }, ticks: { color: '#888' } },
+                        y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#888' } }
+                    }
+                }
+            });
+        }
+    } catch (e) {
+        console.error('Error cargando comparativas:', e);
+    }
+}
+
+// ============== ACCIONES ==============
+function cambiarPeriodo(dias) {
+    periodoActual = dias;
+    document.querySelectorAll('.chart-btn').forEach(btn => {
+        btn.classList.toggle('active', parseInt(btn.dataset.days) === dias);
+    });
+    cargarTendencias(dias);
+}
+
+async function generarReporte(tipo) {
+    const modal = document.getElementById('report-modal');
+    const body = document.getElementById('report-modal-body');
+
+    modal.classList.add('active');
+    body.innerHTML = '<div class="loading-spinner"></div><p>Generando PDF...</p>';
+
+    try {
+        const res = await fetch('/api/reports/generate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ type: tipo === 'ejecutivo' ? 'executive' : 'daily' })
+        });
+
+        const data = await res.json();
+
+        if (data.error) {
+            body.innerHTML = `<p style="color:#ff4444;">Error: ${data.error}</p>
+                <p style="color:#888;font-size:13px;">Asegurate de tener instalado reportlab</p>
+                <button class="btn btn-secondary" onclick="cerrarModalReporte()">Cerrar</button>`;
+            return;
+        }
+
+        body.innerHTML = `
+            <p style="color:#00ff88;">Reporte generado exitosamente</p>
+            <a href="${data.download_url}" class="btn btn-primary" download>Descargar PDF</a>
+            <button class="btn btn-secondary" onclick="cerrarModalReporte()" style="margin-left:10px;">Cerrar</button>
+        `;
+
+        showToast('Reporte generado correctamente', 'success');
+    } catch (e) {
+        body.innerHTML = `<p style="color:#ff4444;">Error al generar reporte</p>
+            <button class="btn btn-secondary" onclick="cerrarModalReporte()">Cerrar</button>`;
+        showToast('Error al generar reporte', 'error');
+    }
+}
+
+function cerrarModalReporte() {
+    document.getElementById('report-modal').classList.remove('active');
+}
+
+async function exportarDatos() {
+    try {
+        showToast('Exportando datos...', 'success');
+        // Aqui se podria implementar la exportacion a Excel/CSV
+        // Por ahora solo mostramos un mensaje
+        showToast('Funcion de exportacion disponible via comando /exportar', 'success');
+    } catch (e) {
+        showToast('Error al exportar', 'error');
+    }
+}
+
+// ============== CARGAR TODO ==============
+function cargarTodosDatos() {
     cargarResumen();
     cargarRanking();
     cargarVentasRecientes();
+    cargarTendencias(periodoActual);
+    cargarPredicciones();
+    cargarComparativas();
 }
 
-// Initialize
-cargarDatos();
-setInterval(cargarDatos, 30000);
+// ============== INICIALIZACION ==============
+document.addEventListener('DOMContentLoaded', function() {
+    cargarTodosDatos();
 
-// Show camera button on mobile
-if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
-    document.getElementById('btn-camera').style.display = 'block';
-}
+    // Auto-refresh cada 30 segundos
+    setInterval(cargarTodosDatos, 30000);
+
+    // Mostrar boton de camara en mobile
+    if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
+        document.getElementById('btn-camera').style.display = 'flex';
+    }
+});
+
+// Cerrar modales con Escape
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        document.querySelectorAll('.modal.active').forEach(m => m.classList.remove('active'));
+        cerrarCamara();
+    }
+});
 </script>
-<script src="/static/js/camera.js"></script>
 {% endblock %}