Dashboard CDR - FreePBX / Issabel

Dashboard interactivo para análisis de llamadas (CDR) de FreePBX/Issabel con exportación a PDF.

Stack tecnológico

Componente	Versión requerida
Apache	2.4+
PHP	8.2+
MariaDB	10.x / MySQL 5.7+
Node.js	18+
npm	9+

---

Requisitos del sistema

1. Apache + PHP

# Debian/Ubuntu
apt update
apt install -y apache2 php8.2 php8.2-pdo php8.2-mysql libapache2-mod-php8.2

# Habilitar mod_rewrite (opcional)
a2enmod rewrite
systemctl restart apache2

2. MariaDB

apt install -y mariadb-server
systemctl enable --now mariadb

3. Node.js 18 + npm

curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
apt install -y nodejs

---

Instalación del módulo

1. Clonar / copiar archivos

cp -r dashboard-cdr/ /var/www/html/dashboard-cdr
cd /var/www/html/dashboard-cdr

2. Instalar dependencias Node (Playwright - exportación PDF)

npm install playwright
npx playwright install chromium

Nota: Playwright se usa para generar el PDF del dashboard desde el navegador headless.

3. Configurar usuario MySQL

Acceder a MariaDB y crear el usuario con permisos sobre la base de datos CDR de Issabel/FreePBX:

mysql -u root -p

CREATE USER 'reportes'@'localhost' IDENTIFIED BY 'Rep0rt3s2024';
GRANT SELECT ON asteriskcdrdb.* TO 'reportes'@'localhost';
FLUSH PRIVILEGES;
EXIT;

La base de datos asteriskcdrdb es creada automáticamente por FreePBX/Issabel.

4. Permisos de archivos

chown -R www-data:www-data /var/www/html/dashboard-cdr
chmod -R 755 /var/www/html/dashboard-cdr
chmod 644 /var/www/html/dashboard-cdr/images/*.png

---

Configuración de la API

El archivo api.php contiene la conexión a la base de datos. Editar si cambian las credenciales:

$host = 'localhost';
$user = 'reportes';
$pass = 'Rep0rt3s2024';
$db   = 'asteriskcdrdb';

---

Logos personalizables

Reemplazar los archivos en images/:

Archivo	Descripción	Dimensiones recomendadas
logo-left.png	Logo izquierdo	Max 150x80 px
logo-right.png	Logo derecho	Max 150x80 px

scp mi-logo.png root@SERVIDOR:/var/www/html/dashboard-cdr/images/logo-left.png

---

Acceso

Una vez instalado, acceder desde el navegador:

http://IP_DEL_SERVIDOR/dashboard-cdr/

---

Estructura de archivos

dashboard-cdr/
├── index.html          # Frontend (Tailwind CSS + Chart.js vía CDN)
├── api.php             # Backend PHP - consultas a asteriskcdrdb
├── images/
│   ├── logo-left.png   # Logo izquierdo (personalizable)
│   ├── logo-right.png  # Logo derecho (personalizable)
│   └── favicon.png     # Ícono del navegador
├── node_modules/
│   ├── playwright/     # Exportación PDF headless
│   └── playwright-core/
├── README.md           # Este archivo
└── README_LOGOS.txt    # Instrucciones para cambiar logos

---

Dependencias externas (CDN - requiere internet)

• Tailwind CSS — https://cdn.tailwindcss.com
• Chart.js — https://cdn.jsdelivr.net/npm/chart.js
• Google Fonts (Inter) — https://fonts.googleapis.com

Si el servidor no tiene acceso a internet, estas dependencias deben descargarse y servirse localmente.

---

Exportación a PDF

El dashboard incluye funcionalidad de exportación a PDF usando Playwright (Chromium headless). Asegurarse de que Chromium esté instalado:

cd /var/www/html/dashboard-cdr
npx playwright install chromium