feat(r6): R6.3 — Ressources sur mobile (Stock, Tiers, Fichiers)

api/ressources.ts (usePartners, useParts/usePart, useCreatePurchaseOrder,
useDocuments). Écran Stock (sous-seuil en tête) + fiche pièce + "Commander"
pré-rempli en une ligne (fournisseur figé, quantité = manquant jusqu'au
seuil, prix = dernier connu — BC multi-lignes détaillé réservé au web, D4).
Tiers en lecture seule (création/édition réservées au web). Fichiers en
métadonnées seules — l'ouverture demande expo-sharing (dépendance native
absente, donc un nouveau build natif) : différée explicitement plutôt
qu'ajoutée à la légère au milieu de cette passe.

Menu : Stock & achats / Tiers / Fichiers routent réellement.

Typecheck propre, 17 tests Jest, lint 5/5 paquets. Contrat non touché,
toutes les opérations utilisées existaient déjà depuis R3.

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

apps/mobile/app/(tabs)/menu.tsx

@@ -45,9 +45,9 @@ const GROUPES: { titre: string; liens: LienMenu[] }[] = [
   {
     titre: 'Ressources',
     liens: [
-      { libelle: 'Stock & achats', ico: '◔', permission: ['PARTS', 'view'], aVenir: 'Le stock et les bons de commande en mobilité arrivent dans une prochaine étape.' },
-      { libelle: 'Tiers', ico: '⇄', permission: ['PURCHASE_ORDERS', 'view'], aVenir: 'Fournisseurs et clients restent sur le grand écran pour l’instant.' },
-      { libelle: 'Fichiers', ico: '▧', permission: ['ASSETS', 'view'], aVenir: 'La bibliothèque documentaire reste sur le grand écran pour l’instant.' },
+      { libelle: 'Stock & achats', ico: '◔', permission: ['PARTS', 'view'], route: '/stock' },
+      { libelle: 'Tiers', ico: '⇄', permission: ['PURCHASE_ORDERS', 'view'], route: '/tiers' },
+      { libelle: 'Fichiers', ico: '▧', permission: ['ASSETS', 'view'], route: '/bibliotheque' },
     ],
   },
   {

apps/mobile/app/bibliotheque/index.tsx

@@ -0,0 +1,80 @@
+import { FlatList, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useDocuments } from '@/api/ressources';
+import { EnteteFiche } from '@/composants/ui';
+import { useTokens } from '@/theme/tokens';
+
+const ICONE_TYPE: Record<string, string> = {
+  NOTICE: '📘',
+  CERTIFICATE: '📜',
+  PHOTO: '🖼',
+  OTHER: '📄',
+};
+
+function taille(octets: number): string {
+  if (octets < 1024) return `${octets} o`;
+  if (octets < 1024 * 1024) return `${Math.round(octets / 1024)} Ko`;
+  return `${(octets / (1024 * 1024)).toFixed(1)} Mo`;
+}
+
+/** Fichiers — R6.3 (Ressources). Consultation des métadonnées seulement
+ *  (D4) : l'ouverture/téléchargement d'un document sur mobile demande un
+ *  flux authentifié (l'API le streame, MinIO n'est jamais exposé) suivi
+ *  d'un partage natif — nécessite `expo-sharing`, pas encore une dépendance
+ *  du projet ; ajoutée dans une prochaine étape plutôt que d'introduire une
+ *  nouvelle dépendance native (et donc un nouveau build) dans cette passe.
+ *  En attendant : ouvrir depuis le web. */
+export default function PageBibliotheque() {
+  const t = useTokens();
+  const { data: documents } = useDocuments();
+  const fichiers = [...(documents ?? [])].sort(
+    (a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt),
+  );
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
+      <View style={{ flex: 1, padding: 14, gap: 10 }}>
+        <EnteteFiche titre="Fichiers" />
+        <Text style={{ fontFamily: 'Manrope_600SemiBold', fontSize: 11.5, color: t.encre3 }}>
+          Consultation seulement — l'ouverture se fait depuis le web pour l'instant.
+        </Text>
+        <FlatList
+          data={fichiers}
+          keyExtractor={(d) => d.id}
+          contentContainerStyle={{ gap: 8, paddingBottom: 12 }}
+          ListEmptyComponent={
+            <Text style={{ color: t.encre3, fontFamily: 'Manrope_600SemiBold', padding: 16, textAlign: 'center' }}>
+              Aucun document accessible.
+            </Text>
+          }
+          renderItem={({ item: d }) => (
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                backgroundColor: t.surface,
+                borderColor: t.bordure,
+                borderWidth: 1,
+                borderRadius: 12,
+                padding: 12,
+              }}
+            >
+              <Text style={{ fontSize: 20 }}>{ICONE_TYPE[d.kind] ?? '📄'}</Text>
+              <View style={{ flex: 1, gap: 1 }}>
+                <Text numberOfLines={1} style={{ fontFamily: 'Manrope_700Bold', fontSize: 13, color: t.encre }}>
+                  {d.fileName}
+                </Text>
+                <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 11.5, color: t.encre2 }}>
+                  {[d.assetReference && `Asc. ${d.assetReference}`, d.workOrderReference, taille(d.size)]
+                    .filter(Boolean)
+                    .join(' · ')}
+                </Text>
+              </View>
+            </View>
+          )}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}

