Kuddos - ERP de gestion de rapports et app mobile

Contexte du projet

Kuddos est une société spécialisée dans la maintenance et l'intervention technique pour des entreprises clientes (ascenseurs, climatisation, électricité, plomberie). Les techniciens se déplaçaient quotidiennement chez les clients pour effectuer des interventions et devaient rédiger des rapports détaillés.

Le problème : les rapports étaient rédigés à la main sur papier, puis ressaisis au bureau, entraînant :

• Pertes de temps considérables (double saisie)
• Erreurs de transcription
• Délais entre intervention et facturation
• Perte de documents papier
• Impossibilité de suivi en temps réel

L'objectif était de développer un écosystème complet :

1. ERP web : gestion centralisée des interventions, clients, facturation
2. App mobile : saisie terrain par les techniciens (offline-first)
3. Synchronisation bidirectionnelle temps réel
4. Génération PDF automatique des rapports

Technologies utilisées

Backend ERP Web

• Laravel 11 : framework PHP moderne
• PostgreSQL : base de données relationnelle
• Redis : cache et queue jobs
• Laravel Sanctum : authentification API
• Laravel Queue : traitements asynchrones (PDF, emails)

Frontend Web

• React 18 avec TypeScript
• Tailwind CSS : design system
• React Query : gestion état serveur
• React Hook Form : formulaires
• Zustand : state management

Application Mobile

• React Native : développement multiplateforme
• Expo : toolchain moderne pour React Native
• Expo Router : navigation file-based
• React Native Paper : composants UI Material Design
• AsyncStorage : stockage local pour offline
• Expo Camera : prise de photos
• Expo Location : géolocalisation
• Expo Secure Store : stockage sécurisé tokens

Infrastructure

• Docker : conteneurisation
• AWS : hébergement (EC2, RDS, S3)
• GitHub Actions : CI/CD
• Cloudflare : CDN et sécurité

Fonctionnalités principales

ERP Web - Back-office

Gestion des clients :

• Fiche client complète (coordonnées, contrats, historique)
• Sites multiples par client (bâtiments, adresses)
• Contacts par site (responsable, gardien, etc.)
• Documents associés (contrats, plans)
• Équipements installés par site

Planification des interventions :

• Calendrier visuel hebdomadaire/mensuel
• Affectation techniciens par intervention
• Types d'intervention (maintenance, dépannage, installation)
• Création intervention ponctuelle ou récurrente
• Notifications automatiques aux techniciens

Gestion des techniciens :

• Profil complet (compétences, certifications)
• Planning individuel
• Statistiques (nb interventions, temps moyen)
• Zones géographiques attribuées
• Matériel affecté (véhicule, outils)

Suivi des interventions :

• Dashboard temps réel (en cours, terminées, à valider)
• Géolocalisation des techniciens
• Statuts : planifiée, en cours, terminée, facturée
• Temps passé vs temps prévu
• Photos avant/après

Génération des rapports :

• Rapport PDF automatique post-intervention
• Template personnalisable par type d'intervention
• Photos intégrées au PDF
• Signature client numérique
• Envoi email automatique au client
• Archivage S3 avec versioning

Facturation :

• Génération facture depuis rapport validé
• Calcul automatique (temps, matériel, déplacement)
• Grilles tarifaires par client
• Export comptable (FEC, CSV)
• Suivi des paiements

Stocks et matériel :

• Gestion pièces détachées
• Stock camion par technicien
• Consommations par intervention
• Alertes si stock faible
• Commandes fournisseurs

Analytics & Reporting :

