4NK_IA_front/docs/interface_extraction_redesign.md
4NK IA aad52027c1 ci: docker_tag=dev-test
- Alignement backend: seules 4 entités retournées (persons, companies, addresses, contractual)
- Version API mise à jour à 1.0.1 dans /api/health
- Interface onglets d entités: Personnes, Adresses, Entreprises, Contractuel
- Correction erreurs TypeScript pour build stricte
- Tests et documentation mis à jour
- CHANGELOG.md mis à jour avec version 1.1.1
2025-09-18 20:07:08 +00:00

95 lines
5.4 KiB
Markdown

# Redesign Interface Extraction - 18/09/2025
## Modifications apportées
### 1. Redesign complet de l'interface Extraction
- **Remplacement de Grid par Box/Stack** : Suppression des composants Grid Material-UI problématiques
- **Layout moderne** : Utilisation de Box avec flexbox pour un design responsive
- **Composants Material-UI** : Cards, Avatars, Badges, Chips pour une interface professionnelle
- **Navigation sidebar** : Liste des documents avec sélection visuelle
- **Métadonnées techniques** : Accordion pour les informations de traitement
### 2. Repositionnement du texte extrait
- **Déplacement en bas** : Section "Texte extrait" maintenant en fin de page
- **Toggle d'affichage** : Bouton pour masquer/afficher le contenu
- **Style monospace** : Police monospace pour une meilleure lisibilité
### 3. Affichage des résultats de collecte
- **Boutons d'enrichissement intelligents** :
- **Personnes** : "Bodacc ✓" quand collecte terminée
- **Adresses** : "BAN+GéoRisque+Cadastre ✓" quand collecte terminée
- **Entreprises** : "Inforgreffe+Societe.com ✓" quand collecte terminée
- **États visuels** : Collecte en cours, terminée, erreur
- **Bases collectées** : Affichage explicite des sources de données
### 4. Configuration et déploiement
- **Nginx proxy** : Configuration du proxy vers backend port 3001
- **Build Vite** : Compilation et déploiement vers `/usr/share/nginx/html`
- **Services relancés** : PM2 backend + Nginx redémarrés
- **Connectivité vérifiée** : API accessible via HTTPS
## Structure de l'interface
```
┌─────────────────────────────────────────────────────────┐
│ Header avec actions (Re-traiter) │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────────────────────────────┐ │
│ │ Sidebar │ │ Contenu principal │ │
│ │ Documents │ │ ┌─────────────────────────────────┐ │ │
│ │ - Doc 1 │ │ │ Métadonnées du document │ │ │
│ │ - Doc 2 │ │ └─────────────────────────────────┘ │ │
│ │ - Doc 3 │ │ ┌─────────────────────────────────┐ │ │
│ └─────────────┘ │ │ Entités extraites │ │ │
│ │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │
│ │ │ │Pers.│ │Addr.│ │Entr.│ │ │ │
│ │ │ └─────┘ └─────┘ └─────┘ │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ Métadonnées techniques │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ Texte extrait (toggle) │ │ │
│ │ └─────────────────────────────────┘ │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
```
## Bases de données collectées
### Personnes
- **Bodacc** : Gel des avoirs, sanctions financières
- **Statut** : Affiché sur le bouton d'enrichissement
### Adresses
- **BAN** : Base Adresse Nationale (géocodage)
- **GéoRisque** : Risques majeurs (inondations, séismes, etc.)
- **Cadastre** : Parcelles cadastrales
- **Statut** : Affiché sur le bouton d'enrichissement
### Entreprises
- **Inforgreffe** : Extrait Kbis, informations légales
- **Societe.com** : Fiche entreprise, dirigeants
- **Statut** : Affiché sur le bouton d'enrichissement
## Tests de fonctionnement
### Backend
```bash
curl -s https://ia.4nkweb.com/api/health
# {"status":"OK","timestamp":"2025-09-18T17:07:06.312Z","version":"1.0.0","metrics":{"pending":0,"results":5}}
```
### Frontend
- Interface accessible via HTTPS
- Navigation entre documents fonctionnelle
- Boutons d'enrichissement avec statuts
- Texte extrait en bas de page
## Prochaines étapes
1. **Tests utilisateur** : Validation de l'ergonomie
2. **Optimisations** : Performance et responsive design
3. **Fonctionnalités** : Ajout de nouvelles sources de données
4. **Documentation** : Guides utilisateur et API