feat(r4.2): terrain mobile — scan QR, fiches ascenseur/OT, clôture, grille

Scanner expo-camera (QR seulement) : analyseScan testée — URL portail
…/q/REF des étiquettes A6 ou référence tapée, QR étrangers refusés ;
résolution D4 dans le parc en cache d'abord (sous-sol inclus), message
honnête sinon. Fiche ascenseur en consultation (D3, historique scopé
« voir autre »). Fiche OT : un bouton principal selon la machine à
états, coûts figés, garde alimentée par closureBlockers (source unique
API). Clôture terrain : bilan codé 6 champs au pouce (sélecteur plein
écran), garde visible, clôture en ligne. Préventif : mes grilles →
checklist cochable, appui long = N/A, aria-checked (leçon RN web :
accessibilityState.checked ne produit pas aria-checked).

Écritures en ligne assumées en R4.2 (bandeaux hors-ligne explicites) —
la file persistée et le verrou optimiste sont R4.3 (D1/D2).

Vérifié 12/12 en Expo web piloté : scan → fiche → OT-0341 (505 MAD,
garde), coche/décoche restituée, OT de test Démarrer → bilan → Terminé,
zéro erreur console, données purgées. 12 tests jest-expo.

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

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

@@ -0,0 +1,177 @@
+import { router, useLocalSearchParams } from 'expo-router';
+import { Alert, 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 { useHorsLigne } from '@/auth/session';
+import { BoutonTel, Carte, ChipStatut, EnteteFiche, LigneInfo } from '@/composants/ui';
+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). */
+export default function PageFicheOT() {
+  const t = useTokens();
+  const horsLigne = useHorsLigne();
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const { data: ot } = useWorkOrder(id);
+  const transition = useTransition(id);
+
+  if (!ot) return null;
+
+  const grille = progression(ot.checklist);
+  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) },
+    );
+
+  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} />} />
+        <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 17, color: t.encre }}>
+          {ot.title}
+        </Text>
+        {horsLigne ? (
+          <View
+            style={{
+              backgroundColor: t.stAttenteFond,
+              borderColor: t.stAttente,
+              borderWidth: 1,
+              borderRadius: 10,
+              padding: 9,
+            }}
+          >
+            <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).
+            </Text>
+          </View>
+        ) : null}
+
+        <Carte titre="Intervention">
+          <LigneInfo nom="Type" valeur={WORK_ORDER_TYPE_LABELS[ot.type]} />
+          <LigneInfo
+            nom="Équipement"
+            valeur={`Asc. ${ot.assetReference} — ${ot.siteName}`}
+          />
+          <LigneInfo
+            nom="Priorité"
+            valeur={
+              <Text
+                style={{
+                  fontFamily: 'Manrope_700Bold',
+                  fontSize: 12.5,
+                  color: ot.priority === 'PERSON_TRAPPED' || ot.priority === 'HIGH' ? t.prioHaute : t.encre,
+                }}
+              >
+                {WORK_ORDER_PRIORITY_LABELS[ot.priority]}
+              </Text>
+            }
+          />
+          <LigneInfo
+            nom="Échéance"
+            valeur={
+              ot.dueDate
+                ? new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' }).format(new Date(ot.dueDate))
+                : '—'
+            }
+          />
+          {ot.request ? (
+            <LigneInfo nom="Demande liée" valeur={`${ot.request.reference} · ${ot.request.requesterLabel}`} />
+          ) : null}
+        </Carte>
+
+        <Carte titre={`Pièces & main-d'œuvre — ${fmt.format(ot.costs.total)} MAD`}>
+          {ot.costs.parts.map((p) => (
+            <LigneInfo key={p.id} nom={`${p.designation} × ${p.quantity}`} valeur={`${fmt.format(p.total)}`} />
+          ))}
+          {ot.costs.labor.map((l) => (
+            <LigneInfo
+              key={l.id}
+              nom={`${l.displayName} · ${Math.floor(l.minutes / 60)} h ${String(l.minutes % 60).padStart(2, '0')} × ${fmt.format(l.hourlyRate)}/h`}
+              valeur={`${fmt.format(l.total)}`}
+            />
+          ))}
+          {!ot.costs.parts.length && !ot.costs.labor.length ? (
+            <Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 12.5 }}>
+              Aucune consommation ni temps saisi. (Saisies pièces/temps : depuis le web en R4.2.)
+            </Text>
+          ) : null}
+        </Carte>
+
+        {ot.checklist.length ? (
+          <Carte titre={`Checklist liée — ${grille.faits}/${grille.total}`}>
+            <BoutonTel
+              libelle={grille.faits === grille.total ? 'Grille complète ✓ — revoir' : 'Cocher la grille'}
+              variante="contour"
+              surAppui={() => router.push(`/ot/${ot.id}/grille`)}
+            />
+          </Carte>
+        ) : null}
+
+        {ot.closureBlockers.length && (peutCloturer || ot.status === 'IN_PROGRESS') ? (
+          <Text style={{ color: t.alerte, fontFamily: 'Manrope_600SemiBold', fontSize: 12 }}>
+            ⚠ {ot.closureBlockers.join(' · ')}
+          </Text>
+        ) : null}
+
+        {peutDemarrer ? (
+          <BoutonTel
+            libelle={ot.status === 'ON_HOLD' ? 'Reprendre' : 'Démarrer'}
+            desactive={horsLigne || transition.isPending}
+            surAppui={demarrer}
+          />
+        ) : null}
+        {peutCloturer ? (
+          <BoutonTel
+            libelle="Clôturer l'intervention"
+            variante="vert"
+            desactive={horsLigne}
+            surAppui={() => router.push(`/ot/${ot.id}/cloture`)}
+          />
+        ) : null}
+        {peutSuspendre ? (
+          <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) },
+              )
+            }
+          />
+        ) : null}
+
+        <Carte titre="Activité">
+          {ot.events.slice(0, 5).map((e) => (
+            <View key={e.id} style={{ gap: 1 }}>
+              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 12, color: t.encre }}>
+                {e.kind}
+                {e.message ? ` — ${e.message}` : ''}
+              </Text>
+              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 11, color: t.encre3 }}>
+                {new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium', timeStyle: 'short' }).format(
+                  new Date(e.createdAt),
+                )}
+                {e.by ? ` · ${e.by.displayName}` : ''}
+              </Text>
+            </View>
+          ))}
+        </Carte>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}