new interactive
This commit is contained in:
Biqoz
@@ -1,4 +1,4 @@
|
||||
import { CheckCircle } from "lucide-react";
|
||||
import { CheckCircle, Info } from "lucide-react";
|
||||
|
||||
interface AnonymizationInterfaceProps {
|
||||
isProcessing: boolean;
|
||||
@@ -17,103 +17,181 @@ export const AnonymizationInterface = ({
|
||||
|
||||
const anonymizedTypes = new Set<string>();
|
||||
|
||||
if (outputText.includes("<PERSONNE>")) {
|
||||
anonymizedTypes.add("Prénoms");
|
||||
anonymizedTypes.add("Noms de famille");
|
||||
anonymizedTypes.add("Noms complets");
|
||||
// PII - Données personnelles
|
||||
if (outputText.includes("[PERSONNE]")) {
|
||||
anonymizedTypes.add("Noms et prénoms");
|
||||
}
|
||||
|
||||
// EMAIL_ADDRESS -> Adresses e-mail
|
||||
if (outputText.includes("<EMAIL_ADDRESS>")) {
|
||||
anonymizedTypes.add("Adresses e-mail");
|
||||
}
|
||||
|
||||
// PHONE_NUMBER -> Numéros de téléphone
|
||||
if (outputText.includes("<PHONE_NUMBER>")) {
|
||||
anonymizedTypes.add("Numéros de téléphone");
|
||||
}
|
||||
|
||||
// BE_PHONE_NUMBER -> aussi Numéros de téléphone
|
||||
if (outputText.includes("<BE_PHONE_NUMBER>")) {
|
||||
anonymizedTypes.add("Numéros de téléphone");
|
||||
}
|
||||
|
||||
// LOCATION -> Adresses
|
||||
if (outputText.includes("<LOCATION>")) {
|
||||
anonymizedTypes.add("Adresses");
|
||||
}
|
||||
|
||||
// BE_ADDRESS -> aussi Adresses
|
||||
if (outputText.includes("<BE_ADDRESS>")) {
|
||||
anonymizedTypes.add("Adresses");
|
||||
}
|
||||
|
||||
// DATE -> Dates
|
||||
if (outputText.includes("<DATE>") || outputText.includes("<DATE>")) {
|
||||
if (outputText.includes("[DATE]")) {
|
||||
anonymizedTypes.add("Dates");
|
||||
}
|
||||
|
||||
// IBAN -> Coordonnées bancaires (au lieu de Numéros d'ID)
|
||||
if (outputText.includes("<IBAN>")) {
|
||||
anonymizedTypes.add("Coordonnées bancaires");
|
||||
if (outputText.includes("[ADRESSE_EMAIL]")) {
|
||||
anonymizedTypes.add("Adresses e-mail");
|
||||
}
|
||||
if (
|
||||
outputText.includes("[TELEPHONE_FRANCAIS]") ||
|
||||
outputText.includes("[TELEPHONE_BELGE]") ||
|
||||
outputText.includes("[TELEPHONE]")
|
||||
) {
|
||||
anonymizedTypes.add("Numéros de téléphone");
|
||||
}
|
||||
if (
|
||||
outputText.includes("[ADRESSE_FRANCAISE]") ||
|
||||
outputText.includes("[ADRESSE_BELGE]") ||
|
||||
outputText.includes("[ADRESSE]")
|
||||
) {
|
||||
anonymizedTypes.add("Adresses postales");
|
||||
}
|
||||
if (outputText.includes("[LOCATION]")) {
|
||||
anonymizedTypes.add("Lieux géographiques");
|
||||
}
|
||||
if (
|
||||
outputText.includes("[CARTE_IDENTITE_FRANCAISE]") ||
|
||||
outputText.includes("[CARTE_IDENTITE_BELGE]") ||
|
||||
outputText.includes("[PASSEPORT_FRANCAIS]") ||
|
||||
outputText.includes("[PASSEPORT_BELGE]") ||
|
||||
outputText.includes("[PERMIS_CONDUIRE_FRANCAIS]")
|
||||
) {
|
||||
anonymizedTypes.add("Documents d'identité");
|
||||
}
|
||||
if (outputText.includes("[NUMERO_SECURITE_SOCIALE_FRANCAIS]")) {
|
||||
anonymizedTypes.add("Numéros de sécurité sociale");
|
||||
}
|
||||
if (outputText.includes("[BIOMETRIC_DATA]")) {
|
||||
anonymizedTypes.add("Données biométriques");
|
||||
}
|
||||
if (outputText.includes("[HEALTH_DATA]")) {
|
||||
anonymizedTypes.add("Données de santé");
|
||||
}
|
||||
if (
|
||||
outputText.includes("[SEXUAL_ORIENTATION]") ||
|
||||
outputText.includes("[POLITICAL_OPINIONS]")
|
||||
) {
|
||||
anonymizedTypes.add("Données sensibles RGPD");
|
||||
}
|
||||
|
||||
// CREDIT_CARD -> aussi Coordonnées bancaires (au lieu de Valeurs numériques)
|
||||
if (outputText.includes("<CREDIT_CARD>")) {
|
||||
anonymizedTypes.add("Coordonnées bancaires");
|
||||
// Données financières
|
||||
if (
|
||||
outputText.includes("[IBAN]") ||
|
||||
outputText.includes("[COMPTE_BANCAIRE_FRANCAIS]")
|
||||
) {
|
||||
anonymizedTypes.add("Comptes bancaires");
|
||||
}
|
||||
if (outputText.includes("[CREDIT_CARD]")) {
|
||||
anonymizedTypes.add("Cartes de crédit");
|
||||
}
|
||||
if (outputText.includes("[MONTANT_FINANCIER]")) {
|
||||
anonymizedTypes.add("Montants financiers");
|
||||
}
|
||||
if (outputText.includes("[NUMERO_FISCAL_FRANCAIS]")) {
|
||||
anonymizedTypes.add("Numéros fiscaux");
|
||||
}
|
||||
if (outputText.includes("[RGPD_FINANCIAL_DATA]")) {
|
||||
anonymizedTypes.add("Données financières RGPD");
|
||||
}
|
||||
|
||||
// NRP -> Numéros d'ID
|
||||
if (outputText.includes("<NRP>")) {
|
||||
anonymizedTypes.add("Numéros d'ID");
|
||||
// Business - Données d'entreprise
|
||||
if (outputText.includes("[ORGANISATION]")) {
|
||||
anonymizedTypes.add("Noms d'organisations");
|
||||
}
|
||||
if (
|
||||
outputText.includes("[SIRET_SIREN_FRANCAIS]") ||
|
||||
outputText.includes("[SOCIETE_FRANCAISE]") ||
|
||||
outputText.includes("[SOCIETE_BELGE]")
|
||||
) {
|
||||
anonymizedTypes.add("Entreprises et sociétés");
|
||||
}
|
||||
if (
|
||||
outputText.includes("[TVA_FRANCAISE]") ||
|
||||
outputText.includes("[TVA_BELGE]")
|
||||
) {
|
||||
anonymizedTypes.add("Numéros de TVA");
|
||||
}
|
||||
if (
|
||||
outputText.includes("[NUMERO_ENTREPRISE_BELGE]") ||
|
||||
outputText.includes("[REGISTRE_NATIONAL_BELGE]")
|
||||
) {
|
||||
anonymizedTypes.add("Identifiants d'entreprise");
|
||||
}
|
||||
if (outputText.includes("[SECRET_COMMERCIAL]")) {
|
||||
anonymizedTypes.add("Secrets commerciaux");
|
||||
}
|
||||
if (outputText.includes("[REFERENCE_CONTRAT]")) {
|
||||
anonymizedTypes.add("Références de contrats");
|
||||
}
|
||||
if (outputText.includes("[MARKET_SHARE]")) {
|
||||
anonymizedTypes.add("Parts de marché");
|
||||
}
|
||||
if (
|
||||
outputText.includes("[ID_PROFESSIONNEL_BELGE]") ||
|
||||
outputText.includes("[DONNEES_PROFESSIONNELLES]")
|
||||
) {
|
||||
anonymizedTypes.add("Identifiants professionnels");
|
||||
}
|
||||
|
||||
// BE_PRO_ID -> Numéros d'ID
|
||||
if (outputText.includes("<BE_PRO_ID>")) {
|
||||
anonymizedTypes.add("Numéros d'ID");
|
||||
// Données techniques
|
||||
if (outputText.includes("[ADRESSE_IP]")) {
|
||||
anonymizedTypes.add("Adresses IP");
|
||||
}
|
||||
|
||||
// BE_ENTERPRISE_NUMBER -> Numéros d'ID
|
||||
if (outputText.includes("<BE_ENTERPRISE_NUMBER>")) {
|
||||
anonymizedTypes.add("Numéros d'ID");
|
||||
if (outputText.includes("[URL_IDENTIFIANT]")) {
|
||||
anonymizedTypes.add("URLs et identifiants web");
|
||||
}
|
||||
|
||||
// URL -> Noms de domaine
|
||||
if (outputText.includes("<URL>")) {
|
||||
anonymizedTypes.add("Noms de domaine");
|
||||
if (outputText.includes("[CLE_API_SECRETE]")) {
|
||||
anonymizedTypes.add("Clés API secrètes");
|
||||
}
|
||||
|
||||
// CREDIT_CARD -> Coordonnées bancaires (supprimer la duplication)
|
||||
if (outputText.includes("<CREDIT_CARD>")) {
|
||||
anonymizedTypes.add("Coordonnées bancaires");
|
||||
if (outputText.includes("[IDENTIFIANT_PERSONNEL]")) {
|
||||
anonymizedTypes.add("Identifiants personnels");
|
||||
}
|
||||
|
||||
// IP_ADDRESS -> Valeurs numériques
|
||||
if (outputText.includes("<IP_ADDRESS>")) {
|
||||
anonymizedTypes.add("Valeurs numériques");
|
||||
if (outputText.includes("[LOCALISATION_GPS]")) {
|
||||
anonymizedTypes.add("Coordonnées GPS");
|
||||
}
|
||||
|
||||
// BE_VAT -> Valeurs numériques
|
||||
if (outputText.includes("<BE_VAT>")) {
|
||||
anonymizedTypes.add("Valeurs numériques");
|
||||
if (outputText.includes("[TITRE_CIVILITE]")) {
|
||||
anonymizedTypes.add("Titres de civilité");
|
||||
}
|
||||
|
||||
return anonymizedTypes;
|
||||
};
|
||||
|
||||
// Structure exacte de SupportedDataTypes (récupérée dynamiquement)
|
||||
// Structure mise à jour avec les vrais types de données
|
||||
const supportedDataStructure = [
|
||||
{
|
||||
items: ["Prénoms", "Numéros de téléphone", "Noms de domaine"],
|
||||
items: [
|
||||
"Noms et prénoms",
|
||||
"Numéros de téléphone",
|
||||
"URLs et identifiants web",
|
||||
],
|
||||
},
|
||||
{
|
||||
items: ["Noms de famille", "Adresses", "Dates"],
|
||||
items: ["Adresses postales", "Lieux géographiques", "Dates"],
|
||||
},
|
||||
{
|
||||
items: ["Noms complets", "Numéros d'ID", "Coordonnées bancaires"],
|
||||
items: ["Documents d'identité", "Comptes bancaires", "Cartes de crédit"],
|
||||
},
|
||||
{
|
||||
items: ["Adresses e-mail", "Valeurs monétaires", "Texte personnalisé"],
|
||||
items: ["Adresses e-mail", "Montants financiers", "Adresses IP"],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
"Noms d'organisations",
|
||||
"Entreprises et sociétés",
|
||||
"Numéros de TVA",
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
"Parts de marché",
|
||||
"Secrets commerciaux",
|
||||
"Références de contrats",
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
"Données biométriques",
|
||||
"Données de santé",
|
||||
"Données sensibles RGPD",
|
||||
],
|
||||
},
|
||||
{
|
||||
items: ["Clés API secrètes", "Coordonnées GPS", "Titres de civilité"],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -158,33 +236,61 @@ export const AnonymizationInterface = ({
|
||||
const anonymizedTypes = getAnonymizedDataTypes();
|
||||
|
||||
return (
|
||||
<div className="bg-green-50 border border-green-200 rounded-xl p-6">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<h4 className="text-sm font-semibold text-green-700">
|
||||
Anonymisation terminée avec succès
|
||||
</h4>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
|
||||
{supportedDataStructure.map((column, columnIndex) => (
|
||||
<div key={columnIndex} className="flex flex-col space-y-2">
|
||||
{column.items.map((item, itemIndex) => {
|
||||
const isAnonymized = anonymizedTypes.has(item);
|
||||
return (
|
||||
<span
|
||||
key={itemIndex}
|
||||
className={
|
||||
isAnonymized
|
||||
? "text-green-700 font-medium"
|
||||
: "text-gray-400"
|
||||
}
|
||||
>
|
||||
{isAnonymized ? "✓" : "•"} {item}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
<div className="space-y-4">
|
||||
{/* Instructions Panel */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Info className="h-5 w-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<div className="text-sm text-blue-800">
|
||||
<p className="font-medium mb-2">
|
||||
Instructions d'utilisation :
|
||||
</p>
|
||||
<ul className="space-y-1 text-blue-700">
|
||||
<li>• Survolez les mots pour les mettre en évidence</li>
|
||||
<li>
|
||||
• Cliquez pour sélectionner un mot, Ctrl/CMD (ou Shift) +
|
||||
clic.
|
||||
</li>
|
||||
<li>• Faites clic droit pour ouvrir le menu contextuel</li>
|
||||
<li>• Modifiez les labels et couleurs selon vos besoins</li>
|
||||
<li>
|
||||
• Utilisez "Toutes les occurrences" pour appliquer à
|
||||
tous les mots similaires
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bloc vert existant */}
|
||||
<div className="bg-green-50 border border-green-200 rounded-xl p-6">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<h4 className="text-sm font-semibold text-green-700">
|
||||
Anonymisation terminée avec succès
|
||||
</h4>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
|
||||
{supportedDataStructure.map((column, columnIndex) => (
|
||||
<div key={columnIndex} className="flex flex-col space-y-2">
|
||||
{column.items.map((item, itemIndex) => {
|
||||
const isAnonymized = anonymizedTypes.has(item);
|
||||
return (
|
||||
<span
|
||||
key={itemIndex}
|
||||
className={
|
||||
isAnonymized
|
||||
? "text-green-700 font-medium"
|
||||
: "text-gray-400"
|
||||
}
|
||||
>
|
||||
{isAnonymized ? "✓" : "•"} {item}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user