feat: Upload du SEPA par les parents / Création d'un composant header

pour les titres de tableau

Front-End/src/components/FileUpload.js

@@ -0,0 +1,60 @@
+import React, { useState, useRef } from 'react';
+import { CloudUpload } from 'lucide-react';
+import logger from '@/utils/logger';
+
+export default function FileUpload({ selectionMessage, onFileSelect, uploadedFileName }) {
+  const [localFileName, setLocalFileName] = useState(uploadedFileName || '');
+  const fileInputRef = useRef(null); // Utilisation de useRef pour cibler l'input
+
+  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
+    }
+  };
+
+  const handleFileDrop = (e) => {
+    e.preventDefault();
+    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
+    }
+  };
+
+  return (
+    <div className="border p-4 rounded-md shadow-md">
+      <h3 className="text-lg font-semibold mb-4">{`${selectionMessage}`}</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()}
+        onDrop={handleFileDrop}
+      >
+        <CloudUpload className="w-12 h-12 text-emerald-500 mb-4" /> {/* Icône de cloud */}
+        <input
+          type="file"
+          accept=".pdf"
+          onChange={handleFileChange}
+          className="hidden"
+          ref={fileInputRef} // Attachement de la référence
+        />
+        <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 PDF</p>
+        </label>
+      </div>
+      {localFileName && (
+        <div className="mt-4 flex items-center space-x-4 bg-gray-100 p-3 rounded-md shadow-sm">
+          <CloudUpload className="w-6 h-6 text-emerald-500" />
+          <p className="text-sm font-medium text-gray-800">
+            <span className="font-semibold">{localFileName}</span>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}