feat: Gestion de la validation du dossier d'inscription

Front-End/src/app/[locale]/admin/subscriptions/page.js

@@ -35,7 +35,7 @@ import {
   archiveRegisterForm,
   fetchStudents,
   editRegisterForm,
-  sendSEPARegisterForm,
+  editRegisterFormWithBinaryFile,
 } from '@/app/actions/subscriptionAction';
 
 import {
@@ -379,7 +379,7 @@ export default function Page({ params: { locale } }) {
     formData.append('sepa_file', file);
 
     // Appeler l'API pour uploader le fichier SEPA
-    sendSEPARegisterForm(row.student.id, formData, csrfToken)
+    editRegisterFormWithBinaryFile(row.student.id, formData, csrfToken)
       .then((response) => {
         logger.debug('Mandat SEPA uploadé avec succès :', response);
         setPopupMessage('Le mandat SEPA a été uploadé avec succès.');
@@ -797,11 +797,7 @@ export default function Page({ params: { locale } }) {
             </span>
           ),
           onClick: () => {
-            const paymentSepa =
-              row.registration_payment === 1 || row.tuition_payment === 1
-                ? 1
-                : 0;
-            const url = `${FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL}?studentId=${row.student.id}&firstName=${row.student.first_name}&lastName=${row.student.last_name}&paymentSepa=${paymentSepa}&file=${row.registration_file}`;
+            const url = `${FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL}?studentId=${row.student.id}&firstName=${row.student.first_name}&lastName=${row.student.last_name}&sepa_file=${row.sepa_file}&student_file=${row.registration_file}`;
             router.push(`${url}`);
           },
         },
@@ -809,11 +805,11 @@ export default function Page({ params: { locale } }) {
       5: [
         {
           icon: (
-            <span title="Valider le dossier">
-              <CheckCircle className="w-5 h-5 text-green-500 hover:text-green-700" />
+            <span title="Voir les fichiers">
+              <FileText className="w-5 h-5 text-cyan-500 hover:text-cyan-700" />
             </span>
           ),
-          onClick: () => openModalAssociationEleve(row.student),
+          onClick: () => openFilesModal(row),
         },
       ],
       7: [
@@ -1087,7 +1083,10 @@ export default function Page({ params: { locale } }) {
                     key={`${currentPage}-${searchTerm}`}
                     data={
                       activeTab === 'pending'
-                        ? registrationFormsDataPending
+                        ? [
+                            ...registrationFormsDataPending,
+                            ...registrationFormsDataSubscribed,
+                          ]
                         : activeTab === 'subscribed'
                           ? registrationFormsDataSubscribed
                           : registrationFormsDataArchived

Front-End/src/app/[locale]/admin/subscriptions/validateSubscription/page.js

@@ -1,53 +1,59 @@
 'use client';
-import React from 'react';
+import React, { useState } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import ValidateSubscription from '@/components/Inscription/ValidateSubscription';
-import { sendSEPARegisterForm } from '@/app/actions/subscriptionAction';
+import { editRegisterFormWithBinaryFile } from '@/app/actions/subscriptionAction';
 import { useCsrfToken } from '@/context/CsrfContext';
 import logger from '@/utils/logger';
+import Loader from '@/components/Loader';
 import { FE_ADMIN_SUBSCRIPTIONS_URL } from '@/utils/Url';
 
 export default function Page() {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
 
   // Récupérer les paramètres de la requête
   const studentId = searchParams.get('studentId');
   const firstName = searchParams.get('firstName');
   const lastName = searchParams.get('lastName');
-  const paymentSepa = searchParams.get('paymentSepa') === '1';
-  const file = searchParams.get('file');
+  const sepa_file = searchParams.get('sepa_file');
+  const student_file = searchParams.get('student_file');
 
   const csrfToken = useCsrfToken();
 
   const handleAcceptRF = (data) => {
-    logger.debug('Mise à jour du RF avec les données:', data);
-
-    const { status, sepa_file, fusionParam } = data;
+    const { status, fusionParam } = data;
     const formData = new FormData();
     formData.append('status', status); // Ajoute le statut
-    formData.append('sepa_file', sepa_file); // Ajoute le fichier SEPA
     formData.append('fusion', fusionParam);
 
+    setIsLoading(true);
     // Appeler l'API pour mettre à jour le RF
-    sendSEPARegisterForm(studentId, formData, csrfToken)
+    editRegisterFormWithBinaryFile(studentId, formData, csrfToken)
       .then((response) => {
         logger.debug('RF mis à jour avec succès:', response);
         router.push(FE_ADMIN_SUBSCRIPTIONS_URL);
+        setIsLoading(false);
         // Logique supplémentaire après la mise à jour (par exemple, redirection ou notification)
       })
       .catch((error) => {
+        setIsLoading(false);
         logger.error('Erreur lors de la mise à jour du RF:', error);
       });
   };
 
+  if (isLoading) {
+    return <Loader />;
+  }
+
   return (
     <ValidateSubscription
       studentId={studentId}
       firstName={firstName}
       lastName={lastName}
-      paymentSepa={paymentSepa}
-      file={file}
+      sepa_file={sepa_file}
+      student_file={student_file}
       onAccept={handleAcceptRF}
     />
   );

Front-End/src/app/[locale]/parents/page.js

@@ -8,7 +8,7 @@ import FileUpload from '@/components/FileUpload';
 import { FE_PARENTS_EDIT_INSCRIPTION_URL } from '@/utils/Url';
 import {
   fetchChildren,
-  sendSEPARegisterForm,
+  editRegisterFormWithBinaryFile,
 } from '@/app/actions/subscriptionAction';
 import logger from '@/utils/logger';
 import { BASE_URL } from '@/utils/Url';
@@ -68,7 +68,7 @@ export default function ParentHomePage() {
     formData.append('sepa_file', uploadedFile); // Ajoute le fichier SEPA
     formData.append('status', 3); // Statut à envoyer
 
-    sendSEPARegisterForm(uploadingStudentId, formData, csrfToken)
+    editRegisterFormWithBinaryFile(uploadingStudentId, formData, csrfToken)
       .then((response) => {
         logger.debug('RF mis à jour avec succès:', response);
         setReloadFetch(true);

Front-End/src/app/actions/subscriptionAction.js

@@ -60,7 +60,7 @@ export const editRegisterForm = (id, data, csrfToken) => {
   }).then(requestResponseHandler);
 };
 
-export const sendSEPARegisterForm = (id, data, csrfToken) => {
+export const editRegisterFormWithBinaryFile = (id, data, csrfToken) => {
   return fetch(`${BE_SUBSCRIPTION_REGISTERFORMS_URL}/${id}`, {
     method: 'PUT',
     headers: {

Front-End/src/components/Inscription/FilesModal.js

@@ -14,6 +14,8 @@ const FilesModal = ({
   selectedRegisterForm,
 }) => {
   const [files, setFiles] = useState({
+    registrationFile: null,
+    fusionFile: null,
     schoolFiles: [],
     parentFiles: [],
     sepaFile: null,
@@ -52,6 +54,18 @@ const FilesModal = ({
       .then((parentFiles) => {
         // Construct the categorized files list
         const categorizedFiles = {
+          registrationFile: selectedRegisterForm.registration_file
+            ? {
+                name: 'Fiche élève',
+                url: `${BASE_URL}${selectedRegisterForm.registration_file}`,
+              }
+            : null,
+          fusionFile: selectedRegisterForm.fusion_file
+            ? {
+                name: 'Documents fusionnés',
+                url: `${BASE_URL}${selectedRegisterForm.fusion_file}`,
+              }
+            : null,
           schoolFiles: fetchedSchoolFiles.map((file) => ({
             name: file.name || 'Document scolaire',
             url: file.file ? `${BASE_URL}${file.file}` : null,
@@ -85,6 +99,48 @@ const FilesModal = ({
       }
       ContentComponent={() => (
         <div className="space-y-6">
+          {/* Section Fiche élève */}
+          {files.registrationFile && (
+            <div>
+              <h3 className="text-lg font-semibold text-gray-800 mb-4">
+                Fiche élève
+              </h3>
+              <div className="flex items-center gap-2">
+                <FileText className="w-5 h-5 text-gray-500" />
+                <a
+                  href={files.registrationFile.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:text-blue-700 underline"
+                >
+                  {files.registrationFile.name}
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* Section Documents fusionnés */}
+          {files.fusionFile && (
+            <div>
+              <h3 className="text-lg font-semibold text-gray-800 mb-4">
+                Documents fusionnés
+              </h3>
+              <div className="flex items-center gap-2">
+                <FileText className="w-5 h-5 text-gray-500" />
+                <a
+                  href={files.fusionFile.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:text-blue-700 underline"
+                >
+                  {files.fusionFile.name}
+                </a>
+              </div>
+            </div>
+          )}
+
+          <hr className="border-t border-gray-300" />
+
           {/* Section Fichiers École */}
           <div>
             <h3 className="text-lg font-semibold text-gray-800 mb-4">

Front-End/src/components/Inscription/ValidateSubscription.js

@@ -1,50 +1,30 @@
 'use client';
 import React, { useState, useEffect } from 'react';
-import Button from '@/components/Button';
-import ToggleSwitch from '@/components/ToggleSwitch'; // Import du composant ToggleSwitch
+import ToggleSwitch from '@/components/ToggleSwitch';
 import { BASE_URL } from '@/utils/Url';
-import { generateToken } from '@/app/actions/registerFileGroupAction';
 import {
   fetchSchoolFileTemplatesFromRegistrationFiles,
   fetchParentFileTemplatesFromRegistrationFiles,
 } from '@/app/actions/subscriptionAction';
 import logger from '@/utils/logger';
-import { GraduationCap } from 'lucide-react';
-import FileUpload from '@/components/FileUpload';
+import { School, CheckCircle } from 'lucide-react';
 import SectionHeader from '@/components/SectionHeader';
 
 export default function ValidateSubscription({
   studentId,
   firstName,
   lastName,
-  paymentSepa,
-  file,
+  sepa_file,
+  student_file,
   onAccept,
 }) {
-  const [token, setToken] = useState(null);
-  const [uploadedFileName, setUploadedFileName] = useState('');
-  const [selectedFile, setSelectedFile] = useState(null); // Nouvel état pour le fichier sélectionné
-  const [pdfUrl, setPdfUrl] = useState(`${BASE_URL}/${file}`);
-  const [isSepa, setIsSepa] = useState(paymentSepa); // Vérifie si le mode de paiement est SEPA
-  const [currentPage, setCurrentPage] = useState(1); // Gestion des étapes
-  const [schoolFileTemplates, setSchoolFileTemplates] = useState([]); // Stocke les fichiers schoolFileTemplates
-  const [parentFileTemplates, setParentFileTemplates] = useState([]); // Stocke les fichiers parentFileTemplates
-  const [mergeDocuments, setMergeDocuments] = useState(false); // État pour activer/désactiver la fusion des documents
+  const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
+  const [parentFileTemplates, setParentFileTemplates] = useState([]);
+  const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
+  const [mergeDocuments, setMergeDocuments] = useState(false);
 
   useEffect(() => {
-    if (isSepa) {
-      generateToken('n3wt.school@gmail.com')
-        .then((data) => {
-          setToken(data.token);
-        })
-        .catch((error) =>
-          logger.error('Erreur lors de la génération du token:', error)
-        );
-    }
-  }, [isSepa]);
-
-  useEffect(() => {
-    // Récupérer les fichiers schoolFileTemplates pour l'étudiant
+    // Récupérer les fichiers schoolFileTemplates
     fetchSchoolFileTemplatesFromRegistrationFiles(studentId)
       .then((data) => {
         setSchoolFileTemplates(data);
@@ -57,7 +37,7 @@ export default function ValidateSubscription({
         )
       );
 
-    // Récupérer les fichiers parentFileTemplates pour l'étudiant
+    // Récupérer les fichiers parentFileTemplates
     fetchParentFileTemplatesFromRegistrationFiles(studentId)
       .then((data) => {
         setParentFileTemplates(data);
@@ -72,21 +52,13 @@ export default function ValidateSubscription({
   }, [studentId]);
 
   const handleAccept = () => {
-    if (!selectedFile && isSepa) {
-      logger.error('Aucun fichier sélectionné pour le champ SEPA.');
-      return;
-    }
-
-    // Ajouter le paramètre fusion dans l'URL
     const fusionParam = mergeDocuments ? 'true' : 'false';
 
     const data = {
-      status: 7,
-      sepa_file: selectedFile, // Utilise le fichier sélectionné depuis l'état
+      status: 5,
       fusionParam: fusionParam,
     };
 
-    // Appeler la fonction passée par le parent pour mettre à jour le RF
     onAccept(data);
   };
 
@@ -95,150 +67,114 @@ export default function ValidateSubscription({
     setMergeDocuments((prevState) => !prevState);
   };
 
-  const isValidateButtonDisabled = isSepa && !uploadedFileName;
-
-  const goToNextPage = () => {
-    const totalPages =
-      1 +
-      schoolFileTemplates.length +
-      parentFileTemplates.length +
-      (isSepa ? 1 : 0);
-    if (currentPage < totalPages) {
-      setCurrentPage(currentPage + 1);
-    }
-  };
-
-  const goToPreviousPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
-
-  const totalPages =
-    1 +
-    schoolFileTemplates.length +
-    parentFileTemplates.length +
-    (isSepa ? 1 : 0);
-
-  const renderContent = () => {
-    if (currentPage === 1) {
-      // Page 1 : Afficher le PDF principal
-      return (
-        <iframe
-          src={pdfUrl}
-          title="Aperçu du PDF"
-          className="w-full h-[900px] border rounded-lg"
-          style={{
-            transform: 'scale(0.95)', // Dézoom léger pour une meilleure vue
-            transformOrigin: 'top center',
-            border: 'none',
-          }}
-        />
-      );
-    } else if (
-      currentPage > 1 &&
-      currentPage <= 1 + schoolFileTemplates.length
-    ) {
-      // Pages des schoolFileTemplates
-      const index = currentPage - 2; // Décalage pour correspondre à l'index du tableau
-      return (
-        <iframe
-          src={`${BASE_URL}/${schoolFileTemplates[index]?.file}`}
-          title={`Document ${index + 1}`}
-          className="w-full h-[900px] border rounded-lg"
-          style={{
-            transform: 'scale(0.95)', // Dézoom léger pour une meilleure vue
-            transformOrigin: 'top center',
-            border: 'none',
-          }}
-        />
-      );
-    } else if (
-      currentPage > 1 + schoolFileTemplates.length &&
-      currentPage <= 1 + schoolFileTemplates.length + parentFileTemplates.length
-    ) {
-      // Pages des parentFileTemplates
-      const index = currentPage - 2 - schoolFileTemplates.length; // Décalage pour correspondre à l'index du tableau
-      return (
-        <iframe
-          src={`${BASE_URL}/${parentFileTemplates[index]?.file}`}
-          title={`Document Parent ${index + 1}`}
-          className="w-full h-[900px] border rounded-lg"
-          style={{
-            transform: 'scale(0.95)', // Dézoom léger pour une meilleure vue
-            transformOrigin: 'top center',
-            border: 'none',
-          }}
-        />
-      );
-    } else if (currentPage === totalPages && isSepa) {
-      // Dernière page : Mandat SEPA
-      return (
-        <FileUpload
-          selectionMessage="Sélectionnez un mandat de prélèvement SEPA"
-          onFileSelect={(file) => {
-            setUploadedFileName(file.name); // Stocke uniquement le nom du fichier
-            setSelectedFile(file); // Stocke le fichier dans l'état
-            logger.debug('Fichier sélectionné:', file.name);
-          }}
-          uploadedFileName={uploadedFileName}
-        />
-      );
-    }
-    return null;
-  };
+  const allTemplates = [
+    { name: 'Fiche élève', file: student_file, type: 'main' },
+    ...schoolFileTemplates.map((template) => ({
+      name: template.name || 'Document scolaire',
+      file: template.file,
+      description: template.description,
+    })),
+    ...parentFileTemplates.map((template) => ({
+      name: template.master_name || 'Document parent',
+      file: template.file,
+      description: template.description,
+    })),
+    ...(sepa_file
+      ? [
+          {
+            name: 'Mandat SEPA',
+            file: sepa_file,
+            description: 'Mandat SEPA pour prélèvement automatique',
+          },
+        ]
+      : []),
+  ];
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="mb-4 w-full mx-auto">
+      {/* En-tête de la section */}
       <SectionHeader
-        icon={GraduationCap}
-        title={`Dossier scolaire de ${firstName} ${lastName}`}
+        icon={School}
+        title={`Validation du dossier de ${firstName} ${lastName}`}
         description={`Année scolaire ${new Date().getFullYear()}-${new Date().getFullYear() + 1}`}
       />
 
       {/* Contenu principal */}
-      <div className="p-6 items-center">{renderContent()}</div>
+      <div className="flex gap-8">
+        {/* Liste des documents */}
+        <div className="w-1/4 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-800 mb-4">
+            Liste des documents
+          </h3>
+          <ul className="space-y-2">
+            {allTemplates.map((template, index) => (
+              <li
+                key={index}
+                className={`flex items-center cursor-pointer ${
+                  index === currentTemplateIndex
+                    ? 'text-blue-600 font-bold'
+                    : template.file !== null
+                      ? 'text-green-600'
+                      : 'text-gray-600'
+                }`}
+                onClick={() => setCurrentTemplateIndex(index)} // Mettre à jour l'index du template actuel
+              >
+                <span className="mr-2">
+                  {template.file !== null ? (
+                    <CheckCircle className="w-5 h-5 text-green-600" />
+                  ) : (
+                    <Hourglass className="w-5 h-5 text-gray-600" />
+                  )}
+                </span>
+                {template.name}
+              </li>
+            ))}
+          </ul>
 
-      {/* Option de fusion des documents (affichée uniquement sur la dernière page) */}
-      {currentPage === totalPages && (
-        <div className="flex items-center justify-between mt-6">
-          <span className="text-gray-700">
-            Fusionner les documents en un seul fichier PDF
-          </span>
-          <ToggleSwitch
-            label="Fusionner"
-            checked={mergeDocuments}
-            onChange={handleToggleMergeDocuments} // Appeler la fonction pour inverser l'état
-          />
+          {/* ToggleSwitch et bouton de validation */}
+          <div className="mt-6 flex items-center justify-between">
+            <ToggleSwitch
+              label="Fusionner"
+              checked={mergeDocuments}
+              onChange={handleToggleMergeDocuments}
+            />
+            <button
+              onClick={handleAccept}
+              className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600 transition-colors"
+            >
+              Valider
+            </button>
+          </div>
         </div>
-      )}
 
-      {/* Boutons de navigation */}
-      <div className="flex justify-end items-center mt-6 space-x-4">
-        {currentPage > 1 && (
-          <Button
-            text="Précédent"
-            onClick={goToPreviousPage}
-            className="bg-gray-300 text-gray-700 hover:bg-gray-400 px-6 py-2"
-          />
-        )}
-        {currentPage < totalPages && (
-          <Button
-            text="Suivant"
-            onClick={goToNextPage}
-            primary
-            className="bg-emerald-500 text-white hover:bg-emerald-600 px-6 py-2"
-          />
-        )}
-        {currentPage === totalPages && (
-          <Button
-            text="Valider"
-            onClick={handleAccept}
-            primary
-            className={`px-6 py-2 ${isValidateButtonDisabled ? 'bg-gray-300 text-gray-700 cursor-not-allowed' : 'bg-emerald-600 text-white hover:bg-emerald-700'}`}
-            disabled={isValidateButtonDisabled}
-          />
-        )}
+        {/* Affichage du fichier actuel */}
+        <div className="w-3/4">
+          {currentTemplateIndex < allTemplates.length && (
+            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-800 mb-4">
+                {allTemplates[currentTemplateIndex].name || 'Document sans nom'}
+              </h3>
+              <p className="text-sm text-gray-500 mb-4">
+                {allTemplates[currentTemplateIndex].description ||
+                  'Aucune description disponible pour ce document.'}
+              </p>
+
+              <iframe
+                src={`${BASE_URL}/${allTemplates[currentTemplateIndex].file}`}
+                title={
+                  allTemplates[currentTemplateIndex].type === 'main'
+                    ? 'Document Principal'
+                    : 'Document Viewer'
+                }
+                className="w-full"
+                style={{
+                  height: '75vh',
+                  border: 'none',
+                }}
+              />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );