Tul xxx Tul

Viewing: index.php

<!-- Mobile-optimized Empleados CSS -->
<style>
    body {
        overflow-x: hidden;
    }
    
    .empleados-wrapper {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .card,
    .card-body,
    .row,
    .col {
        max-width: 100%;
    }
    
    .empleado-card-mobile {
        border-radius: 12px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,0.08);
        max-width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .empleado-card-mobile:active {
        transform: scale(0.98);
    }
    
    .empleados-summary-card {
        transition: all 0.3s ease;
    }
    
    .empleados-summary-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    }
    
    @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;
        }
        
        .empleados-wrapper {
            padding: 1rem 0 !important;
        }
        
        .empleados-wrapper h1 {
            font-size: 1.35rem;
        }
        
        .empleados-wrapper h2 {
            font-size: 1.1rem;
        }
        
        .empleados-wrapper h3 {
            font-size: 1.5rem;
        }
        
        .btn {
            font-size: 0.85rem;
            padding: 0.5rem 0.75rem;
            white-space: nowrap;
        }
        
        .badge {
            font-size: 0.7rem;
        }
        
        .card-body {
            padding: 1rem !important;
        }
        
        .empleados-summary-card .card-body {
            padding: 0.75rem !important;
        }
        
        .empleados-summary-card h3 {
            font-size: 1.5rem !important;
        }
        
        .row {
            margin-left: -0.375rem;
            margin-right: -0.375rem;
        }
        
        .row > * {
            padding-left: 0.375rem;
            padding-right: 0.375rem;
        }
    }
    
    @media (max-width: 575.98px) {
        .empleados-wrapper h1 {
            font-size: 1.25rem;
        }
        
        .empleados-summary-card h3 {
            font-size: 1.35rem !important;
        }
        
        .btn {
            font-size: 0.8rem;
            padding: 0.45rem 0.65rem;
        }
    }
