Skip to main content

Audit Toàn Diện App So Với Tài Liệu Và Figma

Cập nhật: 2026-05-07
Phạm vi: mobile Expo app trong repo GoldenLotusApp.

Nguồn Đối Chiếu​

  • Tài liệu nghiệp vụ: docs/Phu luc 01. PSA 06.04.26 App membership.txt
  • Tracking hiện tại: docs/PROJECT_TRACKING.md
  • Audit Figma/PDF trước đó: docs/FIGMA_PDF_AUDIT.md
  • Design tokens: docs/DESIGN_SYSTEM.md, shared/design/colors.ts
  • Figma/PDF local: Spa.pdf, figma-exports/page-*.png

Kết Quả Check Kỹ Thuật​

  • npx tsc --noEmit: pass
  • npm run lint: pass
  • npm run test:smoke: pass
  • Android build/run gần nhất đã chạy được trên emulator.
  • iOS chưa audit runtime vì repo hiện không có native ios/ project.

Kết Luận Ngắn​

App hiện là MVP/demo UI đã có khung màn hình chính, navigation và nhiều màn bám Figma ở mức tương đối. Tuy nhiên app chưa thể xem là hoàn tất theo tài liệu nghiệp vụ vì phần lớn dữ liệu vẫn đi qua mock/fallback, nhiều tích hợp quan trọng chưa có contract hoặc chưa nối thật: OTP/SMS, Google/Apple login thật, profile social contact, Firebase notification, Zalo/ZNS/OA, payment gateway, QR payment, lucky wheel, campaign/admin-driven data.

Về Figma, các màn Login/Home/Voucher/Booking/Account đã có bản dựng gần, nhưng chưa pixel pass toàn bộ. Một số drift đang rõ: header brown chưa khớp PDF, booking form còn sai field/chips, voucher art lệch màu, bottom nav vừa chỉnh lại active/inactive nhưng chưa lấy đủ thông số gradient active từ Figma.

Audit Theo Tài Liệu Nghiệp Vụ​

NhómTrạng thái codeGap chính
Đăng ký/quên mật khẩuCó màn và routeUI còn generic/English ở vài chỗ, chưa có API thật, chưa có OTP flow
Đăng nhập Google/Apple/SMS OTPCó UI loginLogin đang set mock token; Google/Apple chưa tích hợp provider thật; OTP SMS chưa có
Profile/update userCó account/profile/settings/edit-ish routesThiếu flow update profile đầy đủ theo Figma page 50; thiếu WhatsApp/Viber/Kakao fields thật
Chuyển chi nhánh/mapCó map/branch mockMap URL dùng key=placeholder; chưa có branch context thật để reload dữ liệu theo chi nhánh
Tích điểm/rank/voucherCó Point/Rank/VoucherRule điểm/hạng/thời hạn vẫn mock; chưa có lịch sử điểm hết hạn thật
Promotion banners từ adminCó home banner/mockChưa nối admin/API; asset/content còn mock
Dịch vụ và booking dịch vụCó service list/detail/bookingBooking chưa đúng form Figma hoàn toàn; chưa có submit API/payment status thật
Voucher detail/redeem/QRCó màn list/detail/redeem/QRQR/barcode đang vẽ placeholder, chưa QR thật từ API
Payment gateway/QR paymentChưa đủChưa có vendor, API contract, trạng thái thanh toán, reconciliation
Notification/Firebase/SMS/EmailCó notification list mockCòn lorem ipsum; chưa Firebase, SMS/email/Zalo status
Zalo/ZNS/OA reminderChưa có mobile integrationMới nằm trong tài liệu, chưa có code/API
Cài đặt appCó settings/privacyCần hoàn thiện preferences/security/language/notification
Vòng quay may mắnChưa cóChưa có PRD/rule UI/API/history

Audit Theo Figma/PDF​

Login​

Code: features/auth/screens/LoginScreen.tsx

  • Đã gần Figma page 01: nền dark, language selector, phone/email input, nút tiếp tục, đăng ký, Google/Apple.
  • Gap: Google icon chưa multicolor; social login chưa thật; auth error/loading/session restore chưa đủ.

Home​

