Azure-Samples / Azure-Samples/tutor
[P1] frontend: Migrate legacy UI surfaces to mature workspace design
- Dominant language
- Python
- Stars
- 17
- Forks
- 8
- PR merge metrics
- No merged PRs in 30d
Description
## Problem inventory
Several frontend surfaces still use older demo/admin styling while the platform direction has moved to the mature role-aware workspace shell documented in docs/standalone-lifelong-learning-ux-ia.md and docs/adr/007-frontend-modernization.md.
Type: tech debt / UX regression risk
## Evidence
- frontend/app/configuration/page.tsx uses a demo launcher grid with saturated gradient cards, repeated logo icons, hover scale effects, and broad marketing copy instead of the current operational shell language.
- frontend/app/configuration/questions/page.tsx and frontend/components/Forms/{Questions,Answers,Grader,Themes}.tsx use multi-color rounded cards and oversized form treatment that does not match the newer workspace surfaces.
- frontend/components/Configuration/Questions.tsx and frontend/components/Configuration/Theme.tsx duplicate older full-screen form implementations.
- frontend/components/Dashboard/E-commerce.tsx and frontend/components/Calender/index.tsx still contain TailAdmin/e-commerce/demo content and visual patterns that do not map to Tutor learning workflows.
## Impact assessment
User impact: high. The old UI lowers product trust and makes pilot users feel they are moving between different products.
Blast radius: frontend-wide, concentrated in configuration/admin/form surfaces and unused legacy components.
## Acceptance criteria
- [ ] Inventory legacy UI components and identify which are routed, imported, or safe to retire.
- [ ] Migrate routed configuration/admin surfaces to the mature role-aware workspace visual language already used by Header, Sidebar, WorkspaceHome, Breadcrumb, and EssaySubmission.
- [ ] Remove or clearly quarantine unused TailAdmin/demo surfaces so they cannot reappear through navigation.
- [ ] Replace toy gradients, repeated logo icons, hover-scale cards, and e-commerce/sample copy with dense operational Tutor-specific layouts.
- [ ] Keep all migrated forms accessible under WCAG 2.2 AA: labels, focus visibility, contrast, target size, status messages, keyboard operability.
- [ ] pnpm --dir frontend lint passes.
- [ ] pnpm --dir frontend build passes with NEXT_PUBLIC_APIM_BASE_URL configured.
## Agent assignment
Primary specialist: UIDesigner
Supporting specialist: TypeScriptDeveloper
## Dependency notes
This can start immediately, but it should consume the route/functionality map from the ADR-007 feature issue before deleting or renaming any surfaced route.
## Related backlog
- #21 common dashboard work may overlap with dashboard retirement/replacement.
- #164 supervisor briefing dashboard should use the same mature UI primitives rather than legacy dashboard components.
Contributor guide
Assessment
This issue has not been assessed yet.