Telegram Bots Dashboard

pxy_dashboard/apps/views.py

@@ -348,3 +348,62 @@ def apps_whatsapp_bot(request):
     }
     return render(request, "pxy_dashboard/apps/apps-whatsapp-bot.html", context)
 
+from django.contrib.auth.decorators import login_required
+from django.shortcuts import render
+from django.db.models import Avg
+from django.utils import timezone
+from datetime import timedelta
+import json
+
+from pxy_bots.models import TelegramBot, TelegramConversation, TelegramMessage
+
+@login_required
+def apps_telegram_bot(request):
+    # — Métricas globales —
+    total_conversations = TelegramConversation.objects.count()
+    messages_in = TelegramMessage.objects.filter(direction='in').count()
+    messages_out = TelegramMessage.objects.filter(direction='out').count()
+    avg_rt = (
+        TelegramMessage.objects
+        .filter(direction='out', response_time_ms__isnull=False)
+        .aggregate(Avg('response_time_ms'))['response_time_ms__avg']
+        or 0
+    )
+
+    stats = {
+        'total_conversations': total_conversations,
+        'messages_in': messages_in,
+        'messages_out': messages_out,
+        'avg_response_time': int(avg_rt),
+    }
+
+    # — Información de cada bot —
+    bots_info = []
+    for bot in TelegramBot.objects.all():
+        bots_info.append({
+            'name': bot.name,
+            'username': getattr(bot, 'username', '–'),
+            'is_active': bot.is_active,
+            'assistant': bot.assistant.name,
+        })
+
+    # — Datos de los últimos 7 días para scatter —
+    today = timezone.now().date()
+    start_date = today - timedelta(days=6)
+    weekly_data = {}
+    for bot in TelegramBot.objects.all():
+        series = []
+        for i in range(7):
+            day = start_date + timedelta(days=i)
+            cnt = TelegramMessage.objects.filter(
+                conversation__bot=bot,
+                timestamp__date=day
+            ).count()
+            series.append({'x': day.strftime('%Y-%m-%d'), 'y': cnt})
+        weekly_data[bot.name] = series
+
+    return render(request, 'pxy_dashboard/apps/apps-telegram-bot.html', {
+        'stats': stats,
+        'bots_info': bots_info,
+        'weekly_data_json': json.dumps(weekly_data),
+    })

pxy_dashboard/templates/pxy_dashboard/apps/apps-telegram-bot.html

@@ -1,5 +1,110 @@
 {% extends "pxy_dashboard/partials/base.html" %}
+{% load static %}
+
 {% block content %}
-<h2>Telegram Bot</h2>
+  {% include "pxy_dashboard/partials/dashboard/kpi_row.html" %}
-<p>This is a placeholder page for <code>apps-telegram-bot.html</code></p>
+
+  <div class="row mb-4">
+    <div class="col">
+      <div class="card text-center">
+        <div class="card-body">
+          <h3>{{ stats.total_conversations|default:"–" }}</h3>
+          <p>Conversaciones totales</p>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card text-center">
+        <div class="card-body">
+          <h3>{{ stats.messages_in|default:"–" }}</h3>
+          <p>Mensajes recibidos</p>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card text-center">
+        <div class="card-body">
+          <h3>{{ stats.messages_out|default:"–" }}</h3>
+          <p>Mensajes enviados</p>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card text-center">
+        <div class="card-body">
+          <h3>{{ stats.avg_response_time|default:"–" }} ms</h3>
+          <p>Tiempo respuesta promedio</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tabla de Bots -->
+  <div class="card mb-4">
+    <div class="card-header"><h5>Bots de Telegram</h5></div>
+    <div class="card-body">
+      <div class="table-responsive">
+        <table class="table table-hover mb-0">
+          <thead class="table-light">
+            <tr>
+              <th>Nombre</th>
+              <th>Username</th>
+              <th>Estado</th>
+              <th>Asistente AI</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for bot in bots_info %}
+              <tr>
+                <td>{{ bot.name }}</td>
+                <td>{{ bot.username }}</td>
+                <td>
+                  {% if bot.is_active %}
+                    <span class="badge bg-success">Activo</span>
+                  {% else %}
+                    <span class="badge bg-secondary">Inactivo</span>
+                  {% endif %}
+                </td>
+                <td>{{ bot.assistant }}</td>
+              </tr>
+            {% empty %}
+              <tr>
+                <td colspan="4" class="text-center text-muted">
+                  No hay bots configurados
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- Scatter semanal -->
+  <div class="card mb-4">
+    <div class="card-header"><h5>Actividad Semanal de Mensajes por Bot</h5></div>
+    <div class="card-body">
+      <div id="chart-telegram-weekly" class="apex-charts"
+           data-colors="#727cf5,#0acf97,#fa5c7c"></div>
+    </div>
+  </div>
+{% endblock %}
+
+{% block extra_js %}
+  <script src="{% static 'dashboard/vendor/apexcharts/apexcharts.min.js' %}"></script>
+  <script>
+    const weeklyData = {{ weekly_data_json|safe }};
+    const series = Object.entries(weeklyData).map(([name, data]) => ({ name, data }));
+
+    new ApexCharts(document.querySelector("#chart-telegram-weekly"), {
+      chart: { type: 'scatter', height: 350, zoom: { enabled: true } },
+      series: series,
+      xaxis: { type: 'category', title: { text: 'Fecha' } },
+      yaxis: { title: { text: 'Número de mensajes' } },
+      tooltip: {
+        x: { formatter: val => val }
+      },
+      title: { text: 'Mensajes por Bot (últimos 7 días)' }
+    }).render();
+  </script>
 {% endblock %}