# PROMPTS CURSOR — Application Marchand de Biens
# Copier-coller chaque prompt dans Cursor Chat (Cmd+L ou Ctrl+L)
# Lire le fichier .cursorrules avant chaque session

---

## ═══════════════════════════════════════════
## AGENT 0 — Setup initial du projet
## ═══════════════════════════════════════════
## Durée estimée : 1-2h

```
Lis attentivement le fichier .cursorrules pour comprendre le contexte du projet.

Je veux créer une application React Native avec Expo pour un marchand de biens immobiliers.

Crée le projet de zéro avec cette configuration précise :

1. INITIALISATION DU PROJET :
   - Initialise un nouveau projet Expo avec Expo Router : `npx create-expo-app@latest mb-app --template tabs`
   - TypeScript strict
   - NativeWind pour le styling (Tailwind CSS pour React Native)

2. DÉPENDANCES À INSTALLER :
   - @supabase/supabase-js
   - @tanstack/react-query
   - zustand
   - react-native-paper
   - expo-image-picker
   - expo-document-picker
   - expo-file-system
   - expo-notifications
   - react-native-maps
   - @react-native-async-storage/async-storage
   - react-native-safe-area-context (si pas déjà inclus)

3. CONFIGURATION SUPABASE :
   Crée le fichier `/services/supabase.ts` avec :
   - Initialisation du client Supabase avec les variables d'env
   - Export du client
   - Gestion de la session (AsyncStorage pour mobile)

4. CONFIGURATION AUTH :
   Crée un contexte d'authentification `/context/AuthContext.tsx` avec :
   - Connexion par email/password
   - Déconnexion
   - État de l'utilisateur connecté
   - Redirection automatique si non connecté

5. ÉCRANS D'AUTH :
   - `/app/auth/login.tsx` : formulaire email + password, bouton connexion
   - `/app/auth/register.tsx` : formulaire inscription (email, password, nom, prénom)
   - Style sobre et professionnel, couleur principale #1D4ED8 (bleu)

6. FICHIER .env :
   Crée `.env.local` avec les placeholders :
   ```
   EXPO_PUBLIC_SUPABASE_URL=https://VOTRE_PROJET.supabase.co
   EXPO_PUBLIC_SUPABASE_ANON_KEY=VOTRE_ANON_KEY
   ```

7. VALIDATION :
   L'app doit se lancer avec `npx expo start`, afficher l'écran de login, et permettre la connexion.

Ne génère PAS encore les écrans de contenu, seulement l'authentification qui fonctionne.
Mets à jour AGENTS.md : Agent 0 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 1 — Types TypeScript + connexion DB
## ═══════════════════════════════════════════
## Prérequis : Avoir exécuté schema.sql dans Supabase

```
Lis .cursorrules et AGENTS.md.

Le schéma SQL a été exécuté dans Supabase. Je dois maintenant créer les types TypeScript et les services de base.

1. TYPES TYPESCRIPT `/types/database.ts` :
   Crée des interfaces TypeScript pour TOUTES les tables du schéma :
   - Profile, Bien, EtapePipeline, AnalyseFinanciere
   - Contact, BienContact
   - Visite, ChecklistItem, ChecklistReponse
   - PhotoBien, DocumentBien
   - Tache, NoteBien, DevisTravaux
   
   Pour chaque table, crée aussi un type "Insert" (sans id et dates auto) et "Update" (tout optionnel).
   Exemple :
   ```typescript
   export interface Bien { id: string; user_id: string; titre?: string; ... }
   export type BienInsert = Omit<Bien, 'id' | 'created_at' | 'updated_at'>
   export type BienUpdate = Partial<BienInsert>
   ```

2. CONSTANTES MÉTIER `/constants/metier.ts` :
   - ETAPES_DEFAUT : noms des étapes du pipeline
   - CATEGORIES_CONTACTS : liste avec labels français
   - TYPES_BIENS : appartement, maison, immeuble, etc.
   - CATEGORIES_CHECKLIST : avec emojis et labels
   - TYPES_DOCUMENTS : compromis, acte, DPE, etc.

