Límites por día/cargo, aprobación de días y calendario de admin
- Límite de solicitudes por día y cargo (modelo reserva: pendientes + aprobadas ocupan hueco, rechazar lo libera). Días completos, pasados o el de hoy no se pueden elegir; validado también en el servidor. - Estados de aprobación en las peticiones (pendiente/aprobado/rechazado) visibles para el trabajador con color; solo puede editar pendientes o añadir nuevas. - Calendario de admin con barra lateral por empleado: aprobar/rechazar por día y en bloque, añadir/quitar días, y editar los límites por cargo. - Excel con días por estado y ocupación por día/cargo. - Migraciones automáticas no destructivas (columnas rounds.limits y requests.status; las peticiones existentes pasan a "pendiente"). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,12 @@
|
||||
--accent-deep: #9c3f1b;
|
||||
--accent-wash: #f3e0d2;
|
||||
--ok: #2f6b46;
|
||||
/* estados de las solicitudes */
|
||||
--choosing: #8d8779;
|
||||
--pending: #e0a52a;
|
||||
--pending-ink: #5a4200;
|
||||
--approved: #2f6b46;
|
||||
--rejected: #b23b27;
|
||||
--radius: 14px;
|
||||
--shadow: 0 2px 0 rgba(30, 53, 40, 0.08), 0 14px 34px -18px rgba(30, 53, 40, 0.35);
|
||||
}
|
||||
@@ -281,6 +287,29 @@ input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194, 86, 4
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
/* leyenda de colores del calendario */
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px 16px;
|
||||
margin: 0 0 16px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.legend .sw {
|
||||
width: 16px; height: 16px;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid var(--line);
|
||||
flex: none;
|
||||
}
|
||||
.legend .sw--choosing { background: var(--choosing); border-color: var(--choosing); }
|
||||
.legend .sw--pending { background: var(--pending); border-color: #c98e1d; }
|
||||
.legend .sw--approved { background: var(--approved); border-color: var(--approved); }
|
||||
.legend .sw--rejected { background: #f6e3df; border-color: #e2b7af; }
|
||||
|
||||
/* ---------- calendario ---------- */
|
||||
|
||||
.month {
|
||||
@@ -350,6 +379,41 @@ input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194, 86, 4
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
/* estados del día para el trabajador */
|
||||
.day.choosing {
|
||||
background: var(--choosing);
|
||||
color: #fff;
|
||||
border-color: var(--choosing);
|
||||
}
|
||||
.day.pending {
|
||||
background: var(--pending);
|
||||
color: var(--pending-ink);
|
||||
border-color: #c98e1d;
|
||||
}
|
||||
.day.approved {
|
||||
background: var(--approved);
|
||||
color: #fff;
|
||||
border-color: var(--approved);
|
||||
cursor: default;
|
||||
}
|
||||
.day.rejected {
|
||||
background: #f6e3df;
|
||||
color: var(--rejected);
|
||||
border-color: #e2b7af;
|
||||
text-decoration: line-through;
|
||||
cursor: default;
|
||||
}
|
||||
/* día completo para el cargo: no se puede elegir */
|
||||
.day.full {
|
||||
background: repeating-linear-gradient(
|
||||
-45deg, #efe6d2, #efe6d2 4px, #e6dabf 4px, #e6dabf 8px
|
||||
);
|
||||
color: #a99b7e;
|
||||
cursor: default;
|
||||
}
|
||||
.day .count.is-full { background: var(--rejected); }
|
||||
|
||||
.day .count {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
@@ -497,6 +561,263 @@ input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194, 86, 4
|
||||
padding: 22px 0;
|
||||
}
|
||||
|
||||
.pending-flag { color: var(--accent-deep); }
|
||||
|
||||
/* ---------- editor de cargos (nueva ronda) ---------- */
|
||||
|
||||
#roles-editor { display: grid; gap: 8px; margin-top: 4px; }
|
||||
.role-row { display: flex; gap: 8px; align-items: center; }
|
||||
.role-row .role-label { flex: 1; }
|
||||
.role-row .role-max { width: 92px; text-align: center; }
|
||||
.role-row .role-del {
|
||||
flex: none;
|
||||
width: 40px; height: 44px;
|
||||
border: 1.5px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: var(--paper);
|
||||
color: var(--accent-deep);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
.role-row .role-del:hover { background: var(--accent-wash); border-color: var(--accent); }
|
||||
#add-role { margin-top: 10px; }
|
||||
|
||||
/* ---------- vista de calendario del admin ---------- */
|
||||
|
||||
body.cal-open .page--wide { max-width: 1080px; }
|
||||
|
||||
.cal-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.cal-topbar .btn { margin-top: 0; }
|
||||
.cal-heading { display: flex; align-items: center; gap: 10px; }
|
||||
.cal-heading h2 {
|
||||
font-family: "Fraunces", Georgia, serif;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
.cal-heading .badge { margin-left: 0; vertical-align: middle; }
|
||||
|
||||
.cal-limits h3 {
|
||||
font-family: "Fraunces", Georgia, serif;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.cal-limits-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.limit-field { margin: 0; display: flex; flex-direction: column; gap: 4px; }
|
||||
.limit-field span { font-weight: 700; font-size: 13px; }
|
||||
.limit-field input { width: 100%; text-align: center; }
|
||||
.cal-limits-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.cal-limits-foot .field-hint { margin: 0; flex: 1 1 200px; }
|
||||
.cal-limits-foot .btn { margin-top: 0; }
|
||||
|
||||
.cal-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.cal-layout { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.cal-sidebar {
|
||||
position: sticky;
|
||||
top: 12px;
|
||||
margin-bottom: 0;
|
||||
padding: 14px;
|
||||
max-height: calc(100dvh - 24px);
|
||||
overflow: auto;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.cal-sidebar { position: static; max-height: none; }
|
||||
}
|
||||
.side-all {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
padding: 11px 12px;
|
||||
border: 1.5px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.side-all.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.side-role {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-deep);
|
||||
margin: 14px 2px 6px;
|
||||
}
|
||||
.side-role .side-lim {
|
||||
color: var(--ink-soft);
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.side-worker {
|
||||
border: 1.5px solid var(--line);
|
||||
border-radius: 11px;
|
||||
margin-bottom: 7px;
|
||||
overflow: hidden;
|
||||
background: #fffdf7;
|
||||
}
|
||||
.side-worker.is-active { border-color: var(--ink); box-shadow: var(--shadow); }
|
||||
.side-worker-main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.side-worker-main .name { font-weight: 800; font-size: 14px; }
|
||||
.side-worker .tags { display: flex; gap: 5px; flex: none; }
|
||||
.side-worker .t {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
border-radius: 999px;
|
||||
padding: 1px 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.side-worker .t-ap { background: #ddebdd; color: var(--approved); }
|
||||
.side-worker .t-pe { background: #f7e6c2; color: var(--pending-ink); }
|
||||
.side-worker .t-re { background: #f1ddd7; color: var(--rejected); }
|
||||
.side-bulk {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
.side-bulk .btn { margin-top: 0; flex: 1; padding: 8px 6px; font-size: 12.5px; }
|
||||
|
||||
.cal-main { min-width: 0; }
|
||||
.cal-mode-hint { text-align: left; margin: 0 2px 12px; }
|
||||
.cal-months {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.cal-months .month { margin-bottom: 0; animation: none; }
|
||||
|
||||
.cday {
|
||||
position: relative;
|
||||
min-height: 42px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 3px 2px;
|
||||
border: 1.5px solid var(--line);
|
||||
border-radius: 9px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.cday:not(.cday--info):active { transform: scale(0.94); }
|
||||
.cday .n { font-size: 12px; line-height: 1; }
|
||||
.cday--info { cursor: default; }
|
||||
.cday.s-approved { background: var(--approved); color: #fff; border-color: var(--approved); }
|
||||
.cday.s-pending { background: var(--pending); color: var(--pending-ink); border-color: #c98e1d; }
|
||||
.cday.s-rejected {
|
||||
background: #f6e3df;
|
||||
color: var(--rejected);
|
||||
border-color: #e2b7af;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.cday.focused { outline: 3px solid var(--ink); outline-offset: 1px; z-index: 1; }
|
||||
.cday .load {
|
||||
font-size: 9.5px;
|
||||
font-weight: 800;
|
||||
background: rgba(30, 53, 40, 0.14);
|
||||
border-radius: 999px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.cday.s-approved .load { background: rgba(255, 255, 255, 0.28); }
|
||||
.cday .load.is-full { background: var(--rejected); color: #fff; }
|
||||
.cday .chips { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
|
||||
.cday .rchip {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
background: #e7dcc2;
|
||||
color: var(--ink-soft);
|
||||
border-radius: 4px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
.cday .rchip.is-full { background: var(--rejected); color: #fff; }
|
||||
|
||||
/* barra de acción del admin (aprobar / rechazar / pendiente / quitar) */
|
||||
.actionbar {
|
||||
position: fixed;
|
||||
left: 0; right: 0; bottom: 0;
|
||||
z-index: 10;
|
||||
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(transparent, rgba(246, 240, 227, 0.92) 35%);
|
||||
transform: translateY(115%);
|
||||
transition: transform 0.25s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.actionbar.show { transform: translateY(0); pointer-events: auto; }
|
||||
.actionbar .inner {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-radius: 16px;
|
||||
padding: 12px 14px;
|
||||
box-shadow: 0 16px 34px -12px rgba(30, 53, 40, 0.55);
|
||||
}
|
||||
.actionbar .label { flex: 1 1 160px; font-weight: 700; font-size: 14px; text-transform: capitalize; }
|
||||
.actionbar .acts { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.actionbar .btn { margin-top: 0; width: auto; }
|
||||
.actionbar .act-approve { background: var(--approved); }
|
||||
.actionbar .act-reject { background: var(--rejected); }
|
||||
.actionbar .btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--paper);
|
||||
border-color: rgba(246, 240, 227, 0.4);
|
||||
}
|
||||
.actionbar .btn--ghost:hover { background: rgba(246, 240, 227, 0.12); }
|
||||
|
||||
/* en la barra lateral los botones de aprobar/rechazar conservan su color */
|
||||
.side-bulk .act-approve { background: var(--approved); }
|
||||
.side-bulk .act-reject { background: var(--rejected); }
|
||||
|
||||
footer.colophon {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
|
||||
Reference in New Issue
Block a user