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

pour les titres de tableau

Front-End/src/components/Structure/Files/FilesGroupsManagement.js

@@ -3,6 +3,7 @@ import { Plus, Download, Edit3, Trash2, FolderPlus, Signature, FileText, Check,
 import Modal from '@/components/Modal';
 import Table from '@/components/Table';
 import FileUploadDocuSeal from '@/components/Structure/Files/FileUploadDocuSeal';
+import FileUpload from '@/components/FileUpload'
 import { BASE_URL } from '@/utils/Url';
 import {
   // GET
@@ -26,6 +27,7 @@ import {
 import RegistrationFileGroupForm from '@/components/Structure/Files/RegistrationFileGroupForm';
 import logger from '@/utils/logger';
 import ParentFilesSection from '@/components/Structure/Files/ParentFilesSection';
+import SectionHeader from '@/components/SectionHeader';
 
 export default function FilesGroupsManagement({ csrfToken, selectedEstablishmentId }) {
   const [schoolFileMasters, setSchoolFileMasters] = useState([]);
@@ -42,6 +44,8 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
   const [editingDocumentId, setEditingDocumentId] = useState(null);
   const [formData, setFormData] = useState({});
 
+  const [uploadedFileName, setUploadedFileName] = useState('');
+
   const handleReloadTemplates = () => {
     setReloadTemplates(true);
   }
@@ -253,84 +257,6 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
     }
   };
 
-  const renderRequiredDocumentCell = (document, column) => {
-    const isEditing = editingDocumentId === document.id;
-  
-    if (isEditing) {
-      switch (column) {
-        case 'Nom de la pièce':
-          return (
-            <InputText
-              name="name"
-              value={formData.name}
-              onChange={(e) => handleChange(e, 'name')}
-              placeholder="Nom de la pièce"
-              className="w-full"
-            />
-          );
-        case 'Description':
-          return (
-            <InputText
-              name="description"
-              value={formData.description}
-              onChange={(e) => handleChange(e, 'description')}
-              placeholder="Description"
-              className="w-full"
-            />
-          );
-        case 'Actions':
-          return (
-            <div className="flex justify-center space-x-2">
-              <button
-                type="button"
-                onClick={() => handleSaveDocument(document.id)}
-                className="text-green-500 hover:text-green-700"
-              >
-                <Check className="w-5 h-5" />
-              </button>
-              <button
-                type="button"
-                onClick={handleCancelEdit}
-                className="text-red-500 hover:text-red-700"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-          );
-        default:
-          return null;
-      }
-    } else {
-      switch (column) {
-        case 'Nom de la pièce':
-          return <span>{document.name}</span>;
-        case 'Description':
-          return <span>{document.description}</span>;
-        case 'Actions':
-          return (
-            <div className="flex justify-center space-x-2">
-              <button
-                type="button"
-                onClick={() => handleEditDocument(document)}
-                className="text-blue-500 hover:text-blue-700"
-              >
-                <Edit3 className="w-5 h-5" />
-              </button>
-              <button
-                type="button"
-                onClick={() => handleDeleteRequiredDocument(document.id)}
-                className="text-red-500 hover:text-red-700"
-              >
-                <Trash2 className="w-5 h-5" />
-              </button>
-            </div>
-          );
-        default:
-          return null;
-      }
-    }
-  };
-
   const handleCreate = (newParentFile) => {
     return createRegistrationParentFileMaster(newParentFile, csrfToken)
       .then((response) => {
@@ -417,14 +343,8 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
     )}
   ];
 
-  const columnsRequiredDocuments = [
-    { name: 'Nom de la pièce', transform: (row) => renderRequiredDocumentCell(row, 'Nom de la pièce') },
-    { name: 'Description', transform: (row) => renderRequiredDocumentCell(row, 'Description') },
-    { name: 'Actions', transform: (row) => renderRequiredDocumentCell(row, 'Actions') },
-  ];
-
   return (
-    <div className="space-y-12">
+    <div className="w-full mx-auto mt-6">
       {/* Modal pour les fichiers */}
       <Modal
         isOpen={isModalOpen}
@@ -460,26 +380,15 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
       />
   
       {/* Section Groupes de fichiers */}
-      <div className="mt-8 mb-4 w-3/5">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center space-x-4">
-            <div className="bg-emerald-100 p-3 rounded-full shadow-md">
-              <FolderPlus className="w-8 h-8 text-emerald-600" />
-            </div>
-            <div>
-              <h2 className="text-2xl font-bold text-gray-800">Dossiers d'inscriptions</h2>
-              <p className="text-sm text-gray-500 italic">
-                Gérez les dossiers d'inscription pour organiser vos documents.
-              </p>
-            </div>
-          </div>
-          <button
-            onClick={() => setIsGroupModalOpen(true)}
-            className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-700 transition duration-200"
-          >
-            <Plus className="w-6 h-6" />
-          </button>
-        </div>
+      <div className="mt-8 w-3/5">
+        <SectionHeader
+          icon={FolderPlus}
+          title="Dossiers d'inscriptions"
+          description="Gérez les dossiers d'inscription pour organiser vos documents."
+          button={true}
+          buttonOpeningModal={true}
+          onClick={() => setIsGroupModalOpen(true)}
+        />
         <Table
           data={groups}
           columns={columnsGroups}
@@ -487,29 +396,18 @@ export default function FilesGroupsManagement({ csrfToken, selectedEstablishment
       </div>
   
       {/* Section Fichiers */}
-      <div className="mt-8 mb-4 w-3/5">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center space-x-4">
-            <div className="bg-emerald-100 p-3 rounded-full shadow-md">
-              <Signature className="w-8 h-8 text-emerald-600" />
-            </div>
-            <div>
-              <h2 className="text-2xl font-bold text-gray-800">Formulaires à remplir</h2>
-              <p className="text-sm text-gray-500 italic">
-                Gérez les formulaires nécessitant une signature électronique.
-              </p>
-            </div>
-          </div>
-          <button
-            onClick={() => {
-              setIsModalOpen(true);
-              setIsEditing(false);
-            }}
-            className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-700 transition duration-200"
-          >
-            <Plus className="w-6 h-6" />
-          </button>
-        </div>
+      <div className="mt-12 mb-4 w-3/5">
+        <SectionHeader
+          icon={Signature}
+          title="Formulaires à remplir"
+          description="Gérez les formulaires nécessitant une signature électronique."
+          button={true}
+          buttonOpeningModal={true}
+          onClick={() => {
+            setIsModalOpen(true);
+            setIsEditing(false);
+          }}
+        />
         <Table
           data={filteredFiles}
           columns={columnsFiles}