apps/mobile/app/stock/[id].tsx

@@ -0,0 +1,65 @@
+import { router, useLocalSearchParams } from 'expo-router';
+import { ScrollView, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { usePart } from '@/api/ressources';
+import { usePermissions } from '@/auth/use-permissions';
+import { BoutonTel, Carte, EnteteFiche, LigneInfo } from '@/composants/ui';
+import { useTokens } from '@/theme/tokens';
+
+const fmt = new Intl.NumberFormat('fr-FR');
+const fmtMAD = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'MAD' });
+
+/** Fiche pièce — R6.3. Consultation + une action courante (D4) : commander,
+ *  pré-rempli depuis cette fiche, comme la maquette (écran 6). Les
+ *  mouvements de stock (entrée manuelle, ajustement) restent au web. */
+export default function PageFichePiece() {
+  const t = useTokens();
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const { data: piece } = usePart(id);
+  const { can } = usePermissions();
+
+  if (!piece) return null;
+
+  const peutCommander = can('PURCHASE_ORDERS', 'create') && !!piece.supplierId;
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
+      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
+        <EnteteFiche titre={piece.designation} />
+        <Carte titre="Identité">
+          <LigneInfo nom="Référence" valeur={piece.reference} />
+          <LigneInfo
+            nom="Stock"
+            valeur={
+              <Text
+                style={{
+                  color: piece.belowThreshold ? t.danger : t.encre,
+                  fontFamily: 'Manrope_700Bold',
+                  fontSize: 12.5,
+                }}
+              >
+                {fmt.format(piece.stock)}
+              </Text>
+            }
+          />
+          <LigneInfo nom="Seuil d'alerte" valeur={fmt.format(piece.threshold)} />
+          <LigneInfo nom="Fournisseur" valeur={piece.supplierName ?? '—'} />
+          <LigneInfo
+            nom="Dernier prix"
+            valeur={piece.lastUnitPrice != null ? fmtMAD.format(piece.lastUnitPrice) : '—'}
+          />
+          {piece.compatible ? <LigneInfo nom="Compatible" valeur={piece.compatible} /> : null}
+        </Carte>
+
+        {peutCommander ? (
+          <BoutonTel libelle="Commander" surAppui={() => router.push(`/stock/${piece.id}/commander`)} />
+        ) : null}
+        {!piece.supplierId && can('PURCHASE_ORDERS', 'create') ? (
+          <Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 12, textAlign: 'center' }}>
+            Aucun fournisseur associé — commande depuis le web.
+          </Text>
+        ) : null}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

apps/mobile/app/stock/[id]/commander.tsx

