feat(r4.3): file d'écriture, verrou optimiste D2, Synchro & conflits

Serveur : updatedAt exposé au détail OT ; baseUpdatedAt optionnel sur
transition/coche/bilan → 409 « Conflit de version » contextualisé (qui,
quand) ; toute écriture secondaire (coche, bilan, commentaire, conso,
MO) fait avancer la version — sans version fournie, le web est
inchangé. ADR-003 : sécurité & protocole de routage mobile (qui vit où
sur l'appareil, purge complète à la déconnexion — correctif réel : la
file et le cache persisté survivaient au logout).

Mobile : file persistée AsyncStorage rejouée dans l'ordre — succès →
propagation de la version fraîche aux saisies restantes du même OT
(nos écritures ne se conflictent pas entre elles, un écart étranger
reste détecté) ; coupure → tout attend ; refus → CONFLIT, la file
s'arrête, l'humain tranche (voir l'OT / rejouer sur version à jour /
abandonner). Transitions, coches, bilan et photos (D5, compressées
~1600 px) passent par la file avec patch optimiste du cache ; écran
Synchro (badge tabbar ambre/rouge) ; préchargement parc + référentiels
(le bilan hors-ligne a ses vocabulaires).

Recette « mode avion » 13/13 en Expo web piloté : gestes hors-ligne →
3 en file → modification concurrente de Salma → conflit tranché →
serveur Terminé avec bilan. 17 tests jest-expo, 74 tests API.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/mobile/app/ot/[id]/cloture.tsx

@@ -1,6 +1,6 @@
 import { router, useLocalSearchParams } from 'expo-router';
 import { useState } from 'react';
