Tul xxx Tul

Viewing: tareas.php

<!-- Mobile-optimized Tareas CSS -->
<style>
    body {
        overflow-x: hidden;
    }
    
    .empleados-tareas {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .card,
    .card-body,
    .row,
    .col {
        max-width: 100%;
    }
    
    .tarea-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;
    }
    
    .tarea-card-mobile: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;
        }
        
        .empleados-tareas {
            padding: 1rem 0 !important;
        }
        
        .empleados-tareas h1 {
            font-size: 1.35rem;
        }
        
        .empleados-tareas h2 {
            font-size: 1.1rem;
        }
        
        .btn {
            font-size: 0.85rem;
            padding: 0.5rem 0.75rem;
            white-space: nowrap;
        }
        
        .badge {
            font-size: 0.7rem;
        }
        
        .card-body {
            padding: 1rem !important;
        }
        
        .form-label {
            font-size: 0.85rem;
            margin-bottom: 0.3rem;
        }
        
        .form-control,
        .form-select,
        textarea {
            font-size: 0.9rem;
        }
        
        .alert {
            font-size: 0.85rem;
            padding: 0.75rem;
        }
        
        .row {
            margin-left: -0.375rem;
            margin-right: -0.375rem;
        }
        
        .row > * {
            padding-left: 0.375rem;
            padding-right: 0.375rem;
        }
    }
    
    @media (max-width: 575.98px) {
        .empleados-tareas h1 {
            font-size: 1.25rem;
        }
        
        .btn {
            font-size: 0.8rem;
            padding: 0.45rem 0.65rem;
        }
    }
</style>

