fix: Ajout du mode Visu

Front-End/src/components/FileUpload.js

@@ -1,7 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { CloudUpload } from 'lucide-react';
 import logger from '@/utils/logger';
-import { BASE_URL } from '@/utils/Url';
 
 export default function FileUpload({
   selectionMessage,
@@ -10,57 +9,78 @@ export default function FileUpload({
   existingFile,
   required,
   errorMsg,
+  enable = true, // Nouvelle prop pour activer/désactiver le champ
 }) {
   const [localFileName, setLocalFileName] = useState(uploadedFileName || '');
-  const fileInputRef = useRef(null); // Utilisation de useRef pour cibler l'input
+  const fileInputRef = useRef(null);
 
   const handleFileChange = (e) => {
     const file = e.target.files[0];
     if (file) {
       setLocalFileName(file.name);
       logger.debug('Fichier sélectionné:', file.name);
-      onFileSelect(file); // Appelle la fonction passée en prop
+      onFileSelect(file);
     }
   };
 
   const handleFileDrop = (e) => {
     e.preventDefault();
+    if (!enable) return; // Empêcher le dépôt si désactivé
     const file = e.dataTransfer.files[0];
     if (file) {
       setLocalFileName(file.name);
       logger.debug('Fichier déposé:', file.name);
-      onFileSelect(file); // Appelle la fonction passée en prop
+      onFileSelect(file);
     }
   };
 
   return (
-    <div className="border p-4 rounded-md shadow-md">
+    <div
+      className={`border p-4 rounded-md shadow-md ${
+        !enable ? 'bg-gray-100 cursor-not-allowed' : ''
+      }`}
+    >
       <h3 className="text-lg font-semibold mb-4">
         {`${selectionMessage}`}
         {required && <span className="text-red-500 ml-1">*</span>}
       </h3>
       <div
-        className="border-2 border-dashed border-gray-500 p-6 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-emerald-500"
-        onClick={() => fileInputRef.current.click()} // Utilisation de la référence pour ouvrir l'explorateur
-        onDragOver={(e) => e.preventDefault()}
+        className={`border-2 border-dashed p-6 rounded-lg flex flex-col items-center justify-center ${
+          !enable
+            ? 'border-gray-300 bg-gray-100 cursor-not-allowed'
+            : 'border-gray-500 hover:border-emerald-500'
+        }`}
+        onClick={() => enable && fileInputRef.current.click()} // Désactiver le clic si `enable` est false
+        onDragOver={(e) => enable && e.preventDefault()}
         onDrop={handleFileDrop}
       >
-        <CloudUpload className="w-12 h-12 text-emerald-500 mb-4" />{' '}
-        {/* Icône de cloud */}
+        <CloudUpload
+          className={`w-12 h-12 mb-4 ${
+            !enable ? 'text-gray-400' : 'text-emerald-500'
+          }`}
+        />
         <input
           type="file"
           accept=".pdf, .png, .jpg, .jpeg, .gif, .bmp"
           onChange={handleFileChange}
           className="hidden"
-          ref={fileInputRef} // Attachement de la référence
+          ref={fileInputRef}
+          disabled={!enable} // Désactiver l'input si `enable` est false
         />
-        <label htmlFor="fileInput" className="text-center text-gray-500">
-          <p className="text-lg font-semibold text-gray-800">
-            Déposez votre fichier ici
-          </p>
-          <p className="text-sm text-gray-500 mt-2">
-            ou cliquez pour sélectionner un fichier
+        <label
+          htmlFor="fileInput"
+          className={`text-center ${
+            !enable ? 'text-gray-400' : 'text-gray-500'
+          }`}
+        >
+          <p className="text-lg font-semibold">
+            {enable ? 'Déposez votre fichier ici' : 'Téléversement désactivé'}
           </p>
+          {enable && (
+            <p className="text-sm text-gray-500 mt-2">
+              ou cliquez pour sélectionner un fichier
+            </p>
+          )}
         </label>
       </div>
 
@@ -70,18 +90,10 @@ export default function FileUpload({
           <CloudUpload className="w-6 h-6 text-emerald-500" />
           <p className="text-sm font-medium text-gray-800">
             <span className="font-semibold">
-              {typeof existingFile === 'string' ? (
-                <a
-                  href={`${BASE_URL}${existingFile}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-500 hover:text-blue-700 underline"
-                >
-                  {existingFile.split('/').pop()}
-                </a>
-              ) : (
-                existingFile?.name || 'Fichier inconnu'
-              )}
+              {typeof existingFile === 'string'
+                ? existingFile.split('/').pop() // Si c'est une chaîne, utilisez split
+                : existingFile?.name || 'Nom de fichier inconnu'}{' '}
+              // Sinon, utilisez une propriété ou un fallback
             </span>
           </p>
         </div>