public/ai_control_panel_preview.html at main · mimurillof/public · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview: Panel de Control AI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Estilos adicionales si son necesarios */
        body {
            background-color: #111827; /* Fondo oscuro para la página de preview */
        }
    </style>
</head>
<body>

    <div class="container mx-auto p-4">
        <h1 class="text-xl font-bold text-white mb-6">Componente 2.1: Panel de Control de Reportes AI (Preview)</h1>

        <!-- Inicio del Componente Panel de Control -->
        <div class="w-full bg-gray-900 p-6 rounded-lg shadow-xl">
            <div class="flex flex-wrap gap-4 justify-center md:justify-start">

                <!-- Opción 1: Resumen Diario/Semanal -->
                <div
                    class="flex flex-col items-center justify-center bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 hover:shadow-lg transition-all duration-300 cursor-pointer min-w-[180px] text-center"
                    onclick="handleSelection('summary')">
                    <!-- Icono Placeholder -->
                    <svg class="w-8 h-8 text-blue-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    <span class="text-white font-semibold text-sm">Resumen Diario/Semanal</span>
                </div>

                <!-- Opción 2: Análisis de Rendimiento -->
                <div
                    class="flex flex-col items-center justify-center bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 hover:shadow-lg transition-all duration-300 cursor-pointer min-w-[180px] text-center"
                    onclick="handleSelection('performance')">
                     <!-- Icono Placeholder -->
                    <svg class="w-8 h-8 text-green-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                    <span class="text-white font-semibold text-sm">Análisis Rendimiento</span>
                </div>

                <!-- Opción 3: Proyecciones Futuras -->
                <div
                    class="flex flex-col items-center justify-center bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 hover:shadow-lg transition-all duration-300 cursor-pointer min-w-[180px] text-center"
                    onclick="handleSelection('projections')">
                     <!-- Icono Placeholder -->
                    <svg class="w-8 h-8 text-purple-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                    <span class="text-white font-semibold text-sm">Proyecciones Futuras</span>
                </div>

                <!-- Opción 4: Alertas y Oportunidades -->
                <div
                    class="flex flex-col items-center justify-center bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 hover:shadow-lg transition-all duration-300 cursor-pointer min-w-[180px] text-center"
                    onclick="handleSelection('alerts')">
                     <!-- Icono Placeholder -->
                    <svg class="w-8 h-8 text-yellow-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                    <span class="text-white font-semibold text-sm">Alertas y Oportunidades</span>
                </div>

                 <!-- Opción 5: Generar Reporte Personalizado -->
                <div
                    class="flex flex-col items-center justify-center bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 hover:shadow-lg transition-all duration-300 cursor-pointer min-w-[180px] text-center"
                    onclick="handleSelection('custom_report')">
                     <!-- Icono Placeholder -->
                    <svg class="w-8 h-8 text-red-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                    <span class="text-white font-semibold text-sm">Reporte Personalizado</span>
                </div>

                <!-- Añadir más opciones aquí si es necesario -->

            </div>
        </div>
        <!-- Fin del Componente Panel de Control -->

    </div>

    <script>
        // Función simple para simular la selección en la preview
        function handleSelection(optionId) {
            alert(`Opción seleccionada: ${optionId}`);
            // En una aplicación real, aquí se llamaría a la función
            // que maneja la lógica de mostrar el reporte correspondiente.
            // Por ejemplo: loadAiReport(optionId);
        }
    </script>

</body>
</html>