<div class="empleados-tareas 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">Tareas del día</h1>
            <p class="text-muted mb-0 small">Asigna actividades y realiza seguimiento del avance por colaborador.</p>
        </div>
        <div class="d-flex flex-column flex-sm-row gap-2 w-100 w-lg-auto">
            <a class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2" href="<?php echo base_url('empleados'); ?>">
                <i class="fa-solid fa-list"></i>
                <span class="d-none d-sm-inline">Volver al listado</span>
                <span class="d-sm-none">Volver</span>
            </a>
            <a class="btn btn-outline-primary 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>
        </div>
    </div>

    <div class="row g-2 g-md-3 mb-3 mb-md-4">
        <div class="col-12 col-xl-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3 p-md-4">
                    <h2 class="h5 fw-semibold mb-3">Asignar nueva tarea</h2>
                    <form action="<?php echo base_url('empleados/guardarTarea'); ?>" method="POST" class="row g-2 g-md-3">
                        <div class="col-12">
                            <label for="empleado_id" class="form-label">Empleado</label>
                            <select class="form-select" id="empleado_id" name="empleado_id" required>
                                <option value="" hidden>Selecciona un colaborador</option>
                                <?php foreach ($empleados as $empleado): ?>
                                    <option value="<?php echo $empleado['id']; ?>" <?php echo isset($_GET['empleado']) && (int) $_GET['empleado'] === (int) $empleado['id'] ? 'selected' : ''; ?>>
                                        <?php echo htmlspecialchars($empleado['nombre'], ENT_QUOTES, 'UTF-8'); ?> · <?php echo htmlspecialchars($empleado['rol'], ENT_QUOTES, 'UTF-8'); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="tarea" class="form-label">Descripción</label>
                            <textarea class="form-control" id="tarea" name="tarea" rows="3" placeholder="Ej. Supervisar zona de piscinas" required></textarea>
                        </div>
                        <div class="col-12 col-md-6">
                            <label for="fecha" class="form-label">Fecha</label>
                            <input type="date" class="form-control" id="fecha" name="fecha" value="<?php echo date('Y-m-d'); ?>" required>
                        </div>
                        <div class="col-12 col-md-6">
                            <label for="estado" class="form-label">Estado</label>
                            <select class="form-select" id="estado" name="estado" required>
                                <option value="Pendiente">Pendiente</option>
                                <option value="Completada">Completada</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-success w-100"><i class="fa-solid fa-plus me-1"></i>Guardar tarea</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-8">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-3 p-md-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2 mb-3">
                        <div>
                            <h2 class="h5 fw-semibold mb-0">Tareas asignadas</h2>
                            <small class="text-muted"><?php echo count($tareas); ?> tarea(s) registradas</small>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-success-subtle text-success small">🟢 Completada</span>
                            <span class="badge bg-warning-subtle text-warning small">🟠 Pendiente</span>
                        </div>
                    </div>
                    <?php if (empty($tareas)): ?>
                        <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">Sin tareas</h6>
                                <p class="mb-0 small">Aún no se han asignado tareas.</p>
                            </div>
                        </div>
                    <?php else: ?>
                        <!-- Mobile View: Cards -->
                        <div class="d-md-none">
                            <?php foreach ($tareas as $tarea): ?>
                                <?php $estadoBadge = $tarea['estado'] === 'Completada' ? 'success' : 'warning'; ?>
                                <div class="card border tarea-card-mobile shadow-sm border-<?php echo $estadoBadge; ?>">
                                    <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($tarea['empleado'], ENT_QUOTES, 'UTF-8'); ?></h6>
                                                <div class="d-flex align-items-center gap-2">
                                                    <span class="badge bg-<?php echo $estadoBadge; ?>-subtle text-<?php echo $estadoBadge; ?> small">
                                                        <?php echo htmlspecialchars($tarea['estado'], ENT_QUOTES, 'UTF-8'); ?>
                                                    </span>
                                                    <small class="text-muted"><?php echo date('d/m/Y', strtotime($tarea['fecha'])); ?></small>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="border-top pt-2 mt-2">
                                            <div class="text-muted small mb-1">Descripción</div>
                                            <p class="mb-0 fw-semibold"><?php echo htmlspecialchars($tarea['tarea'], ENT_QUOTES, 'UTF-8'); ?></p>
                                        </div>
                                        
                                        <div class="d-flex gap-2 mt-3">
                                            <form action="<?php echo base_url('empleados/actualizarEstadoTarea/' . $tarea['id']); ?>" method="POST" class="flex-fill">
                                                <input type="hidden" name="estado" value="<?php echo $tarea['estado'] === 'Completada' ? 'Pendiente' : 'Completada'; ?>">
                                                <button type="submit" class="btn btn-sm btn-outline-<?php echo $tarea['estado'] === 'Completada' ? 'warning' : 'success'; ?> w-100 d-flex align-items-center justify-content-center gap-1">
                                                    <i class="fa-solid fa-rotate"></i>
                                                    <span><?php echo $tarea['estado'] === 'Completada' ? 'Marcar pendiente' : 'Completar'; ?></span>
                                                </button>
                                            </form>
                                            <a class="btn btn-sm btn-outline-danger" href="<?php echo base_url('empleados/eliminarTarea/' . $tarea['id']); ?>" onclick="return confirm('¿Eliminar esta tarea?');">
                                                <i class="fa-solid fa-trash"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        
                        <!-- Desktop View: Table -->
                        <div class="table-responsive d-none d-md-block">
                            <table class="table align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Empleado</th>
                                        <th>Tarea</th>
                                        <th>Fecha</th>
                                        <th>Estado</th>
                                        <th class="text-end">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($tareas as $tarea): ?>
                                        <?php $estadoBadge = $tarea['estado'] === 'Completada' ? 'success' : 'warning'; ?>
                                        <tr class="empleados-tarea-row empleados-tarea-row--<?php echo strtolower($estadoBadge); ?>">
                                            <td>
                                                <div class="fw-semibold"><?php echo htmlspecialchars($tarea['empleado'], ENT_QUOTES, 'UTF-8'); ?></div>
                                            </td>
                                            <td><?php echo htmlspecialchars($tarea['tarea'], ENT_QUOTES, 'UTF-8'); ?></td>
                                            <td><?php echo date('d/m/Y', strtotime($tarea['fecha'])); ?></td>
                                            <td>
                                                <span class="badge bg-<?php echo $estadoBadge; ?>-subtle text-<?php echo $estadoBadge; ?>">
                                                    <?php echo htmlspecialchars($tarea['estado'], ENT_QUOTES, 'UTF-8'); ?>
                                                </span>
                                            </td>
                                            <td class="text-end">
                                                <form action="<?php echo base_url('empleados/actualizarEstadoTarea/' . $tarea['id']); ?>" method="POST" class="d-inline">
                                                    <input type="hidden" name="estado" value="<?php echo $tarea['estado'] === 'Completada' ? 'Pendiente' : 'Completada'; ?>">
                                                    <button type="submit" class="btn btn-sm btn-outline-<?php echo $tarea['estado'] === 'Completada' ? 'warning' : 'success'; ?>">
                                                        <i class="fa-solid fa-rotate"></i>
                                                    </button>
                                                </form>
                                                <a class="btn btn-sm btn-outline-danger" href="<?php echo base_url('empleados/eliminarTarea/' . $tarea['id']); ?>" onclick="return confirm('¿Eliminar esta tarea?');">
                                                    <i class="fa-solid fa-trash"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    <?php endif; ?>
                </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