mirror of
https://github.com/siop-spelev/siop2.git
synced 2026-08-08 12:41:54 +00:00
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>
This commit is contained in:
pr-daaif
144
apps/mobile/app/ot/[id]/cloture.tsx
Normal file
144
apps/mobile/app/ot/[id]/cloture.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import { useState } from 'react';
|
||||
import { Alert, ScrollView, Text, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import {
|
||||
BILAN_FIELD_LABELS,
|
||||
BILAN_FIELDS,
|
||||
REQUIRED_BILAN_FIELDS,
|
||||
type BilanField,
|
||||
type ReportUpsert,
|
||||
} from '@siop/shared';
|
||||
import { useBilan, useReferenceValues, useTransition, useWorkOrder } from '@/api/exploitation';
|
||||
import { useHorsLigne } from '@/auth/session';
|
||||
import { BoutonTel, Carte, ChoixTel, EnteteFiche } from '@/composants/ui';
|
||||
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. */
|
||||
|
||||
const CHAMP_VERS_ID: Record<BilanField, keyof ReportUpsert> = {
|
||||
DOOR_STATE: 'doorStateId',
|
||||
CABIN_POSITION: 'cabinPositionId',
|
||||
ANOMALY: 'anomalyId',
|
||||
EXTERNAL_CAUSE: 'externalCauseId',
|
||||
ACTION_TAKEN: 'actionTakenId',
|
||||
COMPONENT_CONCERNED: 'componentConcernedId',
|
||||
};
|
||||
const CHAMP_VERS_VALEUR = {
|
||||
DOOR_STATE: 'doorState',
|
||||
CABIN_POSITION: 'cabinPosition',
|
||||
ANOMALY: 'anomaly',
|
||||
EXTERNAL_CAUSE: 'externalCause',
|
||||
ACTION_TAKEN: 'actionTaken',
|
||||
COMPONENT_CONCERNED: 'componentConcerned',
|
||||
} as const;
|
||||
|
||||
export default function PageCloture() {
|
||||
const t = useTokens();
|
||||
const horsLigne = useHorsLigne();
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { data: ot } = useWorkOrder(id);
|
||||
const { data: valeurs } = useReferenceValues();
|
||||
const bilan = useBilan(id);
|
||||
const transition = useTransition(id);
|
||||
const [choix, setChoix] = useState<Partial<Record<BilanField, string | null>>>({});
|
||||
|
||||
if (!ot) return null;
|
||||
|
||||
const optionsDe = (champ: BilanField) =>
|
||||
(valeurs ?? []).filter((v: { field: string; isActive: boolean }) => v.field === champ && v.isActive);
|
||||
|
||||
/** Valeur affichée : le choix local s'il existe, sinon le bilan serveur. */
|
||||
const valeurDe = (champ: BilanField): { id: string; label: string } | null => {
|
||||
if (champ in choix) {
|
||||
const vid = choix[champ];
|
||||
if (!vid) return null;
|
||||
const v = (valeurs ?? []).find((x) => x.id === vid);
|
||||
return v ? { id: v.id, label: v.label } : null;
|
||||
}
|
||||
return ot.report?.[CHAMP_VERS_VALEUR[champ]] ?? null;
|
||||
};
|
||||
|
||||
const enregistrer = (apres?: () => void) => {
|
||||
const corps: ReportUpsert = {};
|
||||
for (const champ of BILAN_FIELDS) {
|
||||
if (champ in choix) corps[CHAMP_VERS_ID[champ]] = choix[champ] ?? null;
|
||||
}
|
||||
bilan.mutate(corps, {
|
||||
onSuccess: apres,
|
||||
onError: (e) => Alert.alert('Bilan refusé', e.message),
|
||||
});
|
||||
};
|
||||
|
||||
const cloturer = () =>
|
||||
enregistrer(() =>
|
||||
transition.mutate(
|
||||
{ to: 'DONE' },
|
||||
{
|
||||
onSuccess: () => router.replace(`/ot/${id}`),
|
||||
onError: (e) => Alert.alert('Clôture bloquée', e.message),
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
const manquants = REQUIRED_BILAN_FIELDS.filter((c) => !valeurDe(c));
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
|
||||
<ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
|
||||
<EnteteFiche titre={`Clôturer ${ot.reference}`} />
|
||||
<Carte titre="Bilan d'intervention — requis pour clôturer">
|
||||
<View style={{ gap: 10 }}>
|
||||
{[0, 2, 4].map((rang) => (
|
||||
<View key={rang} style={{ flexDirection: 'row', gap: 8 }}>
|
||||
{[BILAN_FIELDS[rang]!, BILAN_FIELDS[rang + 1]!].map((champ) => (
|
||||
<ChoixTel
|
||||
key={champ}
|
||||
libelle={BILAN_FIELD_LABELS[champ]}
|
||||
requis={REQUIRED_BILAN_FIELDS.includes(champ)}
|
||||
valeur={valeurDe(champ)}
|
||||
options={optionsDe(champ)}
|
||||
surChoix={(vid) => setChoix((c) => ({ ...c, [champ]: vid }))}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
{manquants.length ? (
|
||||
<Text style={{ color: t.alerte, fontFamily: 'Manrope_600SemiBold', fontSize: 12 }}>
|
||||
⚠ {manquants.map((c) => `« ${BILAN_FIELD_LABELS[c]} »`).join(', ')}{' '}
|
||||
{manquants.length > 1 ? 'manquent' : 'manque'} — la clôture restera bloquée (même garde
|
||||
que le web).
|
||||
</Text>
|
||||
) : null}
|
||||
</Carte>
|
||||
|
||||
<BoutonTel
|
||||
libelle={bilan.isPending ? 'Enregistrement…' : 'Enregistrer le bilan'}
|
||||
variante="contour"
|
||||
desactive={horsLigne || bilan.isPending}
|
||||
surAppui={() => enregistrer()}
|
||||
/>
|
||||
<BoutonTel
|
||||
libelle={
|
||||
manquants.length
|
||||
? 'Clôturer (bilan incomplet)'
|
||||
: transition.isPending
|
||||
? 'Clôture…'
|
||||
: "Clôturer l'intervention"
|
||||
}
|
||||
variante={manquants.length ? 'gris' : 'vert'}
|
||||
desactive={horsLigne || manquants.length > 0 || bilan.isPending || transition.isPending}
|
||||
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.
|
||||
</Text>
|
||||
) : null}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
125
apps/mobile/app/ot/[id]/grille.tsx
Normal file
125
apps/mobile/app/ot/[id]/grille.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { useLocalSearchParams } from 'expo-router';
|
||||
import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useCocheChecklist, useWorkOrder } from '@/api/exploitation';
|
||||
import { useHorsLigne } from '@/auth/session';
|
||||
import { EnteteFiche } from '@/composants/ui';
|
||||
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). */
|
||||
export default function PageGrille() {
|
||||
const t = useTokens();
|
||||
const horsLigne = useHorsLigne();
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { data: ot } = useWorkOrder(id);
|
||||
const coche = useCocheChecklist(id);
|
||||
|
||||
if (!ot) return null;
|
||||
const { faits, total, pct } = progression(ot.checklist);
|
||||
|
||||
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) },
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
|
||||
<ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
|
||||
<EnteteFiche
|
||||
titre={`Grille — ${ot.assetReference}`}
|
||||
apres={
|
||||
<Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 13, color: t.encre2 }}>
|
||||
{faits}/{total}
|
||||
</Text>
|
||||
}
|
||||
/>
|
||||
<View style={{ height: 8, borderRadius: 999, backgroundColor: t.surface2, overflow: 'hidden' }}>
|
||||
<View
|
||||
style={{ width: `${Math.round(pct * 100)}%`, height: '100%', backgroundColor: t.succes }}
|
||||
/>
|
||||
</View>
|
||||
{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 — les coches en file arrivent en R4.3 ; pour l’instant la grille est en
|
||||
lecture.
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
{ot.checklist.map((item) => (
|
||||
<Pressable
|
||||
key={item.id}
|
||||
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)}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
backgroundColor: t.surface,
|
||||
borderColor: t.bordure,
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 11,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 6,
|
||||
borderWidth: 2,
|
||||
borderColor: item.state === 'DONE' ? t.succes : t.bordureForte,
|
||||
backgroundColor: item.state === 'DONE' ? t.succes : 'transparent',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{item.state === 'DONE' ? (
|
||||
<Text style={{ color: '#fff', fontSize: 13, fontFamily: 'Manrope_800ExtraBold' }}>✓</Text>
|
||||
) : item.state === 'NA' ? (
|
||||
<Text style={{ color: t.encre3, fontSize: 10, fontFamily: 'Manrope_800ExtraBold' }}>NA</Text>
|
||||
) : null}
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
flex: 1,
|
||||
fontFamily: 'Manrope_600SemiBold',
|
||||
fontSize: 13,
|
||||
color: item.state === 'PENDING' ? t.encre : t.encre2,
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Text>
|
||||
{item.doneBy ? (
|
||||
<Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 10.5, color: t.encre3 }}>
|
||||
{item.doneBy.displayName.split(' ')[0]}
|
||||
</Text>
|
||||
) : null}
|
||||
</Pressable>
|
||||
))}
|
||||
<Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 11.5 }}>
|
||||
Appui simple : cocher / décocher · appui long : non-applicable.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
177
apps/mobile/app/ot/[id]/index.tsx
Normal file
177
apps/mobile/app/ot/[id]/index.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user