137 lines
7.4 KiB
Markdown
137 lines
7.4 KiB
Markdown
# Admin spec — parent phone card
|
||
|
||
Screens `1d`–`1i`. One card, `nestquest-admin-card`, four tabs. Reference viewport
|
||
390×844. Plain CubeCraft styling and plain domain words — no parchment, no Cinzel, no
|
||
quest vocabulary in this surface.
|
||
|
||
## 1. Shell
|
||
|
||
- Page `--nq-a-page`; cards `--nq-a-surface` with 1px `--nq-a-border`.
|
||
- **Header** white, 1px bottom border: screen title 24px/800, tracking −.02em, plus a
|
||
12px/600 `--nq-a-ink-secondary` sub-line. Optional trailing action (icon square 36px,
|
||
or a gradient `New` button).
|
||
- **Tab bar** absolute bottom, `--nq-a-tabbar-height` 70px + 12px bottom padding, white,
|
||
1px top border, 4 items: `house` Today · `list-checks` Tasks · `calendar-days` Schedule ·
|
||
`history` History. Active icon and label `--nq-brand-blue` at 700; inactive icon
|
||
`--nq-a-ink-tertiary`, label `--nq-a-ink-secondary` 600.
|
||
- **Every scroll column ends with 92px bottom padding** so content clears the tab bar.
|
||
This was a real defect in review — do not omit it.
|
||
- Two densities exist. Ship **compact**; `--nq-a-density-*` carries the roomy values.
|
||
- Everything this card mutates goes through a NestQuest service, which enforces the admin
|
||
allowlist server-side. The card must assume it can be rendered by a non-admin and still
|
||
be safe — hiding controls is not the boundary (D-003).
|
||
|
||
## 2. Today (1d compact, 1h roomy)
|
||
|
||
### 2.1 Header
|
||
Title `Today`; sub `<weekday>, <Month D> · cycle day N of 14`; trailing `settings` square.
|
||
|
||
### 2.2 Stat row
|
||
Three equal cards, 8px gap, padding 12px: numeral 22px/800 (done in `--nq-brand-blue`,
|
||
remaining in `--nq-a-ink`, overdue in `--nq-a-danger`), label 10px/600 uppercase tracking
|
||
.08em `--nq-a-ink-secondary` — `Done`, `Remaining`, `Overdue`.
|
||
|
||
### 2.3 Child rows
|
||
One card, rows divided by `--nq-a-divider`, row padding 11px 13px:
|
||
30px gradient avatar square (radius 7px, initial 13px/800 white) · name 14px/700 ·
|
||
meta 11px/600 (`3 of 7 · 1 overdue`; all-done in `--nq-a-success`; away reads
|
||
`Away · returns <Mon D>`) · 82×6px progress track with gradient fill. An away child's
|
||
avatar is flat `#9898A8` and the row carries a lowercase `override` pill when the absence
|
||
comes from a presence override rather than the pattern.
|
||
|
||
### 2.4 Roomy variant (1h)
|
||
Header becomes a hero: kicker 11px/700 uppercase, `8 of 12 done` 32px/800, 10px gradient
|
||
progress bar, 13px/600 sub-line. Each child gets its own 12px-radius card with
|
||
`0 4px 12px rgba(0,0,0,.06)`, 48px avatar, 19px/800 name, right-aligned `3/7` +
|
||
status line, and its overdue item inlined as a `--nq-a-danger-bg` row with a
|
||
`Mark done` action.
|
||
|
||
### 2.5 Needs attention
|
||
Section label 11px/700 uppercase, then one card of event rows: Lucide glyph 18px ·
|
||
title `<Quest> · <Child>` 13px/700 · meta 11px/600 (`Overdue since 9:00 AM` in
|
||
`--nq-a-danger`; `Completed 7:04 AM from panel` in `--nq-a-ink-secondary`) · trailing
|
||
text action `Mark done` (`--nq-brand-blue`) or `Undo` (`--nq-brand-purple`).
|
||
|
||
### 2.6 Permission note
|
||
An info strip (`--nq-a-info-bg`, `info` glyph, 11.5px/600 `--nq-a-info-ink`):
|
||
"Undo is admin-only. A panel tap can never reverse a completion." Keep this copy — it is
|
||
the one place the security model is explained to the user.
|
||
|
||
## 3. Definitions (1e)
|
||
|
||
### 3.1 List
|
||
Header `Tasks` / `7 definitions · 3 children` + gradient `New` button. Filter chips row
|
||
(All / one per child): active `#18181D` fill white text, inactive white with border.
|
||
Rows: glyph 17px · title 13.5px/700 · meta 11px/600 `<assignees> · <recurrence> · <windows>`
|
||
· `chevron-right`. An inactive definition renders the whole row at
|
||
`--nq-a-ink-tertiary` with `· inactive` in the meta — never hard-deleted (glossary).
|
||
The row being edited takes `--nq-a-selected` with brand-blue glyph, `Editing` meta and
|
||
`chevron-down`.
|
||
|
||
### 3.2 Edit sheet
|
||
Bottom sheet, `--nq-a-radius-sheet`, `--nq-a-sheet-shadow`, 38×4px grabber, padding
|
||
14px 18px 24px. Title 19px/800. Fields, 11px gap, each with a 10px/700 uppercase label:
|
||
|
||
| Field | Control |
|
||
|---|---|
|
||
| Assigned children | multi-select row → sheet; shows `Declan` or `All three` |
|
||
| Repeats | select (Daily / Weekly / Monthly / Yearly / Custom + interval) |
|
||
| Due time | time field per window |
|
||
| Window | 3-up segmented, **multi-select** — a definition may own several |
|
||
| Skip on away days | toggle, gradient when on, sub "No instance when the child is absent" |
|
||
|
||
Footer: `Cancel` (flex 1, bordered) + `Save changes` (flex 2, gradient), both 13px vertical
|
||
padding. Sheet enters over the dimmed list in `--nq-dur-modal`.
|
||
|
||
### 3.3 Icon picker
|
||
Each definition carries a Lucide glyph, shown on both surfaces. **The allowed subset is not
|
||
yet defined** — pick 24–40 household-relevant glyphs and ship them as a grid picker.
|
||
|
||
## 4. Schedule (1f)
|
||
|
||
- Header `Schedule` / `2-week cycle · anchor <weekday>, <Mon D>`.
|
||
- **Month grid** card: month label 11px/700 uppercase + chevron pair; weekday initials
|
||
10px/700 `--nq-a-ink-tertiary`; day cells `aspect-ratio: 1`, radius 6px —
|
||
rotation-home days `--nq-a-selected` with `#201F7A` numerals, away days
|
||
`--nq-a-page` with `--nq-a-ink-secondary`, override days `--nq-a-warning-bg` with
|
||
`--nq-a-warning-ink` and a 1px warning border, today filled with the brand gradient in
|
||
white 800. Legend row beneath, 10.5px/600, one swatch per state.
|
||
- **Presence pattern** card: one row per child, name 13px/700 + rule 12px/600
|
||
(`Weeks 1 & 3 of cycle`, `Every day`).
|
||
- **Overrides** card: `Add` text action; rows with `calendar-x` / `calendar-check`,
|
||
title `<Child> away · <Mon D – D>`, meta reason, trailing `trash-2`.
|
||
- Cycle position is always computed from the anchor date. **Never** from ISO week numbers
|
||
or week parity (D-004).
|
||
|
||
## 5. History (1g)
|
||
|
||
- Header `History` / `Append-only event log · last 14 days` + bordered `CSV` button
|
||
(`download` glyph) that exports the filtered range.
|
||
- Stat row: `91%` On time · `128` Completed · `7` Missed, numerals 20px/800.
|
||
- Filter chips: `All events` / `Reversals` / `Missed`.
|
||
- Day-grouped sections (label 11px/700 uppercase) of event rows: 7px status dot
|
||
(green completed, `--nq-a-reversal` un-completed, `--nq-a-danger` missed) ·
|
||
title `<Quest> · <Child>` 12.5px/700 · meta 10.5px/600 giving event type, actor and
|
||
on-time flag (`completed · panel (Declan) · on time`, `uncompleted · joshua (admin)`,
|
||
`missed · nightly sweep`, `completed · panel (Declan) · late 22 min`) · time 11px/600.
|
||
- Footer strip (`--nq-a-page`, `lock` glyph): "Events are never edited or deleted. A
|
||
reversal is its own row." Rows are never editable in the UI (D-005).
|
||
|
||
## 6. Presence override editor (1i)
|
||
|
||
Pushed screen with a back chevron; title `Presence override` / sub "Beats the custody
|
||
pattern for these dates".
|
||
|
||
- Form card (roomy density, 18px padding, 16px gaps):
|
||
**Child** 3-up segmented, selected = gradient;
|
||
**Status for these dates** 2-up segmented (`Away` / `Home`), selected = `#18181D`;
|
||
**From** / **Through** date fields side by side, 13px padding, 14px/700 values;
|
||
**Reason (optional)** text field.
|
||
- **Consequence warning** — `--nq-a-warning-bg` card with `alert-circle`:
|
||
headline `This removes N upcoming tasks` 13.5px/700 `--nq-a-warning-ink`, body 12px/600
|
||
`--nq-a-warning-ink-2` naming the child, the date range, and stating "Completed days are
|
||
untouched." The count must be computed live from the materialiser before saving.
|
||
- Footer: `Cancel` (flex 1, white, bordered) + `Save override` (flex 2, gradient), 15px
|
||
vertical padding.
|
||
- Saving must never delete an instance that already has a completion event.
|