finalyse

app/components/FileUploadComponent.tsx

@@ -11,6 +11,14 @@ import { SupportedDataTypes } from "./SupportedDataTypes";
 import { AnonymizationInterface } from "./AnonymizationInterface";
 import { highlightEntities } from "../utils/highlightEntities";
 
+interface EntityMapping {
+  originalValue: string;
+  anonymizedValue: string;
+  entityType: string;
+  startIndex: number;
+  endIndex: number;
+}
+
 interface FileUploadComponentProps {
   uploadedFile: File | null;
   handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -26,8 +34,9 @@ interface FileUploadComponentProps {
   outputText?: string;
   copyToClipboard?: () => void;
   downloadText?: () => void;
-  isExampleLoaded?: boolean; // NOUVEAU
-  setIsExampleLoaded?: (loaded: boolean) => void; // NOUVEAU
+  isExampleLoaded?: boolean;
+  setIsExampleLoaded?: (loaded: boolean) => void;
+  entityMappings?: EntityMapping[]; // Ajouter cette prop
 }
 
 export const FileUploadComponent = ({
@@ -45,7 +54,8 @@ export const FileUploadComponent = ({
   outputText,
   copyToClipboard,
   downloadText,
-  setIsExampleLoaded, // NOUVEAU - Ajouté ici
+  setIsExampleLoaded,
+  entityMappings, // Ajouter cette prop ici
 }: FileUploadComponentProps) => {
   // On passe en preview seulement si :
   // 1. Un fichier est uploadé OU
@@ -133,7 +143,8 @@ export const FileUploadComponent = ({
                 <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-72 overflow-y-auto overflow-x-hidden">
                   <div className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap break-words overflow-wrap-anywhere leading-relaxed">
                     {highlightEntities(
-                      outputText || "Aucun contenu à afficher"
+                      outputText || "Aucun contenu à afficher",
+                      entityMappings // Ajouter les mappings ici
                     )}
                   </div>
                 </div>
@@ -206,7 +217,7 @@ export const FileUploadComponent = ({
               <button
                 onClick={onAnonymize}
                 disabled={isProcessing}
-                className="w-full sm:w-auto bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-3 rounded-lg text-sm font-medium transition-colors duration-300 flex items-center justify-center space-x-3"
+                className="w-full sm:w-auto bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 text-black px-6 py-3 rounded-lg text-sm font-medium transition-colors duration-300 flex items-center justify-center space-x-3 disabled:bg-gray-300 disabled:text-gray-800 disabled:font-bold disabled:cursor-not-allowed"
               >
                 {isProcessing ? (
                   <>
@@ -288,20 +299,22 @@ export const FileUploadComponent = ({
             </div>
 
             {/* Titre */}
-            <h3 className="text-sm font-semibold text-[#092727] mb-1 text-center">
+            <h3 className="text-lg font-semibold text-[#092727] mb-1 text-center">
               Saisissez votre texte
             </h3>
-            <p className="text-xs text-[#092727] opacity-80 mb-2 text-center">
+            <p className="text-md text-[#092727] opacity-80 mb-2 text-center">
               Tapez ou collez votre texte ici
             </p>
 
             {/* Zone de texte éditable */}
             <div className="relative border-2 border-gray-200 rounded-lg bg-white focus-within:border-[#f7ab6e] focus-within:ring-1 focus-within:ring-[#f7ab6e]/20 transition-all duration-300">
               {/* Zone pour le texte - SANS overflow */}
-              <div className="h-40 p-2 pb-6 relative"> {/* Ajout de pb-6 pour le compteur */}
+              <div className="h-40 p-2 pb-6 relative">
+                {" "}
+                {/* Ajout de pb-6 pour le compteur */}
                 {/* Placeholder personnalisé avec lien cliquable */}
                 {!sourceText && (
-                  <div className="absolute inset-2 text-gray-400 text-xs leading-relaxed pointer-events-none">
+                  <div className="absolute inset-2 text-gray-400 text-md leading-relaxed pointer-events-none">
                     <span>Commencez à taper du texte, ou&nbsp;</span>
                     <SampleTextComponent
                       setSourceText={setSourceText}
@@ -312,7 +325,6 @@ export const FileUploadComponent = ({
                     />
                   </div>
                 )}
-
                 <textarea
                   value={sourceText}
                   onChange={(e) => setSourceText(e.target.value)}
@@ -330,21 +342,29 @@ export const FileUploadComponent = ({
               </div>
 
               {/* Barre du bas avec sélecteur et bouton */}
-              <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between p-2 border-t border-gray-200 bg-gray-50 space-y-2 sm:space-y-0">
+              <div className="flex flex-col p-2 border-t border-gray-200 bg-gray-50 space-y-2">
                 {/* Sélecteur de type d'anonymisation */}
-                <div className="flex flex-col w-full sm:w-auto">
-                  <label className="text-xs text-gray-500 mb-1">Type de données :</label>
+                <div className="flex flex-col w-full">
+                  <label className="text-xs text-gray-500 mb-1">
+                    Type de données :
+                  </label>
                   <div className="relative">
-                    <select
-                      className="w-full sm:w-auto appearance-none bg-white border border-gray-300 text-gray-700 text-xs rounded-md pl-3 pr-8 py-2 focus:outline-none focus:ring-1 focus:ring-[#f7ab6e] focus:border-[#f7ab6e] transition-colors duration-200"
-                    >
-                      <option>Informations Personnellement Identifiables (PII)</option>
-                      <option disabled style={{ color: 'lightgray' }}>
+                    <select className="w-full appearance-none bg-white border border-gray-300 text-gray-700 text-xs rounded-md pl-3 pr-8 py-2 focus:outline-none focus:ring-1 focus:ring-[#f7ab6e] focus:border-[#f7ab6e] transition-colors duration-200">
+                      <option>
+                        Informations Personnellement Identifiables (PII)
+                      </option>
+                      <option disabled style={{ color: "lightgray" }}>
                         PII + Données Business (En développement)
                       </option>
                     </select>
                     <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                      <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+                      <svg
+                        className="fill-current h-4 w-4"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                      >
+                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+                      </svg>
                     </div>
                   </div>
                 </div>
@@ -353,7 +373,7 @@ export const FileUploadComponent = ({
                 <button
                   onClick={onAnonymize}
                   disabled={isProcessing || !sourceText.trim()}
-                  className="w-full sm:w-auto bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg text-xs font-medium transition-colors duration-300 flex items-center justify-center space-x-2 shadow-sm"
+                  className="w-full bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 text-black px-4 py-2 rounded-lg text-xs font-medium transition-colors duration-300 flex items-center justify-center space-x-2 shadow-sm disabled:bg-gray-300 disabled:text-gray-800 disabled:font-bold disabled:cursor-not-allowed"
                   title={
                     sourceText.trim()
                       ? "Anonymiser les données"
@@ -393,22 +413,21 @@ export const FileUploadComponent = ({
         <div className="border-2 border-dashed border-[#092727] rounded-xl bg-gray-50 hover:bg-gray-100 hover:border-[#0a3030] transition-all duration-300">
           <label className="flex flex-col items-center justify-center cursor-pointer group p-3 sm:p-4 h-full min-h-[200px]">
             {/* Upload Icon */}
-            <div className="w-10 h-10 bg-[#092727] group-hover:bg-[#0a3030] rounded-full flex items-center justify-center mb-3 transition-colors duration-300">
+            <div className="w-10 h-10 bg-[#f7ab6e] rounded-full flex items-center justify-center mb-3 transition-colors duration-300">
               <Upload className="h-5 w-5 text-white" />
             </div>
 
             {/* Titre */}
-            <h3 className="text-sm font-semibold text-[#092727] mb-1 group-hover:text-[#0a3030] transition-colors duration-300 text-center">
+            <h3 className="text-lg font-semibold text-[#092727] mb-1 group-hover:text-[#0a3030] transition-colors duration-300 text-center">
               Déposez votre fichier ici
             </h3>
-            <p className="text-xs text-[#092727] opacity-80 mb-3 text-center group-hover:opacity-90 transition-opacity duration-300">
+            <p className="text-sm text-[#092727] opacity-80 mb-3 text-center group-hover:opacity-90 transition-opacity duration-300">
               ou cliquez pour sélectionner
             </p>
 
             {/* File Info */}
-            <div className="flex flex-col items-center gap-1 text-xs text-[#092727] opacity-60">
-              <span>📄 Fichiers TXT, PDF</span>
-              <span>Max 5MB</span>
+            <div className="flex s items-center gap-1 text-xs text-[#092727] opacity-60">
+              <span>📄 Fichiers TXT, PDF</span> - <span>Max 5MB</span>
             </div>
 
             {/* Hidden Input */}