From bc07ea60773bd887e3f403af29855120fe5f7949 Mon Sep 17 00:00:00 2001
From: nBiqoz <nacim@biqoz.com>
Date: Mon, 28 Jul 2025 23:14:26 +0200
Subject: [PATCH] presidio ok v.1 button disposition

---
 app/components/AnonymizationInterface.tsx |   9 +-
 app/components/FileUploadComponent.tsx    | 196 ++++++++++++++++------
 app/components/ProgressBar.tsx            |  17 +-
 app/page.tsx                              |  33 +---
 4 files changed, 172 insertions(+), 83 deletions(-)

diff --git a/app/components/AnonymizationInterface.tsx b/app/components/AnonymizationInterface.tsx
index 114569d..c607f10 100644
--- a/app/components/AnonymizationInterface.tsx
+++ b/app/components/AnonymizationInterface.tsx
@@ -18,7 +18,7 @@ export const AnonymizationInterface = ({
     const anonymizedTypes = new Set<string>();
 
     // ✅ NOUVEAUX PATTERNS PRESIDIO
-    
+
     // Noms (PERSON)
     if (outputText.includes("<PERSON>")) {
       anonymizedTypes.add("Prénoms");
@@ -62,7 +62,7 @@ export const AnonymizationInterface = ({
     }
 
     // ✅ ANCIENS PATTERNS (pour compatibilité)
-    
+
     // Noms (anciens patterns [Nom1], [Nom2]...)
     if (outputText.includes("[Nom1]") || outputText.includes("[Nom")) {
       anonymizedTypes.add("Prénoms");
@@ -76,7 +76,10 @@ export const AnonymizationInterface = ({
     }
 
     // Téléphones (anciens patterns)
-    if (outputText.includes("[Téléphone1]") || outputText.includes("[Téléphone")) {
+    if (
+      outputText.includes("[Téléphone1]") ||
+      outputText.includes("[Téléphone")
+    ) {
       anonymizedTypes.add("Numéros de téléphone");
     }
 
diff --git a/app/components/FileUploadComponent.tsx b/app/components/FileUploadComponent.tsx
index eeec160..0474d8e 100644
--- a/app/components/FileUploadComponent.tsx
+++ b/app/components/FileUploadComponent.tsx
@@ -1,7 +1,15 @@
-import { Upload, FileText, AlertTriangle } from "lucide-react";
+import {
+  Upload,
+  FileText,
+  AlertTriangle,
+  Shield,
+  Copy,
+  Download,
+} from "lucide-react";
 import { SampleTextComponent } from "./SampleTextComponent";
 import { SupportedDataTypes } from "./SupportedDataTypes";
 import { AnonymizationInterface } from "./AnonymizationInterface";
+import { highlightEntities } from "../utils/highlightEntities";
 
 interface FileUploadComponentProps {
   uploadedFile: File | null;
@@ -16,6 +24,8 @@ interface FileUploadComponentProps {
   isLoadingFile?: boolean;
   onRestart?: () => void;
   outputText?: string;
+  copyToClipboard?: () => void;
+  downloadText?: () => void;
 }
 
 export const FileUploadComponent = ({
@@ -31,66 +41,156 @@ export const FileUploadComponent = ({
   isLoadingFile = false,
   onRestart,
   outputText,
+  copyToClipboard,
+  downloadText,
 }: FileUploadComponentProps) => {
   // Si un fichier est uploadé ou qu'il y a du texte d'exemple, on affiche le preview
   if (uploadedFile || (sourceText && sourceText.trim())) {
     return (
       <div className="w-full flex flex-col space-y-6">
-        {/* Preview du document avec en-tête simple */}
-        <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
-          <div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-3">
-                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
-                  <FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  {uploadedFile ? (
-                    <p className="text-xs sm:text-sm text-orange-600 truncate">
-                      {uploadedFile.name} •{" "}
-                      {(uploadedFile.size / 1024).toFixed(1)} KB
-                    </p>
-                  ) : (
-                    <p className="text-xs sm:text-sm text-orange-600">
-                      Demo - Exemple de texte
-                    </p>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="p-4 sm:p-6">
-            {/* Zone de texte avec limite de hauteur et scroll */}
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-48 overflow-y-auto overflow-x-hidden">
-              {isLoadingFile ? (
-                <div className="flex items-center justify-center py-8">
+        {/* Si on a un résultat, afficher 2 blocs côte à côte */}
+        {outputText ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Preview du document original */}
+            <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
+              <div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
+                <div className="flex items-center justify-between">
                   <div className="flex items-center space-x-3">
-                    <div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-b-2 border-[#f7ab6e]"></div>
-                    <span className="text-xs sm:text-sm text-gray-600">
-                      Chargement du fichier en cours...
-                    </span>
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
+                      <FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      {uploadedFile ? (
+                        <p className="text-xs sm:text-sm text-orange-600 truncate">
+                          {uploadedFile.name} •{" "}
+                          {(uploadedFile.size / 1024).toFixed(1)} KB
+                        </p>
+                      ) : (
+                        <p className="text-xs sm:text-sm text-orange-600">
+                          Demo - Exemple de texte
+                        </p>
+                      )}
+                    </div>
                   </div>
                 </div>
-              ) : (
-                <pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
-                  {sourceText || "Aucun contenu à afficher"}
-                </pre>
-              )}
+              </div>
+              <div className="p-1">
+                <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">
+                  <pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
+                    {sourceText || "Aucun contenu à afficher"}
+                  </pre>
+                </div>
+              </div>
             </div>
 
-            {/* Disclaimer déplacé en dessous du texte */}
-            <div className="mt-4">
-              <div className="flex items-start gap-2 p-3 bg-[#f7ab6e] bg-opacity-10 border border-[#f7ab6e] border-opacity-30 rounded-lg">
-                <AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
-                <p className="text-[10px] sm:text-[11px] text-[#092727] leading-relaxed">
-                  Cet outil IA peut ne pas détecter toutes les informations
-                  sensibles. Vérifiez le résultat avant de le partager.
-                </p>
+            {/* Bloc résultat anonymisé */}
+            <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
+              <div className="bg-green-50 border-b border-green-200 px-4 sm:px-6 py-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center space-x-3">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-100 rounded-lg flex items-center justify-center">
+                      <Shield className="h-4 w-4 sm:h-5 sm:w-5 text-green-600" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-xs sm:text-sm text-green-600">
+                        Document anonymisé
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Boutons d'action */}
+                  <div className="flex items-center gap-2">
+                    {copyToClipboard && (
+                      <button
+                        onClick={copyToClipboard}
+                        className="p-2 text-green-600 hover:text-green-700 hover:bg-green-100 rounded-lg transition-colors duration-200"
+                        title="Copier le texte"
+                      >
+                        <Copy className="h-4 w-4" />
+                      </button>
+                    )}
+
+                    {downloadText && (
+                      <button
+                        onClick={downloadText}
+                        className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-lg text-xs font-medium transition-colors duration-200 flex items-center space-x-1"
+                        title="Télécharger le fichier"
+                      >
+                        <Download className="h-3 w-3" />
+                        <span className="hidden sm:inline">Télécharger</span>
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="p-1">
+                <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"
+                    )}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        ) : (
+          /* Preview normal quand pas de résultat */
+          <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
+            <div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
+                    <FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    {uploadedFile ? (
+                      <p className="text-xs sm:text-sm text-orange-600 truncate">
+                        {uploadedFile.name} •{" "}
+                        {(uploadedFile.size / 1024).toFixed(1)} KB
+                      </p>
+                    ) : (
+                      <p className="text-xs sm:text-sm text-orange-600">
+                        Demo - Exemple de texte
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-2  ">
+              {/* Zone de texte avec limite de hauteur et scroll */}
+              <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-48 overflow-y-auto overflow-x-hidden">
+                {isLoadingFile ? (
+                  <div className="flex items-center justify-center py-8">
+                    <div className="flex items-center space-x-3">
+                      <div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-b-2 border-[#f7ab6e]"></div>
+                      <span className="text-xs sm:text-sm text-gray-600">
+                        Chargement du fichier en cours...
+                      </span>
+                    </div>
+                  </div>
+                ) : (
+                  <pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
+                    {sourceText || "Aucun contenu à afficher"}
+                  </pre>
+                )}
+              </div>
+
+              {/* Disclaimer déplacé en dessous du texte */}
+              <div className="mt-4">
+                <div className="flex items-start gap-2 p-3 bg-[#f7ab6e] bg-opacity-10 border border-[#f7ab6e] border-opacity-30 rounded-lg">
+                  <AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
+                  <p className="text-[10px] sm:text-[11px] text-[#092727] leading-relaxed">
+                    Cet outil IA peut ne pas détecter toutes les informations
+                    sensibles. Vérifiez le résultat avant de le partager.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
 
         {/* Boutons d'action - Responsive mobile */}
         {canAnonymize && !isLoadingFile && (
diff --git a/app/components/ProgressBar.tsx b/app/components/ProgressBar.tsx
index c30b65e..88a03c2 100644
--- a/app/components/ProgressBar.tsx
+++ b/app/components/ProgressBar.tsx
@@ -1,4 +1,5 @@
 import { Check, Upload, Eye, Shield } from "lucide-react";
+import React from "react";
 
 interface ProgressBarProps {
   currentStep: number;
@@ -27,15 +28,15 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
   return (
     <div className="w-full max-w-2xl mx-auto mb-4 px-2">
       <div className="flex items-center justify-center">
-        <div className="flex items-center justify-between w-full max-w-xs sm:max-w-md">
+        <div className="flex items-center w-full max-w-md">
           {steps.map((step, index) => {
             const stepNumber = index + 1;
             const isCompleted = stepNumber < currentStep;
             const isCurrent = stepNumber === currentStep;
 
             return (
-              <div key={index} className="flex items-center">
-                {/* Step Circle */}
+              <React.Fragment key={index}>
+                {/* Step Circle and Label */}
                 <div className="flex flex-col items-center">
                   <div
                     className={`w-5 h-5 sm:w-6 sm:h-6 rounded-full flex items-center justify-center font-medium text-xs transition-all duration-300 ${
@@ -55,8 +56,8 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
                         : "text-gray-500"
                     }`}
                     style={{
-                      wordBreak: 'break-word',
-                      hyphens: 'auto'
+                      wordBreak: "break-word",
+                      hyphens: "auto",
                     }}
                   >
                     {step === "Anonymisation" ? (
@@ -72,9 +73,9 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
 
                 {/* Connector Line */}
                 {index < steps.length - 1 && (
-                  <div className="flex-1 mx-2 sm:mx-4">
+                  <div className="flex-1 flex items-center justify-center px-2 sm:px-4">
                     <div
-                      className={`h-0.5 w-6 sm:w-12 transition-all duration-300 ${
+                      className={`h-0.5 w-full max-w-[40px] sm:max-w-[60px] transition-all duration-300 ${
                         stepNumber < currentStep
                           ? "bg-[#f7ab6e]"
                           : "bg-gray-200"
@@ -82,7 +83,7 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
                     />
                   </div>
                 )}
-              </div>
+              </React.Fragment>
             );
           })}
         </div>
diff --git a/app/page.tsx b/app/page.tsx
index 6a1d2bb..b301188 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,13 +2,12 @@
 
 import { useState } from "react";
 import { FileUploadComponent } from "./components/FileUploadComponent";
-import { ResultPreviewComponent } from "./components/ResultPreviewComponent";
+
 import { EntityMappingTable } from "./components/EntityMappingTable";
 import { ProgressBar } from "./components/ProgressBar";
 import { useFileHandler } from "./components/FileHandler";
 import { useAnonymization } from "./components/AnonymizationLogic";
 import { useDownloadActions } from "./components/DownloadActions";
-import { highlightEntities } from "./utils/highlightEntities";
 
 interface EntityMapping {
   originalValue: string;
@@ -81,13 +80,13 @@ export default function Home() {
       </div>
 
       {/* Main Content */}
-      <div className="max-w-5xl mx-auto px-2 sm:px-4 py-4 sm:py-8 space-y-4">
+      <div className="max-w-6xl mx-auto px-2 sm:px-4 py-4 sm:py-8 space-y-4">
         {/* Progress Bar */}
         <ProgressBar currentStep={getCurrentStep()} steps={progressSteps} />
 
         {/* Upload Section */}
         <div className="bg-white rounded-2xl border border-gray-50 overflow-hidden">
-          <div className="p-3 sm:p-6">
+          <div className="p-1 sm:p-3">
             <FileUploadComponent
               uploadedFile={uploadedFile}
               handleFileChange={handleFileChange}
@@ -104,28 +103,16 @@ export default function Home() {
               isLoadingFile={isLoadingFile}
               onRestart={handleRestart}
               outputText={outputText}
+              copyToClipboard={copyToClipboard}
+              downloadText={downloadText}
             />
           </div>
         </div>
 
-        {/* Result Preview */}
+        {/* Entity Mapping Table - Seulement si outputText existe */}
         {outputText && (
           <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
-            <div className="p-3 sm:p-6">
-              <ResultPreviewComponent
-                outputText={outputText}
-                copyToClipboard={copyToClipboard}
-                downloadText={downloadText}
-                highlightEntities={highlightEntities}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* Entity Mapping Table */}
-        {outputText && (
-          <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
-            <div className="p-3 sm:p-6">
+            <div className="p-1 sm:p-3">
               <EntityMappingTable mappings={entityMappings} />
             </div>
           </div>
@@ -166,11 +153,9 @@ export default function Home() {
                           </div>
                         </div>
                       ) : line.startsWith("-") ? (
-                        <div className="ml-4 text-blue-700">
-                          • {line.substring(1).trim()}
-                        </div>
+                        <div className="ml-4 text-blue-700">{line}</div>
                       ) : (
-                        <div>{line}</div>
+                        line
                       )}
                     </div>
                   ))}