@@ -0,0 +1,99 @@
+import { router, useLocalSearchParams } from 'expo-router';
+import { useState } from 'react';
+import { ScrollView, Text, TextInput, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useCreatePurchaseOrder, usePart } from '@/api/ressources';
+import { BoutonTel, Carte, EnteteFiche, LigneInfo } from '@/composants/ui';
+import { useTokens } from '@/theme/tokens';
+
+/** Nouveau BC pré-rempli depuis l'alerte stock — maquette écran 6. Une
+ *  seule ligne (cette pièce) : le bon de commande multi-lignes détaillé
+ *  reste au web (D4). */
+export default function PageCommander() {
+  const t = useTokens();
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const { data: piece } = usePart(id);
+  const creation = useCreatePurchaseOrder();
+  const manquant = piece ? Math.max(piece.threshold - piece.stock, 1) : 1;
+  const [quantite, setQuantite] = useState(String(manquant));
+  const [prix, setPrix] = useState('');
+
+  if (!piece || !piece.supplierId) return null;
+  const prixDefaut = piece.lastUnitPrice != null ? String(piece.lastUnitPrice) : '';
+  const prixSaisi = prix || prixDefaut;
+  const qte = Number(quantite);
+  const pu = Number(prixSaisi);
+  const valide = qte > 0 && pu >= 0 && Number.isFinite(qte) && Number.isFinite(pu);
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
+      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
+        <EnteteFiche titre="Nouveau BC" />
+        <Carte titre="Ligne">
+          <LigneInfo nom="Fournisseur" valeur={piece.supplierName ?? '—'} />
+          <LigneInfo nom="Pièce" valeur={`${piece.designation} (${piece.reference})`} />
+        </Carte>
+        <View style={{ gap: 4 }}>
+          <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 11, color: t.encre2 }}>Quantité</Text>
+          <TextInput
+            accessibilityLabel="Quantité"
+            keyboardType="numeric"
+            value={quantite}
+            onChangeText={setQuantite}
+            style={{
+              borderWidth: 1.5,
+              borderColor: t.bordureForte,
+              borderRadius: 9,
+              paddingHorizontal: 10,
+              paddingVertical: 9,
+              color: t.encre,
+              fontFamily: 'Manrope_600SemiBold',
+              fontSize: 13,
+            }}
+          />
+        </View>
+        <View style={{ gap: 4 }}>
+          <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 11, color: t.encre2 }}>
+            Prix unitaire (MAD)
+          </Text>
+          <TextInput
+            accessibilityLabel="Prix unitaire"
+            keyboardType="numeric"
+            placeholder={prixDefaut || '0'}
+            placeholderTextColor={t.encre3}
+            value={prix}
+            onChangeText={setPrix}
+            style={{
+              borderWidth: 1.5,
+              borderColor: t.bordureForte,
+              borderRadius: 9,
+              paddingHorizontal: 10,
+              paddingVertical: 9,
+              color: t.encre,
+              fontFamily: 'Manrope_600SemiBold',
+              fontSize: 13,
+            }}
+          />
+        </View>
+        {creation.isError ? (
+          <Text style={{ color: t.danger, fontFamily: 'Manrope_600SemiBold', fontSize: 12.5 }}>
+            {creation.error.message}
+          </Text>
+        ) : null}
+        <BoutonTel
+          libelle="Créer le BC"
+          desactive={!valide || creation.isPending}
+          surAppui={() =>
+            creation.mutate(
+              {
+                supplierId: piece.supplierId!,
+                lines: [{ partId: piece.id, quantity: qte, unitPrice: pu }],
+              },
+              { onSuccess: () => (router.canGoBack() ? router.back() : router.replace('/stock')) },
+            )
+          }
+        />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

apps/mobile/app/stock/index.tsx

@@ -0,0 +1,90 @@
+import { router } from 'expo-router';
+import { FlatList, Pressable, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useParts } from '@/api/ressources';
+import { EnteteFiche } from '@/composants/ui';
+import { useTokens } from '@/theme/tokens';
+
+const fmt = new Intl.NumberFormat('fr-FR');
+
+/** Stock — R6.3 (Ressources). Sous-seuil en tête, comme le web (stock.tsx) —
+ *  ce qui demande une action passe avant le reste. */
+export default function PageStock() {
+  const t = useTokens();
+  const { data: parts } = useParts();
+  const pieces = [...(parts ?? [])].sort((a, b) => {
+    if (a.belowThreshold !== b.belowThreshold) return a.belowThreshold ? -1 : 1;
+    return a.designation.localeCompare(b.designation);
+  });
+  const sousSeuil = pieces.filter((p) => p.belowThreshold).length;
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
+      <View style={{ flex: 1, padding: 14, gap: 10 }}>
+        <EnteteFiche
+          titre="Stock & achats"
+          apres={
+            sousSeuil ? (
+              <Text
+                style={{
+                  fontFamily: 'Manrope_800ExtraBold',
+                  fontSize: 10.5,
+                  color: t.danger,
+                  backgroundColor: t.prioBloqueFond,
+                  paddingHorizontal: 8,
+                  paddingVertical: 2,
+                  borderRadius: 999,
+                }}
+              >
+                {sousSeuil} sous seuil
+              </Text>
+            ) : undefined
+          }
+        />
+        <FlatList
+          data={pieces}
+          keyExtractor={(p) => p.id}
+          contentContainerStyle={{ gap: 8, paddingBottom: 12 }}
+          ListEmptyComponent={
+            <Text style={{ color: t.encre3, fontFamily: 'Manrope_600SemiBold', padding: 16, textAlign: 'center' }}>
+              Aucune pièce accessible.
+            </Text>
+          }
+          renderItem={({ item: p }) => (
+            <Pressable
+              accessibilityRole="button"
+              onPress={() => router.push(`/stock/${p.id}`)}
+              style={{
+                backgroundColor: t.surface,
+                borderColor: p.belowThreshold ? t.danger : t.bordure,
+                borderWidth: p.belowThreshold ? 1.5 : 1,
+                borderRadius: 12,
+                padding: 12,
+                gap: 2,
+              }}
+            >
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <Text style={{ flex: 1, fontFamily: 'Manrope_700Bold', fontSize: 14, color: t.encre }}>
+                  {p.designation}
+                </Text>
+                <Text
+                  style={{
+                    fontFamily: 'Manrope_800ExtraBold',
+                    fontSize: 13,
+                    color: p.belowThreshold ? t.danger : t.encre,
+                  }}
+                >
+                  {fmt.format(p.stock)}
+                </Text>
+              </View>
+              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: t.encre2 }}>
+                {p.reference} · seuil {fmt.format(p.threshold)}
+                {p.supplierName ? ` · ${p.supplierName}` : ''}
+              </Text>
+            </Pressable>
+          )}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}

