530 lines
26 KiB
PHP
530 lines
26 KiB
PHP
<?php
|
|
/**
|
|
* Página principal del sistema WhatsApp Bot
|
|
* Fecha: 13 de noviembre de 2025
|
|
*/
|
|
|
|
// Verificar si la instalación está completada
|
|
$installationLockFile = '.installation_completed';
|
|
if (!file_exists($installationLockFile)) {
|
|
header('Location: instalacion.html');
|
|
exit();
|
|
}
|
|
|
|
require_once 'config/config.php';
|
|
|
|
// Verificar conexión a la base de datos
|
|
try {
|
|
$db = Database::getInstance();
|
|
$dbStatus = 'Conectado';
|
|
} catch (Exception $e) {
|
|
$dbStatus = 'Error: ' . $e->getMessage();
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WhatsApp Bot Manager</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="./assets/css/styles.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- Sidebar -->
|
|
<nav class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h4><i class="fas fa-robot"></i> WhatsApp Bot</h4>
|
|
</div>
|
|
<ul class="sidebar-menu">
|
|
<li><a href="#dashboard" class="nav-link active" data-tab="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
|
|
<li><a href="#conversations" class="nav-link" data-tab="conversations"><i class="fas fa-comments"></i> Conversaciones</a></li>
|
|
<li><a href="#users" class="nav-link" data-tab="users"><i class="fas fa-users"></i> Usuarios</a></li>
|
|
<li><a href="#menus" class="nav-link" data-tab="menus"><i class="fas fa-list"></i> Menús</a></li>
|
|
<li><a href="#messages" class="nav-link" data-tab="messages"><i class="fas fa-paper-plane"></i> Enviar Mensaje</a></li>
|
|
<li><a href="#templates" class="nav-link" data-tab="templates"><i class="fas fa-file-text"></i> Plantillas</a></li>
|
|
<li><a href="#autoresponses" class="nav-link" data-tab="autoresponses"><i class="fas fa-robot"></i> Respuestas Auto</a></li>
|
|
<li><a href="#settings" class="nav-link" data-tab="settings"><i class="fas fa-cog"></i> Configuración</a></li>
|
|
<li><a href="#logs" class="nav-link" data-tab="logs"><i class="fas fa-file-alt"></i> Logs</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Header -->
|
|
<header class="content-header">
|
|
<h1><i class="fas fa-robot"></i> Sistema de Gestión WhatsApp Bot</h1>
|
|
<div class="header-actions">
|
|
<span class="status-indicator online">
|
|
<i class="fas fa-circle"></i> En línea
|
|
</span>
|
|
<button class="btn btn-primary" onclick="refreshData()">
|
|
<i class="fas fa-sync-alt"></i> Actualizar
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Dashboard Tab -->
|
|
<div id="dashboard" class="tab-content active">
|
|
<div class="row mb-4">
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card card-stat bg-primary text-white">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="card-stat-title">Total Usuarios</h6>
|
|
<h3 class="card-stat-number" id="total-users">-</h3>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-users fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card card-stat bg-success text-white">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="card-stat-title">Mensajes Hoy</h6>
|
|
<h3 class="card-stat-number" id="messages-today">-</h3>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-comment fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card card-stat bg-info text-white">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="card-stat-title">Usuarios Activos</h6>
|
|
<h3 class="card-stat-number" id="active-users">-</h3>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-user-check fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card card-stat bg-warning text-white">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="card-stat-title">Total Mensajes</h6>
|
|
<h3 class="card-stat-number" id="total-messages">-</h3>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-envelope fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-chart-line"></i> Actividad Reciente</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="messagesChart" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-clock"></i> Últimos Mensajes</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="recent-messages" class="list-group">
|
|
<!-- Contenido dinámico -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversations Tab -->
|
|
<div id="conversations" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-comments"></i> Conversaciones</h5>
|
|
<div>
|
|
<input type="text" class="form-control" placeholder="Buscar conversaciones..." id="search-conversations">
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Usuario</th>
|
|
<th>Último Mensaje</th>
|
|
<th>Tipo</th>
|
|
<th>Estado</th>
|
|
<th>Fecha</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="conversations-table">
|
|
<!-- Contenido dinámico -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Tab -->
|
|
<div id="users" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-users"></i> Gestión de Usuarios</h5>
|
|
<button class="btn btn-primary" onclick="exportUsers()">
|
|
<i class="fas fa-download"></i> Exportar
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Teléfono</th>
|
|
<th>Nombre</th>
|
|
<th>Estado</th>
|
|
<th>Menú Actual</th>
|
|
<th>Registro</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-table">
|
|
<!-- Contenido dinámico -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menus Tab -->
|
|
<div id="menus" class="tab-content">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-list"></i> Menús Configurados</h5>
|
|
<button class="btn btn-primary" onclick="showCreateMenuModal()">
|
|
<i class="fas fa-plus"></i> Nuevo Menú
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="menus-tree">
|
|
<!-- Árbol de menús -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-edit"></i> Editor de Menú</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="menu-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">Nombre del Menú</label>
|
|
<input type="text" class="form-control" id="menu-name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Título</label>
|
|
<input type="text" class="form-control" id="menu-title" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Descripción</label>
|
|
<textarea class="form-control" id="menu-description" rows="3"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Menú Padre</label>
|
|
<select class="form-control" id="menu-parent">
|
|
<option value="">Sin padre (Menú raíz)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-check mb-3">
|
|
<input type="checkbox" class="form-check-input" id="menu-active" checked>
|
|
<label class="form-check-label">Activo</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Guardar Menú
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages Tab -->
|
|
<div id="messages" class="tab-content">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-paper-plane"></i> Enviar Mensaje</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="send-message-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">Destinatario</label>
|
|
<select class="form-control" id="message-recipient" required>
|
|
<option value="">Seleccionar usuario...</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Tipo de Mensaje</label>
|
|
<select class="form-control" id="message-type" required>
|
|
<option value="text">Texto</option>
|
|
<option value="template">Plantilla</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3" id="message-text-group">
|
|
<label class="form-label">Mensaje</label>
|
|
<textarea class="form-control" id="message-text" rows="4" placeholder="Escribe tu mensaje aquí..."></textarea>
|
|
</div>
|
|
<div class="mb-3" id="template-group" style="display: none;">
|
|
<label class="form-label">Plantilla</label>
|
|
<select class="form-control" id="message-template">
|
|
<option value="">Seleccionar plantilla...</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane"></i> Enviar Mensaje
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-broadcast-tower"></i> Mensaje Masivo</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="broadcast-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">Filtro de Usuarios</label>
|
|
<select class="form-control" id="broadcast-filter">
|
|
<option value="all">Todos los usuarios</option>
|
|
<option value="active">Solo usuarios activos</option>
|
|
<option value="recent">Usuarios recientes (30 días)</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Mensaje</label>
|
|
<textarea class="form-control" id="broadcast-message" rows="4" placeholder="Mensaje para envío masivo..."></textarea>
|
|
</div>
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<strong>Cuidado:</strong> Este mensaje se enviará a múltiples usuarios.
|
|
</div>
|
|
<button type="submit" class="btn btn-warning">
|
|
<i class="fas fa-broadcast-tower"></i> Envío Masivo
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Templates Tab -->
|
|
<div id="templates" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-file-text"></i> Plantillas de Mensaje</h5>
|
|
<button class="btn btn-primary" onclick="showCreateTemplateModal()">
|
|
<i class="fas fa-plus"></i> Nueva Plantilla
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Nombre</th>
|
|
<th>Plantilla WhatsApp</th>
|
|
<th>Idioma</th>
|
|
<th>Categoría</th>
|
|
<th>Estado</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="templates-table">
|
|
<!-- Contenido dinámico -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auto Responses Tab -->
|
|
<div id="autoresponses" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-robot"></i> Respuestas Automáticas</h5>
|
|
<button class="btn btn-primary" onclick="showCreateAutoResponseModal()">
|
|
<i class="fas fa-plus"></i> Nueva Respuesta
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Tipo</th>
|
|
<th>Palabra Clave</th>
|
|
<th>Respuesta</th>
|
|
<th>Estado</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="autoresponses-table">
|
|
<!-- Contenido dinámico -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div id="settings" class="tab-content">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-cog"></i> Configuración del Sistema</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="settings-form">
|
|
<div class="mb-4">
|
|
<h6 class="text-muted">WhatsApp Business API</h6>
|
|
<div class="mb-3">
|
|
<label class="form-label">Token de Acceso</label>
|
|
<input type="password" class="form-control" id="whatsapp-token" placeholder="Token de WhatsApp Business API">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Phone Number ID</label>
|
|
<input type="text" class="form-control" id="phone-number-id" placeholder="ID del número de teléfono">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Webhook Verify Token</label>
|
|
<input type="text" class="form-control" id="webhook-token" placeholder="Token de verificación del webhook">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h6 class="text-muted">Configuración General</h6>
|
|
<div class="mb-3">
|
|
<label class="form-label">Nombre de la Empresa</label>
|
|
<input type="text" class="form-control" id="business-name" placeholder="Nombre de tu empresa">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Mensaje de Bienvenida</label>
|
|
<textarea class="form-control" id="welcome-message" rows="3" placeholder="Mensaje que se envía a usuarios nuevos"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Guardar Configuración
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-info-circle"></i> Información del Sistema</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Versión:</dt>
|
|
<dd class="col-sm-6">1.0.0</dd>
|
|
|
|
<dt class="col-sm-6">PHP:</dt>
|
|
<dd class="col-sm-6"><?php echo PHP_VERSION; ?></dd>
|
|
|
|
<dt class="col-sm-6">Base de Datos:</dt>
|
|
<dd class="col-sm-6"><?php echo $dbStatus; ?></dd>
|
|
|
|
<dt class="col-sm-6">Webhook URL:</dt>
|
|
<dd class="col-sm-6">
|
|
<code><?php echo APP_URL; ?>/api/webhook.php</code>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs Tab -->
|
|
<div id="logs" class="tab-content">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-file-alt"></i> Logs del Sistema</h5>
|
|
<div>
|
|
<button class="btn btn-outline-primary" onclick="refreshLogs()">
|
|
<i class="fas fa-sync-alt"></i> Actualizar
|
|
</button>
|
|
<button class="btn btn-outline-danger" onclick="clearLogs()">
|
|
<i class="fas fa-trash"></i> Limpiar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Fecha</th>
|
|
<th>IP</th>
|
|
<th>Estado</th>
|
|
<th>Request</th>
|
|
<th>Response</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="logs-table">
|
|
<!-- Contenido dinámico -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="./assets/js/app.js"></script>
|
|
</body>
|
|
</html>
|