• CA par client, par type d'intervention
• Taux d'utilisation techniciens
• Temps moyen par type d'intervention
• SLA (délais d'intervention respectés)
• Satisfaction client (enquêtes post-intervention)

Application Mobile - Terrain

Vue liste des interventions :

• Interventions du jour du technicien
• Tri chronologique ou géographique
• Statut : à faire, en cours, terminées
• Navigation GPS intégrée vers le site
• Mode offline complet

Fiche intervention :

• Informations client et site
• Équipements concernés
• Description du problème/travail à effectuer
• Consignes spécifiques
• Historique interventions précédentes sur cet équipement

Rédaction du rapport (formulaire guidé) :

1. Début intervention

   • Check-in automatique (heure + GPS)
   • Photo compteur kilométrique (si déplacement)

2. État des lieux

   • Observations terrain
   • Photos avant travaux (illimité)
   • Équipements vérifiés (checklist)

3. Travaux effectués

   • Description travaux (texte libre + suggestions)
   • Pièces utilisées (scan code-barre ou recherche)
   • Quantités consommées
   • Temps passé par tâche

4. Photos et annexes

   • Photos après travaux
   • Prise de mesures (température, pression, etc.)
   • Croquis/schémas (dessin tactile)
   • QR Code équipement scanné

5. Signature client

   • Signature tactile sur écran
   • Commentaire client optionnel
   • Validation satisfaction (étoiles 1-5)

6. Fin intervention

   • Check-out automatique (heure)
   • Envoi immédiat si online
   • Mise en queue si offline

Mode Offline :

• Téléchargement des interventions du jour au démarrage
• Saisie complète sans connexion
• Photos stockées localement
• Synchronisation automatique dès connexion rétablie
• Indicateur visuel online/offline

Gestion matériel :

• Scan code-barre pièces
• Mise à jour stock camion
• Demande réapprovisionnement
• Inventaire quotidien rapide

Fonctionnalités annexes :

• Chat avec le back-office
• SOS (urgence sur site)
• Météo locale
• Historique des rapports du technicien

Résultats

Gains de productivité

• -70% du temps de saisie administrative (vs papier)
• +3 interventions/jour par technicien en moyenne
• Facturation J+1 vs J+7 auparavant
• 0 rapport perdu (vs 5-10/mois avant)
• Taux d'erreur divisé par 10

ROI et performance

• ROI : rentabilisé en 11 mois
• +35% de CA grâce aux interventions supplémentaires
• -40% coûts administratifs (moins de ressaisie)
• Délai moyen facturation : 1,2 jours vs 7 jours
• Taux d'adoption techniciens : 95% en 3 semaines

Satisfaction utilisateurs

Techniciens :

• Note app mobile : 4,6/5
• Retours positifs :
  • "Plus besoin de tout réécrire au bureau le soir !"
  • "Le mode offline marche parfaitement en sous-sol"
  • "La caméra intégrée fait gagner du temps"
• Taux d'utilisation quotidienne : 98%

Back-office :

• Note ERP : 4,4/5
• Apprécié :
  • Vision temps réel des interventions
  • Génération PDF automatique
  • Export comptable simplifié

Clients finaux :

• Taux de satisfaction : 4,7/5
• Apprécient :
  • Rapports professionnels avec photos
  • Rapidité d'envoi (même jour)
  • Traçabilité des interventions

Défis techniques

Synchronisation bidirectionnelle offline-first

Challenge majeur : l'app doit fonctionner sans connexion (sous-sols, zones blanches) :

Architecture implémentée :

Côté mobile (Expo) :

• AsyncStorage : stockage local JSON
• Queue système : file d'attente des actions offline
• Waterfall sync : envoi séquentiel à la reconnexion
• Gestion conflits : timestamp + stratégie "last-write-wins"

Workflow :

1. Téléchargement interventions du jour (matin, WiFi)
2. Mode offline activé → toutes les actions en queue
3. Technicien travaille normalement
4. Connexion rétablie → sync automatique
5. Backend valide et retourne confirmations
6. Purge des données locales obsolètes

Gestion des conflits :

• Si modification back-office pendant offline → alerte technicien
• Comparaison timestamps
• Choix manuel ou automatique selon règles métier

Génération PDF complexe avec photos

Génération de rapports PDF riches depuis l'API :

Stack PDF :

• Laravel-DomPDF : génération PDF depuis HTML
• Blade templates : mise en page flexible
• AWS S3 : stockage des PDFs générés
• Laravel Queue : génération asynchrone

Contenu PDF :

• En-tête personnalisé (logo client)
• Infos intervention (date, site, technicien)
• Travaux effectués (texte formaté)
• Photos redimensionnées automatiquement
• Pièces consommées (tableau)
• Signature client vectorisée
• Footer avec mentions légales

Optimisations :

• Compression images avant intégration
• Lazy loading des fonts
• Cache des templates compilés
• Génération en background (queue)
• Temps moyen : 8 secondes pour un rapport avec 10 photos

Gestion des photos multiplatform

Photos prises depuis l'app mobile (iOS + Android) :

Expo Camera :

const takePhoto = async () => {
  const photo = await camera.takePictureAsync({
    quality: 0.7, // Compression
    base64: false,
    exif: false,
  });
  
  // Redimensionnement client-side
  const resized = await ImageManipulator.manipulateAsync(
    photo.uri,
    [{ resize: { width: 1200 } }],
    { compress: 0.8, format: SaveFormat.JPEG }
  );
  
  // Upload vers S3 via API
  await uploadPhoto(resized.uri, interventionId);
};

Upload optimisé :

• Compression avant upload (80% qualité)
• Multipart upload pour grandes photos
• Retry automatique si échec réseau
• Preview immédiate (URI locale)
• Upload différé si offline

Sécurité multi-niveaux

Données sensibles clients + géolocalisation techniciens :

Mesures implémentées :

Mobile :

• Expo Secure Store pour tokens d'authentification
• Biométrie (Face ID/Touch ID) optionnelle
• SSL pinning pour les appels API
• Timeout session après 8h d'inactivité
• Wipe data à la déconnexion

Backend :

• Laravel Sanctum : tokens API révocables
• Rate limiting par utilisateur
• RBAC (Role-Based Access Control) fin
• Logs d'audit complets
• Chiffrement des données sensibles au repos

S3 :

• Signed URLs temporaires pour photos (15min)
• Bucket policy restrictive
• Versioning activé
• Encryption at rest (AES-256)

Performance app mobile

Fluidité critique pour adoption techniciens :

Optimisations React Native :

• FlatList virtualisée pour listes longues
• Memoization (React.memo, useMemo)
• Lazy loading des écrans
• Image caching avec react-native-fast-image
• Debouncing des recherches
• Animations natives (Reanimated)

Bundle size :

• Code splitting par route (Expo Router)
• Tree shaking des dépendances
• Hermes engine pour Android
• Taille finale : 35 MB (iOS), 28 MB (Android)

Performance runtime :

• 60 FPS constant sur la navigation
• Temps de démarrage : < 2s
• Consommation batterie optimisée (GPS intelligent)

Architecture technique

Backend Laravel

laravel-backend/
├── app/
│   ├── Http/
│   │   ├── Controllers/API/
│   │   │   ├── InterventionController.php
│   │   │   ├── ReportController.php
│   │   │   ├── TechnicianController.php
│   │   │   └── SyncController.php
│   │   └── Middleware/
│   │       └── CheckTechnicianRole.php
│   ├── Models/
│   │   ├── Intervention.php
│   │   ├── Report.php
│   │   ├── Client.php
│   │   ├── Site.php
│   │   ├── Technician.php
│   │   └── Stock.php
│   ├── Services/
│   │   ├── PdfGenerator.php
│   │   ├── SyncService.php
│   │   └── S3Service.php
│   └── Jobs/
│       ├── GenerateReportPdf.php
│       └── SendReportEmail.php
├── database/migrations/
├── routes/
│   ├── api.php (API mobile)
│   └── web.php (ERP web)
└── tests/

Frontend React

react-frontend/
├── src/
│   ├── components/
│   │   ├── Dashboard/
│   │   ├── Interventions/
│   │   ├── Reports/
│   │   └── Technicians/
│   ├── pages/
│   ├── hooks/
│   ├── services/
│   │   ├── api.ts
│   │   └── auth.ts
│   └── utils/
└── public/

App Mobile Expo

expo-mobile/
├── app/
│   ├── (auth)/
│   │   ├── login.tsx
│   │   └── _layout.tsx
│   ├── (tabs)/
│   │   ├── index.tsx (Liste interventions)
│   │   ├── intervention/[id].tsx
│   │   ├── stock.tsx
│   │   └── profile.tsx
│   └── _layout.tsx
├── components/
│   ├── InterventionCard.tsx
│   ├── ReportForm.tsx
│   ├── SignaturePad.tsx
│   └── PhotoGallery.tsx
├── services/
│   ├── api.ts
│   ├── sync.ts
│   └── storage.ts
├── hooks/
│   ├── useInterventions.ts
│   └── useOfflineSync.ts
└── app.json (Expo config)

Base de données PostgreSQL

Tables principales:
- clients (id, name, address, ...)
- sites (id, client_id, address, equipment, ...)
- technicians (id, user_id, skills, zone, ...)
- interventions (id, site_id, technician_id, scheduled_at, status, ...)
- reports (id, intervention_id, content, signature, pdf_url, ...)
- photos (id, report_id, s3_key, taken_at, ...)
- stock_items (id, sku, name, quantity, ...)
- consumptions (id, report_id, item_id, quantity, ...)
- invoices (id, client_id, month, total, status, ...)

Ce que j'ai appris

Développement mobile cross-platform

Maîtrise de React Native avec Expo :

• Expo SDK : caméra, géolocalisation, stockage sécurisé
• Offline-first : AsyncStorage, queues, sync
• Performances : optimisations RN spécifiques
• Build : EAS Build pour iOS + Android
• OTA updates : mise à jour sans app store

Architecture offline-first

Patterns pour fonctionnement sans connexion :

• Queue system pour actions différées
• Conflict resolution stratégies
• Optimistic UI updates
• Sync bidirectionnelle fiable
• Data persistence locale

Génération PDF serveur

PDF complexes avec Laravel :

• DomPDF pour rendu HTML → PDF
• Templates Blade réutilisables
• Images encodées base64
• Performance avec queues
• S3 storage scalable

UX mobile terrain

Design pour techniciens sur chantier :

• Gros boutons tactiles
• Contraste élevé (soleil)
• Indicateurs offline clairs
• Feedback visuel immédiat
• Workflow guidé étape par étape

Migration du papier au digital

Conduite du changement :

• Formation terrain par terrain
• Champions internes (early adopters)
• Support réactif pendant transition
• Amélioration continue selon feedbacks
• Mesure adoption et ROI

Ce projet Kuddos représente une transformation digitale complète d'un processus métier (rapports d'intervention) avec un écosystème complet ERP web + app mobile offline-first. Il démontre ma capacité à développer des solutions mobiles React Native complexes synchronisées avec un backend Laravel moderne.