feat(turnero): UX audit improvements — lugar & recepcion

lugar.php:
- Bell button enlarged to 44×44px touch target
- Fecha nac. / Celular fields hidden from bacteriologist ficha
- Cancel button added to station-selector overlay; shows only when changing
- ESC key closes overlay when a station is already selected
- visibilitychange pauses polling when tab hidden, resumes on return

recepcion.php:
- Consent action buttons: padding 2px 8px → 5px 12px, font-size .72→.82rem
- Exam list: per-category select-all checkbox with indeterminate state support
- guardarSolicitud: auto-calls pasarALugar() when no consents required
- abrirModalPaciente: nome field auto-focused for both new and edit cases

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-04 13:46:32 -05:00
co-authored by Claude Sonnet 4.6
parent 69a6859b51
commit 53b483d51a
2 changed files with 69 additions and 16 deletions
+28 -4
View File
@@ -148,9 +148,9 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
.card-bell-btn {
flex-shrink: 0; background: #2563eb; border: none; color: #fff;
border-radius: 8px; width: 34px; height: 34px;
border-radius: 10px; width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
font-size: .82rem; cursor: pointer; transition: background .12s;
font-size: .95rem; cursor: pointer; transition: background .12s;
}
.card-bell-btn:hover { background: #1d4ed8; }
@@ -411,6 +411,11 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
<button class="btn btn-primary w-100" onclick="confirmarLugar()">
<i class="fas fa-check me-1"></i>Confirmar
</button>
<button id="btn-cancelar-selector" class="btn btn-outline-secondary w-100 mt-2"
onclick="document.getElementById('overlay-selector').style.display='none'"
style="display:none">
<i class="fas fa-times me-1"></i>Cancelar
</button>
</div>
</div>
@@ -510,8 +515,8 @@ require_once __DIR__ . '/../../../shared/components/sidebar.php';
<div id="bloque-pac-info">
<div class="pac-dato"><span class="lbl">Nombre</span><span class="val" id="pac-nombre">—</span></div>
<div class="pac-dato"><span class="lbl">Documento</span><span class="val" id="pac-doc">—</span></div>
<div class="pac-dato"><span class="lbl">Fecha nac.</span><span class="val" id="pac-fec">—</span></div>
<div class="pac-dato"><span class="lbl">Celular</span><span class="val" id="pac-cel">—</span></div>
<div class="pac-dato d-none"><span class="lbl">Fecha nac.</span><span class="val" id="pac-fec">—</span></div>
<div class="pac-dato d-none"><span class="lbl">Celular</span><span class="val" id="pac-cel">—</span></div>
</div>
<div id="pac-embarazada" class="d-none mt-2">
<span class="badge text-bg-danger"><i class="fas fa-baby me-1"></i>Paciente embarazada</span>
@@ -707,6 +712,24 @@ function iniciarPuesto() {
recuperarTurnoActivo();
cargarCola();
pollingColaId = setInterval(cargarCola, 7000);
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
clearInterval(pollingColaId);
clearInterval(pollingConsentId);
pollingColaId = pollingConsentId = null;
} else if (lugarId) {
cargarCola();
pollingColaId = setInterval(cargarCola, 7000);
}
});
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && lugarId &&
document.getElementById('overlay-selector').style.display !== 'none') {
document.getElementById('overlay-selector').style.display = 'none';
}
});
}
async function recuperarTurnoActivo() {
@@ -735,6 +758,7 @@ function cambiarLugar() {
clearInterval(pollingConsentId);
turnoActivo = null;
resetFicha();
document.getElementById('btn-cancelar-selector').style.display = '';
document.getElementById('overlay-selector').style.display = 'flex';
}
+41 -12
View File
@@ -166,6 +166,8 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
/* ── Checkboxes de exámenes ── */
.exam-group-title { font-size: .75rem; color: #94a3b8;
text-transform: uppercase; letter-spacing: .08em; margin: .6rem 0 .3rem; }
.exam-cat-label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.exam-cat-label input[type=checkbox] { cursor: pointer; }
.exam-check-item { display: flex; align-items: center; gap: .5rem;
padding: .3rem .4rem; border-radius: 6px; cursor: pointer;
transition: background .1s; font-size: .88rem; }
@@ -188,7 +190,7 @@ $adminNombre = $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['
.consent-item .c-badge { font-size: .7rem; font-weight: 700; padding: 1px 8px;
border-radius: 99px; border: 1px solid currentColor; opacity: .85; }
.consent-acciones { display: flex; gap: .3rem; flex-shrink: 0; }
.consent-acciones .btn { font-size: .72rem; padding: 2px 8px; border-radius: 7px; }
.consent-acciones .btn { font-size: .82rem; padding: 5px 12px; border-radius: 7px; }
.consent-prof-row { display:flex; align-items:center; gap:.4rem; font-size:.75rem;
margin-top:.25rem; padding-top:.25rem; border-top:1px solid rgba(0,0,0,.07); }
.consent-prof-row .badge { font-size:.65rem; }
@@ -576,12 +578,21 @@ document.addEventListener('DOMContentLoaded', function() {
</div>
<div id="lista-examenes">
<?php foreach ($examenesAgrupados as $cat => $items): ?>
<div class="exam-group-title"><?= htmlspecialchars($cat) ?></div>
<div class="exam-group-title">
<label class="exam-cat-label">
<input type="checkbox" class="exam-cat-chk"
data-cat="<?= htmlspecialchars($cat) ?>"
onchange="toggleCategoria(this)">
<?= htmlspecialchars($cat) ?>
</label>
</div>
<?php foreach ($items as $ex): ?>
<label class="exam-check-item">
<input type="checkbox" class="exam-chk"
value="<?= (int)$ex['id'] ?>"
data-nombre="<?= htmlspecialchars($ex['nombre']) ?>">
data-nombre="<?= htmlspecialchars($ex['nombre']) ?>"
data-cat="<?= htmlspecialchars($cat) ?>"
onchange="actualizarCatChk('<?= htmlspecialchars($cat, ENT_QUOTES) ?>')">
<span><strong><?= htmlspecialchars($ex['codigo']) ?></strong>
— <?= htmlspecialchars($ex['nombre']) ?></span>
</label>
@@ -1452,17 +1463,17 @@ async function guardarSolicitud() {
pollingConsentimientosId = null;
}
// No mostrar consentimientos post-guardado aquí (ya vienen de create_solicitud)
// Solo renderizar si vienen nuevos
if (consentimientos && consentimientos.length > 0) {
renderConsentimientos(consentimientos);
document.getElementById('sec-consentimientos').style.display = '';
document.getElementById('btn-enviar-consent').classList.remove('d-none');
document.getElementById('btn-pasar-lugar').classList.remove('d-none');
document.getElementById('btn-guardar').classList.add('d-none');
} else {
// Sin consentimientos → pasar directamente al lugar
await pasarALugar();
}
document.getElementById('btn-pasar-lugar').classList.remove('d-none');
document.getElementById('btn-guardar').classList.add('d-none');
} catch (err) {
mostrarError(err.message);
btn.disabled = false;
@@ -1701,7 +1712,7 @@ async function pasarALugar() {
if (!turnoActivo || !solicitudActiva) return;
const btn = document.getElementById('btn-pasar-lugar');
btn.disabled = true;
if (btn) btn.disabled = true;
try {
const res = await fetch(API + 'cambiar_estado.php', {
@@ -1714,7 +1725,7 @@ async function pasarALugar() {
}),
});
const json = await res.json();
if (!json.ok) { mostrarError(json.error); btn.disabled = false; return; }
if (!json.ok) { mostrarError(json.error); if (btn) btn.disabled = false; return; }
// Reiniciar ficha
turnoActivo = null;
@@ -1731,7 +1742,7 @@ async function pasarALugar() {
} catch (err) {
mostrarError(err.message);
btn.disabled = false;
if (btn) btn.disabled = false;
}
}
@@ -1860,6 +1871,24 @@ function filtrarExamenes(q) {
}
function toggleTodosExamenes(val) {
document.querySelectorAll('.exam-chk').forEach(c => c.checked = val);
document.querySelectorAll('.exam-cat-chk').forEach(c => c.checked = val);
}
function toggleCategoria(chk) {
const cat = chk.dataset.cat;
document.querySelectorAll(`.exam-chk[data-cat="${CSS.escape(cat)}"]`).forEach(c => {
if (c.closest('.exam-check-item')?.style.display !== 'none') c.checked = chk.checked;
});
}
function actualizarCatChk(cat) {
const catChk = document.querySelector(`.exam-cat-chk[data-cat="${CSS.escape(cat)}"]`);
if (!catChk) return;
const items = Array.from(document.querySelectorAll(`.exam-chk[data-cat="${CSS.escape(cat)}"]`))
.filter(c => c.closest('.exam-check-item')?.style.display !== 'none');
const checked = items.filter(c => c.checked).length;
catChk.checked = checked === items.length && items.length > 0;
catChk.indeterminate = checked > 0 && checked < items.length;
}
function escHtml(str) {
@@ -2114,8 +2143,8 @@ async function abrirModalPaciente(id, nombrePrefill) {
mpacAvatar(nombrePrefill);
}
_mpacModal().show();
setTimeout(() => document.getElementById('mpac-nombre').focus(), 300);
}
setTimeout(() => document.getElementById('mpac-nombre').focus(), 300);
}
function mpacRellenar(p) {