Tul xxx Tul

Viewing: reporte.php

<!-- Mobile-optimized Reporte Flujo CSS -->
<style>
    body {
        overflow-x: hidden;
    }
    
    .caja-reporte {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .card,
    .card-body,
    .row,
    .col {
        max-width: 100%;
    }
    
    .movimiento-reporte-card {
        border-radius: 12px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.08);
        max-width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .movimiento-reporte-card:active {
        transform: scale(0.98);
    }
    
    @media (max-width: 767.98px) {
        html, body {
            max-width: 100vw;
            overflow-x: hidden;
        }
        
        .container-fluid {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
        
        .caja-reporte {
            padding: 1rem 0 !important;
        }
        
        .card-body {
            padding: 1rem !important;
        }
        
        .btn {
            font-size: 0.85rem;
        }
        
        .form-label {
            font-size: 0.85rem;
            margin-bottom: 0.3rem;
        }
        
        .form-control,
        .form-select {
            font-size: 0.9rem;
        }
        
        .badge {
            font-size: 0.7rem;
        }
        
        .row {
            margin-left: -0.375rem;
            margin-right: -0.375rem;
        }
        
        .row > * {
            padding-left: 0.375rem;
            padding-right: 0.375rem;
        }
    }
    
    @media (max-width: 575.98px) {
        .btn {
            font-size: 0.8rem;
        }
    }
</style>

<div class="caja-reporte container-fluid py-4">
    <div class="card border-0 shadow-sm mb-3 mb-md-4">
        <div class="card-body p-3 p-md-4">
            <div class="row g-2 g-md-3 align-items-end">
                <div class="col-12">
                    <label class="form-label small">Filtros</label>
                    <form action="" method="GET" class="row g-2">
                        <div class="col-6 col-md-3">
                            <input type="date" class="form-control" name="desde" value="<?php echo htmlspecialchars($desde ?? ''); ?>" placeholder="Desde">
                        </div>
                        <div class="col-6 col-md-3">
                            <input type="date" class="form-control" name="hasta" value="<?php echo htmlspecialchars($hasta ?? ''); ?>" placeholder="Hasta">
                        </div>
                        <div class="col-12 col-md-3">
                            <select class="form-select" name="tipo">
                                <option value="todos" <?php echo ($tipo ?? 'todos') === 'todos' ? 'selected' : ''; ?>>Todos</option>
                                <option value="ingreso" <?php echo ($tipo ?? '') === 'ingreso' ? 'selected' : ''; ?>>Ingresos</option>
                                <option value="egreso" <?php echo ($tipo ?? '') === 'egreso' ? 'selected' : ''; ?>>Egresos</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-3 d-flex gap-2">
                            <button type="submit" class="btn btn-primary btn-sm flex-fill"><i class="fa-solid fa-filter me-1"></i>Filtrar</button>
                            <a class="btn btn-outline-secondary btn-sm" href="<?php echo base_url('caja/reporteFlujo'); ?>"><i class="fa-solid fa-rotate-left"></i></a>
                        </div>
                    </form>
                </div>
                <div class="col-12">
                    <div class="row g-2">
                        <div class="col-4">
                            <div class="p-2 p-md-3 border rounded bg-success-subtle text-success">
                                <small class="text-uppercase text-muted d-block" style="font-size: 0.7rem;">Ingresos</small>
                                <div class="fw-bold" style="font-size: 1rem;">$<?php echo number_format($totales['ingresos'], 0); ?></div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="p-2 p-md-3 border rounded bg-danger-subtle text-danger">
                                <small class="text-uppercase text-muted d-block" style="font-size: 0.7rem;">Egresos</small>
                                <div class="fw-bold" style="font-size: 1rem;">$<?php echo number_format($totales['egresos'], 0); ?></div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="p-2 p-md-3 border rounded bg-primary-subtle text-primary">
                                <small class="text-uppercase text-muted d-block" style="font-size: 0.7rem;">Balance</small>
                                <div class="fw-bold" style="font-size: 1rem;">$<?php echo number_format($totales['balance'], 0); ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-3 p-md-4">
            <div class="d-flex justify-content-between align-items-start align-items-sm-center mb-3">
                <div>
                    <h5 class="card-title mb-0">Listado de movimientos</h5>
                    <small class="text-muted"><?php echo count($movimientos); ?> registros encontrados</small>
                </div>
                <a class="btn btn-outline-secondary btn-sm" href="<?php echo base_url('caja'); ?>"><i class="fa-solid fa-arrow-left me-1 d-none d-sm-inline"></i><i class="fa-solid fa-arrow-left d-sm-none"></i><span class="d-none d-sm-inline">Volver</span></a>
            </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 en el rango seleccionado.</p>
                        </div>
                    </div>
                <?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']; ?>
                        <div class="card border movimiento-reporte-card 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">Fecha</div>
                                            <div class="fw-semibold"><?php echo date('d/m/Y', strtotime($movimiento['fecha'])); ?></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>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
            
            <!-- Desktop View: Table -->
            <div class="table-responsive d-none d-md-block">
                <table class="table table-hover align-middle">
                    <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">Fecha</th>
                            <th class="text-end">Hora</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($movimientos)): ?>
                            <tr>
                                <td colspan="7" class="text-center text-muted py-5">No hay movimientos en el rango seleccionado.</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/Responsable: <?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 date('d/m/Y', strtotime($movimiento['fecha'])); ?></td>
                                    <td class="text-end text-muted"><?php echo htmlspecialchars($movimiento['hora']); ?></td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                    <tfoot>
                        <tr class="table-light">
                            <th colspan="4" class="text-end">Totales</th>
                            <th class="text-end">$<?php echo number_format($totales['balance'], 0); ?></th>
                            <th colspan="2"></th>
                        </tr>
                    </tfoot>
                </table>
            </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