Onboarding tab, part 1: Leasing › Hours & contact
A staff-only Onboarding tab with one question, office hours, saved through the existing call-routing route
30 Sept 2026 · branch feat/onboarding-tab-p1 · captured against propflow-stage · at c18270cbf3+local
Data note. Every name and balance below comes from propflow-stage, which is anonymized by construction (ADR-0097/0110 — phones in the impossible +1000 NPA, emails @example.test). The identical capture against prod would carry real tenants' names and balances and is not safe to attach anywhere, which is why the generator refuses to run against one.
1 · Leasing › Hours & contact, light
The new Onboarding tab. It has the Leasing tab across the top, the tab's sections in a left list, and one question.
What to look at
The rail gets an Onboarding row above Admin (staff only). The page has a Leasing tab, then a left list that is drawn by the same SubNavSections piece as the Settings menu, with Hours & contact highlighted. The question card is Office hours, using the Call routing card's own editor. It opens on what the company's office_hours row holds. If nothing is stored it opens on a closed week, never a made-up 9 to 5. Save stays off until the week changes.
Asserted in the captured DOM — Onboarding · Leasing · Hours & contact · Office hours · Monday · Save. The tab, the section list, and the question with its editor all rendered (not the loading or error state).
2 · A change turns Save on
Notes
Monday's Closed box is toggled. Save and Cancel are now offered. Nothing was saved in this capture, so no stage data was written. The save itself (a PUT of office_hours to /api/settings/call-routing, addressed to the shown company) is pinned by hours-contact.dom.test.tsx.
Asserted in the captured DOM — Office hours · Save · Cancel. Cancel only appears once the draft differs from what is stored.
3 · The same page, dark (last, because the theme persists)
Notes
Switched to dark through the product's own theme control. Every colour on the page is a shared token (tab bar, sub-nav rows, card, banner), so nothing here is drawn by hand.
Asserted in the captured DOM — Onboarding · Leasing · Hours & contact · Office hours. Same strings as the light capture: a theme change switches colours, never content.
Two critique rounds, against brand-and-design.md and the mock
Round 1 and round 2
Round 1 (layout against the mock). The mock puts tabs across the top, the tab's sections in a left list, and the questions on the right. That is what renders here. The page body is PageBody plus PageHeader with no local width settings. The left list uses the sub-rail's own row style through SubNavSections, not new markup, so it matches the Settings menu. The question reuses the Call routing card's editor, so office hours look the same in both places. The section heading repeats the highlighted row, as the mock's body heading does. A single tab is not a filter tab (the screen rule): Maintenance and Renewals join it in part 4. The empty Not answered yet line does not appear because this test company already has hours stored. That state is pinned by the DOM test.
Round 2 (dark). Every colour is a shared token, so the page follows the theme with nothing drawn by hand. One known issue, not from this PR: the time inputs' clock glyph is low-contrast in dark. That comes from the browser's native time input inside the shared OfficeHoursEditor, the same as on Company › Calls & messages, and is left for a primitives fix. The live (read-only) state is not captured here. Turning it on would mean writing claraLive on the stage test company. The DOM test pins it: the banner shows, plus the stored hours as text, with no editor and no Save. No save was run in any capture, so nothing was written to stage.