<?php
// Verificar permisos
if (!current_user_can('manage_options')) {
wp_die(__('No tienes permisos para acceder a esta página.', 'working-english-system'));
}
// Desactivar caché para datos dinámicos
if (!defined('DONOTCACHEPAGE')) {
define('DONOTCACHEPAGE', true);
}
nocache_headers();
// Obtener estadísticas básicas
global $wpdb;
$stats = array(
'total_students' => $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}wes_students WHERE deleted_at IS NULL") ?? 0
);
// NO cargar header de WordPress para tener control total
// get_header();
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard - Working English International</title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
?>
<!-- CSS PROFESIONAL INTEGRADO -->
<style>
/* Variables CSS */
:root {
--wes-primary: #B19CD9;
--wes-secondary: #9B59B6;
--wes-success: #9DFF70;
--wes-warning: #FFE066;
--wes-danger: #FF6B6B;
--wes-info: #74B9FF;
--wes-light: #f6f7f7;
--wes-dark: #1d2327;
--wes-border: #c3c4c7;
--wes-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* =================================
ENCABEZADO CORPORATIVO PREMIUM
================================= */
.wes-corporate-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.wes-corporate-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 198, 121, 0.3) 0%, transparent 50%);
animation: gradientShift 15s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
.corporate-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 25px 40px;
gap: 30px;
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.05);
}
.company-logo {
display: flex;
align-items: center;
gap: 20px;
}
.logo-image {
width: 120px;
height: auto;
filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
transition: all 0.3s ease;
}
.logo-image:hover {
transform: scale(1.05);
filter: drop-shadow(0 6px 25px rgba(0,0,0,0.4));
}
.company-info {
text-align: center;
color: white;
}
.company-name {
font-size: 36px;
font-weight: 800;
margin: 0;
background: linear-gradient(45deg, #fff, #f0f0f0, #fff);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s ease-in-out infinite;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.company-tagline {
font-size: 16px;
margin: 8px 0 0;
opacity: 0.95;
font-weight: 500;
letter-spacing: 1px;
}
.contact-info {
text-align: right;
color: white;
}
.contact-item {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin: 8px 0;
font-size: 14px;
opacity: 0.9;
transition: all 0.3s ease;
}
.contact-item:hover {
opacity: 1;
transform: translateX(-5px);
}
.contact-item i {
width: 20px;
text-align: center;
background: rgba(255,255,255,0.2);
padding: 8px;
border-radius: 50%;
font-size: 12px;
}
.contact-item a {
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.contact-item a:hover {
color: var(--wes-warning);
text-decoration: none;
}
/* Efectos de partículas flotantes */
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.floating-elements::before,
.floating-elements::after {
content: '';
position: absolute;
width: 60px;
height: 60px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
animation: float 20s infinite ease-in-out;
}
.floating-elements::before {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.floating-elements::after {
top: 60%;
right: 15%;
animation-delay: 10s;
width: 80px;
height: 80px;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.5; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
}
/* Responsive del encabezado */
@media (max-width: 1024px) {
.corporate-content {
grid-template-columns: 1fr;
text-align: center;
gap: 20px;
padding: 30px 20px;
}
.company-name {
font-size: 32px;
}
.contact-info {
text-align: center;
}
.contact-item {
justify-content: center;
}
}
@media (max-width: 768px) {
.logo-image {
width: 100px;
}
.company-name {
font-size: 28px;
}
.company-tagline {
font-size: 14px;
}
.corporate-content {
padding: 25px 15px;
}
}
@media (max-width: 480px) {
.logo-image {
width: 80px;
}
.company-name {
font-size: 24px;
}
.contact-item {
font-size: 13px;
}
}
.wes-frontend-dashboard {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Header del dashboard */
.wes-dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding: 25px;
background: linear-gradient(135deg, var(--wes-primary), var(--wes-secondary));
border-radius: 12px;
color: white;
box-shadow: var(--wes-shadow);
}
.wes-dashboard-header h1 {
margin: 0;
font-size: 28px;
font-weight: 600;
display: flex;
align-items: center;
gap: 15px;
}
.wes-dashboard-header p {
margin: 8px 0 0;
opacity: 0.9;
font-size: 16px;
}
.admin-badge {
background: rgba(255,255,255,0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}
/* Cards de estadísticas */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 25px;
border-radius: 12px;
border: 1px solid var(--wes-border);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: var(--wes-shadow);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--card-color, var(--wes-primary));
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.stat-card.primary { --card-color: var(--wes-primary); }
.stat-card.success { --card-color: var(--wes-success); }
.stat-card.info { --card-color: var(--wes-info); }
.stat-card.warning { --card-color: var(--wes-warning); }
.stat-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.stat-number {
font-size: 2.5em;
font-weight: 700;
margin: 0;
color: var(--card-color, var(--wes-primary));
}
.stat-label {
margin: 8px 0 0;
color: #666;
font-weight: 500;
font-size: 16px;
}
.stat-icon {
font-size: 2.5rem;
color: var(--card-color, var(--wes-primary));
opacity: 0.7;
}
/* Sección principal con dos columnas */
.main-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
/* Accesos rápidos */
.quick-access {
background: white;
border-radius: 12px;
border: 1px solid var(--wes-border);
overflow: hidden;
box-shadow: var(--wes-shadow);
}
.section-header {
padding: 20px 25px;
background: var(--wes-light);
border-bottom: 1px solid var(--wes-border);
display: flex;
align-items: center;
gap: 10px;
}
.section-title {
margin: 0;
font-size: 18px;
color: var(--wes-dark);
font-weight: 600;
}
.section-body {
padding: 25px;
}
.quick-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.quick-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background: white;
border: 2px solid var(--btn-color, var(--wes-primary));
border-radius: 10px;
text-decoration: none;
color: var(--btn-color, var(--wes-primary));
transition: all 0.3s ease;
text-align: center;
min-height: 120px;
}
.quick-btn:hover {
background: var(--btn-color, var(--wes-primary));
color: white;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
text-decoration: none;
}
.quick-btn:disabled,
.quick-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.quick-btn.primary { --btn-color: var(--wes-primary); }
.quick-btn.success { --btn-color: var(--wes-success); }
.quick-btn.info { --btn-color: var(--wes-info); }
.quick-btn.config {
--btn-color: #8B4FA8; /* Color morado más oscuro para configuración */
}
.quick-btn.config:hover {
background: #8B4FA8;
color: white;
box-shadow: 0 6px 20px rgba(139, 79, 168, 0.3);
}
.quick-btn i {
font-size: 2rem;
margin-bottom: 10px;
}
.quick-btn span {
font-weight: 600;
font-size: 14px;
}
/* Panel de navegación */
.navigation-panel {
background: white;
border-radius: 12px;
border: 1px solid var(--wes-border);
overflow: hidden;
box-shadow: var(--wes-shadow);
height: fit-content;
}
.nav-list {
padding: 0;
margin: 0;
list-style: none;
}
.nav-item {
border-bottom: 1px solid #f0f0f0;
}
.nav-item:last-child {
border-bottom: none;
}
.nav-link {
display: flex;
align-items: center;
padding: 15px 20px;
color: var(--wes-dark);
text-decoration: none;
transition: all 0.3s ease;
gap: 12px;
}
.nav-link:hover {
background: #f8f9ff;
color: var(--wes-primary);
text-decoration: none;
}
.nav-link i {
font-size: 1.2rem;
width: 20px;
text-align: center;
}
/* Responsive */
@media (max-width: 768px) {
.wes-frontend-dashboard {
padding: 10px;
}
.wes-dashboard-header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.main-content {
grid-template-columns: 1fr;
gap: 20px;
}
.quick-buttons {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
}
</style>
<!-- Cargar Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Encabezado Corporativo Premium -->
<div class="wes-corporate-header">
<div class="floating-elements"></div>
<div class="corporate-content">
<div class="company-logo">
<img src="http://workingenglishadmin.com/wp-content/uploads/2025/07/letras-1_Mesa-de-trabajo-1.png" alt="Working English International" class="logo-image">
</div>
<div class="company-info">
<h1 class="company-name">Working English International</h1>
<p class="company-tagline">Learn With Us</p>
</div>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>Casper, Wyoming, USA</span>
</div>
<div class="contact-item">
<i class="fas fa-globe"></i>
<a href="https://www.workingenglishonline.com" target="_blank">www.workingenglishonline.com</a>
</div>
<div class="contact-item">
<i class="fas fa-graduation-cap"></i>
<span>Academic Management System</span>
</div>
</div>
</div>
</div>
<div class="wes-frontend-dashboard">
<!-- Header -->
<div class="wes-dashboard-header">
<div>
<h1>
<i class="fas fa-graduation-cap"></i>
Working English System
</h1>
<p>Bienvenido, <?php echo wp_get_current_user()->display_name; ?></p>
</div>
<div class="admin-badge">Administrador</div>
</div>
<!-- Cards de estadísticas -->
<div class="stats-grid">
<div class="stat-card primary">
<div class="stat-content">
<div>
<h3 class="stat-number"><?php echo number_format($stats['total_students']); ?></h3>
<p class="stat-label">Estudiantes</p>
</div>
<i class="fas fa-users stat-icon"></i>
</div>
</div>
<div class="stat-card success">
<div class="stat-content">
<div>
<h3 class="stat-number">0</h3>
<p class="stat-label">Maestros</p>
</div>
<i class="fas fa-chalkboard-teacher stat-icon"></i>
</div>
</div>
<div class="stat-card info">
<div class="stat-content">
<div>
<h3 class="stat-number">0</h3>
<p class="stat-label">Grupos</p>
</div>
<i class="fas fa-layer-group stat-icon"></i>
</div>
</div>
<div class="stat-card warning">
<div class="stat-content">
<div>
<h3 class="stat-number">0</h3>
<p class="stat-label">Pagos Pendientes</p>
</div>
<i class="fas fa-dollar-sign stat-icon"></i>
</div>
</div>
</div>
<div class="main-content">
<!-- Accesos rápidos -->
<div class="quick-access">
<div class="section-header">
<i class="fas fa-bolt"></i>
<h5 class="section-title">Accesos Rápidos</h5>
</div>
<div class="section-body">
<div class="quick-buttons">
<a href="/estudiantes" class="quick-btn primary">
<i class="fas fa-users"></i>
<span>Gestionar<br>Estudiantes</span>
</a>
<a href="/configuracion" class="quick-btn config">
<i class="fas fa-cogs"></i>
<span>Configuración<br>del Sistema</span>
</a>
<div class="quick-btn success disabled">
<i class="fas fa-chalkboard-teacher"></i>
<span>Maestros<br>(Próximamente)</span>
</div>
<div class="quick-btn info disabled">
<i class="fas fa-layer-group"></i>
<span>Grupos<br>(Próximamente)</span>
</div>
</div>
</div>
</div>
<!-- Panel de navegación -->
<div class="navigation-panel">
<div class="section-header">
<i class="fas fa-compass"></i>
<h5 class="section-title">Navegación</h5>
</div>
<div class="section-body" style="padding: 0;">
<ul class="nav-list">
<li class="nav-item">
<a href="/dashboard" class="nav-link">
<i class="fas fa-tachometer-alt"></i>
Dashboard
</a>
</li>
<li class="nav-item">
<a href="/estudiantes" class="nav-link">
<i class="fas fa-users"></i>
Estudiantes
</a>
</li>
<li class="nav-item">
<a href="/configuracion" class="nav-link">
<i class="fas fa-cogs"></i>
Configuración
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="opacity: 0.5; pointer-events: none;">
<i class="fas fa-chalkboard-teacher"></i>
Maestros
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="opacity: 0.5; pointer-events: none;">
<i class="fas fa-layer-group"></i>
Grupos
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="opacity: 0.5; pointer-events: none;">
<i class="fas fa-dollar-sign"></i>
Finanzas
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>