Tul xxx Tul

Viewing: index.php

<?php
$saldoTotal    = floatval($cliente['saldo_total'] ?? 0);
$saldoPagado   = floatval($cliente['saldo_pagado'] ?? 0);
$saldoPendiente= floatval($cliente['saldo_pendiente'] ?? 0);
$porcentaje    = $saldoTotal > 0 ? round(($saldoPagado / $saldoTotal) * 100) : 0;
?>

<div class="row g-4 mb-4">
    <div class="col-12">
        <div class="card-custom border-0 shadow-sm p-4" style="background: linear-gradient(135deg, #4361ee 0%, #3f37c9 100%); border-radius: 24px;">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div class="text-white">
                    <h2 class="fw-bold mb-1">¡Bienvenido, <?= htmlspecialchars($cliente['nombre']) ?>! 👋</h2>
                    <p class="mb-0 opacity-75">Aquí tienes un resumen del estado de tus proyectos y pagos.</p>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <div class="text-end text-white d-none d-md-block">
                        <div class="small opacity-75">Estado de Cuenta</div>
                        <div class="fw-bold fs-5"><?= $saldoPendiente > 0 ? 'Pendiente' : 'Al día' ?></div>
                    </div>
                    <div class="bg-white rounded-4 shadow-sm overflow-hidden" style="width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background-color: white !important; border: 2px solid rgba(255,255,255,0.2);">
                        <?php if (!empty($cliente['foto'])): ?>
                            <img src="<?= BASE_URL ?>/public/assets/uploads/clientes/<?= htmlspecialchars($cliente['foto']) ?>" style="width: 100%; height: 100%; object-fit: contain; padding: 4px; background-color: white;">
                        <?php else: ?>
                            <i class="bi bi-person-check-fill fs-3 text-primary"></i>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Card Pendiente -->
    <div class="col-12 col-md-4">
        <div class="card-custom border-0 shadow-sm p-4 h-100 transition-all" style="border-radius: 24px;">
            <div class="d-flex align-items-center gap-3 mb-3">
                <div class="icon-shape bg-soft-danger rounded-4 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: rgba(239, 71, 111, 0.1); color: #ef476f;">
                    <i class="bi bi-wallet2 fs-4"></i>
                </div>
                <h6 class="text-muted mb-0 fw-bold">Saldo Pendiente</h6>
            </div>
            <h2 class="fw-bold mb-1" style="color: <?= $saldoPendiente > 0 ? '#ef476f' : '#06d6a0' ?>;">$<?= number_format($saldoPendiente, 2) ?></h2>
            <p class="text-muted small mb-0">Total a pagar actualmente</p>
        </div>
    </div>

    <!-- Card Pagado -->
    <div class="col-12 col-md-4">
        <div class="card-custom border-0 shadow-sm p-4 h-100 transition-all" style="border-radius: 24px;">
            <div class="d-flex align-items-center gap-3 mb-3">
                <div class="icon-shape bg-soft-success rounded-4 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: rgba(6, 214, 160, 0.1); color: #06d6a0;">
                    <i class="bi bi-cash-stack fs-4"></i>
                </div>
                <h6 class="text-muted mb-0 fw-bold">Total Abonado</h6>
            </div>
            <h2 class="fw-bold mb-1 text-success">$<?= number_format($saldoPagado, 2) ?></h2>
            <p class="text-muted small mb-0">Pagos registrados con éxito</p>
        </div>
    </div>

    <!-- Card Tareas -->
    <div class="col-12 col-md-4">
        <div class="card-custom border-0 shadow-sm p-4 h-100 transition-all" style="border-radius: 24px;">
            <div class="d-flex align-items-center gap-3 mb-3">
                <div class="icon-shape bg-soft-primary rounded-4 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: rgba(67, 97, 238, 0.1); color: #4361ee;">
                    <i class="bi bi-kanban fs-4"></i>
                </div>
                <h6 class="text-muted mb-0 fw-bold">Proyectos en curso</h6>
            </div>
            <h2 class="fw-bold mb-1 text-primary"><?= count(array_filter($trabajos, fn($t) => $t['estado'] !== 'completado')) ?></h2>
            <p class="text-muted small mb-0">Tareas activas actualmente</p>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Columna Tareas -->
    <div class="col-lg-7">
        <div class="card-custom border-0 shadow-sm overflow-hidden" style="border-radius: 24px;">
            <div class="card-header-custom p-4 bg-transparent border-bottom">
                <h5 class="fw-bold mb-0"><i class="bi bi-tools me-2 text-primary"></i>Seguimiento de mis Proyectos</h5>
            </div>
            <div class="card-body-custom p-0">
                <?php if (empty($trabajos)): ?>
                    <div class="text-center py-5">
                        <i class="bi bi-clipboard-x text-muted opacity-25" style="font-size: 4rem;"></i>
                        <h6 class="text-muted mt-3">Aún no tienes trabajos registrados.</h6>
                    </div>
                <?php else: ?>
                    <div class="p-4">
                        <?php foreach ($trabajos as $job): ?>
                            <div class="job-item mb-4 p-3 rounded-4 border bg-white transition-all shadow-sm-hover" 
                                 style="border-left: 5px solid <?= $job['estado'] === 'completado' ? '#06d6a0' : ($job['prioridad'] === 'alta' ? '#ef476f' : '#4361ee') ?> !important;">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <span class="badge-modern <?= $job['estado'] === 'completado' ? 'badge-soft-success' : 'badge-soft-primary' ?> text-uppercase" style="font-size: 0.65rem;">
                                        <?= str_replace('_', ' ', $job['estado']) ?>
                                    </span>
                                    <span class="text-muted small"><i class="bi bi-calendar-event me-1"></i><?= date('d/m/Y', strtotime($job['fecha_creacion'])) ?></span>
                                </div>
                                <h6 class="fw-bold mb-2 <?= $job['estado'] === 'completado' ? 'text-decoration-line-through text-muted' : '' ?>">
                                    <?= htmlspecialchars($job['descripcion']) ?>
                                </h6>
                                <?php if ($job['estado'] === 'completado'): ?>
                                    <div class="text-success small fw-bold">
                                        <i class="bi bi-check-all me-1"></i> Finalizado el <?= date('d/m/Y', strtotime($job['fecha_completado'])) ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Columna Pagos -->
    <div class="col-lg-5">
        <div class="card-custom border-0 shadow-sm overflow-hidden" style="border-radius: 24px;">
            <div class="card-header-custom p-4 bg-transparent border-bottom">
                <h5 class="fw-bold mb-0"><i class="bi bi-clock-history me-2 text-primary"></i>Historial de Pagos</h5>
            </div>
            <div class="card-body-custom p-0">
                <?php if (empty($pagos)): ?>
                    <div class="text-center py-5">
                        <i class="bi bi-clock-history text-muted opacity-25" style="font-size: 4rem;"></i>
                        <h6 class="text-muted mt-3">No hay pagos registrados aún.</h6>
                    </div>
                <?php else: ?>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr class="text-muted small text-uppercase">
                                    <th class="border-0 ps-4">Fecha</th>
                                    <th class="border-0">Monto</th>
                                    <th class="border-0 pe-4 text-end">Método</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($pagos as $pago): ?>
                                <tr>
                                    <td class="ps-4">
                                        <div class="fw-semibold"><?= date('d/m/Y', strtotime($pago['fecha_pago'])) ?></div>
                                        <div class="small text-muted"><?= date('h:i A', strtotime($pago['fecha_pago'])) ?></div>
                                    </td>
                                    <td class="fw-bold text-success">$<?= number_format($pago['monto'], 2) ?></td>
                                    <td class="pe-4 text-end">
                                        <span class="badge-modern badge-soft-primary" style="font-size: 0.7rem;">
                                            <?= ucfirst($pago['metodo_pago']) ?>
                                        </span>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<style>
.transition-all { transition: all 0.3s ease; }
.shadow-sm-hover:hover { 
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}
.icon-shape {
    flex-shrink: 0;
}
.job-item {
    background: #fcfdfe;
}
</style>
User / IP	: 216.73.216.146
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