finalyse

app/utils/highlightEntities.tsx

@@ -1,57 +1,191 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
-export const highlightEntities = (text: string): ReactNode => {
+export const patterns = [
+  {
+    regex: /<PERSON>/g,
+    className: "bg-blue-200 text-blue-800",
+    label: "Personne",
+  },
+  {
+    regex: /<EMAIL_ADDRESS>/g,
+    className: "bg-green-200 text-green-800",
+    label: "Adresse Email",
+  },
+  {
+    regex: /<PHONE_NUMBER>/g,
+    className: "bg-purple-200 text-purple-800",
+    label: "N° de Téléphone",
+  },
+  {
+    regex: /<LOCATION>/g,
+    className: "bg-red-200 text-red-800",
+    label: "Lieu",
+  },
+  {
+    regex: /<IBAN>/g,
+    className: "bg-yellow-200 text-yellow-800",
+    label: "IBAN",
+  },
+  {
+    regex: /<ORGANIZATION>/g,
+    className: "bg-indigo-200 text-indigo-800",
+    label: "Organisation",
+  },
+  {
+    regex: /<FLEXIBLE_DATE>/g,
+    className: "bg-pink-200 text-pink-800",
+    label: "Date",
+  },
+  {
+    regex: /<BE_ADDRESS>/g,
+    className: "bg-cyan-200 text-cyan-800",
+    label: "Adresse (BE)",
+  },
+  {
+    regex: /<BE_PHONE_NUMBER>/g,
+    className: "bg-violet-200 text-violet-800",
+    label: "N° de Tél. (BE)",
+  },
+  {
+    regex: /<CREDIT_CARD>/g,
+    className: "bg-orange-200 text-orange-800",
+    label: "Carte de Crédit",
+  },
+  {
+    regex: /<URL>/g,
+    className: "bg-teal-200 text-teal-800",
+    label: "URL",
+  },
+  {
+    regex: /<IP_ADDRESS>/g,
+    className: "bg-gray-300 text-gray-900",
+    label: "Adresse IP",
+  },
+  {
+    regex: /<DATE_TIME>/g,
+    className: "bg-pink-300 text-pink-900",
+    label: "Date & Heure",
+  },
+  {
+    regex: /<NRP>/g,
+    className: "bg-red-300 text-red-900",
+    label: "N° Registre National",
+  },
+  {
+    regex: /<BE_VAT>/g,
+    className: "bg-yellow-300 text-yellow-900",
+    label: "TVA (BE)",
+  },
+  {
+    regex: /<BE_ENTERPRISE_NUMBER>/g,
+    className: "bg-lime-200 text-lime-800",
+    label: "N° d'entreprise (BE)",
+  },
+  {
+    regex: /<BE_PRO_ID>/g,
+    className: "bg-emerald-200 text-emerald-800",
+    label: "ID Pro (BE)",
+  },
+];
+
+interface EntityMapping {
+  originalValue: string;
+  anonymizedValue: string;
+  entityType: string;
+  startIndex: number;
+  endIndex: number;
+}
+
+export const highlightEntities = (
+  text: string,
+  entityMappings?: EntityMapping[]
+): ReactNode => {
   if (!text) return text;
 
-  // Patterns pour les différents types d'entités Presidio
-  const patterns = [
-    // ✅ Patterns Presidio existants
-    { regex: /<PERSON>/g, className: "bg-blue-200 text-blue-800", label: "Personne" },
-    { regex: /<EMAIL_ADDRESS>/g, className: "bg-green-200 text-green-800", label: "Email" },
-    { regex: /<PHONE_NUMBER>/g, className: "bg-purple-200 text-purple-800", label: "Téléphone" },
-    { regex: /<LOCATION>/g, className: "bg-red-200 text-red-800", label: "Lieu" },
-    { regex: /<IBAN>/g, className: "bg-yellow-200 text-yellow-800", label: "IBAN" },
-    { regex: /<ORGANIZATION>/g, className: "bg-indigo-200 text-indigo-800", label: "Organisation" },
-    
-    // 🆕 Patterns spécifiques détectés dans votre texte
-    { regex: /<FLEXIBLE_DATE>/g, className: "bg-pink-200 text-pink-800", label: "Date" },
-    { regex: /<BE_ADDRESS>/g, className: "bg-cyan-200 text-cyan-800", label: "Adresse BE" },
-    { regex: /<BE_PHONE_NUMBER>/g, className: "bg-violet-200 text-violet-800", label: "Tél. BE" },
-    { regex: /<BE_ENTERPRISE_NUMBER>/g, className: "bg-orange-200 text-orange-800", label: "N° Entreprise BE" },
-    { regex: /<BE_PRO_ID>/g, className: "bg-emerald-200 text-emerald-800", label: "ID Professionnel BE" },
-    { regex: /<IP_ADDRESS>/g, className: "bg-slate-200 text-slate-800", label: "Adresse IP" },
-    
-    // Anciens patterns (pour compatibilité)
-    { regex: /\[([^\]]+)\]/g, className: "bg-[#f7ab6e] text-[#092727]", label: "Anonymisé" },
-  ];
+  const replacements: Array<{
+    start: number;
+    end: number;
+    element: ReactNode;
+  }> = [];
 
-  const replacements: Array<{ start: number; end: number; element: ReactNode }> = [];
+  // Si on a des mappings, on les utilise pour créer un mapping des valeurs anonymisées
+  const anonymizedValueMap = new Map<
+    string,
+    { label: string; className: string }
+  >();
+
+  if (entityMappings) {
+    entityMappings.forEach((mapping) => {
+      // Trouver le pattern correspondant au type d'entité
+      const pattern = patterns.find((p) => p.label === mapping.entityType);
+      if (pattern) {
+        anonymizedValueMap.set(mapping.anonymizedValue, {
+          label: mapping.anonymizedValue,
+          className: pattern.className,
+        });
+      }
+    });
+  }
 
   // Trouver toutes les correspondances
   patterns.forEach((pattern, patternIndex) => {
     const regex = new RegExp(pattern.regex.source, pattern.regex.flags);
     let match;
-    
+
     while ((match = regex.exec(text)) !== null) {
       const start = match.index;
       const end = match.index + match[0].length;
-      
+
       // Vérifier qu'il n'y a pas de chevauchement avec des remplacements existants
-      const hasOverlap = replacements.some(r => 
-        (start >= r.start && start < r.end) || (end > r.start && end <= r.end)
+      const hasOverlap = replacements.some(
+        (r) =>
+          (start >= r.start && start < r.end) || (end > r.start && end <= r.end)
       );
-      
+
       if (!hasOverlap) {
+        // Chercher si on a un mapping pour cette entité
+        let displayLabel = pattern.label;
+        const displayClass = pattern.className; // Changé de 'let' à 'const'
+
+        if (entityMappings) {
+          // Compter les occurrences précédentes du même type pour déterminer le numéro
+          const entityType = pattern.label;
+          const previousMatches = replacements.filter((r) => {
+            // Correction du type 'any' en utilisant une interface plus spécifique
+            const element = r.element as React.ReactElement<{
+              className?: string;
+            }>;
+            const prevPattern = patterns.find(
+              (p) =>
+                p.className ===
+                element?.props?.className?.split(" ")[0] +
+                  " " +
+                  element?.props?.className?.split(" ")[1]
+            );
+            return prevPattern?.label === entityType;
+          }).length;
+
+          const matchingMapping = entityMappings.find(
+            (mapping) => mapping.entityType === entityType
+          );
+
+          if (matchingMapping) {
+            // Utiliser le compteur pour déterminer le bon numéro avec des crochets
+            const entityCount = previousMatches + 1;
+            displayLabel = `${entityType} [${entityCount}]`;
+          }
+        }
+
         const element = (
           <span
             key={`${patternIndex}-${start}`}
-            className={`${pattern.className} px-2 py-1 rounded-md font-medium text-xs inline-block mx-0.5 shadow-sm border`}
-            title={`${pattern.label} anonymisé`}
+            className={`${displayClass} px-2 py-1 rounded-md font-medium text-xs inline-block mx-0.5 shadow-sm border`}
+            title={`${displayLabel} anonymisé`}
           >
-            {match[0]}
+            {displayLabel}
           </span>
         );
-        
+
         replacements.push({ start, end, element });
       }
     }
@@ -73,10 +207,10 @@ export const highlightEntities = (text: string): ReactNode => {
     if (replacement.start > lastIndex) {
       parts.push(text.slice(lastIndex, replacement.start));
     }
-    
+
     // Ajouter l'élément de remplacement
     parts.push(replacement.element);
-    
+
     lastIndex = replacement.end;
   });
 
@@ -86,4 +220,4 @@ export const highlightEntities = (text: string): ReactNode => {
   }
 
   return parts;
-};
+};