Tul xxx Tul

Viewing: index.php

<!-- Mobile-optimized Caja CSS -->
<style>
    /* Prevent horizontal scroll globally */
    body {
        overflow-x: hidden;
    }
    
    .caja-wrapper {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Ensure all containers respect viewport width */
    .card,
    .card-body,
    .row,
    .col {
        max-width: 100%;
    }
    
    .caja-card--ingresos {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .caja-card--egresos {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .caja-card--balance {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .text-white-75 {
        color: rgba(255, 255, 255, 0.75);
    }
    
    .movimiento-card-mobile {
        border-radius: 12px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.08);
        max-width: 100%;
    }
    
    .movimiento-card-mobile:active {
        transform: scale(0.98);
    }
    
    .caja-card {
        transition: all 0.3s ease;
    }
    
    .caja-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
    }
    
    @media (max-width: 767.98px) {
        /* Global mobile constraints */
        html, body {
            max-width: 100vw;
            overflow-x: hidden;
        }
        
        .container-fluid {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
        
        .caja-wrapper {
            padding: 1rem 0 !important;
        }
        
        .caja-wrapper h2 {
            font-size: 1.5rem;
        }
        
        .caja-wrapper h5 {
            font-size: 1.1rem;
        }
        
        .btn {
            font-size: 0.85rem;
            padding: 0.5rem 0.75rem;
            white-space: nowrap;
        }
        
        .badge {
            font-size: 0.7rem;
        }
        
        /* Cards */
        .card {
            margin-left: 0;
            margin-right: 0;
        }
        
        .card-body {
            padding: 1rem !important;
        }
        
        /* Caja cards */
        .caja-card .card-body {
            padding: 0.875rem !important;
        }
        
        .caja-card h2 {
            font-size: 1.5rem !important;
        }
        
        /* Movimiento cards */
        .movimiento-card-mobile {
            margin-bottom: 0.75rem;
        }
        
        .movimiento-card-mobile .card-body {
            padding: 0.875rem !important;
        }
        
        /* Row spacing */
        .row {
            margin-left: -0.375rem;
            margin-right: -0.375rem;
        }
        
        .row > * {
            padding-left: 0.375rem;
            padding-right: 0.375rem;
        }
    }
    
    @media (max-width: 575.98px) {
        .caja-card h2 {
            font-size: 1.35rem !important;
        }
        
        .btn {
            font-size: 0.8rem;
            padding: 0.45rem 0.65rem;
        }
    }
</style>

<div class="caja-wrapper container-fluid py-4">
    <?php if (!empty($mensaje)): ?>
        <div class="alert alert-<?php echo htmlspecialchars($mensaje['tipo']); ?> border-0 shadow-sm mb-4">
            <i class="fa-solid fa-circle-check me-2"></i><?php echo htmlspecialchars($mensaje['mensaje']); ?>
        </div>
    <?php endif; ?>

    <div class="row g-2 g-md-3 mb-3 mb-md-4">
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm h-100 text-white bg-gradient caja-card caja-card--ingresos">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge bg-light text-success shadow-sm small">Ingresos hoy</span>
                        <i class="fa-solid fa-cash-register fs-4 text-dark"></i>
                    </div>
                    <h2 class="fw-bold mb-1">$<?php echo number_format($resumen['ingresos'], 0); ?></h2>
                    <p class="mb-0 text-white-75 small">Movimientos registrados: <?php echo $resumen['movimientos']; ?></p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm h-100 text-white bg-gradient caja-card caja-card--egresos">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge bg-light text-danger shadow-sm small">Egresos hoy</span>
                        <i class="fa-solid fa-arrow-trend-down fs-4 text-dark"></i>
                    </div>
                    <h2 class="fw-bold mb-1">$<?php echo number_format($resumen['egresos'], 0); ?></h2>
                    <p class="mb-0 text-white-75 small">Controla compras y salidas menores.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm h-100 text-white bg-gradient caja-card caja-card--balance">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge bg-light text-primary shadow-sm small">Balance actual</span>
                        <i class="fa-solid fa-scale-balanced fs-4 text-dark"></i>
                    </div>
                    <h2 class="fw-bold mb-1">$<?php echo number_format($resumen['balance'], 0); ?></h2>
                    <p class="mb-0 text-white-75 small">Comparativo entre ingresos y egresos del día.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-2 g-md-3 mb-3 mb-md-4">
        <div class="col-12 col-lg-8 order-2 order-lg-1">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3 p-md-4">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <h5 class="card-title mb-0">Flujo de caja diario</h5>
                                <small class="text-muted">Últimos movimientos registrados</small>
                            </div>
                        </div>
                        <div class="d-flex flex-column flex-sm-row gap-2 mt-3">
                            <a class="btn btn-outline-success btn-sm flex-fill d-flex align-items-center justify-content-center gap-1" href="<?php echo base_url('caja/registrarCobro'); ?>">
                                <i class="fa-solid fa-plus"></i>
                                <span class="d-none d-sm-inline">Registrar cobro</span>
                                <span class="d-sm-none">Cobro</span>
                            </a>
                            <a class="btn btn-outline-danger btn-sm flex-fill d-flex align-items-center justify-content-center gap-1" href="<?php echo base_url('caja/registrarEgreso'); ?>">
                                <i class="fa-solid fa-minus"></i>
                                <span class="d-none d-sm-inline">Registrar egreso</span>
                                <span class="d-sm-none">Egreso</span>
                            </a>
                            <a class="btn btn-primary btn-sm flex-fill d-flex align-items-center justify-content-center gap-1" href="<?php echo base_url('caja/reporteFlujo'); ?>">
                                <i class="fa-solid fa-list"></i>
                                <span class="d-none d-sm-inline">Ver Historial</span>
                                <span class="d-sm-none">Historial</span>
                            </a>
                        </div>
                    </div>
                    
                    <!-- Mobile View: Cards -->
                    <div class="d-md-none">
                        <?php if (empty($movimientos)): ?>
                            <div class="alert alert-info d-flex align-items-center" role="alert">
                                <i class="fa-solid fa-info-circle fa-2x me-3"></i>
                                <div>
                                    <h6 class="alert-heading mb-1">No hay movimientos</h6>
                                    <p class="mb-0 small">No hay movimientos registrados todavía.</p>
                                </div>
                            </div>
                        <?php else: ?>
                            <div class="d-flex flex-column gap-3">
                                <?php $totalMovs = count($movimientos); ?>
                                <?php foreach ($movimientos as $i => $movimiento): ?>
                                    <?php $infoMetodo = $metodosInfo[$movimiento['metodo']] ?? ['icono' => 'fa-solid fa-money-bill', 'clase' => 'text-muted']; ?>
                                    <div class="card border movimiento-card-mobile shadow-sm <?php echo $movimiento['tipo'] === 'Ingreso' ? 'border-success' : 'border-danger'; ?>">
                                        <div class="card-body p-3">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <div class="flex-grow-1">
                                                    <div class="d-flex align-items-center gap-2 mb-1">
                                                        <span class="badge <?php echo $movimiento['tipo'] === 'Ingreso' ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger'; ?> small">
                                                            <?php echo htmlspecialchars($movimiento['tipo']); ?>
                                                        </span>
                                                        <span class="fw-bold">#<?php echo $totalMovs - $i; ?></span>
                                                    </div>
                                                    <h6 class="fw-bold mb-1"><?php echo htmlspecialchars($movimiento['concepto']); ?></h6>
                                                    <?php if (!empty($movimiento['cliente'])): ?>
                                                        <p class="text-muted mb-0 small">Cliente: <?php echo htmlspecialchars($movimiento['cliente']); ?></p>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                            
                                            <div class="border-top pt-2 mt-2">
                                                <div class="row g-2 small">
                                                    <div class="col-6">
                                                        <div class="text-muted">Método</div>
                                                        <div class="fw-semibold">
                                                            <i class="<?php echo $infoMetodo['icono']; ?> me-1 <?php echo $infoMetodo['clase']; ?>"></i>
                                                            <?php echo htmlspecialchars($movimiento['metodo']); ?>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="text-muted">Hora</div>
                                                        <div class="fw-semibold"><?php echo htmlspecialchars($movimiento['hora']); ?></div>
                                                    </div>
                                                    <div class="col-12 border-top pt-2">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <span class="text-muted">Monto</span>
                                                            <span class="fw-bold <?php echo $movimiento['tipo'] === 'Ingreso' ? 'text-success' : 'text-danger'; ?> fs-5">$<?php echo number_format($movimiento['monto'], 0); ?></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <a class="btn btn-sm btn-outline-danger w-100 mt-3" href="<?php echo base_url('caja/eliminarMovimiento/' . $movimiento['id']); ?>" onclick="return confirm('¿Eliminar este movimiento?');">
                                                <i class="fa-solid fa-trash"></i> Eliminar
                                            </a>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Desktop View: Table -->
                    <div class="table-responsive d-none d-md-block">
                        <table class="table align-middle table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Número</th>
                                    <th>Concepto</th>
                                    <th>Tipo</th>
                                    <th>Método</th>
                                    <th class="text-end">Monto</th>
                                    <th class="text-end">Hora</th>
                                    <th class="text-end">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (empty($movimientos)): ?>
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-5">No hay movimientos registrados todavía.</td>
                                    </tr>
                                <?php else: ?>
                                    <?php $totalMovs = count($movimientos); ?>
                                    <?php foreach ($movimientos as $i => $movimiento): ?>
                                        <?php $infoMetodo = $metodosInfo[$movimiento['metodo']] ?? ['icono' => 'fa-solid fa-money-bill', 'clase' => 'text-muted']; ?>
                                        <tr class="table-<?php echo $movimiento['tipo'] === 'Ingreso' ? 'success' : 'danger'; ?>-subtle">
                                            <td class="fw-semibold"><?php echo $totalMovs - $i; ?></td>
                                            <td>
                                                <div class="fw-semibold"><?php echo htmlspecialchars($movimiento['concepto']); ?></div>
                                                <?php if (!empty($movimiento['cliente'])): ?>
                                                    <small class="text-muted">Cliente: <?php echo htmlspecialchars($movimiento['cliente']); ?></small>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <span class="badge <?php echo $movimiento['tipo'] === 'Ingreso' ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger'; ?>">
                                                    <?php echo htmlspecialchars($movimiento['tipo']); ?>
                                                </span>
                                            </td>
                                            <td class="text-nowrap">
                                                <i class="<?php echo $infoMetodo['icono']; ?> me-1 <?php echo $infoMetodo['clase']; ?>"></i>
                                                <?php echo htmlspecialchars($movimiento['metodo']); ?>
                                            </td>
                                            <td class="text-end fw-semibold">$<?php echo number_format($movimiento['monto'], 0); ?></td>
                                            <td class="text-end text-muted"><?php echo htmlspecialchars($movimiento['hora']); ?></td>
                                            <td class="text-end">
                                                <a class="btn btn-outline-danger btn-sm" href="<?php echo base_url('caja/eliminarMovimiento/' . $movimiento['id']); ?>" onclick="return confirm('¿Eliminar este movimiento?');">
                                                    <i class="fa-solid fa-trash"></i>
                                                    <span class="d-none d-md-inline">Eliminar</span>
                                                </a>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 order-1 order-lg-2">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3 p-md-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="card-title mb-0">Métodos de pago</h5>
                        <span class="badge bg-primary-subtle text-primary">Hoy</span>
                    </div>
                    
                    <!-- Desktop: Vertical Layout -->
                    <div class="d-none d-lg-flex flex-column gap-2 mb-3">
                        <?php foreach ($metodosResumen as $metodo => $total): ?>
                            <?php $info = $metodosInfo[$metodo] ?? ['icono' => 'fa-solid fa-money-bill', 'clase' => 'text-muted']; ?>
                            <div class="d-flex align-items-center justify-content-between p-3 rounded border bg-light-subtle">
                                <div>
                                    <span class="fw-semibold d-block"><?php echo htmlspecialchars($metodo); ?></span>
                                    <small class="text-muted" style="font-size: 0.75rem;">Flujo acumulado</small>
                                </div>
                                <div class="text-end">
                                    <div class="fw-bold fs-6">$<?php echo number_format($total, 0); ?></div>
                                    <i class="<?php echo $info['icono']; ?> <?php echo $info['clase']; ?>"></i>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    
                    <!-- Mobile: Grid 2 Columns -->
                    <div class="row g-2 d-lg-none mb-3">
                        <?php foreach ($metodosResumen as $metodo => $total): ?>
                            <?php $info = $metodosInfo[$metodo] ?? ['icono' => 'fa-solid fa-money-bill', 'clase' => 'text-muted']; ?>
                            <div class="col-6">
                                <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);">
                                    <div class="card-body p-2 text-center">
                                        <i class="<?php echo $info['icono']; ?> <?php echo $info['clase']; ?> fs-1 mb-2 d-block"></i>
                                        <div class="fw-bold text-dark mb-1" style="font-size: 1.1rem;">$<?php echo number_format($total, 0); ?></div>
                                        <div class="small text-muted fw-semibold"><?php echo htmlspecialchars($metodo); ?></div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    
                    <div class="text-center">
                        <a class="btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2" href="<?php echo base_url('caja/cierreDiario'); ?>">
                            <i class="fa-solid fa-receipt"></i>
                            <span>Ir a caja</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
User / IP	: 216.73.217.33
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