Add Directors Forecast interactive report section
Embeds a Directors Forecast section in the Reports sidebar (hard-coded under "Directors Reports"). Worksheet tab: day-by-day OTB grid with editable pickup rooms, dry/wet overrides, ML suggestion column and live forecast recalculation. Report tab: forecast vs budget vs last-year comparison, occupancy summary, weekly revenue bands and snapshot tracking. Backend: forecast-db.js (read-only pool to forecasting_db), new tables (forecast_sessions, day_overrides, forecast_snapshots) and full REST routes under /api/directors-forecast. docker-compose FORECAST_DATABASE_URL added. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
92e2c48f48
commit
018957123f
10 changed files with 1128 additions and 5 deletions
|
|
@ -410,3 +410,127 @@ html, body, #root {
|
|||
.sidebar::-webkit-scrollbar-thumb:hover,
|
||||
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
|
||||
.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }
|
||||
|
||||
/* ── Directors Forecast ──────────────────────────────────────────── */
|
||||
.df-root { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
|
||||
|
||||
.df-header {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
padding: 12px 24px; border-bottom: 1px solid var(--border);
|
||||
background: var(--card-bg); flex-shrink: 0;
|
||||
}
|
||||
.df-month-nav { display: flex; align-items: center; gap: 10px; }
|
||||
.df-nav-btn {
|
||||
background: none; border: 1px solid var(--border); border-radius: 4px;
|
||||
width: 26px; height: 26px; cursor: pointer; font-size: 16px; line-height: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.df-nav-btn:hover { background: var(--body-bg); }
|
||||
.df-month-label { font-weight: 600; font-size: 14px; min-width: 140px; text-align: center; }
|
||||
.df-tabs { display: flex; gap: 4px; }
|
||||
.df-tab {
|
||||
padding: 5px 14px; border-radius: 4px; border: 1px solid var(--border);
|
||||
background: var(--card-bg); cursor: pointer; font-size: 12px; color: var(--text-muted);
|
||||
}
|
||||
.df-tab:hover { background: var(--body-bg); }
|
||||
.df-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
|
||||
|
||||
/* Worksheet */
|
||||
.df-worksheet { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
|
||||
.df-toolbar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 10px 24px; border-bottom: 1px solid var(--border);
|
||||
background: var(--card-bg); flex-shrink: 0; gap: 12px;
|
||||
}
|
||||
.df-toolbar-left, .df-toolbar-right { display: flex; align-items: center; gap: 10px; }
|
||||
.df-rate-label { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
|
||||
.df-rate-input { width: 70px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
|
||||
.df-save-btn { display: flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
.df-btn-icon {
|
||||
background: none; border: 1px solid var(--border); border-radius: 4px;
|
||||
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; color: var(--text-muted);
|
||||
}
|
||||
.df-btn-icon:hover { background: var(--body-bg); }
|
||||
.df-error-inline { font-size: 12px; color: #dc2626; }
|
||||
|
||||
.df-table-wrap { flex: 1; overflow: auto; padding: 0 24px 24px; }
|
||||
.df-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
|
||||
.df-table th {
|
||||
position: sticky; top: 0; background: var(--navy); color: #fff;
|
||||
padding: 6px 8px; text-align: right; white-space: nowrap; font-weight: 500; font-size: 11px;
|
||||
}
|
||||
.df-table th:first-child, .df-table th:nth-child(2) { text-align: left; }
|
||||
.df-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
|
||||
.df-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.df-table tr:hover td { background: #f8f9fa; }
|
||||
.df-row-past td { color: var(--text-muted); }
|
||||
.df-row-today td { background: #fffbeb !important; font-weight: 500; }
|
||||
|
||||
.df-ml { color: var(--gold); font-weight: 600; }
|
||||
.df-forecast { font-weight: 600; color: #1d4ed8; }
|
||||
.df-bold { font-weight: 600; }
|
||||
|
||||
.df-input-cell { padding: 2px 4px !important; }
|
||||
.df-cell-input {
|
||||
width: 70px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 3px;
|
||||
font-size: 11px; text-align: right; background: #fff;
|
||||
}
|
||||
.df-cell-input:focus { outline: none; border-color: var(--gold); }
|
||||
|
||||
.df-totals td { background: #f4f5f7; font-weight: 600; border-top: 2px solid var(--border); }
|
||||
|
||||
/* Report tab */
|
||||
.df-report { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
|
||||
.df-report-title { font-size: 18px; font-weight: 700; color: var(--navy); text-align: center; margin-bottom: 4px; }
|
||||
.df-report-toolbar {
|
||||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||||
padding-bottom: 12px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.df-snap-row { display: flex; align-items: center; gap: 6px; }
|
||||
.df-snap-input { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; width: 200px; }
|
||||
|
||||
.df-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
|
||||
.df-card-title { padding: 10px 14px; font-weight: 600; font-size: 12px; background: #f8f9fa; border-bottom: 1px solid var(--border); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
|
||||
.df-report-table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
||||
.df-report-table th { padding: 8px 12px; background: #f8f9fa; border-bottom: 1px solid var(--border); text-align: right; font-weight: 600; font-size: 11px; color: var(--text-muted); }
|
||||
.df-report-table th:first-child { text-align: left; }
|
||||
.df-report-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
|
||||
.df-report-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.df-report-table tr:last-child td { border-bottom: none; }
|
||||
.df-row-label { font-size: 12px; color: var(--text-primary); white-space: nowrap; }
|
||||
.df-total-row td { font-weight: 700; background: #f4f5f7; border-top: 2px solid var(--border); }
|
||||
.df-pos { color: #16a34a; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.df-neg { color: #dc2626; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
|
||||
.df-snap-col { position: relative; font-size: 10px; padding: 4px 20px 4px 8px !important; color: var(--text-muted); }
|
||||
.df-snap-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-muted); }
|
||||
.df-del-snap {
|
||||
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
|
||||
background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px;
|
||||
}
|
||||
.df-del-snap:hover { color: #dc2626; }
|
||||
|
||||
.df-weekly-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
|
||||
.df-loading { display: flex; justify-content: center; align-items: center; padding: 64px; }
|
||||
.df-spinner {
|
||||
width: 32px; height: 32px; border: 3px solid var(--border);
|
||||
border-top-color: var(--gold); border-radius: 50%;
|
||||
animation: spin .7s linear infinite;
|
||||
}
|
||||
.df-error { padding: 24px; color: #dc2626; font-size: 13px; }
|
||||
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
.sidebar, .top-bar, .df-header { display: none !important; }
|
||||
.df-root, .df-report { overflow: visible; }
|
||||
#df-printable { padding: 0; }
|
||||
.df-weekly-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.df-weekly-grid { grid-template-columns: 1fr; }
|
||||
.df-table { font-size: 11px; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue