Specification: Redesign "Overview" Dashboard — CMS Golden Lotus
Last Updated: 15/07/2026
Type: CMS Dashboard Redesign — Overview (Home)
System: Saleor CMS — Golden Lotus Menu > Overview
Current State Reference Screenshots:
- Current Dashboard (top): Sales over time + Upcoming appointments
- Current Dashboard (bottom): Top services + Top team member
1. Current Issues
The "Overview" dashboard currently displays widgets focused on BFF Admin (bookings, appointments, sales revenue) which do not serve the management needs of the Golden Membership system:
| Existing Widget | Keep? |
|---|---|
| Total sales over time (revenue) | ❌ Remove |
| Upcoming appointments | ❌ Remove |
| Appointments activity | ❌ Remove |
| Today's next appointments | ❌ Remove |
| Top services | ✅ Keep — Redesign into "Top 10 Most Booked Services" |
| Top team member | ❌ Remove |
2. New Dashboard Layout
Global Filter — Month Selector
[!IMPORTANT] The entire dashboard depends on a single global month selector placed at the top of the page. The default value is the current month. Changing this filter will update all widgets, charts, and tables simultaneously.
Overview | [ < ] July / 2026 [ > ] ▼ (dropdown month/year picker)
Page Wireframe Layout
┌─────────────────────────────────────────────────────────────────┐
│ OVERVIEW [< July 2026 >] ← Global Filter │
├──────────────────────────┬──────────────────────────────────────┤
│ │ │
│ Member Tiers Chart │ Top 10 Most Booked Services │
│ (Bar Chart + labels) │ (Ranked Table) │
│ │ │
├──────────────────────────┴──────────────────────────────────────┤
│ │ │
│ Top Lucky Spin Prizes (Most won first) │
│ (Ranked Table) │ │
│ │ │
├──────────────────────────┴──────────────────────────────────────┤
│ │
│ Top Memberships — Top 10 Members by Point Accrual │
│ (Detailed List Table) │
│ │
└─────────────────────────────────────────────────────────────────┘
3. Widget Details
3.1 Member Tiers Chart
Type: Vertical Bar Chart
Data:
- X-axis: Membership Tiers —
Silver|Gold|Platinum|Diamond - Y-axis: Number of members
- Data Labels: Display the member count directly on top of each bar (no hover required).
Color Tokens:
| Tier | Color |
|---|---|
| Silver | #A8A8A8 (Silver Grey) |
| Gold | #D4AF37 (Gold/Bronze) |
| Platinum | #8E8E93 (Platinum Grey) |
| Diamond | #5BC4FF (Diamond Blue) |
Sample Representation:
245
│ 189
│ │ 42
│ │ │ 8
Silver Gold Plat Dia
KPI Metadata:
- Total active members in the selected month
- % change compared to the previous month (↑↓ indicator)
3.2 Top 10 Most Booked Services
Type: Ranked List Table
| Column | Description |
|---|---|
| # | Rank (1–10) |
| Service Name | Full name (e.g., Healing World Massage) |
| Total Bookings | Total appointments booked in the selected month |
| MoM Trend | Change count + ↑↓ indicator |
Sorting: Descending by total bookings
Extra Filter: Branch selector dropdown (All / TP.HCM / Da Nang / ...)
3.3 Top Lucky Spin Prizes
Type: Ranked Table
Description: Lists spin wheel prizes ordered by frequency of wins in the selected month (most won first).
| Column | Description |
|---|---|
| # | Rank |
| Prize Name | e.g., "500 GPoints", "Voucher 50K Healing World", "Try Again" |
| Type | Point / Voucher / Other |
| Win Count | Total times this prize was won in the month |
| Win Rate | % = (win count / total spins) × 100 |
| Remaining Stock | Current quantity left in inventory (stock) |
Sorting: Descending by win count
Goal: Helps Admin quickly identify which prize slots are running low on stock.
3.4 Top Memberships — Top 10 Members by Point Accrual
Type: Detailed List Table
Description: Lists the top 10 members who accumulated the most GPoints in the selected month.
| Column | Description |
|---|---|
| # | Rank (1–10) |
| Member Name | Full name |
| Phone Number | Masked phone number (e.g., 09xx...xxx) |
| Current Tier | Silver / Gold / Platinum / Diamond (colored badges) |
| Points Accrued (Month) | Total GPoints earned within the selected month |
| Current Balance | Total GPoint wallet balance |
Sorting: Descending by points accrued in the month
Interaction: Clicking a row navigates to the member's detailed profile page.
4. API Endpoints (Backend)
// All endpoints accept query parameter: ?month=YYYY-MM
GET /api/cms/dashboard/member-tiers?month=2026-07
// → { silver: 245, gold: 189, platinum: 42, diamond: 8, total: 484, vs_last_month: +12% }
GET /api/cms/dashboard/top-services?month=2026-07&branch=all&limit=10
// → [{ rank, service_name, bookings, vs_last_month }, ...]
GET /api/cms/dashboard/top-spin-prizes?month=2026-07&limit=all
// → [{ rank, prize_name, type, win_count, win_rate, stock_remaining }, ...]
GET /api/cms/dashboard/top-members?month=2026-07&limit=10
// → [{ rank, name, phone_masked, tier, points_this_month, total_points }, ...]
5. Technical Checklist
Global Filter:
- Add the Month Picker at the top of the Overview screen (defaults to the current month).
- Ensure all API requests append
?month=YYYY-MMwhenever the filter changes. - Render loading skeletons for all widgets during month updates to prevent flash of old content.
Member Tiers Chart:
- Build a Vertical Bar Chart for Silver, Gold, Platinum, and Diamond.
- Render member count data labels directly on top of each bar.
- Assign distinct brand colors to the bars (Silver / Gold / Plat / Dia).
- Display MoM percentage change.
Top 10 Services:
- Render a table for the top 10 most booked services.
- Include the MoM trend column with ↑↓ icons.
- Implement the branch filter dropdown.
Top Lucky Spin Prizes:
- Render a table ranking prizes from most won to least won.
- Calculate and display the actual win rate (%) and current remaining stock.
- Highlight low stock warnings when
stock <= 5%(e.g., using red/orange styling).
Top Memberships:
- Render a table of the top 10 members by monthly point accrual.
- Mask the middle digits of phone numbers.
- Add color badges matching membership tiers.
- Handle row tap navigation to the user detail page.
Deprecate Old Widgets:
- Remove/Hide: Total sales over time, Upcoming appointments, Appointments activity, Today's next appointments, Top team member.