Code: features/home/screens/HomeScreen.tsx, features/home/components/*

  • Đã gần Figma page 34 về cấu trúc: member header, stats, banner, shortcut, branch/event/discount sections, bottom tab.
  • Gap: HomeScreen.tsx còn hard-code points={100000000}; banner/content vẫn mock; header brown #5A3600 tối hơn PDF gần #634715; cần screenshot pixel pass từng section.

Bottom Tab​

Code: app/(tabs)/_layout.tsx

  • Đã phân biệt active/inactive: active dùng #EAA31F, inactive dùng #555555, surface #FFFFFF, Point center circle #E7BB65.
  • Đã sửa icon các tab thường sang Ionicons filled/outline để active rõ hơn và đồng nhất hơn.
  • Gap: Figma active Home có style màu/gradient trong selection (gradient test + primary/primary-700); code hiện dùng solid gold cho icon/label. Nếu cần pixel-perfect phải lấy stop gradient chính xác từ Figma.
  • Gap: một số màn ngoài tab chính vẫn có bottom nav tự vẽ riêng, không dùng shared Expo tab bar.

Voucher​

Code: features/vouchers/screens/VoucherScreen.tsx, features/offers/screens/*

  • Đã gần Figma page 17: header, tab, card, dashed separator.
  • Gap: voucher art trong mock #FF6468, PDF gần #ED7672; QR/detail/redeem còn placeholder; cần đảm bảo list không bị bottom tab che card cuối.

Booking​

Code: features/booking/screens/LocationScreen.tsx, TimeScreen.tsx, CartScreen.tsx, ScheduleScreen.tsx

  • Layout chính gần Figma page 43/44.
  • Gap rõ:
    • Email liên hệ chưa required trong validation/button state.
    • Chọn dịch vụ đang là TextInput, Figma là select có chevron.
    • branchList chips xuất hiện trong form chính, Figma page 43 không có block này.
    • Chưa có submit booking API thật và chưa có reminder/payment workflow.

Account/Profile​

Code: features/profile/screens/AccountScreen.tsx, ProfileScreen.tsx, SettingsScreen.tsx

  • Account gần Figma page 51: profile card, menu sections, logout, app version.
  • Gap: profile edit page 50 chưa pixel pass đầy đủ; avatar/profile card spacing cần chỉnh; social fields WhatsApp/Viber/Kakao chưa thành dữ liệu thật.
  • Gap: ProfileScreen.tsx còn bottom nav riêng, dễ lệch với tab bar chính.

Membership/Point/Rank​

Code: features/membership/screens/PointScreen.tsx, RankScreen.tsx

  • Có màn rank/point và mock tier/summary.
  • Gap: rule hạng Silver/Gold/Platinum/Diamond, thời hạn giữ hạng, điểm hết hạn, lịch sử nhận/tiêu điểm chưa nối thật.
  • Header brown vẫn hard-code #5A3600.

Notifications/Social​

Code: features/notifications/*, features/social/*

  • Có màn danh sách và social/feed skeleton.
  • Gap: notification mock còn lorem ipsum; chưa Firebase payload/status; social screens còn mock; cần empty/loading/error state đúng nghiệp vụ.

Services/Branches/Map​

Code: features/services/*, features/branches/*

  • Có list/detail/map mock.
  • Gap: branch switching chưa là state toàn app; map static URL dùng placeholder key; chưa reload dịch vụ/promotion theo chi nhánh thật.

Design System Drift​

  • Có design tokens trong shared/design/colors.ts, nhưng nhiều màn vẫn hard-code màu trực tiếp (#5A3600, màu social, màu status, màu tab).
  • headerBrown đang là #5A3600; PDF render gần #634715/#654917. Cần chốt token chính thức rồi thay toàn app.
  • constants/theme.ts còn màu template Expo (#0a7ea4), nên dọn hoặc nối lại vào token chính.
  • Bottom tab đã sửa theo trạng thái active/inactive, nhưng còn token cục bộ trong _layout.tsx. Nên chuyển về design system sau khi chốt Figma.

Data/API Drift​

  • Nhiều module export/use mocks.ts: membership, profile, services, social, branches, notifications, offers, booking, vouchers, home.
  • features/auth/screens/LoginScreen.tsx set mock_access_token_123 và fake user, nên auth chưa thật.
  • EXPO_PUBLIC_USE_MOCK là đúng hướng cho dev, nhưng cần API contract và test mode rõ để không lẫn demo với staging/production.

Ưu Tiên Sửa​

P0 - Chốt Source Of Truth​

  1. Chốt Figma file/node nào là bản chính cho từng màn.
  2. Chốt token màu chính thức: gold active, inactive text/icon, header brown, voucher red, cream/surface.
  3. Chốt API contract tối thiểu cho auth/profile/home/voucher/booking.

P1 - Pixel Pass MVP​

  1. Bottom tab: dùng shared component/token, xoá bottom nav tự vẽ ở Map/Profile/Social hoặc chuyển màn đó vào cùng tab/nav pattern.
  2. Booking page 43: email required, service select, bỏ branch chips khỏi form chính.
  3. Home: bỏ hard-code point, dùng dashboard/user data, chuẩn header brown/banner.
  4. Voucher/Offer: chỉnh voucher art, QR thật/placeholder trung thực, padding tránh bị tab che.
  5. Account/Profile edit: page 50/51 pixel pass và thêm social fields đúng tài liệu.

P2 - Tích Hợp Thật​

  1. Auth provider: OTP SMS, Google/Apple, refresh/logout/session restore.
  2. Branch/service data theo chi nhánh.
  3. Booking submit, lịch sử đặt, payment gateway/QR payment status.
  4. Notification Firebase + SMS/email/Zalo OA/ZNS status.
  5. Membership point/rank/voucher rule và point expiry.

P3 - Scope Chưa Có​

  1. Lucky wheel PRD/UI/API.
  2. Marketing campaign segmentation từ admin.
  3. Notification preferences/security settings.
  4. iOS native/runtime verification.

Kết Luận Hành Động​

Nếu mục tiêu là demo tiếp: ưu tiên P1 pixel pass và bỏ placeholder lộ trên UI.
Nếu mục tiêu là build staging thật: ưu tiên P0/P2 API contract trước, sau đó mới đóng pixel pass để tránh chỉnh UI nhiều lần khi data shape thay đổi.