# Prompt p06 — Chauffeur Mobile (mobile) *Contextes requis : ctx-global.md + ctx-mobile-expo.md + ctx-laravel-bff.md* --- ## Profil & Accès - **Rôle** : CHA (Chauffeur de camion-citerne) - **Nombre d'utilisateurs** : 22 (1 par camion-citerne) - **Accès** : ses missions uniquement, filtrées par `chauffeur_id` dans le JWT - **Platform** : Mobile uniquement (React Native + Expo SDK 54) - **Session** : 12h (durée d'une journée de travail) --- ## Fichiers à créer ``` app/(mobile)/chauffeur/missions.tsx app/(mobile)/chauffeur/mission-detail.tsx app/(mobile)/chauffeur/etape-scan.tsx app/(mobile)/chauffeur/signature-depotage.tsx components/chauffeur/MissionCard.tsx components/chauffeur/CircuitEtapes.tsx components/chauffeur/QrEtapeScanner.tsx components/chauffeur/SignaturePad.tsx components/chauffeur/GpsTracker.tsx hooks/useMissions.ts hooks/useGpsTracker.ts hooks/useLivraisonCircuit.ts ``` --- ## Spec UX condensée ### Écran 1 — Liste missions ``` ┌─────────────────────────┐ │ FLOWUP · Chauffeur [🔔]│ │ Moussa Camara · CT-07 │ ├─────────────────────────┤ │ MES MISSIONS DU JOUR │ │ │ │ ┌─────────────────────┐ │ │ │ OL-2026-0412 EN COURS│ │ │ Dépôt → Kaloum │ │ │ 12 000 L Gasoil │ │ │ Étape 3/8 ●●●○○○○○ │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ OL-2026-0413 À FAIRE│ │ │ Dépôt → Ratoma │ │ │ 8 000 L SP95 │ │ │ Départ prévu : 14h00 │ │ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ OL-2026-0408 TERMINÉ │ │ │ Dépôt → Matoto │ │ │ Conforme ✓ │ │ └─────────────────────┘ │ └─────────────────────────┘ ``` ### Écran 2 — Détail mission ``` ┌─────────────────────────┐ │ ◀ OL-2026-0412 │ ├─────────────────────────┤ │ CIRCUIT DE LIVRAISON │ │ │ │ ① Dépôt — Départ ✓ │ │ ② Pesée départ ✓ │ │ ③ En route ← ACTUEL │ │ ④ Arrivée station ○ │ │ ⑤ Pesée arrivée ○ │ │ ⑥ Dépotage ○ │ │ ⑦ Signature dépotage○ │ │ ⑧ Retour dépôt ○ │ │ │ │ CARGO │ │ Gasoil : 12 000 L │ │ Densité départ : 0.836 │ │ │ │ GPS : ● Tracé actif │ │ │ │ [ SCANNER ÉTAPE 4 (QR) ]│ └─────────────────────────┘ ``` ### Écran 3 — Scan étape QR ``` ┌─────────────────────────┐ │ ÉTAPE 4 — Arrivée stat. │ │ │ │ ┌───────────────────┐ │ │ │ │ │ │ │ [CAMÉRA QR] │ │ │ │ │ │ │ │ Scannez le QR │ │ │ │ de la station │ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ GPS confirmé ✓ │ │ Lat: 9.538 Lng: -13.677│ │ │ │ [Saisie manuelle] │ └─────────────────────────┘ ``` ### Écran 4 — Signature dépotage (étape 7) ``` ┌─────────────────────────┐ │ SIGNATURE DÉPOTAGE │ │ OL-2026-0412 · Kaloum │ ├─────────────────────────┤ │ Volume réel dépotage │ │ ┌───────────────────┐ │ │ │ 11 987 L │ │ │ └───────────────────┘ │ │ Écart : 13 L (0,11%) ✓ │ │ │ │ Densité relevée │ │ ┌───────────────────┐ │ │ │ 0.834 │ │ │ └───────────────────┘ │ │ Corr. 15°C : 0.836 ✓ │ │ │ │ Signature Gérant : │ │ ┌───────────────────┐ │ │ │ [Pad signature] │ │ │ └───────────────────┘ │ │ [ CONFIRMER DÉPOTAGE ] │ └─────────────────────────┘ ``` ### Circuit 8 étapes (QR par point) 1. Dépôt — Départ (QR dépôt sortie) 2. Pesée départ (QR balance dépôt) 3. En route (GPS automatique) 4. Arrivée station (QR entrée station) 5. Pesée arrivée (QR balance station) 6. Dépotage (QR cuve cible) 7. Signature dépotage (gérant signe sur mobile chauffeur) 8. Retour dépôt (QR entrée dépôt) --- ## Endpoints BFF ``` GET /api/chauffeur/missions Headers : Authorization: Bearer {token} Query : ?date={YYYY-MM-DD}&statut=en_cours|a_faire|termine Réponse : [{ id: INT, reference: "OL-2026-0412", station_nom: "Kaloum", produit: "Gasoil", volume_prevu: "12000", // VARCHAR (litres) etape_actuelle: 3, total_etapes: 8, statut: "en_cours"|"a_faire"|"termine", depart_prevu: "2026-05-13T08:00:00Z" }] GET /api/livraisons/{id} Réponse : { id: INT, reference: "OL-2026-0412", chauffeur_nom: "Moussa Camara", camion_immat: "RC-1234-A", station: { id: INT, nom: "Kaloum", lat: 9.538, lng: -13.677 }, produit: "Gasoil", volume_prevu: "12000", // VARCHAR densite_depart: "0.836", // VARCHAR etapes: [{ numero: INT, label: "Dépôt — Départ", statut: "fait"|"actuel"|"a_faire", qr_code_attendu: "DEP-KALOUM-001", realise_at: "2026-05-13T08:05:00Z"|null, lat: FLOAT|null, lng: FLOAT|null }] } POST /api/livraisons/{id}/etape Body : { etape_numero: INT, qr_code: "DEP-KALOUM-001", lat: "9.538", // VARCHAR lng: "-13.677", // VARCHAR timestamp: "2026-05-13T08:05:00Z" } Réponse : { etape: INT, statut: "valide"|"qr_invalide"|"gps_hors_zone" } POST /api/livraisons/{id}/depotage Body : { volume_reel: "11987", // VARCHAR (litres) densite_relevee: "0.834", // VARCHAR densite_corrigee_15c: "0.836", // VARCHAR ecart: "13", // VARCHAR (litres) signature_gerant_base64: "...", signature_chauffeur_base64: "..." } Réponse : { id: INT, conforme: true, ecart_pct: "0.11" } POST /api/livraisons/{id}/gps Body : { points: [{ lat: "9.538", lng: "-13.677", ts: "..." }] } Réponse : { enregistres: INT } ``` --- ## Règles spécifiques - **RGCHA-01** : Le GPS est tracé automatiquement toutes les 30 secondes pendant un trajet actif (étapes 3 à 7). `expo-location` en `Background` mode. Les points GPS sont envoyés en batch toutes les 5 minutes pour économiser la batterie. - **RGCHA-02** : Chaque QR scanné est vérifié par le BFF — si `statut: "qr_invalide"` ou `"gps_hors_zone"` (rayon >500m du point attendu), le chauffeur ne peut pas valider l'étape. Message d'erreur explicite. - **RGCHA-03** : Étape 3 (En route) est automatique — elle se valide dès que le chauffeur quitte la zone dépôt (GPS). Pas de scan QR pour cette étape. - **RGCHA-04** : Si écart dépotage >1%, un champ "Explication écart" devient obligatoire avant la signature. - **RGCHA-05** : La signature dépotage (étape 7) est faite par le Gérant de station sur le téléphone du chauffeur. Deux signatures séquentielles : d'abord le Gérant, puis le Chauffeur. - **RGCHA-06** : Montants et volumes = VARCHAR — `string` dans tous les types TS. Calcul écart via `Decimal.js`. - **RGCHA-07** : IDs = `number` (INT UNSIGNED). Soft delete = `statut: 3`. - **RGCHA-08** : Mode offline pour la liste des missions (MMKV, TTL 2h). Les scans QR d'étapes sont mis en queue offline si pas de réseau, avec sync automatique. --- ## Tâche Claude Génère le code complet React Native + Expo SDK 54 TypeScript pour l'application Chauffeur FlowUp ERP. **Contraintes techniques absolues :** - Palette navy `#1A2157`, blue `#1E5EFF`, cyan `#00C8C0` — Inter + JetBrains Mono - Montants/volumes = VARCHAR(255) → `string` dans les types TS. Calculs via `Decimal.js` - IDs = `number` (INT UNSIGNED) - `expo-location` (background) pour le tracé GPS - `expo-camera` pour les scans QR - `expo-signature-canvas` pour les deux signatures - MMKV pour la queue offline des scans d'étapes **Génère dans cet ordre :** 1. Types TypeScript (`types/chauffeur.ts`) 2. Hook `useGpsTracker.ts` (expo-location background, batch 5min) 3. Hook `useMissions.ts` (fetch + MMKV cache) 4. Hook `useLivraisonCircuit.ts` (état étapes, validation QR) 5. `QrEtapeScanner.tsx` (expo-camera + fallback saisie) 6. `CircuitEtapes.tsx` (liste 8 étapes avec statut visuel) 7. `SignaturePad.tsx` (double signature Gérant+Chauffeur) 8. `GpsTracker.tsx` (indicateur tracé actif) 9. `MissionCard.tsx` (carte mission avec barre progression) 10. Écrans : `missions.tsx`, `mission-detail.tsx`, `etape-scan.tsx`, `signature-depotage.tsx`