-import { Alert, ScrollView, Text, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   BILAN_FIELD_LABELS,
@@ -9,16 +9,27 @@ import {
   type BilanField,
   type ReportUpsert,
 } from '@siop/shared';
-import { useBilan, useReferenceValues, useTransition, useWorkOrder } from '@/api/exploitation';
+import { useQueryClient } from '@tanstack/react-query';
+import { useReferenceValues, useWorkOrder } from '@/api/exploitation';
 import { useHorsLigne } from '@/auth/session';
 import { BoutonTel, Carte, ChoixTel, EnteteFiche } from '@/composants/ui';
+import { enfilerBilan, enfilerTransition } from '@/file/actions';
 import { useTokens } from '@/theme/tokens';
 
 /** Écran 3 de la maquette R4 : le bilan codé R2 au pouce — 3 champs requis,
- *  garde visible et bloquante (les MESSAGES viennent de l'API : une seule
- *  source de vérité, comme le web). Clôture en ligne en R4.2. */
+ *  garde visible et bloquante. Depuis R4.3, bilan et clôture partent EN
+ *  FILE (D1) : hors-ligne, l'OT passe localement à « Terminé (en file) »
+ *  et le serveur tranchera au rejeu (verrou D2 si l'OT a bougé). */
 
-const CHAMP_VERS_ID: Record<BilanField, keyof ReportUpsert> = {
+type ChampBilanId =
+  | 'doorStateId'
+  | 'cabinPositionId'
+  | 'anomalyId'
+  | 'externalCauseId'
+  | 'actionTakenId'
+  | 'componentConcernedId';
+
+const CHAMP_VERS_ID: Record<BilanField, ChampBilanId> = {
   DOOR_STATE: 'doorStateId',
   CABIN_POSITION: 'cabinPositionId',
   ANOMALY: 'anomalyId',
@@ -41,8 +52,7 @@ export default function PageCloture() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const { data: ot } = useWorkOrder(id);
   const { data: valeurs } = useReferenceValues();
-  const bilan = useBilan(id);
-  const transition = useTransition(id);
+  const queryClient = useQueryClient();
   const [choix, setChoix] = useState<Partial<Record<BilanField, string | null>>>({});
 
   if (!ot) return null;
@@ -61,27 +71,23 @@ export default function PageCloture() {
     return ot.report?.[CHAMP_VERS_VALEUR[champ]] ?? null;
   };
 
-  const enregistrer = (apres?: () => void) => {
+  const enregistrer = () => {
     const corps: ReportUpsert = {};
+    const labels: Parameters<typeof enfilerBilan>[3] = {};
     for (const champ of BILAN_FIELDS) {
-      if (champ in choix) corps[CHAMP_VERS_ID[champ]] = choix[champ] ?? null;
+      if (champ in choix) {
+        corps[CHAMP_VERS_ID[champ]] = choix[champ] ?? null;
+        labels[CHAMP_VERS_ID[champ]] = valeurDe(champ);
+      }
     }
-    bilan.mutate(corps, {
-      onSuccess: apres,
-      onError: (e) => Alert.alert('Bilan refusé', e.message),
-    });
+    enfilerBilan(queryClient, ot, corps, labels);
   };
 
-  const cloturer = () =>
-    enregistrer(() =>
-      transition.mutate(
-        { to: 'DONE' },
-        {
-          onSuccess: () => router.replace(`/ot/${id}`),
-          onError: (e) => Alert.alert('Clôture bloquée', e.message),
-        },
-      ),
-    );
+  const cloturer = () => {
+    enregistrer();
+    enfilerTransition(queryClient, ot, 'DONE');
+    router.replace(`/ot/${id}`);
+  };
 
   const manquants = REQUIRED_BILAN_FIELDS.filter((c) => !valeurDe(c));
 
@@ -116,26 +122,29 @@ export default function PageCloture() {
         </Carte>
 
         <BoutonTel
-          libelle={bilan.isPending ? 'Enregistrement…' : 'Enregistrer le bilan'}
+          libelle="Enregistrer le bilan"
           variante="contour"
-          desactive={horsLigne || bilan.isPending}
-          surAppui={() => enregistrer()}
+          surAppui={() => {
+            enregistrer();
+            router.replace(`/ot/${id}`);
+          }}
         />
         <BoutonTel
           libelle={
             manquants.length
               ? 'Clôturer (bilan incomplet)'
-              : transition.isPending
-                ? 'Clôture…'
+              : horsLigne
+                ? 'Clôturer — partira à la synchro'
                 : "Clôturer l'intervention"
           }
           variante={manquants.length ? 'gris' : 'vert'}
-          desactive={horsLigne || manquants.length > 0 || bilan.isPending || transition.isPending}
+          desactive={manquants.length > 0}
           surAppui={cloturer}
         />
         {horsLigne ? (
           <Text style={{ color: t.stAttente, fontFamily: 'Manrope_600SemiBold', fontSize: 12 }}>
-            Hors-ligne : la clôture en file arrive en R4.3 — pour l’instant, revenez au réseau.
+            Hors-ligne : la clôture est enregistrée sur le téléphone et sera rejouée telle quelle
+            au retour du réseau. Si l’OT a changé entre-temps, VOUS trancherez (écran Synchro).
           </Text>
         ) : null}
       </ScrollView>

apps/mobile/app/ot/[id]/grille.tsx

@@ -1,30 +1,38 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { useLocalSearchParams } from 'expo-router';
-import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
+import { Pressable, ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useCocheChecklist, useWorkOrder } from '@/api/exploitation';
+import { useWorkOrder } from '@/api/exploitation';
 import { useHorsLigne } from '@/auth/session';
 import { EnteteFiche } from '@/composants/ui';
+import { enfilerCoche } from '@/file/actions';
+import { useFile } from '@/file/store';
 import { prochainEtat, progression } from '@/lib/checklist';
 import { useTokens } from '@/theme/tokens';
 
 /** Écran 6 de la maquette R4 : la grille au pouce. Appui simple = coche,
- *  appui long = non-applicable. En R4.2 chaque coche part immédiatement à
- *  l'API (hors-ligne : lecture seule — la file individuelle arrive en R4.3). */
+ *  appui long = non-applicable. Chaque coche part en file INDIVIDUELLEMENT
+ *  (D1) : 7 coches faites = 7 coches sauvées, réseau ou pas. */
 export default function PageGrille() {
   const t = useTokens();
   const horsLigne = useHorsLigne();
   const { id } = useLocalSearchParams<{ id: string }>();
   const { data: ot } = useWorkOrder(id);
-  const coche = useCocheChecklist(id);
+  const queryClient = useQueryClient();
+  const file = useFile();
 
   if (!ot) return null;
   const { faits, total, pct } = progression(ot.checklist);
+  const enFile = new Set(
+    file.flatMap((s) => (s.otId === ot.id && s.type === 'COCHE' ? [s.payload.itemId] : [])),
+  );
 
-  const basculer = (itemId: string, etat: Parameters<typeof prochainEtat>[0], versNA = false) => {
-    if (horsLigne) return;
-    coche.mutate(
-      { itemId, state: versNA ? (etat === 'NA' ? 'PENDING' : 'NA') : prochainEtat(etat) },
-      { onError: (e) => Alert.alert('Coche refusée', e.message) },
+  const basculer = (item: { id: string; label: string }, etat: Parameters<typeof prochainEtat>[0], versNA = false) => {
+    enfilerCoche(
+      queryClient,
+      ot,
+      item,
+      versNA ? (etat === 'NA' ? 'PENDING' : 'NA') : prochainEtat(etat),
     );
   };
 
@@ -55,8 +63,7 @@ export default function PageGrille() {
             }}
           >
             <Text style={{ color: t.stAttente, fontFamily: 'Manrope_700Bold', fontSize: 12 }}>
-              ⚠ Hors-ligne — les coches en file arrivent en R4.3 ; pour l’instant la grille est en
-              lecture.
+              ⚠ Hors-ligne — chaque coche part en file et se synchronisera au retour du réseau.
             </Text>
           </View>
         ) : null}
@@ -66,9 +73,8 @@ export default function PageGrille() {
             accessibilityRole="checkbox"
             aria-checked={item.state === 'DONE'}
             accessibilityLabel={item.label}
-            disabled={horsLigne || coche.isPending}
-            onPress={() => basculer(item.id, item.state)}
-            onLongPress={() => basculer(item.id, item.state, true)}
+            onPress={() => basculer(item, item.state)}
+            onLongPress={() => basculer(item, item.state, true)}
             style={{
               flexDirection: 'row',
               alignItems: 'center',
@@ -109,7 +115,21 @@ export default function PageGrille() {
             >
               {item.label}
             </Text>
-            {item.doneBy ? (
+            {enFile.has(item.id) ? (
+              <Text
+                style={{
+                  fontFamily: 'Manrope_800ExtraBold',
+                  fontSize: 9,
+                  color: t.stAttente,
+                  backgroundColor: t.stAttenteFond,
+                  paddingHorizontal: 6,
+                  borderRadius: 999,
+                  overflow: 'hidden',
+                }}
+              >
+                en file
+              </Text>
+            ) : item.doneBy ? (
               <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 10.5, color: t.encre3 }}>
                 {item.doneBy.displayName.split(' ')[0]}
               </Text>

apps/mobile/app/ot/[id]/index.tsx

@@ -1,45 +1,70 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { router, useLocalSearchParams } from 'expo-router';
-import { Alert, ScrollView, Text, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   WORK_ORDER_PRIORITY_LABELS,
   WORK_ORDER_TYPE_LABELS,
 } from '@siop/shared';
-import { useTransition, useWorkOrder } from '@/api/exploitation';
+import { useWorkOrder } from '@/api/exploitation';
 import { useHorsLigne } from '@/auth/session';
 import { BoutonTel, Carte, ChipStatut, EnteteFiche, LigneInfo } from '@/composants/ui';
+import { CartePhotos } from '@/composants/carte-photos';
+import { enfilerTransition } from '@/file/actions';
+import { useFile } from '@/file/store';
 import { progression } from '@/lib/checklist';
 import { useTokens } from '@/theme/tokens';
 
 const fmt = new Intl.NumberFormat('fr-FR');
 
 /** Écran 2 de la maquette R4 : la même machine à états que le web — UN
- *  bouton principal selon l'état, la garde de clôture visible. En R4.2 les
- *  écritures restent en ligne (la file arrive en R4.3 — assumé à l'écran). */
+ *  bouton principal selon l'état. Depuis R4.3, chaque geste part en file
+ *  (D1) : l'écran montre l'état local tout de suite, la synchro suit. */
 export default function PageFicheOT() {
   const t = useTokens();
   const horsLigne = useHorsLigne();
   const { id } = useLocalSearchParams<{ id: string }>();
   const { data: ot } = useWorkOrder(id);
-  const transition = useTransition(id);
+  const queryClient = useQueryClient();
+  const file = useFile();
 
   if (!ot) return null;
 
   const grille = progression(ot.checklist);
+  const enFile = file.filter((s) => s.otId === ot.id);
   const peutDemarrer = ot.allowedTransitions.includes('IN_PROGRESS');
   const peutCloturer = ot.allowedTransitions.includes('DONE');
   const peutSuspendre = ot.allowedTransitions.includes('ON_HOLD');
 
-  const demarrer = () =>
-    transition.mutate(
-      { to: 'IN_PROGRESS' },
-      { onError: (e) => Alert.alert('Transition refusée', e.message) },
-    );
+  const demarrer = () => enfilerTransition(queryClient, ot, 'IN_PROGRESS');
 
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
       <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
-        <EnteteFiche titre={ot.reference} apres={<ChipStatut statut={ot.status} />} />
+        <EnteteFiche
+          titre={ot.reference}
+          apres={
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              {enFile.length ? (
+                <Text
+                  style={{
+                    fontFamily: 'Manrope_800ExtraBold',
+                    fontSize: 10,
+                    color: t.stAttente,
+                    backgroundColor: t.stAttenteFond,
+                    paddingHorizontal: 7,
+                    paddingVertical: 2,
+                    borderRadius: 999,
+                    overflow: 'hidden',
+                  }}
+                >
+                  {enFile.length} en file
+                </Text>
+              ) : null}
+              <ChipStatut statut={ot.status} />
+            </View>
+          }
+        />
         <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 17, color: t.encre }}>
           {ot.title}
         </Text>
@@ -54,7 +79,7 @@ export default function PageFicheOT() {
             }}
           >
             <Text style={{ color: t.stAttente, fontFamily: 'Manrope_700Bold', fontSize: 12 }}>
-              ⚠ Hors-ligne — lecture seule pour l’instant : les saisies hors réseau arrivent en R4.3 (file).
+              ⚠ Hors-ligne — vos gestes partent en file et se synchroniseront au retour du réseau.
             </Text>
           </View>
         ) : null}
@@ -129,7 +154,6 @@ export default function PageFicheOT() {
         {peutDemarrer ? (
           <BoutonTel
             libelle={ot.status === 'ON_HOLD' ? 'Reprendre' : 'Démarrer'}
-            desactive={horsLigne || transition.isPending}
             surAppui={demarrer}
           />
         ) : null}
@@ -137,7 +161,6 @@ export default function PageFicheOT() {
           <BoutonTel
             libelle="Clôturer l'intervention"
             variante="vert"
-            desactive={horsLigne}
             surAppui={() => router.push(`/ot/${ot.id}/cloture`)}
           />
         ) : null}
@@ -145,16 +168,12 @@ export default function PageFicheOT() {
           <BoutonTel
             libelle="Mettre en attente"
             variante="contour"
-            desactive={horsLigne || transition.isPending}
-            surAppui={() =>
-              transition.mutate(
-                { to: 'ON_HOLD' },
-                { onError: (e) => Alert.alert('Transition refusée', e.message) },
-              )
-            }
+            surAppui={() => enfilerTransition(queryClient, ot, 'ON_HOLD')}
           />
         ) : null}
 
+        <CartePhotos ot={ot} />
+
         <Carte titre="Activité">
           {ot.events.slice(0, 5).map((e) => (
             <View key={e.id} style={{ gap: 1 }}>