3. HOOK DE BASE `/hooks/useBiens.ts` :
   - fetchBiens() : récupère tous les biens de l'utilisateur avec l'étape
   - createBien(data) : crée un bien, retourne l'id
   - updateBien(id, data) : met à jour
   - deleteBien(id) : supprime

4. HOOK `/hooks/useContacts.ts` :
   - fetchContacts() : avec filtre par catégorie optionnel
   - createContact(data)
   - updateContact(id, data)

5. REACT QUERY CONFIG `/services/queryClient.ts` :
   - Initialisation de QueryClient
   - Stale time : 5 minutes
   - Retry : 1 fois

Mets à jour AGENTS.md : Agent 1 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 2 — Navigation complète
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md.

Crée la structure de navigation complète de l'application avec Expo Router.

1. NAVIGATION PAR ONGLETS `/app/(tabs)/` :
   5 onglets avec icônes Expo Vector Icons :
   - `index.tsx` → Dashboard (icône: grid, label: "Vue d'ensemble")
   - `prospection.tsx` → Prospection (icône: search, label: "Biens")
   - `visites.tsx` → Visites (icône: clipboard, label: "Visites")
   - `annuaire.tsx` → Annuaire (icône: people, label: "Contacts")
   - `agenda.tsx` → Agenda (icône: calendar, label: "Agenda")
   
   Couleur active : #1D4ED8, couleur inactive : #9CA3AF

2. ÉCRANS DE DÉTAIL (hors onglets) :
   - `/app/bien/[id].tsx` → Fiche bien (en-tête avec titre du bien)
   - `/app/bien/nouveau.tsx` → Création d'un bien
   - `/app/contact/[id].tsx` → Fiche contact
   - `/app/contact/nouveau.tsx` → Nouveau contact
   - `/app/visite/[id].tsx` → Rapport de visite
   - `/app/visite/nouvelle.tsx` → Nouvelle visite (prend un bien_id en param)
   - `/app/calculateur/[bienId].tsx` → Calculateur financier

3. CHAQUE ÉCRAN doit avoir pour l'instant :
   - Un titre visible
   - Un texte "Module [Nom] — à venir"
   - Le bouton de navigation retour (automatique avec Expo Router)
   
4. HEADER GLOBAL :
   - Bouton profil en haut à droite sur les onglets
   - Titre dynamique selon l'onglet actif

5. BOUTON FLOATING ACTION BUTTON (FAB) :
   Sur l'onglet Prospection et Annuaire : bouton "+" en bas à droite pour ajouter un bien/contact.

Mets à jour AGENTS.md : Agent 2 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 3 — Module Prospection (Kanban)
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md.

Crée le module Prospection complet : vue pipeline Kanban des biens.

1. ÉCRAN PROSPECTION `/app/(tabs)/prospection.tsx` :
   
   Vue principale avec 2 modes switchables (boutons en haut) :
   
   MODE KANBAN (défaut) :
   - Colonnes horizontales scrollables (ScrollView horizontal)
   - Chaque colonne = une étape du pipeline (depuis Supabase)
   - Chaque carte de bien affiche : titre, ville, surface, prix achat, badge de priorité
   - Nombre de biens par colonne dans le header de colonne
   - Couleur de colonne selon la couleur définie dans etapes_pipeline
   
   MODE LISTE :
   - FlatList avec tri par date, ville, ou priorité
   - Même info que les cartes Kanban + statut en badge

2. COMPOSANT CARTE BIEN `/components/biens/CarteBien.tsx` :
   - Titre ou "Bien sans titre" si vide
   - Ville + code postal
   - Surface habitable (si renseignée)
   - Prix d'achat formaté en €
   - Indicateur priorité (rouge=haute, orange=normale, gris=basse)
   - Badge source (off-market, agence, notaire...)
   - onPress → navigation vers `/bien/[id]`
   - onLongPress → modal rapide (changer étape, appeler contact, supprimer)

3. FORMULAIRE CRÉATION BIEN `/app/bien/nouveau.tsx` :
   Formulaire en plusieurs étapes (step 1, step 2, step 3) :
   
   Étape 1 — Localisation :
   - Adresse (text input)
   - Ville + code postal
   - Type de bien (Select : appartement, maison, immeuble, terrain...)
   
   Étape 2 — Caractéristiques :
   - Surface habitable
   - Nombre de pièces
   - Prix d'achat estimé
   - Source (Select)
   
   Étape 3 — Résumé + validation
   
   Bouton "Créer le bien" → POST Supabase → redirect vers la fiche bien