</style>

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

    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3 mb-3 mb-md-4">
        <div class="flex-grow-1">
            <h1 class="fw-bold mb-1">Empleados</h1>
            <p class="text-muted mb-0 small">Gestiona tu equipo de trabajo</p>
        </div>
        <div class="d-flex flex-column flex-sm-row flex-wrap gap-2 w-100 w-lg-auto">
            <a class="btn btn-primary d-flex align-items-center justify-content-center gap-2" href="<?php echo base_url('empleados/crear'); ?>">
                <i class="fa-solid fa-user-plus"></i>
                <span class="d-none d-sm-inline">Nuevo empleado</span>
                <span class="d-sm-none">Nuevo</span>
            </a>
            <a class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2" href="<?php echo base_url('empleados/asistencia'); ?>">
                <i class="fa-solid fa-clock"></i>
                <span class="d-none d-sm-inline">Asistencia</span>
                <span class="d-sm-none">Asistencia</span>
            </a>
            <a class="btn btn-outline-success d-flex align-items-center justify-content-center gap-2" href="<?php echo base_url('empleados/tareas'); ?>">
                <i class="fa-solid fa-clipboard-list"></i>
                <span class="d-none d-sm-inline">Tareas</span>
                <span class="d-sm-none">Tareas</span>
            </a>
            <a class="btn btn-outline-info d-flex align-items-center justify-content-center gap-2" href="<?php echo base_url('empleados/roles'); ?>">
                <i class="fa-solid fa-gear"></i>
                <span class="d-none d-lg-inline">Roles</span>
                <span class="d-lg-none">Roles</span>
            </a>
        </div>
    </div>

    <div class="row g-2 g-md-3 mb-3 mb-md-4">
        <div class="col-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100 empleados-summary-card">
                <div class="card-body">
                    <span class="badge bg-primary-subtle text-primary mb-2">Equipo total</span>
                    <h3 class="fw-bold mb-1"><?php echo $resumen['total']; ?></h3>
                    <p class="text-muted mb-0">Empleados registrados</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100 empleados-summary-card">
                <div class="card-body">
                    <span class="badge bg-success-subtle text-success mb-2">Activos</span>
                    <h3 class="fw-bold mb-1"><?php echo $resumen['activos']; ?></h3>
                    <p class="text-muted mb-0">Disponibles para turnos</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100 empleados-summary-card">
                <div class="card-body">
                    <span class="badge bg-warning-subtle text-warning mb-2">En turno</span>
                    <h3 class="fw-bold mb-1"><?php echo $resumen['en_turno']; ?></h3>
                    <p class="text-muted mb-0">Con entrada marcada</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100 empleados-summary-card">
                <div class="card-body">
                    <span class="badge bg-info-subtle text-info mb-2">Tareas pendientes</span>
                    <h3 class="fw-bold mb-1"><?php echo $resumen['tareas_pendientes']; ?></h3>
                    <p class="text-muted mb-0">Asignadas sin completar</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2 px-3 px-md-4 py-3 border-bottom">
                <div>
                    <h2 class="h5 fw-semibold mb-0">Listado general</h2>
                    <small class="text-muted"><?php echo count($empleados); ?> empleado(s) registrados</small>
                </div>
                <form class="empleados-search d-flex gap-2 w-100 w-md-auto" method="get" role="search">
                    <input type="search" class="form-control" name="buscar" placeholder="Buscar..." value="<?php echo htmlspecialchars($_GET['buscar'] ?? '', ENT_QUOTES, 'UTF-8'); ?>" />
                    <button type="submit" class="btn btn-outline-secondary"><i class="fa-solid fa-magnifying-glass"></i></button>
                </form>
            </div>

            <!-- Mobile View: Cards -->
            <div class="d-md-none p-3">
                <?php
                $busqueda = strtolower(trim($_GET['buscar'] ?? ''));
                $filtrados = array_filter($empleados, function ($empleado) use ($busqueda) {
                    if ($busqueda === '') {
                        return true;
                    }
                    $texto = strtolower($empleado['nombre'] . ' ' . $empleado['rol']);
                    return str_contains($texto, $busqueda);
                });
                ?>
                <?php if (empty($filtrados)): ?>
                    <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 se encontraron empleados</h6>
                            <p class="mb-0 small">No se encontraron empleados con los criterios indicados.</p>
                        </div>
                    </div>
                <?php else: ?>
                    <?php foreach ($filtrados as $empleado): ?>
                        <div class="card border empleado-card-mobile shadow-sm">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div class="flex-grow-1">
                                        <h6 class="fw-bold mb-1"><?php echo htmlspecialchars($empleado['nombre'], ENT_QUOTES, 'UTF-8'); ?></h6>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <span class="badge bg-light text-muted border small">
                                                <i class="fa-solid fa-id-badge me-1"></i><?php echo htmlspecialchars($empleado['rol'], ENT_QUOTES, 'UTF-8'); ?>
                                            </span>
                                            <?php $estado = $empleado['estado'] === 'Activo' ? 'success' : 'secondary'; ?>
                                            <span class="badge bg-<?php echo $estado; ?>-subtle text-<?php echo $estado; ?> small">
                                                <?php echo htmlspecialchars($empleado['estado'], ENT_QUOTES, 'UTF-8'); ?>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="border-top pt-2 mt-2">
                                    <div class="row g-2 small">
                                        <div class="col-6">
                                            <div class="text-muted">Teléfono</div>
                                            <div class="fw-semibold"><?php echo htmlspecialchars($empleado['telefono'], ENT_QUOTES, 'UTF-8'); ?></div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted">Correo</div>
                                            <div class="fw-semibold text-truncate"><?php echo htmlspecialchars($empleado['correo'], ENT_QUOTES, 'UTF-8'); ?></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="d-flex gap-1 mt-3">
                                    <a class="btn btn-sm btn-outline-primary flex-fill" href="<?php echo base_url('empleados/editar/' . $empleado['id']); ?>" title="Editar">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                    <a class="btn btn-sm btn-outline-secondary flex-fill" href="<?php echo base_url('empleados/asistencia#empleado-' . $empleado['id']); ?>" title="Asistencia">
                                        <i class="fa-solid fa-clock"></i>
                                    </a>
                                    <a class="btn btn-sm btn-outline-success flex-fill" href="<?php echo base_url('empleados/tareas?empleado=' . $empleado['id']); ?>" title="Tareas">
                                        <i class="fa-solid fa-clipboard-check"></i>
                                    </a>
                                    <a class="btn btn-sm btn-outline-danger flex-fill" href="<?php echo base_url('empleados/eliminar/' . $empleado['id']); ?>" onclick="return confirm('¿Eliminar a <?php echo addslashes($empleado['nombre']); ?>?');" title="Eliminar">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
            
            <!-- Desktop View: Table -->
            <div class="table-responsive d-none d-md-block">
                <table class="table align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Nombre</th>
                            <th>Rol</th>
                            <th>Contacto</th>
                            <th>Estado</th>
                            <th class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $busqueda = strtolower(trim($_GET['buscar'] ?? ''));
                        $filtrados = array_filter($empleados, function ($empleado) use ($busqueda) {
                            if ($busqueda === '') {
                                return true;
                            }
                            $texto = strtolower($empleado['nombre'] . ' ' . $empleado['rol']);
                            return str_contains($texto, $busqueda);
                        });
                        ?>
                        <?php if (empty($filtrados)): ?>
                            <tr>
                                <td colspan="5" class="text-center text-muted py-5">No se encontraron empleados con los criterios indicados.</td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($filtrados as $empleado): ?>
                                <tr>
                                    <td>
                                        <div class="fw-semibold"><?php echo htmlspecialchars($empleado['nombre'], ENT_QUOTES, 'UTF-8'); ?></div>
                                        <small class="text-muted">Tel: <?php echo htmlspecialchars($empleado['telefono'], ENT_QUOTES, 'UTF-8'); ?></small>
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-muted border">
                                            <i class="fa-solid fa-id-badge me-1"></i><?php echo htmlspecialchars($empleado['rol'], ENT_QUOTES, 'UTF-8'); ?>
                                        </span>
                                    </td>
                                    <td>
                                        <div class="text-muted small">Correo:<br><?php echo htmlspecialchars($empleado['correo'], ENT_QUOTES, 'UTF-8'); ?></div>
                                    </td>
                                    <td>
                                        <?php $estado = $empleado['estado'] === 'Activo' ? 'success' : 'secondary'; ?>
                                        <span class="badge bg-<?php echo $estado; ?>-subtle text-<?php echo $estado; ?> empleados-estado empleados-estado--<?php echo strtolower($empleado['estado']); ?>">
                                            <?php echo htmlspecialchars($empleado['estado'], ENT_QUOTES, 'UTF-8'); ?>
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <div class="d-inline-flex gap-1">
                                            <a class="btn btn-sm btn-outline-primary" href="<?php echo base_url('empleados/editar/' . $empleado['id']); ?>" title="Editar">
                                                <i class="fa-solid fa-pen"></i>
                                            </a>
                                            <a class="btn btn-sm btn-outline-danger" href="<?php echo base_url('empleados/eliminar/' . $empleado['id']); ?>" onclick="return confirm('¿Eliminar a <?php echo addslashes($empleado['nombre']); ?>?');" title="Eliminar">
                                                <i class="fa-solid fa-trash"></i>
                                            </a>
                                            <a class="btn btn-sm btn-outline-secondary" href="<?php echo base_url('empleados/asistencia#empleado-' . $empleado['id']); ?>" title="Registrar asistencia">
                                                <i class="fa-solid fa-clock"></i>
                                            </a>
                                            <a class="btn btn-sm btn-outline-success" href="<?php echo base_url('empleados/tareas?empleado=' . $empleado['id']); ?>" title="Asignar tarea">
                                                <i class="fa-solid fa-clipboard-check"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </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