13 — FE Screen Gap Matrix (mockup JPG ↔ app)
2026-07-28 · Đối chiếu 39 JPG root (user audit) với
mobile/+partner/Nguồn: design-index · 11-FE-SURFACE-AUDIT · scan screens Không đếm PDFWELIFE - Mobile App UI-*.pdftrong bản này.
0. Cách đếm
| Khái niệm | Định nghĩa |
|---|---|
| Panel | Một khung UI riêng trên board JPG (list / detail / filter / success / modal…) |
| Có | Có *Screen.tsx (hoặc modal/sheet rõ trong screen) cover panel |
| PARTIAL | Có screen domain nhưng thiếu filter/success/depth so mockup |
| Thiếu | Chưa có screen / component tương ứng |
Quy tắc Auth: mockup bfb028… còn OTP SĐT — product đã chuyển email OTP (WP-AUTH-05 / env). Gap Auth = onboarding/settings/system, không làm lại phone OTP.
1. Tóm tắt số liệu
| Surface | JPG board | Panel design (ước lượng) | Screen FE files | Cover (Có+PARTIAL) | Thiếu rõ |
|---|---|---|---|---|---|
| Consumer | ~25 | ~145–160 | 58 | ~55–70 panel | ~80–100 |
| Partner | ~14 | ~90–110 | 11 | ~25–35 (gộp 1 screen/domain) | ~60–80 |
| Tổng | 39 | ~240–270 | 69 | — | ~140–180 |
Verdict: BE domain IMP; so mockup pixel/board còn thiếu khoảng ½–⅔ panel UI (filter · success/empty · auth shell · Partner depth).
mermaid flowchart LR JPG[39 JPG boards] CON[mobile 58 screens] PAR[partner 11 screens] GAP[Gap 140-180 panels] JPG --> CON JPG --> PAR JPG --> GAP
2. Consumer — ma trận theo JPG
| JPG | Domain | Panel design | FE path / screens | Status | SCR-ID gợi ý (thiếu) |
|---|---|---|---|---|---|
0293115396ae17f04ebf1 · 61a37b62fc9f7dc1248e2 |
D-PLACE | Home map · shortcuts · explore | HomeMapScreen · AllServices · WelifeMap · PlacesNearby · PlaceSearch · PlaceDetail (WP-PLACE-MAP-01/02/SEED-02) |
IMP | Clustering + autocomplete IMP WP-PLACE-MAP-02 · Mapbox geocode live optional |
bfb02874af892ed7779819 |
D-AUTH / USER | ~12: splash · onboard · OTP · location · profile · account · settings · notif · saved · activity · AI | Login · Splash/Onboard/Location/Session · AccountHome · Settings · ActivityHistory · Favorites · Notifications · Assistant |
IMP | SCR-USER-SETTINGS · ACTIVITY · LOGOUT/DELETE IMP WP-FE-AUTH-UI-02 (email OTP) |
868c944613bb92e5cbaa22 |
System | ~14 empty / error / legal | SystemStates · Terms · Privacy · shared StateBlocks |
IMP | SCR-SYS-* IMP WP-FE-SYS-01 |
b6ccd00857f5d6ab8fe430 |
D-ROUTE | 4 nav | RoutingDirections · RouteSteps · RouteActive · WP-FE-ROUTE-05 JPG complete |
IMP | Pixel via JPG · Figma MCP DEFERRED (WP-FE-ROUTE-05-FIGMA-SYNC) |
090d36cbb1363068692713 |
D-RIDES | ride flow | RideHome · RideQuote · RideMatching · RideDetail |
IMP | SCR-RIDE-QUOTE · MATCHING IMP WP-FE-RIDES-03 |
44ba267ea18320dd799235 · 0beb7020f7dd76832fcc7 |
D-FNB | menu/cart/order | MerchantList · MerchantMap · MerchantMenu · Cart · OrderList · OrderTrack · OrderRate |
IMP | SCR-FNB-MAP-PIN · TRACK · RATE IMP WP-FE-FNB-03 |
160bc3ce4433c56d9c2211 |
D-GROCERY | store/checkout | GroceryHome · GroceryStore · GroceryCheckout · GrocerySuccess (+filter sheet) |
IMP | SCR-GROCERY-FILTER · SUCCESS IMP WP-FE-GROCERY-03 |
934d7f88f875792b20645 |
D-HOTEL | ~8 | HotelList · Filter · Saved · Detail · Confirm · Success · Bookings · MapView sheet |
Có | — |
0ea609678e9a0fc4568b23 |
D-RENTAL | list/detail/view | RentalList · RentalDetail · RentalViewings · RentalCompare (+saved) · MapView sheet |
IMP | SCR-RENT-COMPARE · SCR-RENT-SAVED IMP WP-FE-RENT-03/04 |
706f4ba9cc544d0a14459 |
D-SCHOOL | ~9 | SchoolList · SchoolDetail · SchoolConsultations · Filter · Compare · Success · Saved · MapView sheet |
Có | — |
f16b6dadea506b0e32418 · 884bc08f4772c62c9f6325 |
D-MED | ~7 | MedicalList · MedicalEr · MedicalSpecialty · MedicalDoctor · MedicalMap · MedicalChat · MedicalDetail · MedicalAppointments |
IMP | SCR-MED-ER · DOCTOR · SPECIALTY · CHAT · MAP IMP WP-FE-MED-03 |
24c319059ef81fa646e933 · 51ff343eb3c3329d6bd238 |
D-PHARM | list/detail/rx | PharmacyList · PharmacyDetail · PharmacyCart · PharmacySuccess · PharmacyPrescriptions |
IMP | SCR-PHARM-CART · SUCCESS IMP WP-FE-PHARM-03 |
25af5769d09451ca088510 |
D-PARK | nearby/book | ParkingNearby · ParkingLot · ParkingBookings · ParkingPayOk (+filter sheet) |
IMP | SCR-PARK-FILTER · PAY-OK IMP WP-FE-PARK-03 |
2905f7c0703df163a82c4 (CON) |
D-FUEL | ~5 | FuelNearby · Filter · Detail · Route |
Có | — |
6c9b6451e3ac62f23bbd6 |
D-ATM | list/detail/filter | AtmNearbyScreen · AtmDetailScreen (WP-FE-ATM-02/03) |
IMP | Pixel polish header/chips/status/hero IMP |
6183f04777baf6e4afab37 |
D-WALLET / D-SUPPORT | ~8 | WalletHome · WalletTxHistory · WalletTxDetail · WalletPaymentMethods · WalletAddCard · Support* |
IMP | SCR-WALLET-TX/ADD-CARD/METHODS IMP WP-FE-WALLET-04 · SUP FAQ/tickets IMP WP-FE-SUP-02 |
1eabc56a4297c3c99a8621 |
D-WALLET stats | ~3 chi tiêu | WalletExpenseStatsScreen · WalletTxHistoryScreen |
IMP | SCR-WALLET-STATS · SCR-WALLET-CAT · SCR-WALLET-STATS-FILTER |
679afd5e7aa3fbfda2b226 (CON health) |
D-HEALTH | ~3 periodic | HealthHome · HealthVaxDetail · HealthHistory (WP-FE-HEALTH-01/02) |
IMP | Medical /health/vax-* · /health/history · book IMP |
9a1118d49f291e77473812 |
D-SOCIAL | reels/feed | SocialFeed · ReelsFeed · CreatePost · CommentsSheet · SocialProfile · Friends |
IMP | SCR-SOC-CREATE · COMMENTS IMP WP-FE-SOC-02/04 |
Consumer — FE files hiện có (58)
auth/ Login · TwoFaSetup · home/ HomeMap · AllServices · ServiceStub · places/ WelifeMap · PlacesNearby · PlaceSearch · PlaceDetail · fnb/ ×7 · grocery/ ×4 · hotels/ ×3 · rentals/ ×4 · schools/ ×3 · medical/ ×3 · pharmacy/ ×3 · parking/ ×3 · fuel/ FuelNearby · atm/ ×2 · rides/ ×2 · routing/ Directions · wallet/ WalletHome · TxHistory · TxDetail · PaymentMethods · AddCard · support/ Support · Faq · Tickets · Create · Detail · profile/ AccountHome · ProfileEdit · notifications/ · favorites/ · assistant/ · reviews/ · promotions/ · kyc/ · addresses/ ×2 · social/ Feed · Reels · CreatePost · CommentsSheet · Friends · Profile · chat/ ×3 · shared/ Placeholder.
3. Partner — ma trận theo JPG
| JPG | Domain | Panel design | FE | Status | SCR-ID gợi ý (thiếu) |
|---|---|---|---|---|---|
197070b6f74b76152f5a20 · 2debcf2d48d0c98e90c139 · ad9d5058d7a556fb0fb436 · c884bd423abfbbe1e2ae18 |
D-FNB PAR | dashboard/orders/menu/revenue/settings (~20+) | FnbPartnerScreen multi-tab + form/staff/stock/revenue |
IMP | SCR-PAR-FNB-MENU-FORM · SCR-PAR-FNB-REVENUE · SCR-PAR-FNB-STAFF · SCR-PAR-FNB-STOCK |
2905f7c0703df163a82c4 · 7971a4b42349a217fb5834 |
D-FUEL PAR | ~14 | FuelPartnerScreen multi-tab (overview/prices/stock/staff/more) |
IMP | SCR-PAR-FUEL-STAFF · SCR-PAR-FUEL-STOCK · SCR-PAR-FUEL-IMAGES · SCR-PAR-FUEL-REVIEWS |
031df9d87e25ff7ba63431 · 1b58659ce261633f3a7014 · 5ad2d51752ead3b48afb15 |
D-PARK PAR | multi | ParkingPartnerScreen multi-tab (overview/vehicles/slots/rev/settings) |
IMP | SCR-PAR-PARK-INOUT · SCR-PAR-PARK-SLOTS · SCR-PAR-PARK-REV |
14e5e62061dde083b9cc17 · 40e75426d3db52850bca16 |
D-HOTEL PAR | multi | HotelPartnerScreen multi-tab (overview/bookings/rooms/cal/rev) |
IMP | SCR-PAR-HOTEL-ROOMS · SCR-PAR-HOTEL-CAL |
cfcfca054df8cca695e932 · 2e0177c0f03d7163282c24 |
Landlord | ~5 | RentalPartnerScreen multi-tab (list/rev/room/profile) |
IMP | SCR-PAR-RENT-LIST · SCR-PAR-RENT-REV · SCR-PAR-RENT-ROOM · SCR-PAR-RENT-PROFILE |
f31123d7a42a25747c3b28 |
D-SCHOOL PAR | ~10 | SchoolPartnerScreen multi-tab (overview/students/schedule/finance/account) |
IMP | SCR-PAR-SCH-STUDENTS · SCR-PAR-SCH-FINANCE · SCR-PAR-SCH-SCHEDULE · SCR-PAR-SCH-RATINGS |
56cd580cdff15eaf07e027 |
D-PHARM PAR | kho/toa | PharmacyPartnerScreen multi-tab (overview/orders/stock/revenue/account) |
IMP | SCR-PAR-PHARM-STOCK · SCR-PAR-PHARM-VERIFY |
679afd5e7aa3fbfda2b226 (PAR) |
D-MED PAR | BN/lịch/DT | MedicalPartnerScreen multi-tab (WP-FE-PAR-MED-02) |
IMP | Patient profile depth / hồ sơ BN (optional) |
Partner pattern: FNB→MED multi-tab IMP (WP-FE-PAR-MED-02).
4. Ưu tiên WP tiếp (soft queue — không phải BE STUB)
| # | WP | Surfaces | Mục tiêu | JPG | Status |
|---|---|---|---|---|---|
| 1 | WP-FE-AUTH-UI-01 | CON | Splash · Onboarding · Location perm · Session expired · Logout/Delete — email OTP, không phone | bfb028… · 868c… |
IMP |
| 2 | WP-FE-SYS-01 | CON | Empty / offline / GPS / pay states · Terms · Privacy (shared) | 868c… |
IMP |
| 3 | WP-FE-SCH-03 | CON | Filter + Compare + Book success | 706f… |
IMP |
| 4 | WP-FE-HOTEL-03 | CON | Filter + Confirm + Success | 934d… |
IMP |
| 5 | WP-FE-FUEL-03 | CON | Detail + Filter + Route | 2905… |
IMP |
| 6 | WP-FE-WALLET-03 | CON | Expense stats (nếu giữ module) | 1eabc… |
IMP |
| 7 | WP-FE-PAR-FNB-02 | PAR | Tách FNB Partner multi-tab theo JPG | 1970… / c884… |
IMP |
| 8 | WP-FE-PAR-FUEL-02 | PAR | Tách Fuel Partner multi-tab theo JPG | 7971… |
IMP |
| 9 | WP-FE-PAR-PARK-02 | PAR | Tách Parking Partner multi-tab theo JPG | 031d… |
IMP |
| 10 | WP-FE-PAR-HOTEL-03 | PAR | Tách Hotel Partner multi-tab (rooms/calendar) | 14e5… |
IMP |
| 11 | WP-FE-PAR-RENT-03 | PAR | Landlord Partner multi-tab | cfcf… |
IMP |
| 12 | WP-FE-PAR-SCH-02 | PAR | School Partner multi-tab (students/schedule/finance/ratings) | f311… |
IMP |
| 13 | WP-FE-PAR-PHARM-02 | PAR | Pharmacy Partner multi-tab (verify/stock) | 56cd… |
IMP |
Khi tiếp: WP-FE-AUTH-UI-02 IMP → soft CON gap matrix gần hết · DONE_QUEUE (hoặc polish/bugfix theo ưu tiên product).
5. Liên kết
| Doc | Vai trò |
|---|---|
| design-index.md | JPG → domain |
| 08-FE-ROADMAP-FIGMA-MATRIX.md | Quy tắc SCR · nav |
| 11-FE-SURFACE-AUDIT.md | Coverage IMP MVP |
| 12-NEXT-WORK-PLAN.md | Soft WP tiếp theo |
| 09-AGENT-AUDIT-QUEUE.md | Gate «tiếp» |
6. Definition of Done (gap doc)
- Bảng CON + PAR có Status
Có|PARTIAL|Thiếu - Ước lượng thiếu ~140–180 panel
- Soft WP #1–7 ghi rõ
- (Optional) Đếm panel từng JPG bằng checklist PDF UI-1…40 — ngoài scope bản này