UI Design — prototype hub
Phase 1 foundations (vocabulary, who sees what, tokens, components), the Phase 2 and 3 clickable admin screens, and the Phase 4 teacher portal for phones. Start with the Dashboard or the Teacher portal and follow the links, or jump to a module below.
Words the UI uses
Entities, statuses and screen names, each with the exact label that appears on screen and where it comes from in the requirements.
Who sees which screens
Admin portal sitemap, Teacher portal sitemap, Parent portal placeholder, and a role × screen access matrix for Super Admin, Owner, Branch Admin, Operator and Teacher.
Visual language
Colour, type, spacing, date/time/money formats, and every reusable component rendered live from tokens.css and components.css.
Templates
App shell template
Sidebar, top bar with branch switcher, page header pattern. Every Phase 2 and 3 screen is placed inside this shell.
Mobile app shell
Top bar with branch switcher for multi-branch teachers, scrollable body, four-tab bottom bar, bottom sheets. On a wide screen it sits in a phone frame with prototype controls (logged-in teacher, branch, contact-number setting).
v1.5 — not designed yet
Reserved in the navigation map; nothing in Phases 2–4 needs to move when it is added.
Phase 2 · Dashboard, CRM, Timetable, Room Booking
Clickable admin screens with mock data for Kuala Lumpur, week of 2026-09-07. Use the top-right menu on any screen to view as Super Admin, Owner, Branch Admin or Operator; the branch switcher sets the branch.
Branch dashboard
KPIs, today's schedule, needs-your-action list, month-start checklist, revenue by style, pipeline.
Leads, customers, students, parents
Pipeline board and list, lead detail with follow-up log, trial booking and the convert-to-client wizard, customer detail with invoices and replacement credits.
Week by room / teacher, day, year
Rendered from data: chips by style, holidays shaded, shifted and cancelled slots, slot detail drawer with chargeable flag and history. Classes list, new class with conflict check, class detail with slots and attendance.
Availability grid and bookings
Rooms × 30-minute cells with idle capacity, click-to-book with :00/:30 and 1-hour checks, deposit line, tentative → locked, refund window.
Pending Work and replacement credits
Slots older than 24 hours with no attendance, mark on teacher's behalf; credits earned and used per customer, proof review, make-up booking.
Phase 3 · Products, Billing, Salary, Settings
Products, discount codes, enrolments
Syllabus vs per-slot pricing, admin-only codes bound to products, enrolment drawer with freeze / extend / transfer and renewal alerts.
Invoices, payments, overdue
Per-customer multi-line invoices with branch number and global ID, open-amount lines with mandatory remark, record payment and void with audit, ageing buckets.
From / To, Calculate Fees, Checking Table
Paid / Partially paid / Unpaid / Needs checking buckets, candidate matching with confirm, pick other, mark unpaid or leave open; past runs with diffs.
Salary Run, sheets, rules, payout
One sheet per teacher per branch, line-by-line with paid headcount, flagged unpaid students, pending-attendance block, Draft → Confirmed → Signed off → Rejected by role, rule table bound at engagement, payout CSV.
Branches, rooms, calendar, thresholds, users
Yearly calendar editor per branch (paint holidays, off-days, term breaks; shows classes to shift), thresholds, invoice numbering, styles and courses, users and teacher-branch links.
Phase 4 · Teacher portal (mobile)
Logged in as Ms Chloe Wong (Kuala Lumpur) by default; the panel beside the phone switches teacher, branch and the admin-managed contact-number setting. Prototype clock is Monday 2026-09-07 12:40, just after her Kids Jazz Group class, so attendance is live. Attendance and notes you enter are kept in the browser so the flow can be followed through to the admin Pending Work page and salary sheet.
Today, pending, coming up
Slots older than 24 hours without attendance at the top (same list as admin Pending Work), today's classes with a Mark button once the class has ended, next 7 days, salary snapshot and notices.
Week list, class attendance
Week list of own classes with holidays, term breaks and moved slots. Class screen: Present / Late / Absent per student with 44px targets, "informed ≥ 24 h" and reason on absences, save stamped with who and when, marked-on-behalf shown, per-student notes, slot info and history.
My students, student detail
Search and filter by class; phone numbers only when the per-teacher setting is on. Detail: classes, replacement credits, contact (masked by default), last 8 slots, notes timeline.
Statement per branch per period
Read-only mirror of the admin salary sheet: Draft → Confirmed → Signed off with who and when, line-by-line by class with paid headcount and bound rate, excluded unpaid students, pending-attendance block, adjustments, history. Multi-branch teachers switch branch, amounts never add up.
Phase 5 · Review with branch admins
Walkthrough script and decision outcome
Screen-by-screen walkthrough order with what to check, and every assumption made in Phases 2–4 as a decision item. Reviewed 2026-09-07: 8 confirmed, 8 changed, 4 left open. The outcome is shown inline and recorded in requirements.md §10 and §11.
Admin → teacher notices with status
New screen from decision Q4: write a notice, pick the audience and category, then move it New → Pending → Solving → Settled, or flag it Unsettled (red). Teachers see the badge on their phone.
Every view and edit, Owner / Super Admin
New screen: who opened what and who changed what, with before / after. Switch to Owner to see Super Admin's view rows disappear. History tabs on Customer and Student show the edit-only slice to every admin role.
Plan
- 1 Glossary, role/navigation map, design tokens and component set done 2026-09-07 01:46
- 2 Prototype: Dashboard, CRM, Timetable (week/year), Room Booking done 2026-09-07 11:55
- 3 Prototype: Products/Enrolment, Invoice/Payment, Fee Run, Salary Run, Settings done 2026-09-07 11:55
- 4 Teacher portal (mobile) screens done 2026-09-07 17:58
- 5 Review with branch admins, update requirements, finalise for build done 2026-09-07 22:42
- 6 Build brief: data model from the mock data, screen-to-section traceability, handover next
Source: requirements.md v0.2. Prototype is static HTML with mock data; nothing here talks to a server.