# Navi Visual Match Report

Audit date: 2026-05-05

Design source: `docs/design/Navi_compressed.pdf`

Important implementation rule followed: the exported page PNGs in `assets/navi/pdf-pages` are reference-only. The mobile app uses real React Native views, text, buttons, navigation, API calls, native camera/gallery/dialer/map/share actions, and cropped reusable image assets from `assets/navi/*`.

## Asset Extraction Summary

- PDF reference pages exported: 25
- Cropped reusable image assets exported: 65
- Page reference folder: `assets/navi/pdf-pages`
- Cropped asset folders: `assets/navi/logos`, `assets/navi/onboarding`, `assets/navi/destinations`, `assets/navi/hotels`, `assets/navi/experiences`, `assets/navi/services`, `assets/navi/food`, `assets/navi/pharmacy`, `assets/navi/grocery`, `assets/navi/sim`, `assets/navi/profile`, `assets/navi/translator`, `assets/navi/trip-planner`
- Extraction script: `scripts/extract_navi_pdf_pages.py`
- Central mobile asset map: `apps/mobile/src/assets/naviAssets.ts`

## Page Match Matrix

| PDF page | Implemented screen | Reference image path | Extracted assets used | Toolbar variant used | Bottom tab variant used | What matches | What was improved | Known difference | Status |
|---:|---|---|---|---|---|---|---|---|---|
| 1 | Splash | `assets/navi/pdf-pages/page-01-splash.png` | `logos/navi-app-icon.png` | None | None | Logo, Navi name, tagline, initializing state | Uses routed session logic instead of static loader | Animation still simple | Partial |
| 2 | Onboarding Discover | `assets/navi/pdf-pages/page-02-onboarding-discover.png` | `onboarding/onboarding-burj-khalifa.png` | Inline onboarding header | None | Large UAE image, Skip, Next, dots, title/body | Real onboarding persistence and guest browsing | Header not yet moved to `NaviHeader` | Partial |
| 3 | Onboarding Planner | `assets/navi/pdf-pages/page-03-onboarding-planner.png` | `onboarding/onboarding-map-planner.png` | Inline onboarding header | None | Planner visual, Back, Skip, Next | Real route state between steps | CMS onboarding API still missing | Partial |
| 4 | Onboarding Services | `assets/navi/pdf-pages/page-04-onboarding-services.png` | `onboarding/onboarding-delivery-scooter.png` | Inline onboarding header | None | Services image, Get Started flow | Routes to real login and preserves onboarding state | CMS onboarding API still missing | Partial |
| 5 | Login | `assets/navi/pdf-pages/page-05-login.png` | `logos/navi-app-icon.png` through splash/brand system | Center title header | None | Email/password validation, forgot password, create account | Real login API, secure session, guest browse | Social auth still not implemented/should be feature flagged | Partial |
| 6 | Register | `assets/navi/pdf-pages/page-06-register.png` | Logo asset available globally | Center title header | None | Form fields, terms checkbox, create account | Real signup API and OTP route | Social registration and confirm-password field still missing | Partial |
| 7 | Home | `assets/navi/pdf-pages/page-07-home.png` | `home-hero-emirates.png`, `home-rak-offer.png`, home featured images through cards | Brand header | Customer tabs | Brand header, hero, search, services, offer, featured rail, Emirates chips | Rebuilt as native UI with API-backed cards | Home CMS/banner API missing | Improved partial |
| 8 | Discover | `assets/navi/pdf-pages/page-08-discovery.png` | Discovery listing crops through card asset map | Center title header | Customer tabs | Search, filters, listing cards, save hearts | Start Planning now routes to trip planner | Backend `/search` endpoint still missing; filters are local | Partial |
| 9 | Luxury Stays | `assets/navi/pdf-pages/page-09-luxury-stays.png` | `hotel-atlantis-royal-card.png`, `hotel-qasr-al-sarab-card.png` | Center title header | None on service stack | Image-led stay cards and Select Room CTA | Uses local PDF crops through central asset map | Date/guest/price filters still missing | Partial |
| 10 | Experiences | `assets/navi/pdf-pages/page-10-experiences.png` | `experience-desert-safari.png`, `experience-burj-khalifa.png`, category assets | Center title header | None on service stack | Experience imagery and listing flow | Cards use API data with extracted image fallbacks | Category tile section and offers still incomplete | Partial |
| 11 | Taxi | `assets/navi/pdf-pages/page-11-taxi.png` | `services/taxi-map-preview.png` | Center title header | None on service stack | Taxi visual and tier listing | Avoids pretending live driver flow exists | Map pickup/destination/estimate API missing | Partial |
| 12 | Food | `assets/navi/pdf-pages/page-12-food.png` | `food-golden-grill.png`, `food-pasta-pizza.png`, `food-zen-sushi.png` | Center title header | None on service stack | Food imagery and restaurant catalog | Keeps ordering disabled with real reason until Orders API exists | Food-specific tabs/cart/menu missing | Partial |
| 13 | Pharmacy | `assets/navi/pdf-pages/page-13-pharmacy.png` | `pharmacy-prescription-card-bg.png`, product crops | Center title header | None on service stack | Pharmacy visual and compliance note | Controlled medication warning preserved | Private prescription upload API still missing | Partial |
| 14 | Grocery | `assets/navi/pdf-pages/page-14-grocery.png` | Grocery product/banner crops | Center title header | None on service stack | Grocery imagery through service cards | Corrects non-UAE copy by using UAE/service wording | Product grid/cart/checkout missing | Partial |
| 15 | SIM Cards | `assets/navi/pdf-pages/page-15-sim-cards.png` | `sim/sim-hero-banner.png` | Center title header | None on service stack | SIM hero and plan cards | Real route/catalog cards | Dedicated SIM order/activation API missing | Partial |
| 16 | Emergency | `assets/navi/pdf-pages/page-16-emergency.png` | No photo asset required | Center title header | None | Emergency cards and Call Now native dialer | API fallback keeps page usable offline | Location share card not implemented | Improved partial |
| 17 | Profile | `assets/navi/pdf-pages/page-17-profile.png` | `profile/profile-avatar-sample.png` | Center title header | Customer tabs | Avatar/profile/preferences/settings/logout | Help and privacy now route to real screens | Full profile stats/activity API still missing | Improved partial |
| 18 | Saved Destinations | `assets/navi/pdf-pages/page-18-saved-destinations.png` | Saved destination crops through card asset map | Center title header | Customer tabs | Saved listing/destination cards | Real saved API integration | Saved/Trips tabs and filters still missing | Partial |
| 19 | Image Translator | `assets/navi/pdf-pages/page-19-image-translator.png` | `translator/translator-camera-preview.png` | Center title header | Translator tab set defined, not mounted | Camera frame, gallery/camera native actions, translate API, history route | Uses native camera/gallery and real translation history API | Dedicated translator bottom tabs/settings screen not mounted yet | Improved partial |
| 20 | Trip Planner Step 1 | `assets/navi/pdf-pages/page-20-trip-planner-step-1.png` | Planner city assets extracted and mapped | Planner progress header | None | Step text, progress, emirate chips, date quick chips | Real validation and route progression | City image cards and draft API missing | Partial |
| 21 | Hotel Detail | `assets/navi/pdf-pages/page-21-hotel-detail.png` | `hotel-atlantis-detail-hero.png`, map/room assets | Transparent image header | None | Image hero, share/heart buttons, rating/price/rooms | Select Room routes to real room screen | Amenities/reviews/map preview still partial | Improved partial |
| 22 | Trip Planner Step 2 | `assets/navi/pdf-pages/page-22-trip-planner-step-2.png` | Planner interest assets extracted | Planner progress header | None | Party/interests, AI info, next/back | Real state and validation | Interest image cards not mounted yet | Partial |
| 23 | Select Room | `assets/navi/pdf-pages/page-23-select-room.png` | `hotel-select-room-hero.png`, `room-sky-view-suite.png`, `room-palm-vista.png` | Center title header | None | Hotel summary, room cards, Select buttons | New real route `/rooms/[listingId]` creates booking | Booking quote API and date selector missing | Improved partial |
| 24 | Trip Planner Step 3 | `assets/navi/pdf-pages/page-24-trip-planner-step-3.png` | `planner-journey-quote.png` extracted | Planner progress header | None | Budget, pace, Generate My Trip | Real generate API call | Save for later/draft API missing | Partial |
| 25 | Itinerary Result | `assets/navi/pdf-pages/page-25-itinerary-result.png` | `itinerary-hero.png`, itinerary detail crops | Transparent image header | None | Hero, save, edit, map action, day cards | Share uses native share; map opens native maps URL; Amalfi/Pompeii copy is not copied | Rich visual day image timeline still incomplete | Improved partial |

## Screenshot QA

Screenshot output folders were created for the next simulator pass:

- `docs/audit/screenshots/ios`
- `docs/audit/screenshots/android`

Simulator screenshots were not captured in this slice. The implementation passed static verification first: extracted PNG nonblank check, mobile typecheck, mobile lint, API typecheck, Prisma schema validation, and whitespace diff check.

## Remaining Visual Gaps

1. Mount service-specific bottom tabs for Food, Translator, and Grocery flows.
2. Convert trip planner city and interest chips into image cards using the extracted planner assets.
3. Add real food menu/cart, grocery cart, pharmacy upload, taxi estimate, and SIM order screens before claiming those pages complete.
4. Add dashboard CRUD screens/APIs for `ContentAsset`, `OnboardingPage`, and `MarketingPage`.
5. Capture iOS and Android screenshots after the next app-start/simulator pass.