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 19 + TypeScript
- Build : Vite 7
- UI : Material-UI (MUI) v7
- State : Redux Toolkit + React Redux
- Routing : React Router v7
- HTTP : Axios
- Tests : Vitest + Testing Library
- Linting : ESLint + Prettier + markdownlint
📦 Installation
Prérequis
- Node.js >= 20.19.0 (LTS). Recommandé: 22.12+
- npm >= 10.0.0
- nvm recommandé pour gérer les versions de Node
Avec nvm:
nvm use # utilise la version définie dans .nvmrc
# ou, si non installée
nvm install && nvm use
Installation des dépendances
npm ci
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 format # Vérification Prettier
npm run format:fix # Formatage automatique
npm run mdlint # Vérification Markdown
# Tests
npm run test # Tests unitaires avec couverture
npm run test:ui # Tests avec interface
# Docker
./scripts/docker-build.sh # Construire l'image locale
IMAGE_TAG=0.1.3 ./scripts/docker-build.sh # Construire avec tag explicite
IMAGE_TAG=0.1.3 ./scripts/docker-push.sh # Pousser vers git.4nkweb.com
🏗️ 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
🔧 Intégration backend
Toutes les fonctionnalités (upload, extraction, analyse, données contextuelles, conseil LLM) passent par le backend 4NK_IA_back.
Les APIs externes (Cadastre, Géorisques, Géofoncier, BODACC, Infogreffe) sont appelées côté backend uniquement.
🧪 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
Exécution via Docker
# Construire l'image
./scripts/docker-build.sh
# Lancer localement
docker run --rm -p 8080:80 git.4nkweb.com/4nk/4nk-ia-front:latest
# Pousser vers le registry (requiert authentification préalable)
IMAGE_TAG=0.1.3 ./scripts/docker-push.sh
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
- Fork le projet
- Créer une branche feature (
git checkout -b feature/nouvelle-fonctionnalite) - Commit les changements (
git commit -m 'Ajouter nouvelle fonctionnalité') - Push vers la branche (
git push origin feature/nouvelle-fonctionnalite) - 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
📞 Support
Pour toute question ou problème :
- Ouvrir une issue
- Consulter la documentation
- Contacter l'équipe de développement
Version actuelle : 0.1.3 Dernière mise à jour : Septembre 2025