Admin Panel Redesign — Onboarding + Overview

Goal

Two onboarding/landing screens + one Free Guest landing screen — the entry-points for every authenticated journey on the admin panel.

Tasks

• [x] Phase 2 task 1 (amended L6 + M5): create design-system/admin/01-onboarding.html — first-registration Trial signup flow. Modelled after docs/mockups/admin-quick-build-atelier-standalone.html (Trial signup mode only). Structure: hero strip ("Get your white-label sales platform · 14 days, no card required") + Step 1 workspace details (Org name + subdomain slug live preview {slug}.offplan.online + Org type chips Studio/Agency/Other — NO "Developer" chip per L1) + Step 2 admin contact (name + email + optional phone) + billing-address country (mandatory) per L6 (Stripe automatic_tax) + Step 3 first-project bootstrap (name + project type + skip-for-now) + Step 4 confirmation with consent checkbox + privacy-policy link (M18). Every voice-bearing string carries <!-- [copy:provisional] -->.
• [x] Phase 2 task 1 sub-add (M1): subdomain slug auto-suggest from Org name + "change later in Settings" inline hint.
• [x] Phase 2 task 2 (amended H7 + M3 + M4): create design-system/admin/02-overview.html — post-login workspace landing. Shell from _shell.css. Trial banner copy pinned verbatim to Sub-plan 2 Pick #3 + Pick #14 (HTML comment <!-- spec: onboarding-trial-mode.md Pick #3 + #14 -->). KPI row: 4 cards. Projects list: 3-up cards with placeholder cover, name, slug, status pill, last-edited, Open → CTA → 03-theme.html. Empty state: "Skipped project setup? Start with a guided 5-minute walkthrough" + link to 01-onboarding.html. HTML comment recommending labelled "Admin" chip with Phosphor gear for sales-app topbar slot (M3, recommendation only).
• [x] NEW Phase 2 task 3 (H2): create design-system/admin/02b-overview-guest.html — Free Guest tenant landing. Single project view (the project to which guest membership applies), no trial banner, no Team / Activity log sections in sidebar, restricted sidebar (Phosphor building + project name + Saved + Gallery only), data-role="free-guest" on body, "Guest access · invited by {host org}" chip in topbar.
• [x] Verification (per phase): open all three HTML in browser; drift grep + AU grep + Phosphor render checks (per admin-panel-foundation checks); role-switch JS works (?as=free-guest on 02-overview redirects/styles to guest variant — or 02b is loaded directly). Passed CONV-37: drift / hex / AU all 0 hits; 32 sprite refs all resolve; banner copy verbatim Pick #3 + Pick #14; 02b carries no shell__trial-banner element (only doc-comment mention); ?as=free-guest JS confirmed setting body[data-role="free-guest"] + force-showing guest chip via cascade.

SPEC-AMEND v1.2 (CONV-37) — fork-screen + Quick Build

• [x] Phase 2 task 4 (v1.2 H1): create design-system/admin/01-quick-build.html — split-screen Object Builder modelled after atelier mockup, rendered in brandbook v2 canon (Skeleton White surfaces, no gold/glass). Left column (~580px): wordmark + TRIAL · 12D chip + eyebrow «OBJECT BUILDER · QUICK BUILD» + h1 «Name your project» + project name (pre-filled Côte Résidence) + subdomain (cote-residence + .offplan.online suffix + «Available · live in seconds» moss-green indicator) + 3 required uploads numbered i/ii/iii (Exterior · checked, Floor Plans · pending UPLOAD, Gallery · pending UPLOAD) + progress chip 1/3 → 2/3 → 3/3 + SAVE & CONTINUE primary + SKIP ghost (→ 02-overview.html). Right column (flex-1): «LIVE PREVIEW · cote-residence.offplan.online» strip + Desktop/Tablet/Mobile toggle + preview block with data-project="cote" + .project-themed (cascades sage-marine accent from bundle) — preview shows sales-presentation hero with project name + AED price + meta + topbar nav (OVERVIEW / FLOOR PLANS / GALLERY / INQUIRE). Bottom dock inside preview: «Floor Plans · drop files to populate» + «Gallery · 0 of 12 images uploaded» (mirrors upload state). Voice-bearing strings tagged <!-- [copy:provisional] -->.
• [x] Phase 2 task 5 (v1.2 H2): create design-system/admin/00-welcome.html — post-signup fork screen. Hero «Welcome to offplan.online · how do you want to start?» (provisional). 3 cards in equal grid: (a) Quick Build — thumb of split-screen builder + «See your sales page in 2 minutes» + Phosphor icon squares-four or bolt-lightning → 01-quick-build.html; (b) Set up your organisation — thumb of step wizard + «Methodical · 4 short steps» + Phosphor icon list-checks → 01-onboarding.html; (c) Skip to admin — thumb of overview + «I know what I'm doing» + Phosphor icon arrow-right → 02-overview.html. Each card hover state lifts subtly. Footer Privacy/Terms/Cookies.
• [x] NEW (v1.2 H3): update design-system/admin/index.html — Onboarding & Overview section grows from 3 to 5 thumb cards (add 00-welcome + 01-quick-build), total screen count 16 → 18. Section meta updates accordingly.
• [ ] Phase 2 exit gate v1.2: Sergei walks the new fork: open 00-welcome.html → click each card → confirm landing on correct destination. Quick Build live preview renders with Côte Résidence sage-marine accent (proves [data-project="cote"] cascade works). Drift / hex / AU greps return 0 across new files.
• [ ] Phase 2 exit gate: Sergei opens 01 → fills imaginary org details → clicks Open admin panel → lands on 02 → sees trial banner + KPI row + project cards. 02b opens standalone and shows guest chrome. Phase-gate handoff: Gate-passed: phase-2.

