4NK_IA_front/README.md

4NK IA Front Notarial

Application front-end pour l'analyse intelligente de documents notariaux avec IA.

🎯 Fonctionnalités

📄 Gestion de documents

• Upload multiple : Glisser-déposer de documents (PDF, images)
• Prévisualisation : Affichage des documents uploadés
• Types supportés : PDF, PNG, JPG, JPEG

🔍 Extraction et analyse

• OCR automatique : Extraction du texte des documents
• Détection de type : Identification automatique du type de document
• Objets standardisés : Extraction d'identités, adresses, biens, contrats
• Détection de langue : Identification automatique de la langue

📊 Analyse intelligente

• Score de vraisemblance : Évaluation de la crédibilité du document
• Recommandations : Suggestions d'actions à effectuer
• Synthèse : Résumé automatique du document

🌐 Données contextuelles

• Cadastre : Vérification des références cadastrales
• Géorisques : Analyse des risques géologiques
• BODACC : Vérification des procédures en cours
• Infogreffe : Contrôle des entreprises

🤖 Conseil IA

• Analyse LLM : Évaluation intelligente du document
• Détection de risques : Identification des éléments suspects
• Prochaines étapes : Recommandations d'actions

🚀 Technologies

• Frontend : React 18 + TypeScript
• Build : Vite 7
• UI : Material-UI (MUI) v6
• State : Redux Toolkit + React Redux
• Routing : React Router v6
• HTTP : Axios
• Tests : Vitest + Testing Library
• Linting : ESLint + Prettier + markdownlint

📦 Installation

Prérequis

• Node.js >= 22.12.0 (recommandé) ou >= 20.19.0
• npm >= 10.0.0

Installation des dépendances

npm install

Configuration des environnements

Créer un fichier .env :

VITE_API_URL=http://localhost:8000
VITE_CADASTRE_API_URL=https://api.cadastre.gouv.fr
VITE_GEORISQUES_API_URL=https://www.georisques.gouv.fr/api
VITE_GEOFONCIER_API_URL=https://api.geofoncier.fr
VITE_BODACC_API_URL=https://api.bodacc.fr
VITE_INFOGREFFE_API_URL=https://api.infogreffe.fr

🛠️ Scripts disponibles

# Développement
npm run dev          # Serveur de développement
npm run build        # Build de production
npm run preview      # Prévisualisation du build

# Qualité de code
npm run lint         # Vérification ESLint
npm run lint:fix     # Correction automatique ESLint
npm run format       # Vérification Prettier
npm run format:fix   # Formatage automatique
npm run mdlint       # Vérification Markdown

# Tests
npm run test         # Tests unitaires
npm run test:ui      # Tests avec interface
npm run test:coverage # Tests avec couverture

🏗️ Architecture

Structure du projet

src/
├── components/          # Composants réutilisables
│   ├── Layout.tsx      # Layout principal
│   └── NavigationTabs.tsx
├── views/              # Vues de l'application
│   ├── UploadView.tsx  # Upload de documents
│   ├── ExtractionView.tsx # Extraction de données
│   ├── AnalyseView.tsx # Analyse des documents
│   ├── ContexteView.tsx # Données contextuelles
│   └── ConseilView.tsx # Conseil IA
├── store/              # Gestion d'état Redux
│   ├── index.ts        # Configuration du store
│   ├── appSlice.ts     # État global
│   └── documentSlice.ts # État des documents
├── services/           # Services API
│   └── api.ts          # Client API et endpoints
├── types/              # Types TypeScript
│   └── index.ts        # Interfaces et types
└── main.tsx           # Point d'entrée

Gestion d'état

• Redux Toolkit : Gestion centralisée de l'état
• Async Thunks : Actions asynchrones pour les appels API
• Slices : Organisation modulaire du state

Services API

• Client Axios : Configuration centralisée
• Intercepteurs : Gestion d'erreur automatique
• Mode démo : Fallback automatique en cas d'erreur

🎨 Interface utilisateur

Design

• Material-UI : Composants modernes et accessibles
• Thème cohérent : Palette de couleurs professionnelle
• Responsive : Adaptation mobile et desktop
• Fond blanc : Interface claire et professionnelle

Navigation

• Onglets : Navigation intuitive entre les vues
• Breadcrumbs : Indication de la position actuelle
• Actions contextuelles : Boutons d'action selon la vue

🔧 Mode démonstration

L'application fonctionne parfaitement en mode démonstration :

• Données réalistes : Exemples d'actes notariaux
• Fonctionnalités complètes : Toutes les vues opérationnelles
• Gestion d'erreur : Fallback automatique sans backend
• Expérience utilisateur : Interface identique au mode production

🧪 Tests

Configuration

• Vitest : Framework de test rapide
• Testing Library : Tests d'intégration React
• JSDOM : Environnement DOM simulé
• Coverage : Couverture de code avec V8

Exécution

npm run test           # Tests en mode watch
npm run test:ui        # Interface graphique
npm run test:coverage  # Rapport de couverture

📚 Documentation

• docs/ : Documentation technique détaillée
• CHANGELOG.md : Historique des versions
• CONTRIBUTING.md : Guide de contribution
• CODE_OF_CONDUCT.md : Code de conduite

🚀 Déploiement

Build de production

npm run build

Variables d'environnement

Configurer les URLs des APIs externes selon l'environnement :

• Développement : http://localhost:8000
• Staging : URL de l'environnement de test
• Production : URL de l'API de production

🤝 Contribution

1. Fork le projet
2. Créer une branche feature (git checkout -b feature/nouvelle-fonctionnalite)
3. Commit les changements (git commit -m 'Ajouter nouvelle fonctionnalité')
4. Push vers la branche (git push origin feature/nouvelle-fonctionnalite)
5. Ouvrir une Pull Request

Standards de code

• ESLint : Règles strictes activées
• Prettier : Formatage automatique
• TypeScript : Typage strict
• Tests : Couverture minimale requise

📄 Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

🔗 Liens utiles

• Documentation Material-UI
• Redux Toolkit
• React Router
• Vite
• Vitest

📞 Support

Pour toute question ou problème :

• Ouvrir une issue
• Consulter la documentation
• Contacter l'équipe de développement

---

Version actuelle : 0.1.0 Dernière mise à jour : Janvier 2024