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)
2026-01-28 23:43:22 +00:00 · 2025-05-03 21:37:41 +02:00
parent 256f995698
commit 0f49236965
13 changed files with 426 additions and 177 deletions
--- a/Back-End/School/serializers.py
+++ b/Back-End/School/serializers.py
@ -142,12 +142,17 @@ class PlanningSerializer(serializers.ModelSerializer):
        internal_value['schedule'] = data.get('schedule', {})
        return internal_value

+class StudentDetailSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Student
+        fields = ['id', 'last_name', 'first_name', 'photo', 'level']
+
 class SchoolClassSerializer(serializers.ModelSerializer):
    updated_date_formatted = serializers.SerializerMethodField()
    teachers = serializers.PrimaryKeyRelatedField(queryset=Teacher.objects.all(), many=True, required=False)
    establishment = serializers.PrimaryKeyRelatedField(queryset=Establishment.objects.all(), required=False)
    teachers_details = serializers.SerializerMethodField()
-    students = serializers.PrimaryKeyRelatedField(queryset=Student.objects.all(), many=True, required=False)
+    students = StudentDetailSerializer(many=True, read_only=True)

    class Meta:
        model = SchoolClass
--- a/Back-End/Subscriptions/serializers.py
+++ b/Back-End/Subscriptions/serializers.py
@ -236,7 +236,7 @@ class StudentSerializer(serializers.ModelSerializer):
        return obj.formatted_birth_date

    def get_associated_class_name(self, obj):
-        return obj.associated_class.atmosphereName if obj.associated_class else None
+        return obj.associated_class.atmosphere_name if obj.associated_class else None

 class RegistrationFormSerializer(serializers.ModelSerializer):
    student = StudentSerializer(many=False, required=False)
--- a/Front-End/src/app/[locale]/admin/structure/SchoolClassManagement/page.js
+++ b/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>
+  );
+}
--- a/Front-End/src/app/[locale]/admin/subscriptions/page.js
+++ b/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}
--- a/Front-End/src/app/[locale]/admin/subscriptions/validateSubscription/page.js
+++ b/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}
    />
  );
 }
--- a/Front-End/src/app/actions/schoolAction.js
+++ b/Front-End/src/app/actions/schoolAction.js
@ -39,6 +39,12 @@ export const fetchClasses = (establishment) => {
  ).then(requestResponseHandler);
 };

+export const fetchClasse = (id) => {
+  return fetch(`${BE_SCHOOL_SCHOOLCLASSES_URL}/${id}`).then(
+    requestResponseHandler
+  );
+};
+
 export const fetchSchedules = () => {
  return fetch(`${BE_SCHOOL_PLANNINGS_URL}`).then(requestResponseHandler);
 };
