136 lines
4.6 KiB
TypeScript
136 lines
4.6 KiB
TypeScript
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { EntityMapping } from "../config/entityLabels";
|
|
|
|
interface EntityMappingTableProps {
|
|
mappings: EntityMapping[];
|
|
}
|
|
|
|
export const EntityMappingTable = ({ mappings }: EntityMappingTableProps) => {
|
|
if (!mappings || mappings.length === 0) {
|
|
return (
|
|
<Card className="mt-8">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-medium text-[#092727]">
|
|
Entités détectées
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-gray-500 text-center py-8">
|
|
Aucune entité détectée dans le document.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Créer un compteur pour chaque type d'entité
|
|
const entityCounts: { [key: string]: number } = {};
|
|
const mappingsWithNumbers = mappings.map((mapping) => {
|
|
const entityType = mapping.entity_type;
|
|
entityCounts[entityType] = (entityCounts[entityType] || 0) + 1;
|
|
return {
|
|
...mapping,
|
|
entityNumber: entityCounts[entityType],
|
|
displayName: mapping.entity_type,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<Card className="mt-8">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-medium text-[#092727]">
|
|
Entités détectées ({mappings.length})
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* Version mobile : Cards empilées */}
|
|
<div className="sm:hidden space-y-4">
|
|
{mappingsWithNumbers.map((mapping, index) => (
|
|
<div
|
|
key={index}
|
|
className="border rounded-lg p-4 bg-white shadow-sm"
|
|
>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Badge
|
|
variant="outline"
|
|
className="bg-[#f7ab6e] bg-opacity-20 text-[#092727] border-[#f7ab6e]"
|
|
>
|
|
{mapping.displayName}
|
|
</Badge>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<span className="text-xs font-medium text-gray-600 block mb-1">
|
|
Texte détecté
|
|
</span>
|
|
<div className="font-mono text-xs bg-red-50 text-red-700 p-2 rounded border break-all">
|
|
{mapping.text}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-xs font-medium text-gray-600 block mb-1">
|
|
Identifiant
|
|
</span>
|
|
<div className="font-mono text-xs bg-green-50 text-green-700 p-2 rounded border break-all">
|
|
{mapping.displayName} #{mapping.entityNumber}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Version desktop : Table classique */}
|
|
<div className="hidden sm:block overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="font-semibold text-[#092727] min-w-[120px]">
|
|
Type d'entité
|
|
</TableHead>
|
|
<TableHead className="font-semibold text-[#092727] min-w-[150px]">
|
|
Texte détecté
|
|
</TableHead>
|
|
<TableHead className="font-semibold text-[#092727] min-w-[100px]">
|
|
Identifiant
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{mappingsWithNumbers.map((mapping, index) => (
|
|
<TableRow key={index} className="hover:bg-gray-50">
|
|
<TableCell className="py-4">
|
|
<Badge
|
|
variant="outline"
|
|
className="bg-[#f7ab6e] bg-opacity-20 text-[#092727] border-[#f7ab6e]"
|
|
>
|
|
{mapping.displayName}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="font-mono text-sm bg-red-50 text-red-700 py-4 max-w-[200px] break-all">
|
|
{mapping.text}
|
|
</TableCell>
|
|
<TableCell className="font-mono text-sm bg-green-50 text-green-700 py-4">
|
|
{mapping.displayName} #{mapping.entityNumber}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|