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

5.4 KiB

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

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