refactoring
This commit is contained in:
4NK IA
parent
9af63f22fe
commit
d5a29d9b04
@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react'
|
||||
import {
|
||||
Box, Typography, Paper, Card, CardContent, Chip, Button, List, ListItemText, ListItemButton,
|
||||
Tooltip, Alert, Accordion, AccordionSummary, AccordionDetails, CircularProgress, TextField,
|
||||
Grid, Divider, Badge, Stack, Avatar, CardHeader, Fade,
|
||||
Divider, Badge, Stack, Avatar, CardHeader, Fade,
|
||||
Snackbar, Alert as MuiAlert
|
||||
} from '@mui/material'
|
||||
import {
|
||||
@ -308,40 +308,6 @@ export default function ExtractionView() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Texte extrait avec toggle */}
|
||||
<Card sx={{ mb: 3 }}>
|
||||
<CardHeader
|
||||
title="Texte extrait"
|
||||
avatar={<Avatar sx={{ bgcolor: 'info.main' }}><TextFields /></Avatar>}
|
||||
action={
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={showTextExtract ? <Visibility /> : <Visibility />}
|
||||
onClick={() => setShowTextExtract(!showTextExtract)}
|
||||
>
|
||||
{showTextExtract ? 'Masquer' : 'Afficher'}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Fade in={showTextExtract}>
|
||||
<CardContent sx={{ pt: 0 }}>
|
||||
<Paper
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: 'grey.50',
|
||||
maxHeight: 300,
|
||||
overflow: 'auto',
|
||||
border: '1px solid',
|
||||
borderColor: 'grey.200'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
|
||||
{extraction.extraction.text.raw}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</CardContent>
|
||||
</Fade>
|
||||
</Card>
|
||||
|
||||
{/* Entités extraites avec design moderne */}
|
||||
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
|
||||
@ -406,15 +372,17 @@ export default function ExtractionView() {
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`person-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`person-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('person', i)}
|
||||
>
|
||||
{enriching[`person-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'}
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`person-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`person-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('person', i)}
|
||||
>
|
||||
{enriching[`person-${i}`] === 'running' ? 'Collecte...' :
|
||||
enriching[`person-${i}`] === 'completed' ? 'Bodacc ✓' :
|
||||
enriching[`person-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
@ -453,12 +421,12 @@ export default function ExtractionView() {
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Adresses */}
|
||||
{addressesDraft.length > 0 && (
|
||||
<Grid item xs={12} lg={4}>
|
||||
<Box sx={{ flex: '1 1 300px', minWidth: 0 }}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardHeader
|
||||
title="Adresses"
|
||||
@ -476,21 +444,19 @@ export default function ExtractionView() {
|
||||
{addressesDraft.map((a: any, i: number) => (
|
||||
<Paper key={`a-${i}`} sx={{ p: 2, border: '1px solid', borderColor: 'grey.200' }}>
|
||||
<Stack spacing={2}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Rue"
|
||||
value={a.street}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], street: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Rue"
|
||||
value={a.street}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], street: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
@ -502,8 +468,6 @@ export default function ExtractionView() {
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
@ -515,47 +479,45 @@ export default function ExtractionView() {
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Pays"
|
||||
value={a.country}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], country: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Description"
|
||||
multiline
|
||||
rows={2}
|
||||
value={a.description}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], description: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Pays"
|
||||
value={a.country}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], country: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
label="Description"
|
||||
multiline
|
||||
rows={2}
|
||||
value={a.description}
|
||||
onChange={(e) => setAddressesDraft((prev) => {
|
||||
const c = [...prev]
|
||||
c[i] = { ...c[i], description: e.target.value }
|
||||
return c
|
||||
})}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`address-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`address-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('address', i)}
|
||||
>
|
||||
{enriching[`address-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'}
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`address-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`address-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('address', i)}
|
||||
>
|
||||
{enriching[`address-${i}`] === 'running' ? 'Collecte...' :
|
||||
enriching[`address-${i}`] === 'completed' ? 'BAN+GéoRisque+Cadastre ✓' :
|
||||
enriching[`address-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
@ -594,12 +556,12 @@ export default function ExtractionView() {
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Entreprises */}
|
||||
{companiesDraft.length > 0 && (
|
||||
<Grid item xs={12} lg={4}>
|
||||
<Box sx={{ flex: '1 1 300px', minWidth: 0 }}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardHeader
|
||||
title="Entreprises"
|
||||
@ -617,8 +579,8 @@ export default function ExtractionView() {
|
||||
{companiesDraft.map((c: any, i: number) => (
|
||||
<Paper key={`c-${i}`} sx={{ p: 2, border: '1px solid', borderColor: 'grey.200' }}>
|
||||
<Stack spacing={2}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Box>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
@ -630,8 +592,7 @@ export default function ExtractionView() {
|
||||
return x
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
</Box>
|
||||
<TextField
|
||||
size="small"
|
||||
fullWidth
|
||||
@ -645,19 +606,20 @@ export default function ExtractionView() {
|
||||
return x
|
||||
})}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`company-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`company-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('company', i)}
|
||||
>
|
||||
{enriching[`company-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'}
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={enriching[`company-${i}`] === 'running' ? <CircularProgress size={16} /> : <Search />}
|
||||
disabled={enriching[`company-${i}`] === 'running'}
|
||||
onClick={() => handleEnrichment('company', i)}
|
||||
>
|
||||
{enriching[`company-${i}`] === 'running' ? 'Collecte...' :
|
||||
enriching[`company-${i}`] === 'completed' ? 'Inforgreffe+Societe.com ✓' :
|
||||
enriching[`company-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
@ -696,65 +658,100 @@ export default function ExtractionView() {
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Métadonnées détaillées */}
|
||||
<Card sx={{ mt: 3 }}>
|
||||
<CardHeader
|
||||
title="Métadonnées techniques"
|
||||
avatar={<Avatar sx={{ bgcolor: 'grey.600' }}><Security /></Avatar>}
|
||||
/>
|
||||
<Divider />
|
||||
<CardContent>
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||||
<Typography>Informations de traitement</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Hash du fichier
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
|
||||
{extraction.fileHash}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Traitement effectué
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{new Date(extraction.status.timestamp).toLocaleString()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Confiance globale
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{(extraction.metadata.quality.globalConfidence * 100).toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid>
|
||||
{(extraction.metadata.quality as any).ollamaScore && (
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Score IA (Ollama)
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{((extraction.metadata.quality as any).ollamaScore * 100).toFixed(1)}%
|
||||
</Typography>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* Métadonnées détaillées */}
|
||||
<Card sx={{ mt: 3 }}>
|
||||
<CardHeader
|
||||
title="Métadonnées techniques"
|
||||
avatar={<Avatar sx={{ bgcolor: 'grey.600' }}><Security /></Avatar>}
|
||||
/>
|
||||
<Divider />
|
||||
<CardContent>
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||||
<Typography>Informations de traitement</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
|
||||
<Box sx={{ flex: '1 1 300px' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Hash du fichier
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
|
||||
{extraction.fileHash}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flex: '1 1 300px' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Traitement effectué
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{new Date(extraction.status.timestamp).toLocaleString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flex: '1 1 300px' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Confiance globale
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{(extraction.metadata.quality.globalConfidence * 100).toFixed(1)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
{(extraction.metadata.quality as any).ollamaScore && (
|
||||
<Box sx={{ flex: '1 1 300px' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Score IA (Ollama)
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{((extraction.metadata.quality as any).ollamaScore * 100).toFixed(1)}%
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Texte extrait avec toggle - déplacé en bas */}
|
||||
<Card sx={{ mt: 3 }}>
|
||||
<CardHeader
|
||||
title="Texte extrait"
|
||||
avatar={<Avatar sx={{ bgcolor: 'info.main' }}><TextFields /></Avatar>}
|
||||
action={
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={showTextExtract ? <Visibility /> : <Visibility />}
|
||||
onClick={() => setShowTextExtract(!showTextExtract)}
|
||||
>
|
||||
{showTextExtract ? 'Masquer' : 'Afficher'}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Fade in={showTextExtract}>
|
||||
<CardContent sx={{ pt: 0 }}>
|
||||
<Paper
|
||||
sx={{
|
||||
p: 2,
|
||||
bgcolor: 'grey.50',
|
||||
maxHeight: 300,
|
||||
overflow: 'auto',
|
||||
border: '1px solid',
|
||||
borderColor: 'grey.200'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
|
||||
{extraction.extraction.text.raw}
|
||||
</Typography>
|
||||
</Paper>
|
||||
</CardContent>
|
||||
</Fade>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Snackbar pour les notifications */}
|
||||
<Snackbar
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user