4. FILTRES ET RECHERCHE :
   - Barre de recherche par ville ou titre
   - Filtre rapide : Tous / Actifs / Abandonnés

5. HOOK `/hooks/usePipeline.ts` :
   - fetchBiensParEtape() : retourne les biens groupés par étape
   - moveToEtape(bienId, etapeId) : change l'étape d'un bien
   - fetchEtapes() : récupère les étapes du pipeline

Mets à jour AGENTS.md : Agent 3 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 4 — Fiche Bien (détail complet)
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md.

Crée l'écran de fiche bien complet : le "dossier" central de l'app.

ÉCRAN `/app/bien/[id].tsx` :

Structure avec ScrollView et sections collapsibles :

1. EN-TÊTE :
   - Photo principale (ou placeholder avec icône maison)
   - Adresse complète
   - Badge étape actuelle (avec bouton pour changer)
   - Score d'opportunité visuel (étoiles ou barre)
   - Boutons rapides : Appeler vendeur | Calculateur | Nouvelle visite

2. SECTION "INFOS" :
   - Type de bien, surface, pièces, étages, année construction
   - DPE : badge coloré (A=vert foncé → G=rouge)
   - Source de la piste

3. SECTION "FINANCES" (résumé) :
   - Prix d'achat, budget travaux estimé
   - Marge cible (si analyse créée)
   - Bouton → ouvre le calculateur

4. SECTION "VISITES" :
   - Liste des visites avec date et avis
   - Bouton "Nouvelle visite"

5. SECTION "CONTACTS" :
   - Contacts liés (notaire, agent, artisans...)
   - Bouton pour lier un contact existant

6. SECTION "DOCUMENTS" :
   - Liste des documents (DPE, compromis, etc.)
   - Bouton upload (expo-document-picker)

7. SECTION "NOTES" :
   - Notes libres avec date
   - Champ pour ajouter une note rapide

8. SECTION "TIMELINE" :
   - Historique chronologique des actions (création, visite, offre, compromis...)

ÉDITION :
- Bouton "Modifier" en haut à droite → mode édition inline
- Chaque section modifiable directement
- Auto-save avec debounce (500ms)

HOOK `/hooks/useBienDetail.ts` :
- fetchBienComplet(id) : avec toutes les relations (visites, contacts, docs, notes)
- addNote(bienId, contenu)
- linkContact(bienId, contactId, role)
- uploadDocument(bienId, file, type)

Mets à jour AGENTS.md : Agent 4 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 5 — Calculateur financier
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md.

Crée le calculateur de rentabilité, le cœur financier de l'application.

ÉCRAN `/app/calculateur/[bienId].tsx` :

Ce calculateur utilise les formules exactes définies dans .cursorrules.

1. SECTION ACQUISITION :
   - Prix d'achat (€) — input numérique
   - Type de bien fiscal : Ancien (7,5%) / Neuf (2%) — toggle
   - Frais de notaire : calculés automatiquement + possibilité de saisir manuellement
   - Frais d'agence achat (€ ou %)

2. SECTION TRAVAUX :
   - Budget travaux estimé (€)
   - Réserve imprévus : slider 5-25% (défaut 10%)
   - Budget total travaux = estimation + réserve

3. SECTION PORTAGE :
   - Durée de portage prévue (slider 6-36 mois)
   - Taux de crédit (%) — pré-rempli depuis le profil
   - Taxe foncière annuelle (€)
   - Charges mensuelles (€)
   - Coût de portage total = calculé automatiquement

4. SECTION REVENTE :
   - Prix de revente cible (€)
   - Frais d'agence vente (% — défaut 5%)
   - Taux d'imposition (% — défaut 25%)

5. RÉSULTATS EN TEMPS RÉEL (mis à jour à chaque keystroke) :
   Affichés dans des cartes colorées :
   - Prix de revient total (€) — gris
   - Marge brute (€ et %) — vert si > 15%, orange si 8-15%, rouge si < 8%
   - Marge nette après impôts (€ et %) — même code couleur
   - ROI (%) — retour sur investissement
   - Point mort : prix de revente minimum pour ne pas perdre

