Skip to main content

Audit UI Theo Spa.pdf

Cập nhật: 2026-05-06

Nguồn so sánh local: Spa.pdf, 60 trang, mỗi frame gốc khoảng 440 x 956. Đã render tạm bằng PDFKit vào /tmp/spa_pdf_pages_upright/page-*.png.

Frame Chính​

  • Login: page 01
  • Home: page 34
  • Voucher list: page 17
  • Voucher QR/detail: page 20, page 32, page 36
  • Booking form: page 43
  • Booking branch/service: page 44
  • Profile edit: page 50
  • Account: page 51
  • Membership: page 41, page 42
  • Notifications: page 33
  • Events/Social: page 38, page 39, page 48, page 49

Token Màu Đọc Từ PDF​

  • Login background: khoảng #2D2109
  • Main surface/card: #FFFEFC
  • Cream page background: khoảng #FDF9F2
  • Home gray background: khoảng #F6F6F6
  • Gold button/accent: khoảng #E0A641 đến #EAA31F
  • Header/profile brown render từ PDF: khoảng #634715 đến #654917
  • Voucher art red: khoảng #ED7672

Token hiện tại trong shared/design/colors.ts tương đối gần cho surface/cream/gold, nhưng còn thiếu token riêng cho dark login background. Header brown hiện đang dùng #5A3600, tối hơn PDF render một chút.

Login - page 01​

Trạng thái: đã chỉnh theo PDF page 01, cần pixel fine-tune nhỏ nếu muốn sát hơn.

Code hiện tại: features/auth/screens/LoginScreen.tsx.

Đã chỉnh:

  • Nền dark brown #2D2109, không còn logo/brand ở giữa.
  • Có language selector góc phải trên: cờ Việt Nam + chevron.
  • Title là Truy cập bằng số điện thoại hoặc email, font bold lớn, nằm khoảng giữa màn theo trục dọc.
  • Input placeholder là Nhập số điện thoại, nền trong suốt/dark, border xám.
  • Có nút chính Tiếp tục, nút outline Đăng ký, và hai social buttons Sign in with Google, Sign in with Apple.
  • App mặc định tiếng Việt để khớp thiết kế PDF.

Đã verify trên Android emulator bằng screenshot sau build/run. Screenshot local mới nhất: /tmp/goldenlotus_login_final.png.

Fine-tune còn lại:

  • Google icon hiện là chữ G đơn sắc xanh, chưa phải logo Google multicolor.
  • Có thể tinh chỉnh thêm vài pixel ở language selector nếu làm pixel pass cuối.

Home - page 34​

Trạng thái: khá gần.

Code hiện tại: features/home/screens/HomeScreen.tsx và features/home/components/*.

Điểm khớp:

  • Header cao khoảng 120.
  • Stats bar, voucher chip, QR/notification icon tương đối đúng vị trí.
  • Banner cao khoảng 201, radius 10.
  • Shortcut card cao khoảng 121, 3 cột.
  • Branch/Event/Healthy & Beauty theo đúng thứ tự.
  • Bottom tab đang đúng cấu trúc 5 item, Point ở giữa nổi bật.

Khác biệt cần kiểm tra/chỉnh:

  • Header brown trong code #5A3600, PDF render gần #634715.
  • PDF banner page 34 là placeholder đỏ BANNER; code đang dùng mock image.
  • Một số font size title section cần giữ đúng 26/24/20/18 theo token, tránh dùng style tự do ngoài shared/design.
  • Cần kiểm tra bằng screenshot emulator sau khi build vì Home phụ thuộc asset/mock.

Voucher - page 17​

Trạng thái: gần.

Code hiện tại: features/vouchers/screens/VoucherScreen.tsx.

Điểm khớp:

  • Header title Voucher của bạn.
  • Tab: Chưa sử dụng, Quà tặng, Đã sử dụng, Hết hạn.
  • Card width khoảng 400 trên frame 440, margin ngang khoảng 20.
  • Card trắng, shadow nhẹ, art vuông đỏ bên phải, expiry row có dashed separator.

Khác biệt cần chỉnh:

  • Header brown tối hơn PDF một chút.
  • Màu voucher art trong mock #FF6468, PDF render gần #ED7672.
  • Cần đảm bảo bottom tab không bị che card cuối khi list dài.

Booking - page 43​

Trạng thái: gần layout chính, còn lỗi UI rõ.

Code hiện tại: features/booking/screens/LocationScreen.tsx.

Điểm khớp:

  • Header Đặt lịch dịch vụ, back icon trắng, tab 2 cột.
  • Form card width/margin/radius gần PDF.
  • Step title, progress row, input height, button row gần PDF.

Khác biệt cần chỉnh:

  • PDF có Email liên hệ *, code hiện không đánh dấu required cho email.
  • PDF page 43 không hiển thị branch chips dưới field Chọn chi nhánh; code đang render branchList, làm form dài và khác bố cục.
  • Header brown cần đồng bộ token với PDF.
  • Code cho field Chọn dịch vụ đang là TextInput; PDF thể hiện dạng select có chevron.

Account - page 51​

Trạng thái: gần.

Code hiện tại: features/profile/screens/AccountScreen.tsx.

Điểm khớp:

  • Profile card nâu, avatar nổi lên phía trên.
  • Menu card Tiện ích, Dành cho bạn, Cài đặt.
  • Logout button và app version đúng cấu trúc.
  • Bottom tab account active.

Khác biệt cần chỉnh:

  • Header/card brown code #5A3600, PDF render gần #654917.
  • Card profile trong PDF bắt đầu thấp hơn một chút và avatar lớn hơn cảm giác code.
  • Cần kiểm tra icon set và spacing row trên emulator vì PDF dùng stroke icon rất mảnh.

Profile Edit - page 50​

Trạng thái: cần kiểm tra tiếp.

Frame page 50 cho thấy màn Chỉnh sửa thông tin có:

  • Back icon trái, title center.
  • Card trắng lớn, avatar tròn, nút Thay đổi ảnh đại diện.
  • Các field required: Họ tên, Ngày sinh, Giới tính, Số điện thoại, Địa chỉ email.
  • Email disabled nền xám.
  • Social link icons: WhatsApp, Kakao Talk, Viber.
  • Bottom fixed button Cập nhật.

Màn này cần so riêng với features/profile/screens/ProfileScreen.tsx.

Kết Luận Ưu Tiên​

  1. Rewrite Login theo page 01.
  2. Chỉnh Booking page 43: email required, service select, bỏ branch chips khỏi form chính hoặc chuyển vào flow chọn branch riêng.
  3. Chuẩn hóa token dark login background và cân lại header brown theo PDF export.
  4. Chạy screenshot emulator cho Home/Voucher/Account để xác nhận các màn đã gần PDF trước khi sửa sâu.