presidio ok v.1 button disposition

app/components/AnonymizationInterface.tsx

@@ -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");
     }
 

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,12 +41,101 @@ 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 */}
+        {/* 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="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-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>
+
+            {/* 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>
+        ) : (
+          /* 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">
@@ -60,7 +159,7 @@ export const FileUploadComponent = ({
               </div>
             </div>
 
-          <div className="p-4 sm:p-6">
+            <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 ? (
@@ -91,6 +190,7 @@ export const FileUploadComponent = ({
               </div>
             </div>
           </div>
+        )}
 
         {/* Boutons d'action - Responsive mobile */}
         {canAnonymize && !isLoadingFile && (

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">
+              <React.Fragment key={index}>
-                {/* Step Circle */}
+                {/* 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',
+                      wordBreak: "break-word",
-                      hyphens: 'auto'
+                      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>

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}
-            />
-          </div>
-        </div>
-
-        {/* Result Preview */}
-        {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 */}
+        {/* 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">
+            <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">
+                        <div className="ml-4 text-blue-700">{line}</div>
-                          • {line.substring(1).trim()}
-                        </div>
                       ) : (
-                        <div>{line}</div>
+                        line
                       )}
                     </div>
                   ))}