6. SCÉNARIOS :
   Bouton "Voir les scénarios" → modal avec 3 colonnes :
   - Pessimiste (-10% prix revente)
   - Réaliste (prix saisi)
   - Optimiste (+10% prix revente)
   Chaque colonne affiche la marge nette correspondante.

7. SAUVEGARDE :
   Bouton "Enregistrer l'analyse" → sauvegarde dans analyses_financieres

8. EXPORT :
   Bouton "Partager" → génère un résumé texte formaté à partager par SMS/email

COMPOSANT RÉUTILISABLE `/components/biens/ResultatFinancier.tsx` :
Affiche les 4 KPIs financiers (utilisé aussi dans la fiche bien)

Mets à jour AGENTS.md : Agent 5 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 6 — Annuaire contacts
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md.

Crée le module Annuaire : carnet d'adresses professionnel du marchand de biens.

1. ÉCRAN ANNUAIRE `/app/(tabs)/annuaire.tsx` :
   
   EN-TÊTE :
   - Barre de recherche (prénom, nom, société, ville)
   - Filtres par catégorie : tous | notaires | agents | artisans | banques | autres
   - Sous-filtre artisans : par corps de métier (plomberie, élec, maçonnerie...)
   
   LISTE :
   - FlatList avec sections par catégorie (SectionList si filtre = "tous")
   - Chaque item : avatar initiales coloré, nom, société, ville, note étoiles, bouton appel direct
   - Swipe gauche pour supprimer, swipe droit pour "Favori"
   - Section "Favoris" en haut de liste

2. FICHE CONTACT `/app/contact/[id].tsx` :
   - Avatar grande taille avec initiales
   - Badges : catégorie + spécialité
   - Note (étoiles, modifiable par tap)
   - Boutons actions : Appeler | SMS | Email | Copier
   - Section "Biens associés" : liste des biens où ce contact intervient
   - Section "Historique" : notes d'échanges avec date
   - Champ "Notes" libre
   - Infos artisan : taux horaire, remise habituelle

3. FORMULAIRE NOUVEAU CONTACT `/app/contact/nouveau.tsx` :
   - Catégorie (obligatoire) — change les champs affichés
   - Nom, prénom, société
   - Téléphone (avec format FR automatique)
   - Email
   - Ville + zone d'intervention
   - Spécialité (si artisan)
   - Note initiale

4. FONCTIONNALITÉ APPEL :
   Import `{ Linking } from 'react-native'`
   `Linking.openURL('tel:' + telephone)` — fonctionne sur iOS et Android

