Tul xxx Tul

Viewing: dashboard.php

<?= $this->extend('layout/app'); ?>

<?php $this->section('title'); ?>
Tablero de Control
<?php $this->endSection(); ?>

<?php $this->section('css'); ?>
<style>
    :root {
        --dash-primary: #ccff00;
        --dash-dark: #0a0a0a;
        --dash-gray: #f3f4f6;
    }

    .widget-stats {
        background: #fff;
        border-radius: 20px;
        padding: 24px;
        border: 1px solid #edf2f7;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .widget-stats:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .widget-stats .icon-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 16px;
    }

    .bg-light-neon { background: rgba(204, 255, 0, 0.1); color: #88aa00; }
    .bg-light-blue { background: #e0f2fe; color: #0ea5e9; }
    .bg-light-purple { background: #f5f3ff; color: #8b5cf6; }
    .bg-light-orange { background: #fff7ed; color: #f97316; }

    .widget-stats .label {
        color: #718096;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .widget-stats .value {
        font-size: 1.75rem;
        font-weight: 800;
        color: #1a202c;
        font-family: 'Space Grotesk', sans-serif;
    }

    .widget-stats .trend {
        font-size: 0.75rem;
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .chart-container {
        background: #fff;
        border-radius: 20px;
        padding: 24px;
        border: 1px solid #edf2f7;
        margin-bottom: 24px;
    }

    .chart-title {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .recent-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .recent-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f7fafc;
    }

    .recent-item:last-child { border-bottom: none; }

    .recent-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #f7fafc;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-weight: 700;
        color: #4a5568;
    }

    .recent-info { flex: 1; }
    .recent-name { font-weight: 600; color: #2d3748; font-size: 0.9rem; }
    .recent-sub { color: #a0aec0; font-size: 0.75rem; }
    .recent-value { font-weight: 700; color: #2d3748; font-size: 0.9rem; }

    .badge-soft {
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 700;
    }
    .badge-soft-success { background: #c6f6d5; color: #22543d; }
    .badge-soft-warning { background: #feebc8; color: #744210; }

</style>
<?php $this->endSection(); ?>

<?php $this->section('content'); ?>

<div class="app-title">
    <div>
        <h1>Dashboard <span class="badge bg-dark text-neon ms-2 fs-6">Pro</span></h1>
        <p>Bienvenido de nuevo, <?= session('nombre') ?></p>
    </div>
    <div class="d-flex gap-2">
        <a href="<?= base_url('admin/attendance'); ?>" class="btn btn-outline-dark btn-sm"><i class="bi bi-file-earmark-bar-graph"></i> Reporte</a>
        <a href="<?= base_url('admin/clients/new'); ?>" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> Nuevo Miembro</a>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-6 col-lg-2">
        <div class="widget-stats">
            <div>
                <div class="icon-wrapper bg-light-neon"><i class="bi bi-people-fill"></i></div>
                <div class="label">Total Clientes</div>
                <div class="value"><?= number_format($clientsCount) ?></div>
            </div>
            <div class="trend text-success"><i class="bi bi-graph-up"></i> +12%</div>
        </div>
    </div>
    <div class="col-md-6 col-lg-2">
        <div class="widget-stats">
            <div>
                <div class="icon-wrapper bg-light-purple"><i class="bi bi-person-gear"></i></div>
                <div class="label">Staff Sistema</div>
                <div class="value"><?= number_format($staffCount) ?></div>
            </div>
            <div class="trend text-muted"><i class="bi bi-shield-lock"></i> Admins</div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="widget-stats">
            <div>
                <div class="icon-wrapper bg-light-blue"><i class="bi bi-currency-dollar"></i></div>
                <div class="label">Ingresos Totales</div>
                <div class="value"><?= get_currency() ?><?= number_format($totalRevenue, 2) ?></div>
            </div>
            <div class="trend text-success"><i class="bi bi-graph-up"></i> +8% vs ayer</div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="widget-stats">
            <div>
                <div class="icon-wrapper bg-light-purple"><i class="bi bi-shield-check"></i></div>
                <div class="label">Planes Activos</div>
                <div class="value"><?= number_format($memberships) ?></div>
            </div>
            <div class="trend text-info"><i class="bi bi-info-circle"></i> 95% retención</div>
        </div>
    </div>
    <div class="col-md-6 col-lg-2">
        <div class="widget-stats">
            <div>
                <div class="icon-wrapper bg-light-orange"><i class="bi bi-person-badge"></i></div>
                <div class="label">Instructores</div>
                <div class="value"><?= number_format($instructors) ?></div>
            </div>
            <div class="trend text-muted"><i class="bi bi-clock"></i> 4 hoy</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="chart-container">
            <div class="chart-title">
                Rendimiento Mensual
                <select class="form-select form-select-sm w-auto border-0 bg-light">
                    <option>Últimos 6 meses</option>
                    <option>Este año</option>
                </select>
            </div>
            <div style="height: 350px;" id="mainChart"></div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="chart-container">
                    <div class="chart-title">Distribución de Planes</div>
                    <div style="height: 250px;" id="donutChart"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="chart-container">
                    <div class="chart-title">Próximos Vencimientos</div>
                    <div class="recent-list">
                        <?php foreach($expiringMemberships as $exp): ?>
                        <div class="recent-item">
                            <div class="recent-avatar"><?= substr($exp['user_name'], 0, 1) ?></div>
                            <div class="recent-info">
                                <div class="recent-name"><?= $exp['user_name'] ?></div>
                                <div class="recent-sub"><?= $exp['plan_name'] ?></div>
                            </div>
                            <div class="text-end">
                                <div class="badge-soft badge-soft-warning"><?= date('d M', strtotime($exp['end_date'])) ?></div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                        <?php if(empty($expiringMemberships)): ?>
                            <p class="text-muted text-center py-4">No hay vencimientos próximos</p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="chart-container">
            <div class="chart-title">Pagos Recientes</div>
            <div class="recent-list">
                <?php foreach($recentPayments as $pay): ?>
                <div class="recent-item">
                    <div class="recent-avatar" style="background: #ccff0033; color: #88aa00;"><i class="bi bi-cash"></i></div>
                    <div class="recent-info">
                        <div class="recent-name"><?= $pay['user_name'] ?></div>
                        <div class="recent-sub"><?= date('d M, H:i', strtotime($pay['created_at'])) ?></div>
                    </div>
                    <div class="recent-value"><?= get_currency() ?><?= number_format($pay['amount'], 0) ?></div>
                </div>
                <?php endforeach; ?>
                <?php if(empty($recentPayments)): ?>
                    <p class="text-muted text-center py-4">No hay pagos registrados</p>
                <?php endif; ?>
            </div>
            <a href="<?= base_url('admin/payments') ?>" class="btn btn-light btn-sm w-100 mt-3">Ver todo el historial</a>
        </div>

        <div class="chart-container bg-dark text-white border-0">
            <div class="chart-title text-white">Estado de Asistencia</div>
            <?php 
                $percent = ($maxCapacity > 0) ? ($attendanceToday / $maxCapacity) * 100 : 0;
                $percent = min($percent, 100);
            ?>
            <div class="d-flex align-items-center justify-content-between mb-3">
                <span>Hoy</span>
                <span class="text-neon fw-bold"><?= number_format($percent, 0) ?>% Capacidad</span>
            </div>
            <div class="progress" style="height: 8px; background: rgba(255,255,255,0.1);">
                <div class="progress-bar bg-neon" style="width: <?= $percent ?>%"></div>
            </div>
            <p class="small text-white-50 mt-3">Hay <?= $attendanceToday ?> personas que han asistido hoy.</p>
        </div>
    </div>
</div>

<?php $this->endSection(); ?>

<?php $this->section('js'); ?>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // CHART PRINCIPAL (Combinado Asistencia e Ingresos)
        const attendanceData = <?= json_encode($attendanceData); ?>;
        const paymentData = <?= json_encode($paymentData); ?>;
        
        const months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
        
        // Mapear datos a meses (rellenando con 0 si no hay datos)
        const attSeries = new Array(12).fill(0);
        attendanceData.forEach(d => attSeries[d.month - 1] = d.total);
        
        const paySeries = new Array(12).fill(0);
        paymentData.forEach(d => paySeries[d.month - 1] = d.total);

        const mainChart = echarts.init(document.getElementById('mainChart'));
        mainChart.setOption({
            tooltip: { trigger: 'axis', backgroundColor: '#fff', borderColor: '#eee', textStyle: { color: '#333' } },
            legend: { data: ['Asistencia', 'Ingresos'], bottom: 0 },
            grid: { top: '10%', left: '3%', right: '4%', bottom: '15%', containLabel: true },
            xAxis: { 
                type: 'category', 
                data: months,
                axisLine: { lineStyle: { color: '#eee' } },
                axisLabel: { color: '#999' }
            },
            yAxis: [
                { type: 'value', name: 'Personas', splitLine: { lineStyle: { type: 'dashed' } } },
                { type: 'value', name: 'Ingresos', position: 'right', splitLine: { show: false } }
            ],
            series: [
                {
                    name: 'Asistencia',
                    type: 'bar',
                    barWidth: '40%',
                    itemStyle: { color: '#ccff00', borderRadius: [4, 4, 0, 0] },
                    data: attSeries
                },
                {
                    name: 'Ingresos',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    showSymbol: false,
                    lineStyle: { width: 4, color: '#0a0a0a' },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(10, 10, 10, 0.1)' },
                            { offset: 1, color: 'rgba(10, 10, 10, 0)' }
                        ])
                    },
                    data: paySeries
                }
            ]
        });

        // DONUT CHART (Membresías)
        const membershipTypeTotals = <?= json_encode($membershipTypeTotals); ?>;
        const donutChart = echarts.init(document.getElementById('donutChart'));
        donutChart.setOption({
            tooltip: { trigger: 'item' },
            legend: { show: false },
            series: [{
                name: 'Planes',
                type: 'pie',
                radius: ['60%', '85%'],
                avoidLabelOverlap: false,
                itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
                label: { show: false },
                data: membershipTypeTotals.map(item => ({
                    value: item.total,
                    name: item.membership_type_name
                })),
                color: ['#ccff00', '#0a0a0a', '#88aa00', '#333', '#eee']
            }]
        });

        window.addEventListener('resize', function() {
            mainChart.resize();
            donutChart.resize();
        });
    });
</script>
<?php $this->endSection(); ?>
User / IP	: 216.73.216.191
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64