--- a/Front-End/src/components/AffectationClasseForm.js
+++ b/Front-End/src/components/AffectationClasseForm.js
@ -14,12 +14,13 @@ const AffectationClasseForm = ({ eleve = {}, onSubmit, classes }) => {
  };

  const handleSubmit = () => {
-    onSubmit({
+    console.log(formData);
+    /*onSubmit({
      eleve: {
        ...formData,
      },
      etat: 5,
-    });
+    });*/
  };

  return (
--- a/Front-End/src/components/Inscription/ValidateSubscription.js
+++ b/Front-End/src/components/Inscription/ValidateSubscription.js
@ -1,6 +1,7 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 import ToggleSwitch from '@/components/ToggleSwitch';
+import SelectChoice from '@/components/SelectChoice';
 import { BASE_URL } from '@/utils/Url';
 import {
  fetchSchoolFileTemplatesFromRegistrationFiles,
@ -9,6 +10,7 @@ import {
 import logger from '@/utils/logger';
 import { School, CheckCircle } from 'lucide-react';
 import SectionHeader from '@/components/SectionHeader';
+import Button from '@/components/Button';

 export default function ValidateSubscription({
  studentId,
@ -17,11 +19,34 @@ export default function ValidateSubscription({
  sepa_file,
  student_file,
  onAccept,
+  classes,
 }) {
  const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
  const [parentFileTemplates, setParentFileTemplates] = useState([]);
  const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
  const [mergeDocuments, setMergeDocuments] = useState(false);
+  const [isPageValid, setIsPageValid] = useState(false);
+
+  const [formData, setFormData] = useState({
+    associated_class: null,
+  });
+
+  useEffect(() => {
+    if (classes.length > 0) {
+      // Si l'étudiant a déjà une classe associée, initialisez formData avec cette classe
+      const initialClass = classes.find(
+        (classe) => classe.id === formData.associated_class
+      );
+      setFormData({
+        associated_class: initialClass ? initialClass.id : null,
+      });
+    }
+  }, [classes]);
+
+  // Mettre à jour isPageValid en fonction de la sélection de la classe
+  useEffect(() => {
+    setIsPageValid(!!formData.associated_class); // true si une classe est sélectionnée, sinon false
+  }, [formData.associated_class]);

  useEffect(() => {
    // Récupérer les fichiers schoolFileTemplates
@ -51,20 +76,32 @@ export default function ValidateSubscription({
      );
  }, [studentId]);

-  const handleAccept = () => {
-    const fusionParam = mergeDocuments ? 'true' : 'false';
+  const handleToggleMergeDocuments = () => {
+    setMergeDocuments((prevState) => !prevState);
+  };

+  const handleAssignClass = () => {
+    const fusionParam = mergeDocuments ? 'true' : 'false';
+    if (formData.associated_class) {
      const data = {
+        student: {
+          associated_class: formData.associated_class,
+        },
        status: 5,
        fusionParam: fusionParam,
      };

      onAccept(data);
+    } else {
+      logger.warn('Aucune classe sélectionnée.');
+    }
  };

-  const handleToggleMergeDocuments = () => {
-    // Inverser l'état de mergeDocuments
-    setMergeDocuments((prevState) => !prevState);
+  const onChange = (field, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
  };

  const allTemplates = [
@ -89,6 +126,7 @@ export default function ValidateSubscription({
        ]
      : []),
  ];
+  console.log(allTemplates);

  return (
    <div className="mb-4 w-full mx-auto">
@ -101,53 +139,7 @@ export default function ValidateSubscription({

      {/* Contenu principal */}
      <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>
-
-          {/* 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>
-
-        {/* Affichage du fichier actuel */}
+        {/* Colonne gauche : 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">
@ -158,7 +150,6 @@ export default function ValidateSubscription({
                {allTemplates[currentTemplateIndex].description ||
                  'Aucune description disponible pour ce document.'}
              </p>
-
              <iframe
                src={`${BASE_URL}/${allTemplates[currentTemplateIndex].file}`}
                title={
@ -175,6 +166,92 @@ export default function ValidateSubscription({
            </div>
          )}
        </div>
+
+        {/* Colonne droite : Liste des documents, Option de fusion et Affectation */}
+        <div className="w-1/4 flex flex-col gap-4">
+          {/* Liste des documents */}
+          <div className="flex-1 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 overflow-y-auto">
+            <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)}
+                >
+                  <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>
+          </div>
+
+          {/* Option de fusion */}
+          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Option de fusion
+            </h3>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-gray-700">
+                Fusionner les documents
+              </span>
+              <ToggleSwitch
+                label="Fusionner les documents"
+                checked={mergeDocuments}
+                onChange={handleToggleMergeDocuments}
+              />
+            </div>
+          </div>
+
+          {/* Section Affectation */}
+          <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+            <h3 className="text-lg font-semibold text-gray-800 mb-4">
+              Affectation à une classe
+            </h3>
+            <div className="flex flex-col gap-4">
+              <SelectChoice
+                name="associated_class"
+                label="Classe"
+                placeHolder="Sélectionner une classe"
+                selected={formData.associated_class || ''} // La valeur actuelle de la classe associée
+                callback={(e) => onChange('associated_class', e.target.value)} // Met à jour formData
+                choices={classes.map((classe) => ({
+                  value: classe.id,
+                  label: classe.atmosphere_name,
+                }))} // Liste des classes disponibles
+                required
+              />
+              <Button
+                text="Valider le dossier d'inscription"
+                onClick={(e) => {
+                  e.preventDefault();
+                  handleAssignClass();
+                }}
+                primary
+                className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
+                  !isPageValid
+                    ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
+                    : 'bg-emerald-500 text-white hover:bg-emerald-600'
+                }`}
+                disabled={!isPageValid}
+              />
+            </div>
+          </div>
+        </div>
      </div>
    </div>
  );
--- a/Front-End/src/components/Providers.js
+++ b/Front-End/src/components/Providers.js
@ -4,6 +4,7 @@ import { SessionProvider } from 'next-auth/react';
 import { CsrfProvider } from '@/context/CsrfContext';
 import { NextIntlClientProvider } from 'next-intl';
 import { EstablishmentProvider } from '@/context/EstablishmentContext';
+import { ClassesProvider } from '@/context/ClassesContext';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';

@ -17,9 +18,11 @@ export default function Providers({ children, messages, locale, session }) {
      <DndProvider backend={HTML5Backend}>
        <CsrfProvider>
          <EstablishmentProvider>
+            <ClassesProvider>
              <NextIntlClientProvider messages={messages} locale={locale}>
                {children}
              </NextIntlClientProvider>
+            </ClassesProvider>
          </EstablishmentProvider>
        </CsrfProvider>
      </DndProvider>
--- a/Front-End/src/components/Structure/Configuration/ClassesSection.js
+++ b/Front-End/src/components/Structure/Configuration/ClassesSection.js
@ -10,9 +10,10 @@ import LevelLabel from '@/components/CustomLabels/LevelLabel';
 import { DndProvider, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import logger from '@/utils/logger';
-import ClasseDetails from '@/components/ClasseDetails';
 import SectionHeader from '@/components/SectionHeader';
 import { useEstablishment } from '@/context/EstablishmentContext';
+import { useRouter } from 'next/navigation';
+import { FE_ADMIN_STRUCTURE_SCHOOLCLASS_MANAGEMENT_URL } from '@/utils/Url';

 const ItemTypes = {
  TEACHER: 'teacher',
@ -28,8 +29,6 @@ const TeachersDropZone = ({
    classe.teachers_details || []
  );

-  const { selectedEstablishmentId } = useEstablishment();
-
  useEffect(() => {}, [teachers]);

  useEffect(() => {
@ -131,6 +130,10 @@ const ClassesSection = ({
  const [detailsModalVisible, setDetailsModalVisible] = useState(false);
  const [selectedClass, setSelectedClass] = useState(null);

+  const router = useRouter();
+
+  const { selectedEstablishmentId } = useEstablishment();
+
  const niveauxPremierCycle = [
    { id: 1, name: 'TPS', age: 2 },
    { id: 2, name: 'PS', age: 3 },
@ -520,7 +523,10 @@ const ClassesSection = ({
              </button>
              <button
                type="button"
-                onClick={() => openEditModalDetails(classe)}
+                onClick={() => {
+                  const url = `${FE_ADMIN_STRUCTURE_SCHOOLCLASS_MANAGEMENT_URL}?schoolClassId=${classe.id}`;
+                  router.push(`${url}`);
+                }}
                className="text-gray-500 hover:text-gray-700"
              >
                <ZoomIn className="w-5 h-5" />
@ -559,15 +565,6 @@ const ClassesSection = ({
          columns={columns}
          renderCell={renderClassCell}
        />
-        <Popup
-          visible={detailsModalVisible}
-          message={
-            selectedClass ? <ClasseDetails classe={selectedClass} /> : null
-          }
-          onConfirm={() => setDetailsModalVisible(false)}
-          onCancel={() => setDetailsModalVisible(false)}
-          uniqueConfirmButton={true}
-        />
        <Popup
          visible={popupVisible}
          message={popupMessage}
--- a/Front-End/src/components/Structure/Configuration/TeachersSelectionConfiguration.js
+++ b/Front-End/src/components/Structure/Configuration/TeachersSelectionConfiguration.js
@ -1,60 +0,0 @@
-import React from 'react';
-import Table from '@/components/Table';
-
-const TeachersSelectionConfiguration = ({
-  formData,
-  teachers,
-  handleTeacherSelection,
-  selectedTeachers,
-}) => {
-  return (
-    <div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
-      <label className="mt-6 block text-2xl font-medium text-gray-700 mb-2">
-        Enseignants
-      </label>
-      <label className={`block text-sm font-medium mb-4`}>
-        Sélection :{' '}
-        <span
-          className={`${formData.teachers.length !== 0 ? 'text-emerald-400' : 'text-red-300'}`}
-        >
-          {formData.teachers.length}
-        </span>
-      </label>
-      <Table
-        columns={[
-          {
-            name: 'Nom',
-            transform: (row) => row.last_name,
-          },
-          {
-            name: 'Prénom',
-            transform: (row) => row.first_name,
-          },
-          // {
-          //   name: 'Spécialités',
-          //   transform: (row) => (
-          //     <div className="flex flex-wrap items-center">
-          //       {row.specialites.map(specialite => (
-          //         <span key={specialite.id} className="flex items-center mr-2 mb-1">
-          //           <div
-          //             className="w-4 h-4 rounded-full mr-2"
-          //             style={{ backgroundColor: specialite.codeCouleur }}
-          //             title={specialite.nom}
-          //           ></div>
-          //           <span>{specialite.nom}</span>
-          //         </span>
-          //       ))}
-          //     </div>
-          //   ),
-          // },
-        ]}
-        data={teachers}
-        onRowClick={handleTeacherSelection}
-        selectedRows={selectedTeachers}
-        isSelectable={true}
-      />
-    </div>
-  );
-};
-
-export default TeachersSelectionConfiguration;
--- a/Front-End/src/context/ClassesContext.js
+++ b/Front-End/src/context/ClassesContext.js
@ -70,6 +70,11 @@ export const ClassesProvider = ({ children }) => {
    });
  };

+  const getNiveauLabel = (level) => {
+    const niveau = allNiveaux.find((n) => n.id === level);
+    return niveau ? niveau.name : 'Niveau inconnu';
+  };
+
  const getNiveauxTabs = (levels) => {
    // Trier les levels par id
    const sortedNiveaux = levels.sort((a, b) => a - b);
@ -232,6 +237,7 @@ export const ClassesProvider = ({ children }) => {
      value={{
        schoolYears,
        getNiveauxLabels,
+        getNiveauLabel,
        getNiveauxTabs,
        generateAgeToNiveaux,
        niveauxPremierCycle,
--- a/Front-End/src/utils/Url.js
+++ b/Front-End/src/utils/Url.js
@ -75,6 +75,7 @@ export const FE_ADMIN_CLASSES_URL = `/admin/classes`;

 //ADMIN/STRUCTURE URL
 export const FE_ADMIN_STRUCTURE_URL = `/admin/structure`;
+export const FE_ADMIN_STRUCTURE_SCHOOLCLASS_MANAGEMENT_URL = `/admin/structure/SchoolClassManagement`;

 //ADMIN/DIRECTORY URL
 export const FE_ADMIN_DIRECTORY_URL = `/admin/directory`;