# 16 — React Native Mobile App

## Context
Fogbreak replaces FUB, ShowingTime, Sisu, Paperless Pipeline, DocuSign, RealScout. Agents live on their phones. This builds native iOS + Android apps with the full platform.

## What to Build

### 1. Project Setup
```bash
npx create-expo-app mobile --template tabs
cd mobile
npx expo install expo-notifications expo-camera expo-location expo-document-picker
npm install @react-navigation/native @tanstack/react-query socket.io-client
```

### 2. Screen Structure
```
mobile/
├── src/
│   ├── screens/
│   │   ├── Dashboard.tsx           # Today's priorities, KPIs, quick actions
│   │   ├── Clients/
│   │   │   ├── ClientList.tsx      # Contact list (FUB replacement)
│   │   │   ├── ClientDetail.tsx    # Full timeline, lead score
│   │   │   └── AddClient.tsx       # Quick add
│   │   ├── Showings/
│   │   │   ├── ShowingCalendar.tsx # Today's showings (ShowingTime)
│   │   │   ├── ShowingCart.tsx     # Multi-showing route
│   │   │   ├── ShowingDetail.tsx   # Instructions, directions
│   │   │   └── Feedback.tsx        # Submit/view feedback
│   │   ├── Deals/
│   │   │   ├── Pipeline.tsx        # Deal pipeline
│   │   │   ├── DealDetail.tsx      # Tasks, docs, compliance (Paperless Pipeline)
│   │   │   └── TransactionTC.tsx   # TC task list
│   │   ├── Properties/
│   │   │   ├── PropertyList.tsx    # Listings
│   │   │   ├── PropertyDetail.tsx  # Full detail (RealScout-style)
│   │   │   └── PropertyMatch.tsx   # Client match view
│   │   ├── Email/
│   │   │   ├── Inbox.tsx
│   │   │   └── Compose.tsx         # AI-assisted compose
│   │   ├── Marketing/
│   │   │   ├── ContentCalendar.tsx # Social schedule
│   │   │   ├── Staging.tsx         # Virtual staging
│   │   │   └── VideoGen.tsx        # Video creation
│   │   ├── Analytics/
│   │   │   ├── Dashboard.tsx       # KPIs (Sisu replacement)
│   │   │   ├── Leaderboard.tsx
│   │   │   └── MyGoals.tsx         # Pacing dashboard
│   │   ├── Documents/
│   │   │   ├── DocList.tsx
│   │   │   └── SignDocument.tsx    # Mobile eSign (DocuSign)
│   │   ├── Calendar.tsx
│   │   ├── AI/
│   │   │   └── ChatScreen.tsx      # AI assistant
│   │   └── Settings.tsx
│   ├── components/
│   │   ├── PropertyCard.tsx
│   │   ├── ShowingCard.tsx
│   │   ├── TaskItem.tsx
│   │   ├── KPIWidget.tsx
│   │   ├── AIBubble.tsx
│   │   └── BrandHeader.tsx         # White-label header
│   ├── navigation/
│   │   ├── TabNavigator.tsx        # Bottom tabs
│   │   └── StackNavigators.tsx     # Per-tab stacks
│   ├── services/
│   │   ├── api.ts                  # API client
│   │   ├── auth.ts                 # Secure token storage
│   │   ├── notifications.ts        # Push notification handler
│   │   ├── location.ts             # GPS for showing routes
│   │   └── offline.ts              # Offline data sync
│   └── themes/
│       └── ThemeProvider.tsx        # White-label from tenant config
```

### 3. Push Notifications
Critical for real estate agents:
- New lead received → immediate push
- Showing requested → push with approve/decline actions
- Showing confirmed/cancelled → push
- Document signed → push
- Task overdue → push
- AI coaching nudge → push
- New property match for client → push

### 4. Offline-First
Agents are in homes with poor connectivity:
- Cache client list, today's showings, active deals
- Queue actions while offline (complete task, submit feedback)
- Sync when connectivity returns
- Offline access to showing instructions and lockbox codes

### 5. Location-Based Features
- GPS-powered showing route navigation
- "Nearby listings" search
- Auto-detect when agent arrives at showing (mark as started)
- Drive time between showings
- Open house check-in

### 6. Camera Integration
- Scan business cards → auto-create lead
- Photo showing notes (take photo, add to showing record)
- Upload listing photos from camera roll
- Submit virtual staging photos directly

### 7. Mobile eSign
Touch-optimized document signing:
- Pinch-to-zoom on documents
- Finger signature (draw)
- Type signature
- Initials
- Date auto-fill
- Signed document confirmation

### 8. Quick Actions
From home screen or widget:
- "Add lead" (name, phone, email — 10 seconds)
- "Log call" (select client, duration, notes)
- "Start showing tour" (launch route navigation)
- "Ask AI" (voice or text)

### 9. Apple Watch / Wear OS (future)
- Showing reminder notifications
- Quick lead info at a glance
- Approve/decline showing from wrist

## Build & Deploy
```bash
# iOS
npx expo build:ios
# Upload to App Store via Transporter

# Android
npx expo build:android
# Upload to Google Play Console
```

## Acceptance Criteria
- [ ] iOS and Android apps via React Native/Expo
- [ ] All core features: CRM, showings, deals, email, properties, analytics, marketing, docs, calendar
- [ ] Push notifications for all critical events
- [ ] Offline-first with sync queue
- [ ] GPS-powered showing routes
- [ ] Camera integration (business card scan, photos)
- [ ] Mobile eSign experience
- [ ] Quick actions for common tasks
- [ ] White-label theming from tenant config
- [ ] App Store and Play Store ready