118 lines
3.5 KiB
HTML
118 lines
3.5 KiB
HTML
{% extends "pxy_dashboard/partials/base.html" %}
|
||
{% load static %}
|
||
|
||
{% block content %}
|
||
{% include "pxy_dashboard/partials/dashboard/kpi_row.html" %}
|
||
|
||
<!-- KPIs -->
|
||
<div class="row mb-4">
|
||
<div class="col">
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<h3>{{ stats.total_pages|default:"–" }}</h3>
|
||
<p>Páginas registradas</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<h3>{{ stats.total_events|default:"–" }}</h3>
|
||
<p>Eventos totales</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<h3>{{ stats.comments|default:"–" }}</h3>
|
||
<p>Comentarios</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<h3>{{ stats.shares|default:"–" }}</h3>
|
||
<p>Compartidos</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tabla de bots de Facebook Pages -->
|
||
<div class="card mb-4">
|
||
<div class="card-header"><h5>Bots de Facebook Pages</h5></div>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-hover mb-0">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th>Página</th>
|
||
<th>ID de Página</th>
|
||
<th>Asistente AI</th>
|
||
<th>Suscrito</th>
|
||
<th>Creado</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for bot in bots_info %}
|
||
<tr>
|
||
<td>{{ bot.page_name }}</td>
|
||
<td> <a href="https://www.facebook.com/messages/t/{{ bot.page_id }}/"
|
||
target="_blank" rel="noopener"
|
||
class="fw-semibold text-decoration-none">
|
||
{{ bot.page_id }}
|
||
</a></td>
|
||
<td>{{ bot.assistant }}</td>
|
||
<td>
|
||
{% if bot.is_subscribed %}
|
||
<span class="badge bg-success">Sí</span>
|
||
{% else %}
|
||
<span class="badge bg-secondary">No</span>
|
||
{% endif %}
|
||
</td>
|
||
<td>{{ bot.created_at }}</td>
|
||
</tr>
|
||
{% empty %}
|
||
<tr>
|
||
<td colspan="5" class="text-center text-muted">
|
||
No hay bots configurados
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scatter semanal de eventos por página -->
|
||
<div class="card mb-4">
|
||
<div class="card-header"><h5>Eventos Semanales por Página</h5></div>
|
||
<div class="card-body">
|
||
<div id="chart-facebook-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 weeklyFB = {{ weekly_data_json|safe }};
|
||
const seriesFB = Object.entries(weeklyFB).map(([name, data]) => ({ name, data }));
|
||
|
||
new ApexCharts(document.querySelector("#chart-facebook-weekly"), {
|
||
chart: { type: 'scatter', height: 350, zoom: { enabled: true } },
|
||
series: seriesFB,
|
||
xaxis: { type: 'category', title: { text: 'Fecha' } },
|
||
yaxis: { title: { text: 'Eventos (#)' } },
|
||
tooltip: {
|
||
x: { formatter: val => val }
|
||
},
|
||
title: { text: 'Eventos de Facebook Pages (últimos 7 días)' }
|
||
}).render();
|
||
</script>
|
||
{% endblock %}
|