sam/compass_teams_nhs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 5: per-child dashboard (overdue first), item detail, delete

Browse Source 
- internal/dashboard: classify items into overdue / due today / due this week /
  no due date / messages; render the plain-text brief (FR-6, FR-7, FR-9).
- internal/store: ItemsForChild, ItemByID, DeleteItemByID, ScanSummaryForChild
  and the stored-brief CRUD helpers (FR-10).
- internal/web: routes /?child=, /items/{id}, POST /items/{id}/delete,
  POST /summaries/build, POST /summaries/{id}/delete, plus a per-child scan
  banner (FR-12) and a phone-first server-rendered template.
- Calendar events are never "overdue": a past lesson is history, not work.
- cmd/school brief build|list; scripts/screenshot-phase5.mjs for phone evidence.
- Tests: bucket classification, stored-brief round-trip, and HTTP routes
  including the NO SCAN / SCAN FAILED / healthy banner behaviour.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Sam Rolfe
2026-10-15 17:50:29 +11:00
parent 207a4978a9
commit 37d82b1a0a
16 changed files with 2223 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
internal/web/static/app.css
View File

@@ -316,6 +316,173 @@ a:hover { text-decoration: underline; }
}
.app-foot__sep { color: var(--ink-faint); }
/* ---------- Child tabs (Phase 5) ---------- */
.child-tabs {
display: flex;
gap: var(--space-xs);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--space-xxs);
}
.child-tab {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-height: 44px;
padding: 8px 18px;
border: 1px solid var(--hairline);
border-radius: var(--rounded-full);
background: var(--surface);
color: var(--ink-secondary);
font: var(--type-button);
white-space: nowrap;
}
.child-tab:hover { text-decoration: none; box-shadow: var(--shadow-level-1); }
.child-tab--active {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.child-tab__badge {
min-width: 20px;
padding: 0 6px;
border-radius: var(--rounded-full);
background: var(--sticker-red);
color: #ffffff;
font: var(--type-eyebrow);
text-align: center;
}
.heading-3 { font: var(--type-title); color: var(--ink); }
.heading-3--danger { color: var(--sticker-red); }
.dot--danger { background: var(--sticker-red); }
/* ---------- Child panel ---------- */
.child { display: grid; gap: var(--space-lg); }
.child__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm);
flex-wrap: wrap;
}
.child__meta { margin: var(--space-xxs) 0 0; font: var(--type-body-sm); color: var(--ink-muted); }
.child__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-md);
font: var(--type-caption);
color: var(--ink-muted);
}
.inline-form { margin: 0; }
.scan__pill--ok { background: color-mix(in srgb, var(--sticker-green) 16%, var(--surface)); color: #0f7a28; }
.scan__pill--warn { background: color-mix(in srgb, var(--sticker-orange) 16%, var(--surface)); color: var(--sticker-orange-deep); }
.scan__pill--error { background: color-mix(in srgb, var(--sticker-red) 16%, var(--surface)); color: var(--sticker-red); }
/* ---------- Item list ---------- */
.item-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-sm);
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--rounded-lg);
box-shadow: var(--shadow-level-1);
}
.item--overdue { border-left: 4px solid var(--sticker-red); }
.item__body { min-width: 0; display: grid; gap: var(--space-xxs); }
.item__title { margin: 0; font: var(--type-title); color: var(--ink); overflow-wrap: anywhere; }
.item__meta {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
font: var(--type-caption);
color: var(--ink-muted);
}
.item__subject { color: var(--ink-secondary); }
.item__due { color: var(--ink-secondary); }
.item__actions { margin: 0; flex: 0 0 auto; }
.tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--rounded-full);
font: var(--type-eyebrow);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tag--type { background: var(--surface-2); color: var(--ink-muted); }
.tag--status { background: color-mix(in srgb, var(--sticker-red) 14%, var(--surface)); color: var(--sticker-red); }
.button-utility--danger { color: var(--sticker-red); border-color: color-mix(in srgb, var(--sticker-red) 45%, var(--hairline)); }
.button-utility--danger:hover { background: color-mix(in srgb, var(--sticker-red) 8%, var(--surface)); }
.section__empty { margin: 0; padding: var(--space-sm) var(--space-md); font: var(--type-body-sm); color: var(--ink-muted); }
.brief {
margin: var(--space-xs) 0 0;
padding: var(--space-sm) var(--space-md);
background: var(--surface-2);
border-radius: var(--rounded-sm);
font: var(--type-caption);
color: var(--ink-secondary);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* ---------- Item detail ---------- */
.breadcrumb { margin: 0; font: var(--type-body-sm); }
.detail {
display: grid;
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--rounded-lg);
box-shadow: var(--shadow-level-1);
}
.detail__head { display: grid; gap: var(--space-xs); }
.detail__meta {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
font: var(--type-body-sm);
color: var(--ink-muted);
}
.detail__body { display: grid; gap: var(--space-xs); }
.detail__body p { margin: 0; font: var(--type-body-md); color: var(--ink-secondary); overflow-wrap: anywhere; }
.detail__facts {
display: grid;
grid-template-columns: minmax(90px, auto) 1fr;
gap: var(--space-xxs) var(--space-md);
margin: 0;
font: var(--type-body-sm);
}
.detail__facts dt { color: var(--ink-muted); }
.detail__facts dd { margin: 0; color: var(--ink-secondary); overflow-wrap: anywhere; }
.detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.detail__actions form { margin: 0; }
/* ---------- Responsive ---------- */
@media (max-width: 760px) {
@@ -325,4 +492,12 @@ a:hover { text-decoration: underline; }
.nav-bar { padding: var(--space-sm) var(--space-md); }
.nav-bar__user { display: none; }
.section__head { flex-wrap: wrap; }
.detail { padding: var(--space-lg); }
}
@media (max-width: 520px) {
.item { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
.item__actions { align-self: flex-end; }
.item__actions .button-utility { width: 100%; }
.child__head { flex-direction: column; }
}