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

version nice

Browse Source
This commit is contained in:
nBiqoz
2025-07-26 21:39:49 +02:00
parent aa19bb82a0
commit 5ba4fdc450
16 changed files with 1462 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
app/components/EntityMappingTable.tsx Normal file
View File

@@ -0,0 +1,135 @@
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";
interface EntityMapping {
originalValue: string;
anonymizedValue: string;
entityType: string;
startIndex: number;
endIndex: number;
}
interface EntityMappingTableProps {
mappings: EntityMapping[];
}
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
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-gray-500 text-center py-4 text-sm">
Aucune entité sensible détectée dans le texte.
</p>
</CardContent>
</Card>
);
}
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" : ""})
</CardTitle>
</CardHeader>
<CardContent className="px-2 sm:px-6">
{/* Version mobile : Cards empilées */}
<div className="block sm:hidden space-y-4">
{mappings.map((mapping, index) => (
<div
key={index}
className="border border-gray-200 rounded-lg p-4 bg-gray-50"
>
<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>
<Badge
variant="outline"
className="bg-[#f7ab6e] bg-opacity-20 text-[#092727] border-[#f7ab6e] text-xs"
>
{mapping.entityType}
</Badge>
</div>
<div className="space-y-2">
<div>
<span className="text-xs font-medium text-gray-600 block mb-1">
Valeur originale
</span>
<div className="font-mono text-xs bg-red-50 text-red-700 p-2 rounded border break-all">
{mapping.originalValue}
</div>
</div>
<div>
<span className="text-xs font-medium text-gray-600 block mb-1">
Valeur anonymisée
</span>
<div className="font-mono text-xs bg-green-50 text-green-700 p-2 rounded border break-all">
{mapping.anonymizedValue}
</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&apos;entité
</TableHead>
<TableHead className="font-semibold text-[#092727] min-w-[150px]">
Valeur originale
</TableHead>
<TableHead className="font-semibold text-[#092727] min-w-[150px]">
Valeur anonymisée
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mappings.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}
</Badge>
</TableCell>
<TableCell className="font-mono text-sm bg-red-50 text-red-700 py-4 max-w-[200px] break-all">
{mapping.originalValue}
</TableCell>
<TableCell className="font-mono text-sm bg-green-50 text-green-700 py-4 max-w-[200px] break-all">
{mapping.anonymizedValue}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
);
};