5. HOOK `/hooks/useContacts.ts` (compléter celui de l'Agent 1) :
   - searchContacts(query, categorie?)
   - getFavoris()
   - getBiensByContact(contactId)
   - toggleFavori(contactId)

Mets à jour AGENTS.md : Agent 6 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 7 — Module Visites (avec IA Claude)
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md.

Crée le module Visites avec génération de compte-rendu par IA Claude.

⚠️ IMPORTANT SÉCURITÉ : L'appel à l'API Anthropic doit se faire via une Supabase Edge Function,
jamais directement depuis le client mobile (la clé API ne doit pas être dans le code React Native).

1. EDGE FUNCTION SUPABASE `/supabase/functions/generate-rapport-visite/index.ts` :
   ```typescript
   // Reçoit : { notes_brutes, checklist_reponses, bien_info }
   // Appelle l'API Anthropic Claude
   // Retourne : { rapport_structure }
   
   const prompt = `Tu es assistant d'un marchand de biens immobiliers français.
   
   À partir des notes de visite et de la check-list ci-dessous, génère un compte-rendu 
   de visite professionnel et structuré en français.
   
   Informations du bien : ${JSON.stringify(bien_info)}
   
   Notes prises pendant la visite : ${notes_brutes}
   
   Résultats de la check-list : ${JSON.stringify(checklist_reponses)}
   
   Génère un compte-rendu avec ces sections :
   1. Résumé exécutif (3-4 phrases)
   2. Points positifs (liste)
   3. Points négatifs / travaux nécessaires (liste)
   4. Estimation des travaux (si des éléments permettent de l'estimer)
   5. Recommandation (Coup de cœur / Intéressant / À éviter + justification)
   6. Prochaines étapes suggérées
   
   Sois concis, professionnel, et orienté investissement.`;
   ```

2. ÉCRAN LISTE VISITES `/app/(tabs)/visites.tsx` :
   - Visites à venir (avec date et bien concerné)
   - Visites passées avec leur rapport
   - Bouton "Planifier une visite"

3. ÉCRAN NOUVELLE VISITE `/app/visite/nouvelle.tsx` :
   - Sélecteur de bien (liste ou scan QR code si bien a un QR)
   - Date et heure de la visite
   - Type : première visite / seconde visite / expert
   - Redirect vers l'écran de visite en cours

4. ÉCRAN VISITE EN COURS `/app/visite/[id].tsx` :
   
   TAB 1 — CHECK-LIST :
   - Sections par catégorie (Structure, Toiture, Électricité, etc.)
   - Chaque item avec 4 états : ✅ OK | ⚠️ Attention | ❌ Problème | — Non vérifié
   - Champ note par item
   - Progression visuelle (X/Y items vérifiés)
   
   TAB 2 — NOTES LIBRES :
   - Grande zone de texte pour notes rapides
   - Bouton microphone : transcription vocale (expo-av)
   - Bouton photo : ajouter une photo directement liée à la visite
   
   TAB 3 — ESTIMATION :
   - Budget travaux min/max estimé sur place
   - Durée estimée
   - Avis global (Coup de cœur / Intéressant / Neutre / À éviter)
   - Score d'opportunité (slider 1-10)
   
   BOUTON "GÉNÉRER LE RAPPORT IA" :
   - Loading spinner avec message "Analyse en cours..."
   - Appel à la Edge Function Supabase
   - Affiche le rapport généré
   - Bouton "Copier" et "Modifier" le rapport
   - Sauvegarde automatique dans visites.rapport_genere

5. HOOK `/hooks/useVisite.ts` :
   - startVisite(bienId, dateVisite)
   - saveChecklist(visiteId, reponses)
   - saveNotes(visiteId, notes)
   - generateRapport(visiteId) → appel Edge Function
   - fetchVisitesByBien(bienId)

Mets à jour AGENTS.md : Agent 7 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 8 — Agenda & tâches
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md.

Crée le module Agenda : gestion des tâches quotidiennes du marchand de biens.

1. ÉCRAN AGENDA `/app/(tabs)/agenda.tsx` :
   
   VUE "AUJOURD'HUI" (défaut) :
   - Tâches du jour groupées par bien
   - Section "En retard" en rouge en haut
   - Section "Aujourd'hui"
   - Section "Cette semaine"
   
   VUE CALENDRIER :
   - react-native-calendars
   - Points colorés sur les jours avec tâches
   - Tap sur un jour → liste des tâches du jour
   
2. COMPOSANT TÂCHE `/components/agenda/CarteTache.tsx` :
   - Checkbox (tap pour cocher = fait)
   - Titre + description courte
   - Badge bien associé (avec couleur de l'étape)
   - Date + heure
   - Badge priorité
   - Icône type (téléphone, email, rendez-vous, admin...)
   - Swipe droit : Snooze +1 jour
   - Swipe gauche : Supprimer

3. CRÉATION TÂCHE :
   Modal bottom sheet avec :
   - Titre (obligatoire)
   - Type de tâche (Select avec icônes)
   - Bien associé (optionnel — searchable Select)
   - Contact associé (optionnel)
   - Date et heure d'échéance (DateTimePicker)
   - Priorité (toggle 3 niveaux)
   - Rappel (30min avant / 1h / 1 jour / pas de rappel)

4. TÂCHES AUTO-GÉNÉRÉES :
   Créer une fonction `genererTachesDelaisLegaux(bienId)` qui génère automatiquement
   les tâches importantes lors des changements d'étape :
   - Compromis signé → "SRU 10 jours : fin le [date]"
   - Compromis signé → "Déblocage financement : échéance [date+45j]"
   - Acte signé → "Déclaration IS : rappel [date+3mois]"

5. NOTIFICATIONS :
   Configurer expo-notifications pour :
   - Rappel de tâche (heure configurée)
   - Alerte délai légal (veille)
   
6. HOOK `/hooks/useTaches.ts` :
   - fetchTachesJour(date)
   - fetchTachesEnRetard()
   - createTache(data)
   - toggleTacheStatus(id)
   - snooze(id, jours)
   - genererTachesDelaisLegaux(bienId, etapeName)

Mets à jour AGENTS.md : Agent 8 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## AGENT 9 — Dashboard
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md.

Crée le tableau de bord : vue d'ensemble de l'activité du marchand de biens.

ÉCRAN `/app/(tabs)/index.tsx` :

1. EN-TÊTE :
   - "Bonjour [Prénom] 👋"
   - Date du jour
   - Météo rapide (optionnel, via Open-Meteo API gratuite)

2. ALERTES URGENTES (si existantes) :
   Carte rouge en haut : tâches en retard + délais légaux proches (< 3 jours)

3. BARRE KPIs (scroll horizontal, 4 métriques) :
   - Biens actifs : nombre total
   - En compromis : nombre
   - Marge prévue : somme des marges nettes des analyses
   - Tâches du jour : nombre (avec badge rouge si en retard)

4. PIPELINE RÉSUMÉ :
   Barre horizontale proportionnelle avec chaque étape et son nombre de biens
   Tap sur une étape → filtre la liste en dessous

5. BIENS EN COURS :
   FlatList horizontale des 5 derniers biens actifs
   Chaque carte : titre, étape, date de la dernière action
   Tap → fiche bien

6. TÂCHES DU JOUR :
   3-5 tâches prioritaires
   Bouton "Voir tout" → onglet Agenda

7. DERNIÈRES VISITES :
   2-3 dernières visites avec score d'opportunité
   Tap → rapport de visite

8. STATISTIQUES MENSUELLES (bottom) :
   - Biens analysés ce mois
   - Offres faites
   - Taux de conversion piste → offre
   - Biens vendus (si applicable)

HOOK `/hooks/useDashboard.ts` :
   Utilise React Query pour fetcher en parallèle :
   - getNombreBiensParEtape()
   - getKPIsFinanciers()
   - getTachesUrgentes()
   - getDernieresVisites()
   Toutes les données mises en cache 5 minutes, refresh au focus de l'écran.

Mets à jour AGENTS.md : Agent 9 = ✅ Terminé.
```

---

## ═══════════════════════════════════════════
## PROMPT DE DEBUG UNIVERSEL
## (À utiliser quand quelque chose ne marche pas)
## ═══════════════════════════════════════════

```
Lis .cursorrules et AGENTS.md pour le contexte.

J'ai une erreur dans le module [NOM DU MODULE] :

ERREUR : [coller le message d'erreur exact]

FICHIER CONCERNÉ : [nom du fichier]

CE QUI DEVRAIT SE PASSER : [description du comportement attendu]

CE QUI SE PASSE : [description du bug]

Diagnostique le problème et propose un fix. Tiens compte de la stack technique 
définie dans .cursorrules (Expo + Supabase + TypeScript strict).
```

---

## ═══════════════════════════════════════════
## PROMPT D'AMÉLIORATION UI
## (Quand un écran fonctionne mais est laid)
## ═══════════════════════════════════════════

```
Lis .cursorrules.

L'écran [NOM] fonctionne mais l'interface n'est pas assez soignée pour une utilisation 
professionnelle quotidienne sur mobile.

Améliore le design avec ces critères :
- Style sobre et professionnel (pas de couleurs vives inutiles)
- Lisible en extérieur (fort contraste)
- Actions principales facilement accessibles en une main (zone du pouce)
- Chargement : skeletons pendant le fetch (pas de spinner seul)
- États vides : message explicatif + bouton d'action (ex: "Aucune visite — Planifier une visite")
- Feedback tactile sur les boutons (Haptics.impactAsync)
- Gestion d'erreur visible (toast ou banner rouge en haut)

Couleurs de l'app :
- Primaire : #1D4ED8 (bleu professionnel)
- Succès : #16A34A
- Attention : #D97706  
- Danger : #DC2626
- Fond : #F9FAFB
- Texte : #111827
```