UI Design — prototype hub
Phase 1 foundations (vocabulary, who sees what, tokens, components) plus the Phase 2 and 3 clickable admin screens built on them. Start with the Dashboard 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 shell template
Top bar with branch, scrollable body, four-tab bottom bar, attendance buttons sized for thumbs.
v1.5 — not designed yet
Reserved in the navigation map so Phase 4 work does not need to reshuffle anything.
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.
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 next
- 5 Review with branch admins, update requirements, finalise for build
Source: requirements.md v0.1. Prototype is static HTML with mock data; nothing here talks to a server.