feat: Changement du rendu de la page des documents + gestion des

formulaires d'école déjà existants [N3WTS-17]

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

@@ -1,16 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
-  Download,
   Edit3,
   Trash2,
-  FolderPlus,
-  FileText,
-  AlertTriangle,
 } from 'lucide-react';
 import Modal from '@/components/Modal';
-import Table from '@/components/Table';
 import FormTemplateBuilder from '@/components/Form/FormTemplateBuilder';
-import { BASE_URL } from '@/utils/Url';
 import {
   // GET
   fetchRegistrationFileGroups,
@@ -31,13 +25,110 @@ import {
 } from '@/app/actions/registerFileGroupAction';
 import RegistrationFileGroupForm from '@/components/Structure/Files/RegistrationFileGroupForm';
 import logger from '@/utils/logger';
-import ParentFilesSection from '@/components/Structure/Files/ParentFilesSection';
-import SectionHeader from '@/components/SectionHeader';
+import ParentFiles from './ParentFiles';
 import Popup from '@/components/Popup';
 import Loader from '@/components/Loader';
 import { useNotification } from '@/context/NotificationContext';
-import AlertMessage from '@/components/AlertMessage';
-import FileUploadDocuSeal from '@/components/Structure/Files/FileUploadDocuSeal';
+import CreateDocumentModal from '@/components/Structure/Files/CreateDocumentModal';
+import FileUpload from '@/components/Form/FileUpload';
+
+function getItemBgColor(type, selected, forceTheme = false) {
+  // Colonne gauche : bleu, sélectionné plus soutenu
+  if (type === 'blue') {
+    if (selected) return 'bg-blue-200';
+    return 'bg-blue-50';
+  }
+  // Colonne droite : thème selon type, jamais sélectionné
+  if (forceTheme) {
+    if (type === 'emerald') return 'bg-emerald-50';
+    if (type === 'orange') return 'bg-orange-50';
+    return 'bg-gray-50';
+  }
+  return 'bg-white';
+}
+
+function SimpleList({
+  items,
+  onSelect,
+  selectedId,
+  actionButtons,
+  getItemType,
+  title,
+  minHeight = 'min-h-[200px]',
+  selectable = true,
+  forceTheme = false,
+}) {
+  return (
+    <div className={`rounded border border-gray-200 bg-white ${minHeight} flex flex-col`}>
+      {title && (
+        <div
+          className={`
+            px-4 py-3
+            font-bold text-base
+            border-b border-gray-300
+            bg-gradient-to-r
+            ${title === "Dossiers d'inscription"
+              ? 'from-blue-100 to-blue-50 text-blue-800'
+              : title === 'Documents'
+                ? 'from-emerald-100 to-orange-50 text-emerald-800'
+                : 'from-gray-100 to-white text-gray-800'}
+            rounded-t
+            shadow-sm
+            tracking-wide
+            uppercase
+            flex items-center
+          `}
+        >
+          {title}
+        </div>
+      )}
+      <ul className="flex-1">
+        {items.length === 0 ? (
+          <li className="py-4 text-center text-gray-400">Aucun élément</li>
+        ) : (
+          items.map((item, idx) => {
+            // Correction : clé unique et stable même si plusieurs items ont le même id
+            // On concatène l'id et l'index pour garantir l'unicité
+            const key = `${item.id}-${idx}`;
+            const selected = selectedId === item.id;
+            const itemType = getItemType ? getItemType(item) : 'gray';
+            const bgColor = getItemBgColor(itemType, selected, forceTheme);
+            const zIndex =
+              selectable && selected
+                ? 'z-10 relative'
+                : selectable
+                ? 'z-0 relative'
+                : '';
+            const marginFix =
+              selectable && idx !== items.length - 1
+                ? '-mb-[1px]'
+                : '';
+            return (
+              <li
+                key={key}
+                className={`flex items-center justify-between px-4 py-3 transition ${bgColor} ${selected && selectable ? 'ring-2 ring-blue-400' : ''} ${selectable ? 'cursor-pointer' : ''} ${zIndex} ${marginFix}`}
+                onClick={() => {
+                  if (!selectable || !onSelect) return;
+                  if (selected) {
+                    onSelect(null);
+                  } else {
+                    onSelect(item.id);
+                  }
+                }}
+                tabIndex={0}
+                aria-selected={selected}
+                role="option"
+              >
+                <span className="font-medium text-gray-800">{item.name}</span>
+                {actionButtons && actionButtons(item)}
+              </li>
+            );
+          })
+        )}
+      </ul>
+    </div>
+  );
+}
 
 export default function FilesGroupsManagement({
   csrfToken,
@@ -57,22 +148,34 @@ export default function FilesGroupsManagement({
   const [removePopupMessage, setRemovePopupMessage] = useState('');
   const [removePopupOnConfirm, setRemovePopupOnConfirm] = useState(() => {});
   const [isLoading, setIsLoading] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [createModalKey, setCreateModalKey] = useState(0);
+  const [selectedGroupId, setSelectedGroupId] = useState(null);
+  const [showHelp, setShowHelp] = useState(false);
   const { showNotification } = useNotification();
+  const [isParentFileModalOpen, setIsParentFileModalOpen] = useState(false);
+  const [editingParentFile, setEditingParentFile] = useState(null);
+  const [isFileUploadModalOpen, setIsFileUploadModalOpen] = useState(false);
 
   const transformFileData = (file, groups) => {
-    const groupInfos = file.groups.map(
-      (groupId) =>
-        groups.find((g) => g.id === groupId) || {
-          id: groupId,
-          name: 'Groupe inconnu',
-        }
-    );
+    // file.groups peut contenir des IDs (number/string) ou des objets {id, name}
+    const groupInfos = (file.groups || []).map((group) => {
+      if (typeof group === 'object' && group !== null && 'id' in group) {
+        // Déjà un objet groupe
+        const found = groups.find((g) => g.id === group.id);
+        return found || group;
+      } else {
+        // C'est un ID
+        return groups.find((g) => g.id === group) || { id: group, name: 'Groupe inconnu' };
+      }
+    });
     return {
       ...file,
       groups: groupInfos,
     };
   };
 
+  // Ne pas transformer ici, stocker la donnée brute
   useEffect(() => {
     if (selectedEstablishmentId) {
       Promise.all([
@@ -83,11 +186,7 @@ export default function FilesGroupsManagement({
         .then(([dataSchoolFileMasters, groupsData, dataParentFileMasters]) => {
           setGroups(groupsData);
           setParentFileMasters(dataParentFileMasters);
-          // Transformer chaque fichier pour inclure les informations complètes du groupe
-          const transformedFiles = dataSchoolFileMasters.map((file) =>
-            transformFileData(file, groupsData)
-          );
-          setSchoolFileMasters(transformedFiles);
+          setSchoolFileMasters(dataSchoolFileMasters); // donnée brute
         })
         .catch((err) => {
           logger.debug(err.message);
@@ -148,19 +247,22 @@ export default function FilesGroupsManagement({
     setIsModalOpen(true);
   };
 
-  const handleCreateTemplateMaster = ({ name, group_ids, formMasterData }) => {
-    const data = {
-      name: name,
+  const handleCreateSchoolFileMaster = ({ name, group_ids, formMasterData, file }) => {
+    // Toujours envoyer en FormData, même sans fichier
+    const dataToSend = new FormData();
+    const jsonData = {
+      name,
       groups: group_ids,
-      formMasterData: formMasterData, // Envoyer directement l'objet
+      formMasterData,
     };
-    logger.debug(data);
+    dataToSend.append('data', JSON.stringify(jsonData));
+    if (file) {
+      dataToSend.append('file', file, file.path || file.name);
+    }
 
-    createRegistrationSchoolFileMaster(data, csrfToken)
+    createRegistrationSchoolFileMaster(dataToSend, csrfToken)
       .then((data) => {
-        // Transformer le nouveau fichier avec les informations du groupe
-        const transformedFile = transformFileData(data, groups);
-        setSchoolFileMasters((prevFiles) => [...prevFiles, transformedFile]);
+        setSchoolFileMasters((prevFiles) => [...prevFiles, data]);
         setIsModalOpen(false);
         showNotification(
           `Le formulaire "${name}" a été créé avec succès.`,
@@ -178,7 +280,7 @@ export default function FilesGroupsManagement({
       });
   };
 
-  const handleEditTemplateMaster = ({
+  const handleEditSchoolFileMaster = ({
     name,
     group_ids,
     formMasterData,
@@ -193,10 +295,8 @@ export default function FilesGroupsManagement({
 
     editRegistrationSchoolFileMaster(id, data, csrfToken)
       .then((data) => {
-        // Transformer le fichier mis à jour avec les informations du groupe
-        const transformedFile = transformFileData(data, groups);
         setSchoolFileMasters((prevFichiers) =>
-          prevFichiers.map((f) => (f.id === id ? transformedFile : f))
+          prevFichiers.map((f) => (f.id === id ? data : f))
         );
         setIsModalOpen(false);
         showNotification(
@@ -292,6 +392,10 @@ export default function FilesGroupsManagement({
             throw new Error('Erreur lors de la suppression du groupe.');
           }
           setGroups(groups.filter((group) => group.id !== groupId));
+          // Si le groupe supprimé était sélectionné, on désélectionne
+          if (String(selectedGroupId) === String(groupId)) {
+            setSelectedGroupId(null);
+          }
           setRemovePopupVisible(false);
           setIsLoading(false);
           showNotification('Groupe supprimé avec succès.', 'success', 'Succès');
@@ -331,15 +435,22 @@ export default function FilesGroupsManagement({
   };
 
   const handleEdit = (id, updatedFile) => {
+    logger.debug('[FilesGroupsManagement] handleEdit called with:', id, updatedFile);
+    // Correction : vérifier si updatedFile est bien un objet (et pas juste un id)
+    if (typeof updatedFile !== 'object' || updatedFile === null) {
+      logger.error('[FilesGroupsManagement] handleEdit: updatedFile is not an object', updatedFile);
+      return Promise.reject(new Error('updatedFile is not an object'));
+    }
+    logger.debug('[FilesGroupsManagement] handleEdit payload:', JSON.stringify(updatedFile));
     return editRegistrationParentFileMaster(id, updatedFile, csrfToken)
       .then((response) => {
+        logger.debug('[FilesGroupsManagement] editRegistrationParentFileMaster response:', response);
         const modifiedFile = response.data; // Extraire les données mises à jour
-        // Mettre à jour la liste des fichiers parents
         setParentFileMasters((prevFiles) =>
           prevFiles.map((file) => (file.id === id ? modifiedFile : file))
         );
         logger.debug('Document parent mis à jour avec succès:', modifiedFile);
-        return modifiedFile; // Retourner le fichier mis à jour
+        return modifiedFile;
       })
       .catch((error) => {
         logger.error(
@@ -369,77 +480,321 @@ export default function FilesGroupsManagement({
       });
   };
 
-  const filteredFiles = schoolFileMasters.filter((file) => {
-    if (!selectedGroup) return true;
+  // Ouvre la modale de création d'une pièce à fournir
+  const openParentFileModal = () => {
+    setEditingParentFile(null);
+    setIsParentFileModalOpen(true);
+  };
+
+  // Ouvre la modale d'édition d'une pièce à fournir
+  const openEditParentFileModal = (file) => {
+    setEditingParentFile(file);
+    setIsParentFileModalOpen(true);
+  };
+
+  // Ferme la modale de pièce à fournir
+  const closeParentFileModal = () => {
+    setEditingParentFile(null);
+    setIsParentFileModalOpen(false);
+  };
+
+  // Ouvre le menu de choix pour formulaire d'école
+  const handleCreateFormMenu = () => {
+    setIsCreateModalOpen(false);
+    setTimeout(() => setIsCreateModalOpen(true), 0); // force le reset du menu
+  };
+
+  // Ouvre la modale FormTemplateBuilder
+  const handleOpenFormTemplateBuilder = () => {
+    setIsModalOpen(true);
+    setIsEditing(false);
+    setFileToEdit(null);
+  };
+
+  // Ouvre la modale FileUpload
+  const handleOpenFileUpload = () => {
+    setIsFileUploadModalOpen(true);
+  };
+
+  // Ferme la modale FileUpload
+  const handleCloseFileUpload = () => {
+    setIsFileUploadModalOpen(false);
+  };
+
+  // Soumission du formulaire existant (upload)
+  const handleSubmitFileUpload = ({ name, group_ids, file }) => {
+    // On centralise la logique dans handleCreateSchoolFileMaster
+    handleCreateSchoolFileMaster({ name, group_ids, file });
+    setIsFileUploadModalOpen(false);
+  };
+
+  // Filtrage des formulaires et pièces selon le dossier sélectionné
+  // Appliquer la transformation à la volée ici et comparer en string
+  const filteredFiles = schoolFileMasters
+    .map((file) => transformFileData(file, groups))
+    .filter((file) => {
+      if (!selectedGroupId) return false;
+      return (
+        file.groups &&
+        file.groups.some((group) => String(group.id) === String(selectedGroupId))
+      );
+    });
+
+  const filteredParentFiles = parentFiles.filter((file) => {
+    if (!selectedGroupId) return false;
     return (
       file.groups &&
-      file.groups.some((group) => group.id === parseInt(selectedGroup))
+      file.groups.map(String).includes(String(selectedGroupId))
     );
   });
 
-  const columnsFiles = [
-    { name: 'Nom du formulaire', transform: (row) => row.name },
-    {
-      name: "Dossiers d'inscription",
-      transform: (row) =>
-        row.groups && row.groups.length > 0
-          ? row.groups.map((group) => group.name).join(', ')
-          : 'Aucun',
-    },
-    {
-      name: 'Actions',
-      transform: (row) => (
-        <div className="flex items-center justify-center gap-2">
-          <button
-            onClick={() => editTemplateMaster(row)}
-            className="text-blue-500 hover:text-blue-700"
-            title="Modifier le formulaire"
-          >
-            <Edit3 className="w-5 h-5" />
-          </button>
-          <button
-            onClick={() => deleteTemplateMaster(row)}
-            className="text-red-500 hover:text-red-700"
-            title="Supprimer le formulaire"
-          >
-            <Trash2 className="w-5 h-5" />
-          </button>
-        </div>
-      ),
-    },
+  // Fusion des deux types de documents pour la colonne de droite
+  const mergedDocuments = [
+    ...filteredFiles.map((doc) => ({ ...doc, _type: 'emerald' })),
+    ...filteredParentFiles.map((doc) => ({ ...doc, _type: 'orange' })),
   ];
 
-  const columnsGroups = [
-    { name: 'Nom du dossier', transform: (row) => row.name },
-    { name: 'Description', transform: (row) => row.description },
-    {
-      name: 'Actions',
-      transform: (row) => (
-        <div className="flex items-center justify-center gap-2">
-          <button
-            onClick={() => handleGroupEdit(row)}
-            className="text-blue-500 hover:text-blue-700"
-          >
-            <Edit3 className="w-5 h-5" />
-          </button>
-          <button
-            onClick={() => handleGroupDelete(row.id)}
-            className="text-red-500 hover:text-red-700"
-          >
-            <Trash2 className="w-5 h-5" />
-          </button>
+  // Nouvelle explication : adaptée au contexte "dossier lié à une classe/groupe de classes"
+  const renderExplanation = () => (
+    <div className="mb-4">
+      <button
+        className="flex items-center gap-2 text-emerald-700 hover:text-emerald-900 font-medium mb-2"
+        onClick={() => setShowHelp((v) => !v)}
+        aria-expanded={showHelp}
+        aria-controls="aide-inscription"
+      >
+        <span className="underline">{showHelp ? 'Masquer' : 'Afficher'} l’aide</span>
+        <svg className={`w-4 h-4 transition-transform ${showHelp ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {showHelp && (
+        <div id="aide-inscription" className="p-4 bg-blue-50 border border-blue-200 rounded mb-4">
+          <h2 className="text-lg font-bold mb-2">
+            Gestion des dossiers et documents d&apos;inscription
+          </h2>
+          <div className="text-gray-700 space-y-2">
+            <p>
+              <span className="font-semibold">1. Créez un ou plusieurs <span className="text-blue-700">dossiers d&aposinscription</span></span> :<br />
+              Chaque dossier correspond à une classe ou un groupe de classes (ex : <span className="italic">Dossier Maternelles</span>, <span className="italic">Dossier Élémentaires</span>). Lors de la création d&apos;une inscription élève, un seul dossier d&apos;inscription sera rattaché à l&apos;élève.
+            </p>
+            <p>
+              <span className="font-semibold">2. Pour chaque dossier, ajoutez des documents à fournir :</span>
+            </p>
+            <ul className="list-disc list-inside ml-6">
+              <li>
+                <span className="text-emerald-700 font-semibold">Formulaires personnalisés</span> : créés dynamiquement par l&aposécole, à remplir et/ou signer électroniquement par la famille (ex : autorisation de sortie, fiche sanitaire, etc.).
+              </li>
+              <li>
+                <span className="text-orange-700 font-semibold">Pièces à fournir</span> : documents à déposer par la famille (ex : RIB, justificatif de domicile, ou formulaire PDF à télécharger, remplir puis ré-uploader).
+              </li>
+            </ul>
+            <div className="mt-2 text-sm text-gray-600">
+              <span className="font-semibold">Astuce :</span> Commencez toujours par créer vos dossiers d&aposinscription (liés à vos classes) avant d&aposajouter des documents à fournir.
+            </div>
+          </div>
         </div>
-      ),
-    },
-  ];
+      )}
+    </div>
+  );
 
-  if (isLoading) {
-    return <Loader />;
-  }
+  // Correction : définition de handleBackToCreateMenu
+  const handleBackToCreateMenu = () => {
+    setCreateModalKey((k) => k + 1); // force le reset du composant modal
+    setIsCreateModalOpen(true);
+  };
 
+  // Nouvelle disposition : sections côte à côte alignées
   return (
     <div className="w-full">
-      {/* Modal pour les formulaires */}
+      {/* Aide optionnelle + bouton global de création */}
+      <div className="mb-8">
+        {renderExplanation()}
+        <div className="flex justify-center">
+          <button
+            className="flex items-center justify-center gap-3 bg-emerald-500 hover:bg-emerald-600 text-white px-8 py-4 rounded-xl shadow transition text-lg font-bold"
+            style={{ minWidth: '320px', maxWidth: '400px' }}
+            onClick={() => setIsCreateModalOpen(true)}
+          >
+            <span className="text-2xl font-bold">+</span>
+            <span>Créer un nouvel élément</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex gap-8">
+        {/* Colonne gauche : Dossiers d'inscription */}
+        <div className="w-[30%] min-w-[260px]">
+          <SimpleList
+            items={groups}
+            selectedId={selectedGroupId}
+            onSelect={setSelectedGroupId}
+            getItemType={() => 'blue'}
+            title="Dossiers d'inscription"
+            minHeight="min-h-[240px]"
+            selectable={true}
+            forceTheme={false}
+            actionButtons={(row) => (
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={(e) => { e.stopPropagation(); handleGroupEdit(row); }}
+                  className="text-blue-500 hover:text-blue-700"
+                  title="Modifier"
+                >
+                  <Edit3 className="w-5 h-5" />
+                </button>
+                <button
+                  onClick={(e) => { e.stopPropagation(); handleGroupDelete(row.id); }}
+                  className="text-red-500 hover:text-red-700"
+                  title="Supprimer"
+                >
+                  <Trash2 className="w-5 h-5" />
+                </button>
+              </div>
+            )}
+          />
+        </div>
+        {/* Colonne droite : Documents (fusion des formulaires et pièces à fournir) */}
+        <div className="w-[70%] min-w-[320px]">
+          <div className="rounded border border-gray-200 bg-white min-h-[240px] flex flex-col">
+            <div
+              className={`
+                px-4 py-3
+                font-bold text-base
+                border-b border-gray-300
+                bg-gradient-to-r
+                from-emerald-100 to-orange-50 text-emerald-800
+                rounded-t
+                shadow-sm
+                tracking-wide
+                uppercase
+                flex items-center
+              `}
+            >
+              Documents
+            </div>
+            {selectedGroupId === null ? (
+              <div className="flex items-center justify-center flex-1 bg-white text-gray-400 text-center text-base">
+                Sélectionnez un dossier pour voir les documents associés.
+              </div>
+            ) : (
+              <SimpleList
+                key={selectedGroupId}
+                items={mergedDocuments}
+                selectedId={null}
+                onSelect={null}
+                getItemType={(item) => item._type}
+                // title="Documents" // Supprimé ici, header déjà affiché au-dessus
+                minHeight="min-h-[240px]"
+                selectable={false}
+                forceTheme={true}
+                actionButtons={(row) => (
+                  <div className="flex items-center gap-2">
+                    {row._type === 'emerald' ? (
+                      <>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); editTemplateMaster(row); }}
+                          className="text-blue-500 hover:text-blue-700"
+                          title="Modifier"
+                        >
+                          <Edit3 className="w-5 h-5" />
+                        </button>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); deleteTemplateMaster(row); }}
+                          className="text-red-500 hover:text-red-700"
+                          title="Supprimer"
+                        >
+                          <Trash2 className="w-5 h-5" />
+                        </button>
+                      </>
+                    ) : (
+                      <>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); openEditParentFileModal(row); }}
+                          className="text-blue-500 hover:text-blue-700"
+                          title="Modifier"
+                        >
+                          <Edit3 className="w-5 h-5" />
+                        </button>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); handleDelete(row.id); }}
+                          className="text-red-500 hover:text-red-700"
+                          title="Supprimer"
+                        >
+                          <Trash2 className="w-5 h-5" />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                )}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Modal de création centralisée */}
+      <CreateDocumentModal
+        key={createModalKey}
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onCreateGroup={() => {
+          setIsGroupModalOpen(true);
+          setIsCreateModalOpen(false);
+        }}
+        onCreateForm={() => {
+          setIsCreateModalOpen(false);
+          setTimeout(() => setIsModalOpen(true), 0);
+        }}
+        onCreateParentFile={() => {
+          openParentFileModal();
+          setIsCreateModalOpen(false);
+        }}
+        onBack={handleBackToCreateMenu}
+        onCreateSchoolFileMaster={handleCreateSchoolFileMaster}
+        groups={groups}
+      />
+
+      {/* Modal pour upload de formulaire existant */}
+      <Modal
+        isOpen={isFileUploadModalOpen}
+        setIsOpen={handleCloseFileUpload}
+        title="Importer un formulaire existant"
+        modalClassName="w-full max-w-md"
+      >
+        <FileUpload
+          selectionMessage="Sélectionnez le fichier du formulaire"
+          onFileSelect={(file) => {
+            // Ici, il faut gérer le nom et les groupes (à adapter selon vos besoins UI)
+            // Par exemple, ouvrir un petit formulaire pour compléter les infos puis submit
+          }}
+          onSubmit={handleSubmitFileUpload}
+          required
+          enable
+        />
+      </Modal>
+
+      {/* Modal création/édition pièce à fournir */}
+      <Modal
+        isOpen={isParentFileModalOpen}
+        setIsOpen={(open) => {
+          if (!open) closeParentFileModal();
+        }}
+        title={editingParentFile ? 'Modifier la pièce à fournir' : 'Créer une pièce à fournir'}
+        modalClassName="w-full max-w-md"
+      >
+        <ParentFiles
+          parentFiles={parentFiles}
+          groups={groups}
+          handleCreate={handleCreate}
+          handleEdit={handleEdit}
+          handleDelete={handleDelete}
+          singleForm // affiche uniquement le formulaire, pas la liste
+          initialData={editingParentFile}
+          onCancel={closeParentFileModal}
+        />
+      </Modal>
+
+      {/* Modals et popups */}
       <Modal
         isOpen={isModalOpen}
         setIsOpen={(isOpen) => {
@@ -447,100 +802,51 @@ export default function FilesGroupsManagement({
           if (!isOpen) {
             setFileToEdit(null);
             setIsEditing(false);
+            // Retour au menu principal de création si fermeture
+            handleBackToCreateMenu();
           }
         }}
         title={isEditing ? 'Modification du formulaire' : 'Créer un formulaire'}
         modalClassName="w-11/12 h-5/6"
       >
         <FormTemplateBuilder
-          onSave={
-            isEditing ? handleEditTemplateMaster : handleCreateTemplateMaster
-          }
+          onSave={(data) => {
+            (isEditing ? handleEditSchoolFileMaster : handleCreateSchoolFileMaster)(data);
+          }}
           initialData={fileToEdit}
           groups={groups}
           isEditing={isEditing}
         />
       </Modal>
 
-      {/* Modal pour les groupes */}
       <Modal
         isOpen={isGroupModalOpen}
-        setIsOpen={setIsGroupModalOpen}
+        setIsOpen={(isOpen) => {
+          setIsGroupModalOpen(isOpen);
+          if (!isOpen) {
+            // Retour au menu principal de création si fermeture
+            handleBackToCreateMenu();
+          }
+        }}
         title={
           groupToEdit ? 'Modifier le dossier' : "Création d'un nouveau dossier"
         }
       >
         <RegistrationFileGroupForm
-          onSubmit={handleGroupSubmit}
+          onSubmit={(data) => {
+            handleGroupSubmit(data);
+          }}
           initialData={groupToEdit}
         />
       </Modal>
 
-      {/* Section Groupes de fichiers */}
-      <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}
-          emptyMessage={
-            <AlertMessage
-              type="warning"
-              title="Aucun dossier d'inscription enregistré"
-              message="Veuillez procéder à la création d'un nouveau dossier d'inscription"
-            />
-          }
-        />
-      </div>
-
-      {/* Section Formulaires */}
-      <div className="mt-12 mb-4 w-3/5">
-        <SectionHeader
-          icon={FileText}
-          title="Formulaires personnalisés"
-          description="Créez et gérez vos formulaires d'inscription personnalisés."
-          button={true}
-          buttonOpeningModal={true}
-          onClick={() => {
-            setIsModalOpen(true);
-            setIsEditing(false);
-            setFileToEdit(null);
-          }}
-        />
-        <Table
-          data={filteredFiles}
-          columns={columnsFiles}
-          emptyMessage={
-            <AlertMessage
-              type="warning"
-              title="Aucun formulaire enregistré"
-              message="Veuillez procéder à la création d'un nouveau formulaire d'inscription"
-            />
-          }
-        />
-      </div>
-
-      {/* Section Pièces à fournir */}
-      <ParentFilesSection
-        parentFiles={parentFiles}
-        setParentFileMasters={setParentFileMasters}
-        groups={groups}
-        handleCreate={handleCreate}
-        handleEdit={handleEdit}
-        handleDelete={handleDelete}
-      />
       <Popup
         isOpen={removePopupVisible}
         message={removePopupMessage}
         onConfirm={removePopupOnConfirm}
         onCancel={() => setRemovePopupVisible(false)}
       />
+      {isLoading && <Loader />}
     </div>
   );
 }