apps/mobile/app/tiers/index.tsx

@@ -0,0 +1,67 @@
+import { FlatList, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { usePartners } from '@/api/ressources';
+import { EnteteFiche } from '@/composants/ui';
+import { useTokens } from '@/theme/tokens';
+
+/** Tiers — R6.3 (Ressources). Consultation seule sur mobile (D4) : la
+ *  création/édition de fournisseurs et clients reste au web pour l'instant. */
+export default function PageTiers() {
+  const t = useTokens();
+  const { data: partners } = usePartners();
+  const tiers = [...(partners ?? [])].sort((a, b) => a.name.localeCompare(b.name));
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
+      <View style={{ flex: 1, padding: 14, gap: 10 }}>
+        <EnteteFiche titre="Tiers" />
+        <FlatList
+          data={tiers}
+          keyExtractor={(p) => p.id}
+          contentContainerStyle={{ gap: 8, paddingBottom: 12 }}
+          ListEmptyComponent={
+            <Text style={{ color: t.encre3, fontFamily: 'Manrope_600SemiBold', padding: 16, textAlign: 'center' }}>
+              Aucun tiers accessible.
+            </Text>
+          }
+          renderItem={({ item: p }) => (
+            <View
+              style={{
+                backgroundColor: t.surface,
+                borderColor: t.bordure,
+                borderWidth: 1,
+                borderRadius: 12,
+                padding: 12,
+                gap: 2,
+                opacity: p.isActive ? 1 : 0.55,
+              }}
+            >
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <Text style={{ flex: 1, fontFamily: 'Manrope_700Bold', fontSize: 14, color: t.encre }}>
+                  {p.name}
+                </Text>
+                <Text
+                  style={{
+                    fontFamily: 'Manrope_700Bold',
+                    fontSize: 10.5,
+                    color: p.kind === 'SUPPLIER' ? t.stOuvert : t.stEncours,
+                    backgroundColor: p.kind === 'SUPPLIER' ? t.stOuvertFond : t.stEncoursFond,
+                    paddingHorizontal: 8,
+                    paddingVertical: 2,
+                    borderRadius: 999,
+                  }}
+                >
+                  {p.kind === 'SUPPLIER' ? 'Fournisseur' : 'Client'}
+                </Text>
+              </View>
+              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: t.encre2 }}>
+                {[p.contactName, p.phone, p.city].filter(Boolean).join(' · ') || '—'}
+                {p.kind === 'SUPPLIER' && p.openOrders ? ` · ${p.openOrders} BC en cours` : ''}
+              </Text>
+            </View>
+          )}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}

apps/mobile/src/api/ressources.ts

@@ -0,0 +1,47 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { PurchaseOrderCreate } from '@siop/shared';
+import { api, unwrap } from './client';
+
+/** Hooks R6.3 — Ressources (Stock, Tiers, Fichiers) : mêmes opérations que
+ *  le web (gestion.ts), périmètre mobile plus étroit (D4 — consultation +
+ *  action courante « commander », pas les flux de gestion les plus denses :
+ *  pas de création/édition de pièce ou de tiers sur mobile pour l'instant). */
+
+export function usePartners() {
+  return useQuery({
+    queryKey: ['partners'],
+    queryFn: async () => (await unwrap(await api.GET('/partners'))).partners,
+  });
+}
+
+export function useParts() {
+  return useQuery({
+    queryKey: ['parts'],
+    queryFn: async () => (await unwrap(await api.GET('/parts'))).parts,
+  });
+}
+
+export function usePart(id: string) {
+  return useQuery({
+    queryKey: ['parts', id],
+    queryFn: async () => unwrap(await api.GET('/parts/{id}', { params: { path: { id } } })),
+  });
+}
+
+export function useCreatePurchaseOrder() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (body: PurchaseOrderCreate) =>
+      unwrap(await api.POST('/purchase-orders', { body })),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['purchase-orders'] }),
+  });
+}
+
+/** Bibliothèque complète (sans filtre appareil/OT — voir aussi
+ *  `useDocumentsOT` dans exploitation.ts, scopée à un OT). */
+export function useDocuments() {
+  return useQuery({
+    queryKey: ['documents'],
+    queryFn: async () => (await unwrap(await api.GET('/documents'))).documents,
+  });
+}