What's Next

Phase 2 exit gate v1.2 — Sergei walks the new fork: open 00-welcome.html, click each of the 3 cards, confirms landing on correct destination. Quick Build live preview renders with Côte Résidence sage-marine accent (proves [data-project="cote"] cascade). On Sergei sign-off: emit Gate-passed: phase-2 (v1.2), flip status → done, unblock admin-panel-project-editor (Phase 3 — 11 editor screens).

Key Context

• Plan: plans/admin-panel-redesign.md (Phase 2)
• SPEC-AMEND v1.1 (CONV-36): absorbs H2 (NEW 02b) + H7 + M1 + M3 + M4 + L6
• Source files: admin-panel-quick-build-atelier-standalone.html (read-only reference), bundle/project/colors_and_type.css
• Trial banner copy: pin to plans/onboarding-trial-mode.md Pick #3 + Pick #14 verbatim
• Sub-plan 2 signup form fields: plans/onboarding-trial-mode.md Step 2 line 469

Session Log

• CONV-36 (2026-05-11): Workstream created from ratified plans/admin-panel-redesign.md + SPEC-AMEND v1.1
• CONV-38 (2026-05-11): completed Phase 2 task 1 + M1 — 01-onboarding.html (~330 lines): hero (wordmark + "Get your white-label sales platform" + 14-day-no-card eyebrow) + 4-step wizard. Step 1 Workspace details (org name + subdomain w/ auto-suggest hint + live {slug}.offplan.online preview + Org type chips Studio/Agency/Brokerage/Other — no Developer chip per L1). Step 2 Admin contact (name/email/optional phone) + mandatory billing-country select per L6. Step 3 First project (name + type chips + skip-link back to 02-overview per M4). Step 4 Confirmation w/ consent checkbox + privacy-policy link per M18 + "Open admin panel →" CTA → 02-overview.html. 41 <!-- [copy:provisional] --> markers per M5. Visual walk ✓ via Playwright @ 1440×900, 0 console errors.
• CONV-38 (2026-05-11): completed Phase 2 task 2 (H7 + M3 + M4) — 02-overview.html (~440 lines) post-login landing on _shell.css shell. Trial banner copy pinned verbatim to Sub-plan 2 Pick #3 (TRIAL — 11 days left) + Pick #14 (Trial ends in 11 days · Add card to continue →) with <!-- spec: onboarding-trial-mode.md Pick #3 + #14 --> anchor. data-banner-scope="owner-admin" drives counter visibility (M21). Owner role-badge + guest-chip + gear in topbar. Full sidebar (Overview active, Essentials open, Advanced collapsed, Team/Activity/Sign-out footer). KPI row 4 cards. Project cards 3-up: Côte Résidence + "Add a project" dashed empty-state w/ M4 re-entry link → 01-onboarding.html. M3 sales-app topbar recommendation as HTML comment. Visual walk ✓. Note: file content was rebuilt from session context after a mid-build git pull --rebase --abort cycle wiped the uncommitted draft.
• CONV-38 (2026-05-11): completed Phase 2 task 3 (H2) — 02b-overview-guest.html (~280 lines) Free Guest single-project landing. <body data-role="free-guest"> triggers shell guest-chip force-show + omits trial banner entirely. Restricted sidebar: wordmark + Côte Résidence (active, building icon) + Saved (file-text) + Gallery (image) — no Theme/Buildings/etc., no Team, no Activity log. Topbar breadcrumb "Côte Résidence · Guest access" + guest chip "Guest access · invited by Studio Alpha". Info banner explains read-only scope. Recently saved row (3 cards) + Renders & walkthroughs gallery row (3 cards). Visual walk ✓ via Playwright, 0 console errors.
• CONV-38 (2026-05-11): completed Phase 2 mechanical verification — drift / hex / AU all 0 hits across the 3 new screens. 32 Phosphor sprite refs all resolve. Banner copy on 02-overview verified verbatim against Pick #3 + Pick #14. 02b carries no shell__trial-banner element (only a doc-comment mention). ?as=free-guest JS confirmed via Playwright: sets body[data-role="free-guest"], force-shows guest chip through the [data-app="admin"][data-role="free-guest"] cascade rule in _shell.css. (Note: data-banner-scope is server-issued in production — JS only flips data-role, banner suppression for guests is enforced via routing, not URL param.)
• CONV-38 (2026-05-11): completed SPEC-AMEND v1.2 task 4 — 01-quick-build.html (~680 lines) split-screen Object Builder. Left column 580px Skeleton White form: wordmark + Trial · 12d chip + eyebrow «OBJECT BUILDER · QUICK BUILD» + h1 «Name your project.» (moss period accent) + project name Côte Résidence + subdomain cote-residence.offplan.online w/ «Available · live in seconds» moss indicator + 3 uploads i/ii/iii (Exterior checked w/ filename, Floor plans / Gallery pending) + 1/3 progress + SAVE & CONTINUE (ink-surface, full-height) + SKIP ghost. Right column flex-1 atmospheric preview: pulse + «Live preview · cote-residence.offplan.online» + Desktop/Tablet/Mobile toggle + preview frame with .project-themed + data-project="cote" cascade. Inside: topbar w/ project name + 4-link nav (Overview active w/ sage underline), atmospheric gradient hero (sky → proj-deep) + tower silhouette SVG + meta «Aldar collection · Abu Dhabi · 2027» + project name w/ proj-accent period + price col «FROM / AED 4.8M» (in proj-accent), bottom dock «Floor plans · drop files to populate» + «Gallery · 0 of 12 images uploaded». Brand-contract cascade confirmed working — sage-marine accent only inside frame, admin chrome stays on house Moss. Visual walk ✓ via Playwright @ 1440×900, 0 console errors. 41 [copy:provisional] markers.
• CONV-38 (2026-05-11): completed SPEC-AMEND v1.2 task 5 — 00-welcome.html (~280 lines) post-signup fork. Wordmark centered + eyebrow «Workspace ready · Trial active for 14 days» + h1 «How do you want to start?» (moss accent on "start") + sub «Pick the path that fits…». 3-card grid equal columns: (a) Quick Build — featured ink-surface card, «RECOMMENDED» chip, squares-four icon, «PATH A · FASTEST», title «Quick Build», body «Drop three assets…», 3 bullets, CTA «Build my project →» → 01-quick-build.html. (b) Set up your organisation — Skeleton White card, «METHODICAL» chip, list icon, «PATH B · STRUCTURED», 3 bullets (workspace details, admin contact + billing country, first project), CTA «Run the steps →» → 01-onboarding.html. (c) I know what I'm doing — Skeleton White, «POWER USER» chip, sign-in icon, «PATH C · SKIP», 3 bullets (empty workspace, re-entry via overview, settings later), CTA «Open admin panel →» → 02-overview.html. Hover lift + moss border. Visual walk ✓, 0 console errors.
• CONV-38 (2026-05-11): completed SPEC-AMEND v1.2 task 3 — updated index.html: «Onboarding & Overview» section grew 3 → 5 thumb cards (added 00-welcome + 01-quick-build at start, kept 01-onboarding / 02-overview / 02b-guest); section meta updated «Phase 2 · 5 screens»; total thumb count 18; hero sub copy «Sixteen screens…» → «Eighteen screens…»; Pending chips removed from all 5 onboarding cards (they're live now); Phase 3 (11 cards) + Phase 4 (2 cards) keep their Pending chips. Visual walk ✓.