# Navi Mobile Reference Implementation - 2026-05-05

## Audit Summary

Reference checked:

- `Navi_compressed.pdf` design reference, 25 pages.
- Existing monorepo under `apps/mobile`, `apps/api`, and shared packages.

Current stack decision:

- Mobile already uses Expo Router with Expo, React Native, TypeScript, Zustand, TanStack Query, SecureStore, and shared packages.
- API already uses NestJS on Fastify, Prisma, PostgreSQL, JWT access and refresh tokens, RBAC, audit logging, idempotency, OTP, and provider abstractions.
- Decision: keep Expo Router instead of replacing navigation with a new React Navigation setup because Expo Router is the existing production-compatible stack and is built on React Navigation.

## Reused Foundation

- `apps/mobile/src/api/client.ts` typed API client with refresh-token retry.
- `apps/mobile/src/state/auth.ts` SecureStore-backed token/session state.
- `apps/api/src/common/guards/rbac.guard.ts` backend authorization.
- `apps/api/src/modules/auth` registration, login, OTP, reset, refresh.
- `apps/api/src/modules/listings`, `destinations`, `bookings`, `saved`, `emergency`, `trip-planner`.
- Shared `@navi/types`, `@navi/validators`, `@navi/api-client`, and `@navi/ui`.

## Implemented In This Slice

- Added public Emirates API: `GET /v1/emirates`.
- Added trip retrieval APIs:
  - `GET /v1/trip-planner/plans`
  - `GET /v1/trip-planner/plans/:id`
- Fixed body validation placement on write endpoints that also receive request context, so bookings, payments, refunds, and trip generation validate the JSON body only.
- Expanded UAE seed content:
  - 7 Emirates plus Al Ain city.
  - Categories for stays, activities, taxi, food, pharmacy, groceries, SIM cards, emergency, culture, adventure, luxury, wellness, water tours, theme parks.
  - Destinations: Burj Khalifa, Museum of The Future, Sheikh Zayed Grand Mosque, Al Marmoom Desert, Al Ain Oasis, Hatta Dam.
  - Listings: Al Maha Desert Resort, Atlantis The Royal, Qasr Al Sarab Desert Resort, Burj Khalifa Tour, Museum of The Future, Old Dubai Food Tour, Marina Yacht Rental, Al Ain Oasis Tour, taxi tiers, food, pharmacy, grocery, Etisalat Visitor Line Small, Du Tourist Plus.
  - Stay room records for booking/detail surfaces.
- Added reusable mobile UI primitives:
  - Catalog listing card.
  - Destination card.
  - Filter chip.
  - Section header.
  - Service tile.
- Rebuilt these mobile screens to use real APIs instead of placeholder states:
  - Home.
  - Discover.
  - Service listing screen.
  - Listing detail screen.
  - Saved.
  - Bookings.
  - Trip planner steps.
  - Itinerary result.
- Implemented PDF page 19 image translator:
  - Native camera capture through Expo Image Picker.
  - Native gallery image selection.
  - API-backed OCR/translation request.
  - Private per-user translation history.
- Added `TranslationJob` database storage and migration.
- Improved mobile spacing and button height to align with the reference design rules.

## Phased Plan

Phase 1:

- Design system, navigation shell, onboarding, auth validation, secure tokens.
- Mostly present already; needs visual polish and social login provider wiring.

Phase 2:

- Home, discovery, saved, profile.
- Home, discovery, saved now API-backed. Profile still needs edit-profile and richer stats.

Phase 3:

- Bookings, stays, experiences.
- Listing detail and booking creation are wired for stays, activities, and taxi tiers. Full room/date/payment review flow remains.

Phase 4:

- Taxi, food, pharmacy, grocery, SIM, emergency.
- Catalog/service browsing is wired. Dedicated order flows, carts, prescription upload, taxi live states, and SIM activation remain.

Phase 5:

- AI trip planner and image translator.
- Trip planner now generates and retrieves API trips. Image translator mobile screens remain.

Phase 6:

- Provider and admin role flows.
- Backend/dashboard are prepared. Mobile provider/admin screens remain future slices.

Phase 7:

- QA, testing, polish.
- Typecheck, lint, tests, route audit, build checks passed for this slice. Device visual QA remains.

## Known Remaining Work

- Native social login providers for Google and Apple.
- Full payment provider credentials and checkout.
- Food, grocery, pharmacy, and SIM order APIs and carts.
- Prescription upload and private storage provider.
- Taxi estimate, driver assignment, and live trip states.
- Real OCR/translation provider credentials for production.
- Provider mobile dashboard screens.
- Admin mobile screens.
- Full Arabic RTL visual QA.
- EAS production build and App Store / Play Store signing.