nacim/Anonyme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

interface interactive

Browse Source
This commit is contained in:
nBiqoz
2025-09-07 12:30:23 +02:00
parent 74e56c956c
commit ef0819ae90
27 changed files with 1827 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
app/components/EntityMappingTable.tsx
View File

@@ -8,14 +8,7 @@ import {
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
interface EntityMapping {
originalValue: string;
anonymizedValue: string;
entityType: string;
startIndex: number;
endIndex: number;
}
import { EntityMapping } from "../config/entityLabels";
interface EntityMappingTableProps {
mappings: EntityMapping[];
@@ -24,65 +17,72 @@ interface EntityMappingTableProps {
export const EntityMappingTable = ({ mappings }: EntityMappingTableProps) => {
if (!mappings || mappings.length === 0) {
return (
<Card className="mt-6">
<CardHeader className="pb-4">
<CardTitle className="text-base sm:text-lg font-medium text-[#092727]">
Tableau de mapping des entités
<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-4 text-sm">
Aucune entité sensible détectée dans le texte.
<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.displayName || mapping.replacementValue || `[${entityType}]`,
};
});
return (
<Card className="mt-6">
<CardHeader className="pb-4">
<CardTitle className="text-base sm:text-lg font-medium text-[#092727]">
Tableau de mapping des entités ({mappings.length} entité
{mappings.length > 1 ? "s" : ""} anonymisée
{mappings.length > 1 ? "s" : ""})
<Card className="mt-8">
<CardHeader>
<CardTitle className="text-lg font-medium text-[#092727]">
Entités détectées ({mappings.length})
</CardTitle>
</CardHeader>
<CardContent className="px-2 sm:px-6">
<CardContent>
{/* Version mobile : Cards empilées */}
<div className="block sm:hidden space-y-4">
{mappings.map((mapping, index) => (
<div className="sm:hidden space-y-4">
{mappingsWithNumbers.map((mapping, index) => (
<div
key={index}
className="border border-gray-200 rounded-lg p-4 bg-gray-50"
className="border rounded-lg p-4 bg-white shadow-sm"
>
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-xs font-medium text-gray-600">
Type d&apos;entité
</span>
<div>
<Badge
variant="outline"
className="bg-[#f7ab6e] bg-opacity-20 text-[#092727] border-[#f7ab6e] text-xs"
className="bg-[#f7ab6e] bg-opacity-20 text-[#092727] border-[#f7ab6e]"
>
{mapping.entityType}
{mapping.displayName}
</Badge>
</div>
<div className="space-y-2">
<div>
<span className="text-xs font-medium text-gray-600 block mb-1">
Valeur originale
Texte détecté
</span>
<div className="font-mono text-xs bg-red-50 text-red-700 p-2 rounded border break-all">
{mapping.originalValue}
{mapping.text}
</div>
</div>
<div>
<span className="text-xs font-medium text-gray-600 block mb-1">
Valeur anonymisée
Identifiant
</span>
<div className="font-mono text-xs bg-green-50 text-green-700 p-2 rounded border break-all">
{mapping.anonymizedValue}
{mapping.displayName} #{mapping.entityNumber}
</div>
</div>
</div>
@@ -100,29 +100,29 @@ export const EntityMappingTable = ({ mappings }: EntityMappingTableProps) => {
Type d&apos;entité
</TableHead>
<TableHead className="font-semibold text-[#092727] min-w-[150px]">
Valeur originale
Texte détecté
</TableHead>
<TableHead className="font-semibold text-[#092727] min-w-[150px]">
Valeur anonymisée
<TableHead className="font-semibold text-[#092727] min-w-[100px]">
Identifiant
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mappings.map((mapping, index) => (
{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.entityType}
{mapping.displayName}
</Badge>
</TableCell>
<TableCell className="font-mono text-sm bg-red-50 text-red-700 py-4 max-w-[200px] break-all">
{mapping.originalValue}
{mapping.text}
</TableCell>
<TableCell className="font-mono text-sm bg-green-50 text-green-700 py-4 max-w-[200px] break-all">
{mapping.anonymizedValue}
<TableCell className="font-mono text-sm bg-green-50 text-green-700 py-4">
{mapping.displayName} #{mapping.entityNumber}
</TableCell>
</TableRow>
))}