UI/UX Specification: Redesigning Customer Detail Screen to Member Profile Dashboard

Last Updated: 16/07/2026
Type: UI/UX Redesign Specification — Customer Detail view
System: Saleor CMS — Customers > Customer Details (Member Detail Screen)
Severity: 🔴 High — Refactoring default e-commerce customer views into membership-centric dashboards

Feedback Screenshot:

• Actual UI: The default Saleor dashboard displays e-commerce boxes (Addresses, Orders, generic history)

---

1. Overview & Redesign Strategy

The default Customer Detail view in Saleor CMS is optimized for e-commerce (shipping addresses, orders list, and generic admin note histories).

For the Golden Membership system, this page must be refactored into a Member Profile Dashboard split into 4 specialized information boxes (widgets) that map to membership tiers, point wallets, activity feeds, and referral trees.

---

2. Page Layout & Grid System

┌────────────────────────────────────────────────────────────────────────┐
│  ← Back   Member: Nguyen Van A (GL-DEMO-001)         [Status: Active]  │
├────────────────────────────────────────┬───────────────────────────────┤
│                                        │                               │
│  ① MEMBER INFO BOX                     │  ② MEMBERSHIP TIER BOX        │
│  - Full Name: Nguyen Van A             │  - Current Tier: [ GOLD ]     │
│  - Phone: +84909123456                 │  - YTD Spend: 12,450,000đ     │
│  - Email: a.nguyen@example.com         │  - Points Balance: 4,500 G    │
│  - Birth Date: 12/10/1990  Sex: Male   │  - Unused Vouchers: 3         │
│  - Social Handles:                     │                               │
│    Facebook: fb.com/nguyena            │                               │
│    Kakao: user@kakao.com               │                               │
│    WhatsApp: +84909123456              │                               │
│                                        │                               │
├────────────────────────────────────────┴───────────────────────────────┤
│                                                                        │
│  ③ ACTIVITY HISTORY FEED (Most recent on top)                          │
│  - [16/07/2026 14:30] Transferred 500 GPoints to member +84909876543   │
│  - [15/07/2026 10:15] Won voucher "50K Healing World" from Lucky Spin  │
│  - [12/07/2026 18:00] Used voucher "30K Foot Therapy" at Thao Dien     │
│  - [10/07/2026 09:00] Booked service "Body Massage 90m" at Phu My Hung │
│                                                                        │
├────────────────────────────────────────────────────────────────────────┤
│                                                                        │
│  ④ REFERRAL LIST TABLE (Friends invited by this member)                │
├──────┬──────────────────────┬──────────────────┬───────────┬───────────┤
│  STT │  Invited Member      │  Reward Points   │  Status   │ Expiry    │
├──────┼──────────────────────┼──────────────────┼───────────┼───────────┤
│  1   │  Tran Van B          │  +1,000 GPoints  │  Active   │ 31/12/2026│
│  2   │  Le Thi C            │  0 GPoints       │  Pending  │ —         │
└──────┴──────────────────────┴──────────────────┴───────────┴───────────┘

---

3. Box Component Specifications

3.1 Box ①: Member Info (Thông tin cá nhân)

Contains core user profile properties and linked social media metadata:

• Personal Details: Full Name, Phone Number, Email Address, Birth Date, Gender.
• Account Metadata: Status (Active / Temporarily Suspended), Account Registration Date.
• Social Handles: Render strings saved in the database:
  • Facebook Profile URL
  • Kakao ID/Phone/Email
  • WhatsApp Phone/Username

---

3.2 Box ②: Membership Tier (Hạng thành viên)

Focuses on loyalty metrics and wallet balances:

• YTD Spend (Chi tiêu trong năm): Sum of all transactions completed by this user since January 1st of the current calendar year. Crucial for evaluating tier levels.
• Membership Tier: Large colored badge indicating the active tier (Silver, Gold, Platinum, Diamond).
• GPoints Wallet: Current available point balance.
• Voucher Count: Total number of unredeemed, active vouchers currently in the user's wallet.

---

3.3 Box ③: Activity History Feed (Lịch sử hoạt động)

A chronological list of all member actions, ordered newest on top:

• Format Requirements: Each feed item must consist of a timestamp and a formatted descriptive string:
  • Order dịch vụ [Service Name] tại [Branch Name] lúc [Time]
  • Dùng voucher [Voucher Name] tại [Branch Name] lúc [Time]
  • Nhận quà tặng từ vòng quay [Prize Name] lúc [Time]
  • Chuyển [Amount] point đến member [Recipient Name/Phone] lúc [Time]
  • Nhận [Amount] point từ member [Sender Name/Phone] lúc [Time]

---

3.4 Box ④: Referrals List (Danh sách Giới thiệu)

A standard table listing users who registered using this member's referral code:

• Columns:
  • STT: Row index.
  • Tên member: The name of the invited friend.
  • Số point thưởng: Points awarded to the referrer for this invitation.
  • Trạng thái: Active (friend has completed their first transaction) / Pending (registered but not yet transacted).
  • Ngày hết hạn: Expiration date of the referral reward points, if applicable.

---

Technical Checklist

• Modify the Saleor backend schema to support fetching a consolidated customer profile payload containing referrals lists and aggregated YTD spends.
• Create the new detail view layout in MemberDetailScreen.tsx replacing the standard Addresses and Orders views.
• Build Box ① (Member Info) and bind input states to profile fields.
• Build Box ② (Membership Tier):
  • Fetch points balance, voucher counts, and format the tier badge.
  • Compute YTD spend dynamically from invoice databases.
• Build Box ③ (Activity Feed):
  • Integrate a unified log timeline aggregator query.
  • Write String formatters for: booking orders, voucher usages, lucky spin wins, and point transfers.
• Build Box ④ (Referral Tree):
  • Query table items from User relation where referredById === currentUserId.
  • Add standard STT and status badge formatting.
• Verify responsive behaviors on desktop monitors (no horizontal scrolling issues).