feat: Validation du dossier d'inscription en affectant l'élève à une

classe de son niveau / création d'une fenêtre de visualisation d'une
classe (en cours)

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

@@ -0,0 +1,214 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Plus, Users, Layers } from 'lucide-react';
+import Table from '@/components/Table';
+import MultiSelect from '@/components/MultiSelect';
+import InputText from '@/components/InputText';
+import Popup from '@/components/Popup';
+import { fetchClasse } from '@/app/actions/schoolAction';
+import { useSearchParams } from 'next/navigation';
+import logger from '@/utils/logger';
+import { useClasses } from '@/context/ClassesContext';
+import { BASE_URL } from '@/utils/Url';
+
+export default function Page() {
+  const searchParams = useSearchParams();
+  const schoolClassId = searchParams.get('schoolClassId');
+  const [classe, setClasse] = useState([]);
+  const { getNiveauxLabels, getNiveauLabel } = useClasses();
+
+  const [students, setStudents] = useState([]);
+  const [groups, setGroups] = useState([]);
+  const [newGroup, setNewGroup] = useState({
+    name: '',
+    level: null,
+    students: [],
+  });
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [popupMessage, setPopupMessage] = useState('');
+
+  const handleCreateGroup = () => {
+    if (!newGroup.name || !newGroup.level || newGroup.students.length === 0) {
+      setPopupMessage(
+        'Tous les champs doivent être remplis pour créer un groupe.'
+      );
+      setPopupVisible(true);
+      return;
+    }
+
+    const updatedGroups = [...groups, newGroup];
+    setGroups(updatedGroups);
+    setNewGroup({ name: '', level: null, students: [] });
+  };
+
+  const requestErrorHandler = (err) => {
+    logger.error('Error fetching data:', err);
+  };
+
+  useEffect(() => {
+    fetchClasse(schoolClassId)
+      .then((classeData) => {
+        logger.debug('Classes récupérées :', classeData);
+        setClasse(classeData);
+      })
+      .catch(requestErrorHandler);
+  }, []);
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold">{classe?.atmosphere_name}</h1>
+
+      {/* Section Niveaux */}
+      <div className="bg-white p-4 rounded-lg shadow-md">
+        <h2 className="text-xl font-semibold mb-4 flex items-center">
+          <Layers className="w-6 h-6 mr-2" />
+          Niveaux
+        </h2>
+        <div className="flex flex-wrap gap-2">
+          {classe?.levels?.length > 0 ? (
+            getNiveauxLabels(classe.levels).map((label, index) => (
+              <span
+                key={index} // Utilisez un index si les IDs ne sont pas disponibles
+                className="px-3 py-1 bg-gray-200 rounded-full text-gray-800"
+              >
+                {label}
+              </span>
+            ))
+          ) : (
+            <span className="text-gray-500">Aucun niveau associé</span>
+          )}
+        </div>
+      </div>
+
+      {/* Section Enseignants */}
+      <div className="bg-white p-4 rounded-lg shadow-md">
+        <h2 className="text-xl font-semibold mb-4 flex items-center">
+          <Users className="w-6 h-6 mr-2" />
+          Enseignants
+        </h2>
+        <div className="flex flex-wrap gap-2">
+          {classe?.teachers_details?.map((teacher) => (
+            <span
+              key={teacher.id}
+              className="px-3 py-1 bg-emerald-200 rounded-full text-emerald-800"
+            >
+              {teacher.last_name} {teacher.first_name}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Section Élèves */}
+      <div className="bg-white p-4 rounded-lg shadow-md">
+        <h2 className="text-xl font-semibold mb-4 flex items-center">
+          <Users className="w-6 h-6 mr-2" />
+          Eleves
+        </h2>
+        <Table
+          columns={[
+            {
+              name: 'photo',
+              transform: (row) => (
+                <div className="flex justify-center items-center">
+                  {row.photo ? (
+                    <a
+                      href={`${BASE_URL}${row.photo}`} // Lien vers la photo
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img
+                        src={`${BASE_URL}${row.photo}`}
+                        alt={`${row.first_name} ${row.last_name}`}
+                        className="w-10 h-10 object-cover transition-transform duration-200 hover:scale-125 cursor-pointer rounded-full"
+                      />
+                    </a>
+                  ) : (
+                    <div className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-full">
+                      <span className="text-gray-500 text-sm font-semibold">
+                        {row.first_name[0]}
+                        {row.last_name[0]}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              ),
+            },
+            { name: 'Nom', transform: (row) => row.last_name },
+            { name: 'Prénom', transform: (row) => row.first_name },
+            { name: 'Niveau', transform: (row) => getNiveauLabel(row.level) },
+          ]}
+          data={classe.students}
+        />
+      </div>
+
+      {/* Section Groupes */}
+      {/* <div className="bg-white p-4 rounded-lg shadow-md">
+        <h2 className="text-xl font-semibold mb-4 flex items-center">
+          <Layers className="w-6 h-6 mr-2" />
+          groups
+        </h2>
+        <div className="space-y-4">
+          {groups.map((group, index) => (
+            <div key={group.name || index} className="p-4 bg-gray-100 rounded-lg shadow-sm">
+              <h3 className="text-lg font-semibold">{group.name}</h3>
+              <p className="text-sm text-gray-600">level: {group.level.name}</p>
+              <div className="flex flex-wrap gap-2 mt-2">
+                {group.students.map((student) => (
+                  <span
+                    key={student.id}
+                    className="px-3 py-1 bg-blue-200 rounded-full text-blue-800"
+                  >
+                    {student.last_name} {student.first_name}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div> */}
+
+      {/* Formulaire de création de groupe */}
+      {/* <div className="mt-6">
+          <h3 className="text-lg font-semibold">createGroup</h3>
+          <div className="space-y-4">
+            <InputText
+              name="groupName"
+              value={newGroup.name}
+              onChange={(e) => setNewGroup({ ...newGroup, name: e.target.value })}
+              placeholder='groupName'
+            />
+            <MultiSelect
+              name="groupLevel"
+              label='selectLevel'
+              options={classe?.levels || []}
+              selectedOptions={newGroup.level ? [newGroup.level] : []}
+              onChange={(selected) => setNewGroup({ ...newGroup, level: selected[0] })}
+            />
+            <MultiSelect
+              name="groupStudents"
+              label='selectStudents'
+              options={students}
+              selectedOptions={newGroup.students}
+              onChange={(selected) => setNewGroup({ ...newGroup, students: selected })}
+            />
+            <button
+              onClick={handleCreateGroup}
+              className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600"
+            >
+              create
+            </button>
+          </div>
+        </div>
+      </div> */}
+
+      {/* Popup */}
+      <Popup
+        visible={popupVisible}
+        message={popupMessage}
+        onConfirm={() => setPopupVisible(false)}
+        onCancel={() => setPopupVisible(false)}
+        uniqueConfirmButton={true}
+      />
+    </div>
+  );
+}

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

@@ -4,13 +4,13 @@ import Table from '@/components/Table';
 import Tab from '@/components/Tab';
 import { useTranslations } from 'next-intl';
 import StatusLabel from '@/components/StatusLabel';
-import { Search } from 'lucide-react';
 import Popup from '@/components/Popup';
 import Loader from '@/components/Loader';
 import AlertWithModal from '@/components/AlertWithModal';
 import { useRouter } from 'next/navigation';
 import DropdownMenu from '@/components/DropdownMenu';
 import {
+  Search,
   MoreVertical,
   Send,
   Edit,
@@ -22,7 +22,6 @@ import {
 } from 'lucide-react';
 import Modal from '@/components/Modal';
 import InscriptionForm from '@/components/Inscription/InscriptionForm';
-import AffectationClasseForm from '@/components/AffectationClasseForm';
 import { useEstablishment } from '@/context/EstablishmentContext';
 
 import {
@@ -94,7 +93,6 @@ export default function Page({ params: { locale } }) {
   const [schoolFileMasters, setSchoolFileMasters] = useState([]);
   const [parentFileMasters, setParentFileMasters] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
-  const [isOpenAffectationClasse, setIsOpenAffectationClasse] = useState(false);
   const [student, setStudent] = useState('');
   const [classes, setClasses] = useState([]);
   const [students, setEleves] = useState([]);
@@ -142,11 +140,6 @@ export default function Page({ params: { locale } }) {
     setIsOpen(false);
   };
 
-  const openModalAssociationEleve = (eleveSelected) => {
-    setIsOpenAffectationClasse(true);
-    setStudent(eleveSelected);
-  };
-
   const openFilesModal = (row) => {
     setSelectedRegisterForm(row || []);
     setIsFilesModalOpen(true);
@@ -453,17 +446,6 @@ export default function Page({ params: { locale } }) {
     setConfirmPopupVisible(true);
   };
 
-  const affectationClassFormSubmitHandler = (formdata) => {
-    editRegisterForm(student.id, formData, csrfToken)
-      .then((data) => {
-        logger.debug('Success:', data);
-        setReloadFetch(true);
-      })
-      .catch((error) => {
-        logger.error('Error :', error);
-      });
-  };
-
   const updateStatusAction = (id, newStatus) => {
     logger.debug(
       `Mise à jour du statut du dossier d'inscription avec l'ID : ${id} vers le statut : ${newStatus}`
@@ -785,7 +767,7 @@ export default function Page({ params: { locale } }) {
             </span>
           ),
           onClick: () => {
-            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}`;
+            const url = `${FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL}?studentId=${row.student.id}&firstName=${row.student.first_name}&lastName=${row.student.last_name}&level=${row.student.level}&sepa_file=${row.sepa_file}&student_file=${row.registration_file}`;
             router.push(`${url}`);
           },
         },
@@ -1141,20 +1123,6 @@ export default function Page({ params: { locale } }) {
               )}
             />
           )}
-          {isOpenAffectationClasse && (
-            <Modal
-              isOpen={isOpenAffectationClasse}
-              setIsOpen={setIsOpenAffectationClasse}
-              title="Affectation à une classe"
-              ContentComponent={() => (
-                <AffectationClasseForm
-                  students={students}
-                  onSubmit={affectationClassFormSubmitHandler}
-                  classes={classes}
-                />
-              )}
-            />
-          )}
           {isSepaUploadModalOpen && (
             <Modal
               isOpen={isSepaUploadModalOpen}

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

@@ -1,11 +1,13 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import ValidateSubscription from '@/components/Inscription/ValidateSubscription';
 import { editRegisterFormWithBinaryFile } from '@/app/actions/subscriptionAction';
+import { fetchClasses } from '@/app/actions/schoolAction';
 import { useCsrfToken } from '@/context/CsrfContext';
 import logger from '@/utils/logger';
 import Loader from '@/components/Loader';
+import { useEstablishment } from '@/context/EstablishmentContext';
 import { FE_ADMIN_SUBSCRIPTIONS_URL } from '@/utils/Url';
 
 export default function Page() {
@@ -17,10 +19,38 @@ export default function Page() {
   const studentId = searchParams.get('studentId');
   const firstName = searchParams.get('firstName');
   const lastName = searchParams.get('lastName');
-  const sepa_file = searchParams.get('sepa_file');
+  const level = searchParams.get('level');
+  const sepa_file =
+    searchParams.get('sepa_file') === 'null'
+      ? null
+      : searchParams.get('sepa_file');
   const student_file = searchParams.get('student_file');
 
+  const [classes, setClasses] = useState([]);
+
   const csrfToken = useCsrfToken();
+  const { selectedEstablishmentId } = useEstablishment();
+
+  const requestErrorHandler = (err) => {
+    logger.error('Error fetching data:', err);
+  };
+
+  useEffect(() => {
+    if (selectedEstablishmentId) {
+      fetchClasses(selectedEstablishmentId)
+        .then((classesData) => {
+          logger.debug('Classes récupérées :', classesData);
+
+          // Filtrer les classes par niveau
+          const filteredClasses = classesData.filter(
+            (classe) => classe.levels.includes(parseInt(level, 10)) // Vérifier si le niveau de l'étudiant est dans les niveaux de la classe
+          );
+
+          setClasses(filteredClasses); // Mettre à jour les classes filtrées
+        })
+        .catch(requestErrorHandler);
+    }
+  }, [selectedEstablishmentId]);
 
   const handleAcceptRF = (data) => {
     const formData = new FormData();
@@ -41,7 +71,7 @@ export default function Page() {
       });
   };
 
-  if (isLoading) {
+  if (isLoading || classes.length === 0) {
     return <Loader />;
   }
 
@@ -53,6 +83,7 @@ export default function Page() {
       sepa_file={sepa_file}
       student_file={student_file}
       onAccept={handleAcceptRF}
+      classes={classes}
     />
   );
 }