refactor: Refactoring de la section ClassSection

Back-End/Dockerfile

@@ -3,6 +3,7 @@
 # The first instruction is what image we want to base our container on
 # We Use an official Python runtime as a parent image
 FROM python:3.12.7
+WORKDIR /Back-End
 
 # Allows docker to cache installed dependencies between builds
 COPY requirements.txt requirements.txt
@@ -11,7 +12,6 @@ RUN pip install pymupdf
 
 # Mounts the application code to the image
 COPY . .
-WORKDIR /Back-End
 
 EXPOSE 8080
 

Back-End/School/serializers.py

@@ -68,11 +68,7 @@ class TeacherSerializer(serializers.ModelSerializer):
 
     def get_droit(self, obj):
         if obj.associated_profile:
-            droit_id = obj.associated_profile.droit
+            return obj.associated_profile.droit
-            return {
-                "label": obj.associated_profile.get_droit_display(),
-                "id": droit_id
-            }
         return None
 
     def get_specialities_details(self, obj): 
@@ -163,7 +159,7 @@ class SchoolClassSerializer(serializers.ModelSerializer):
         return instance
 
     def get_teachers_details(self, obj): 
-        return [{'last_name': teacher.last_name, 'first_name': teacher.first_name} for teacher in obj.teachers.all()]
+        return [{'id': teacher.id, 'last_name': teacher.last_name, 'first_name': teacher.first_name} for teacher in obj.teachers.all()]
 
     def get_updated_date_formatted(self, obj):
         utc_time = timezone.localtime(obj.updated_date)

Front-End/src/components/MultiSelect.js

@@ -0,0 +1,84 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+
+const MultiSelect = ({ name, label, options, selectedOptions, onChange, errorMsg }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+
+  const handleSelect = (option) => {
+    const isSelected = selectedOptions.some(selected => selected.id === option.id);
+    let newSelectedOptions;
+    if (isSelected) {
+      newSelectedOptions = selectedOptions.filter(selected => selected.id !== option.id);
+    } else {
+      newSelectedOptions = [...selectedOptions, option];
+    }
+    onChange(newSelectedOptions);
+  };
+
+  const handleClickOutside = (event) => {
+    if (containerRef.current && !containerRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef}>
+      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+        {label}
+      </label>
+      <div className="relative mt-1">
+        <button
+          type="button"
+          className="w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-pointer focus:outline-none sm:text-sm"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {selectedOptions.length > 0 ? (
+            <div className="flex flex-wrap gap-1 justify-center items-center">
+              {selectedOptions.map(option => (
+                <span key={option.id} className="bg-emerald-100 text-emerald-700 px-2 py-1 rounded-md text-sm">
+                  {option.name}
+                </span>
+              ))}
+            </div>
+          ) : (
+            'Sélectionnez les niveaux'
+          )}
+          <ChevronDown className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none h-full w-5" />
+        </button>
+        {isOpen && (
+          <ul className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+            {options.map(option => (
+              <li
+                key={option.id}
+                className={`cursor-pointer select-none relative py-2 pl-3 pr-9 ${
+                  selectedOptions.some(selected => selected.id === option.id) ? 'text-white bg-emerald-600' : 'text-gray-900 hover:bg-emerald-100 hover:text-emerald-900'
+                }`}
+                onClick={() => handleSelect(option)}
+              >
+                <span className={`block truncate ${selectedOptions.some(selected => selected.id === option.id) ? 'font-semibold' : 'font-normal'}`}>
+                  {option.name}
+                </span>
+                {selectedOptions.some(selected => selected.id === option.id) && (
+                  <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-white">
+                    <Check className="h-5 w-5" />
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
+    </div>
+  );
+};
+
+export default MultiSelect;

Front-End/src/components/SelectChoice.js

@@ -1,7 +1,6 @@
 export default function SelectChoice({ type, name, label, required, placeHolder, choices, callback, selected, errorMsg, IconItem, disabled = false }) {
   return (
     <>
-      <div className="mb-4">
       <label htmlFor={name} className="block text-sm font-medium text-gray-700">
         {label}
         {required && <span className="text-red-500 ml-1">*</span>}
@@ -13,7 +12,7 @@ export default function SelectChoice({ type, name, label,required, placeHolder,
           </span>
         }
         <select
-            className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${disabled ? 'bg-gray-100' : ''} ${selected === "" ? 'italic' : ''}`}
+          className={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none rounded-md ${disabled ? 'bg-gray-100' : ''}`}
           type={type}
           id={name}
           name={name}
@@ -21,7 +20,7 @@ export default function SelectChoice({ type, name, label,required, placeHolder,
           onChange={callback}
           disabled={disabled}
         >
-            <option value="" className="italic">{placeHolder?.toLowerCase()}</option>
+          <option value="">{placeHolder?.toLowerCase()}</option>
           {choices.map(({ value, label }, index) => (
             <option key={value} value={value}>
               {label}
@@ -30,7 +29,6 @@ export default function SelectChoice({ type, name, label,required, placeHolder,
         </select>
       </div>
       {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
-      </div>
     </>
   );
 }

Front-End/src/components/Structure/Configuration/ClassForm.js

@@ -1,253 +0,0 @@
-import React, { useState } from 'react';
-import InputTextIcon from '@/components/InputTextIcon';
-import Button from '@/components/Button';
-import SelectChoice from '@/components/SelectChoice';
-import CheckBoxList from '@/components/CheckBoxList';
-import PlanningConfiguration from '@/components/Structure/Configuration/PlanningConfiguration';
-import TeachersSelectionConfiguration from '@/components/Structure/Configuration/TeachersSelectionConfiguration';
-import { Users, Maximize2, Calendar, UserPlus } from 'lucide-react';
-import { useClasseForm } from '@/context/ClasseFormContext';
-import { useClasses } from '@/context/ClassesContext';
-
-const ClassForm = ({ onSubmit, isNew, teachers }) => {
-
-  const { formData, setFormData } = useClasseForm();
-  const { getNiveauNameById, schoolYears, getNiveauxLabels, getNiveauxTabs, generateAgeToNiveaux, niveauxPremierCycle, niveauxSecondCycle, niveauxTroisiemeCycle, typeEmploiDuTemps, updatePlannings } = useClasses();
-  const [selectedTeachers, setSelectedTeachers] = useState(formData.teachers);
-
-  const handleTeacherSelection = (teacher) => {
-    setSelectedTeachers(prevState =>
-      prevState.includes(teacher.id)
-        ? prevState.filter(id => id !== teacher.id)
-        : [...prevState, teacher.id]
-    );
-    setFormData(prevState => ({
-      ...prevState,
-      teachers: prevState.teachers.includes(teacher.id)
-        ? prevState.teachers.filter(id => id !== teacher.id)
-        : [...prevState.teachers, teacher.id]
-    }));
-  };
-
-  const handleTimeChange = (e, index) => {
-    const { value } = e.target;
-    setFormData(prevState => {
-      const updatedTimes = [...prevState.time_range];
-      updatedTimes[index] = value;
-
-      const updatedFormData = {
-        ...prevState,
-        time_range: updatedTimes,
-      };
-
-      const existingPlannings = prevState.plannings || [];
-      updatedFormData.plannings = updatePlannings(updatedFormData, existingPlannings);
-
-      return updatedFormData;
-    });
-  };
-
-  const handleJoursChange = (e) => {
-    const { value, checked } = e.target;
-    const dayId = parseInt(value, 10);
-
-    setFormData((prevState) => {
-      const updatedJoursOuverture = checked
-        ? [...prevState.opening_days, dayId]
-        : prevState.opening_days.filter((id) => id !== dayId);
-
-      const updatedFormData = {
-        ...prevState,
-        opening_days: updatedJoursOuverture,
-      };
-
-      const existingPlannings = prevState.plannings || [];
-      updatedFormData.plannings = updatePlannings(updatedFormData, existingPlannings);
-
-      return updatedFormData;
-    });
-  };
-
-  const handleChange = (e) => {
-    e.preventDefault();
-    const { name, value, type, checked } = e.target;
-
-    setFormData(prevState => {
-
-        // Copier l'état précédent
-        let newState = { ...prevState };
-
-        if (type === 'checkbox') {
-            const newValues = checked
-                ? [...(prevState[name] || []), parseInt(value)]
-                : (prevState[name] || []).filter(v => v !== parseInt(value));
-            newState[name] = newValues;
-        } else if (name === 'age_range') {
-            const [minAgeStr, maxAgeStr] = value.split('-');
-            const minAge = minAgeStr ? parseInt(minAgeStr) : null;
-            const maxAge = minAgeStr ? parseInt(maxAgeStr) : null;
-            const selectedNiveaux = generateAgeToNiveaux(minAge, maxAge);
-            const niveauxLabels = getNiveauxLabels(selectedNiveaux);
-
-            newState = {
-                ...prevState,
-                [name]: value,
-                levels: selectedNiveaux.length > 0 ? selectedNiveaux : [],
-            };
-        } else if (type === 'radio') {
-            newState[name] = parseInt(value, 10);
-        } else {
-            newState[name] = value;
-        }
-
-        const existingPlannings = prevState.plannings || [];
-        newState.plannings = updatePlannings(newState, existingPlannings);
-
-        return newState;
-    });
-};
-
-  const handleSubmit = () => {
-    onSubmit(formData);
-  };
-
-  const [minAge, maxAge] = formData.age_range.length === 2 ? formData.age_range : [null, null];
-  const selectedAgeGroup = generateAgeToNiveaux(minAge, maxAge);
-
-  return (
-    <div className="h-[80vh] overflow-y-auto">
-      <form onSubmit={handleSubmit} className="space-y-4 mt-8">
-
-        <div className="flex justify-between space-x-4">
-          {/* Section Ambiance */}
-          <div className="w-1/2 space-y-4">
-            <label className="block text-lg font-medium text-gray-700">Ambiance <i>(optionnel)</i></label>
-            <div className="space-y-4">
-              <div>
-                <InputTextIcon
-                  name="atmosphere_name"
-                  type="text"
-                  IconItem={Users}
-                  placeholder="Nom de l'ambiance"
-                  value={formData.atmosphere_name}
-                  onChange={handleChange}
-                  className="w-full"
-                />
-              </div>
-              <div>
-                <InputTextIcon
-                  name="age_range"
-                  type="text"
-                  IconItem={Maximize2}
-                  placeholder="Tranche d'âge (ex: 3-6)"
-                  value={formData.age_range}
-                  onChange={handleChange}
-                  className="w-full"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Section Niveau */}
-          <div className="w-1/2 space-y-2">
-            <label className="block text-lg font-medium text-gray-700">Niveaux</label>
-            <div className="grid grid-cols-3 gap-4">
-              <CheckBoxList
-                items={niveauxPremierCycle}
-                formData={formData}
-                handleChange={handleChange}
-                fieldName="levels"
-                labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
-                className="w-full"
-              />
-              <CheckBoxList
-                items={niveauxSecondCycle}
-                formData={formData}
-                handleChange={handleChange}
-                fieldName="levels"
-                labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
-                className="w-full"
-              />
-              <CheckBoxList
-                items={niveauxTroisiemeCycle}
-                formData={formData}
-                handleChange={handleChange}
-                fieldName="levels"
-                labelAttenuated={(item) => !selectedAgeGroup.includes(parseInt(item.id))}
-                className="w-full"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="flex justify-between space-x-4">
-          {/* Section Capacité */}
-          <div className="w-1/2 space-y-4">
-            <label className="block text-lg font-medium text-gray-700">Capacité</label>
-            <div className="space-y-4">
-              <InputTextIcon
-                name="number_of_students"
-                type="number"
-                IconItem={UserPlus}
-                placeholder="Capacité max"
-                value={formData.number_of_students}
-                onChange={handleChange}
-                className="w-full"
-              />
-            </div>
-          </div>
-
-          {/* Année scolaire */}
-          <div className="w-1/2 space-y-4">
-            <label className="block text-lg font-medium text-gray-700">Année scolaire</label>
-            <div className="space-y-4">
-              <SelectChoice
-                name="school_year"
-                placeHolder="Sélectionner l'année scolaire"
-                selected={formData.school_year}
-                callback={handleChange}
-                choices={schoolYears}
-                IconItem={Calendar}
-                className="w-full"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Section Enseignants */}
-        <TeachersSelectionConfiguration formData={formData}
-                                        teachers={teachers}
-                                        handleTeacherSelection={handleTeacherSelection}
-                                        selectedTeachers={selectedTeachers}
-        />
-
-        {/* Section Emploi du temps */}
-        <PlanningConfiguration formData={formData}
-                                handleChange={handleChange}
-                                handleTimeChange={handleTimeChange}
-                                handleJoursChange={handleJoursChange}
-                                typeEmploiDuTemps={typeEmploiDuTemps}
-
-        />
-
-        <div className="flex justify-end mt-4 space-x-4">
-          <Button
-            text={`${isNew ? "Créer" : "Modifier"}`}
-            onClick={handleSubmit}
-            className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
-              (formData.levels.length === 0 || !formData.school_year || !formData.number_of_students || formData.teachers.length === 0)
-                ? "bg-gray-300 text-gray-700 cursor-not-allowed"
-                : "bg-emerald-500 text-white hover:bg-emerald-600"
-            }`}
-            primary
-            disabled={(formData.levels.length === 0 || !formData.school_year || !formData.number_of_students || formData.teachers.length === 0)}
-            type="submit"
-            name="Create"
-          />
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default ClassForm;

Front-End/src/components/Structure/Configuration/ClassesSection.js

@@ -1,87 +1,334 @@
-import { Trash2, MoreVertical, Edit3, Plus, ZoomIn } from 'lucide-react';
+import { Trash2, Edit3, Plus, ZoomIn, Users, Check, X, Hand } from 'lucide-react';
-import { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Table from '@/components/Table';
-import DropdownMenu from '@/components/DropdownMenu';
+import Popup from '@/components/Popup';
-import Modal from '@/components/Modal';
+import InputText from '@/components/InputText';
-import ClassForm from '@/components/Structure/Configuration/ClassForm';
+import SelectChoice from '@/components/SelectChoice';
-import ClasseDetails from '@/components/ClasseDetails';
+import TeacherItem from '@/components/Structure/Configuration/TeacherItem';
+import MultiSelect from '@/components/MultiSelect';
 import LevelLabel from '@/components/CustomLabels/LevelLabel';
-import TeacherLabel from '@/components/CustomLabels/TeacherLabel';
+import { DndProvider, HTML5Backend, useDrop } from 'react-dnd';
-import { ClasseFormProvider } from '@/context/ClasseFormContext';
-import { useClasses } from '@/context/ClassesContext';
 
-
+const ItemTypes = {
-const ClassesSection = ({ classes, teachers, handleCreate, handleEdit, handleDelete }) => {
+  TEACHER: 'teacher',
-
-  const { getNiveauxLabels } = useClasses();
-  const [isOpen, setIsOpen] = useState(false);
-  const [isOpenDetails, setIsOpenDetails] = useState(false);
-  const [editingClass, setEditingClass] = useState(null);
-
-  const openEditModal = (classe) => {
-    setIsOpen(true);
-    setEditingClass(classe);
-  }
-
-  const openEditModalDetails = (classe) => {
-    setIsOpenDetails(true);
-    setEditingClass(classe);
-  }
-
-  const closeEditModal = () => { 
-    setIsOpen(false); 
-    setEditingClass(null); 
 };
 
-  const closeEditModalDetails = () => { 
+const TeachersDropZone = ({ classe, handleTeachersChange, teachers, isEditing }) => {
-    setIsOpenDetails(false); 
+  const [localTeachers, setLocalTeachers] = useState(classe.teachers_details || []);
-    setEditingClass(null); 
-  };
 
-  const handleModalSubmit = (updatedData) => {
+  useEffect(() => {
-    if (editingClass) {
+  }, [teachers]);
-      handleEdit(editingClass.id, updatedData);
+
-    } else {
+  useEffect(() => {
-      handleCreate(updatedData);
+    setLocalTeachers(classe.teachers_details || []);
+  }, [classe.teachers_details]);
+
+  useEffect(() => {
+    handleTeachersChange(localTeachers.map(teacher => teacher.id));
+  }, [localTeachers]);
+
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: ItemTypes.TEACHER,
+    drop: (item) => {
+      const teacherDetails = teachers.find(teacher => teacher.id === item.id);
+      const exists = localTeachers.some(teacher => teacher.id === item.id);
+      if (!exists) {
+        setLocalTeachers(prevTeachers => {
+          const updatedTeachers = [
+            ...prevTeachers,
+            { id: item.id, last_name: teacherDetails.last_name, first_name: teacherDetails.first_name }
+          ];
+          return updatedTeachers;
+        });
       }
-    closeEditModal();
+    },
+    collect: (monitor) => ({
+      isOver: !!monitor.isOver(),
+      canDrop: !!monitor.canDrop(),
+    }),
+    canDrop: () => {
+      return isEditing;
+    },
+  });
+
+  const handleRemoveTeacher = (id) => {
+    setLocalTeachers(prevTeachers => {
+      const updatedTeachers = prevTeachers.filter(teacher => teacher.id !== id);
+      return updatedTeachers;
+    });
   };
 
   return (
-    <div className="mb-8">
+    <div ref={drop} className={`p-2 rounded-md flex flex-col items-center ${isEditing ? 'border-2 border-dashed border-blue-500 bg-blue-50' : ''} ${
-      <div className="flex justify-between items-center mb-4 max-w-8xl ml-0">        
+      isOver && canDrop ? 'border-2 border-solid border-blue-300' : ''
-        <h2 className="text-xl font-bold mb-4">Gestion des classes</h2>
+    }`}
-        <button
-          onClick={() => openEditModal(null)} // ouvrir le modal pour créer une nouvelle spécialité
-          className="flex items-center bg-emerald-600 text-white p-2 rounded-full shadow hover:bg-emerald-900 transition duration-200"
     >
-          <Plus className="w-5 h-5" />
+    {isEditing && (
+        <div className="mb-2 text-blue-500 font-semibold flex items-center space-x-2">
+          <Hand className="w-5 h-5" /> {/* Ajoutez l'icône Hand */}
+          <span>Déposez un enseignant ici</span>
+        </div>
+      )}
+      {localTeachers.map((teacher, index) => (
+        <div key={`${teacher.id}-${index}`} className="flex items-center space-x-2 mb-2">
+          <TeacherItem key={teacher.id} teacher={teacher} isDraggable={false}/>
+          {isEditing && (
+            <button
+              type="button"
+              onClick={() => handleRemoveTeacher(teacher.id)}
+              className="text-red-500 hover:text-red-700"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const ClassesSection = ({ classes, setClasses, teachers, handleCreate, handleEdit, handleDelete }) => {
+  const [formData, setFormData] = useState({});
+  const [editingClass, setEditingClass] = useState(null);
+  const [newClass, setNewClass] = useState(null);
+  const [localErrors, setLocalErrors] = useState({});
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [popupMessage, setPopupMessage] = useState("");
+
+  const niveauxPremierCycle = [
+    { id: 1, name: 'TPS', age: 2 },
+    { id: 2, name: 'PS', age: 3 },
+    { id: 3, name: 'MS', age: 4 },
+    { id: 4, name: 'GS', age: 5 },
+  ];
+  
+  const niveauxSecondCycle = [
+    { id: 5, name: 'CP', age: 6 },
+    { id: 6, name: 'CE1', age: 7 },
+    { id: 7, name: 'CE2', age: 8 },
+  ];
+  
+  const niveauxTroisiemeCycle = [
+    { id: 8, name: 'CM1', age: 9 },
+    { id: 9, name: 'CM2', age: 10 },
+  ];
+  
+  const allNiveaux = [...niveauxPremierCycle, ...niveauxSecondCycle, ...niveauxTroisiemeCycle];
+  
+  const getNiveauxLabels = (levels) => {
+    return levels.map(niveauId => {
+      const niveau = allNiveaux.find(n => n.id === niveauId);
+      return niveau ? niveau.name : niveauId;
+    });
+  };
+
+  // Fonction pour générer les années scolaires
+  const getSchoolYearChoices = () => {
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth() + 1; // Les mois sont indexés à partir de 0
+  
+    // Si nous sommes avant septembre, l'année scolaire en cours a commencé l'année précédente
+    const startYear = currentMonth >= 9 ? currentYear : currentYear - 1;
+  
+    const choices = [];
+    for (let i = 0; i < 3; i++) {
+      const year = startYear + i;
+      choices.push({ value: `${year}-${year + 1}`, label: `${year}-${year + 1}` });
+    }
+    return choices;
+  };
+
+  const handleAddClass = () => {
+    setNewClass({ id: Date.now(), atmosphere_name: '', age_range: '', levels: [], number_of_students: '', school_year: '', teachers: [] });
+    setFormData({ atmosphere_name: '', age_range: '', levels: [], number_of_students: '', school_year: '', teachers: [] });
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    if (editingClass) {
+      setFormData((prevData) => ({
+        ...prevData,
+        [name]: value,
+      }));
+    } else if (newClass) {
+      setNewClass((prevData) => ({
+        ...prevData,
+        [name]: value,
+      }));
+    }
+  };
+
+  const handleSaveNewClass = () => {
+    if (newClass.atmosphere_name) {
+      handleCreate(newClass)
+        .then((createdClass) => {
+          setClasses((prevClasses) => [createdClass, ...classes]);
+          setNewClass(null);
+          setLocalErrors({});
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      } else {
+        setPopupMessage("Tous les champs doivent être remplis et valides");
+        setPopupVisible(true);
+      }
+  };
+
+  const handleUpdateClass = (id, updatedData) => {
+    if (!updatedData.atmosphere_name) {
+      setLocalErrors({ atmosphere_name: 'Le nom d\'ambiance est requis.' });
+      return;
+    }
+
+    handleEdit(id, updatedData)
+      .then((updatedClass) => {
+        setClasses((prevClasses) => prevClasses.map((classe) => (classe.id === id ? updatedClass : classe)));
+        setEditingClass(null);
+        setFormData({});
+        setLocalErrors({});
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  const handleTeachersChange = (selectedTeachers) => {
+    if (editingClass) {
+      setFormData((prevData) => ({
+        ...prevData,
+        teachers: selectedTeachers,
+      }));
+    } else if (newClass) {
+      setNewClass((prevData) => ({
+        ...prevData,
+        teachers: selectedTeachers,
+      }));
+      setFormData((prevData) => ({
+        ...prevData,
+        teachers: selectedTeachers,
+      }));
+    }
+  };
+
+  const handleMultiSelectChange = (selectedOptions) => {
+    const levels = selectedOptions.map(option => option.id);
+  
+    if (editingClass) {
+      setFormData((prevData) => ({
+        ...prevData,
+        levels,
+      }));
+    } else if (newClass) {
+      setNewClass((prevData) => ({
+        ...prevData,
+        levels,
+      }));
+      setFormData((prevData) => ({
+        ...prevData,
+        levels,
+      }));
+    }
+  };
+
+  const renderClassCell = (classe, column) => {
+    const isEditing = editingClass === classe.id;
+    const isCreating = newClass && newClass.id === classe.id;
+    const currentData = isEditing ? formData : newClass || {};
+
+    if (isEditing || isCreating) {
+      switch (column) {
+        case 'AMBIANCE':
+          return (
+            <InputText
+              name="atmosphere_name"
+              value={currentData.atmosphere_name}
+              onChange={handleChange}
+              placeholder="Nom d'ambiance"
+              errorMsg={localErrors && localErrors.atmosphere_name && Array.isArray(localErrors.atmosphere_name) ? localErrors.atmosphere_name[0] : ''}
+            />
+          );
+        case 'TRANCHE D\'AGE':
+          return (
+            <InputText
+              name="age_range"
+              value={currentData.age_range}
+              onChange={handleChange}
+              placeholder="Tranche d'âge (ex: 3-6)"
+              errorMsg={localErrors && localErrors.age_range && Array.isArray(localErrors.age_range) ? localErrors.age_range[0] : ''}
+            />
+        )
+        case 'NIVEAUX':
+          return (
+            <MultiSelect
+              name="levels"
+              options={allNiveaux}
+              selectedOptions={currentData.levels ? currentData.levels.map(levelId => allNiveaux.find(level => level.id === levelId)) : []}
+              onChange={handleMultiSelectChange}
+              errorMsg={localErrors && localErrors.levels && Array.isArray(localErrors.levels) ? localErrors.levels[0] : ''}
+            />
+          );
+        case 'CAPACITE':
+          return (
+            <InputText
+              name="number_of_students"
+              type="number"
+              value={currentData.number_of_students}
+              onChange={handleChange}
+              placeholder="Capacité"
+              errorMsg={localErrors && localErrors.number_of_students && Array.isArray(localErrors.number_of_students) ? localErrors.number_of_students[0] : ''}
+            />
+          )
+        case 'ANNÉE SCOLAIRE' :
+          return (
+            <SelectChoice
+              type="select"
+              name="school_year"
+              placeHolder="Sélectionnez une année scolaire"
+              choices={getSchoolYearChoices()}
+              callback={handleChange}
+              selected={currentData.school_year || ''}
+              errorMsg={localErrors && localErrors.school_year && Array.isArray(localErrors.school_year) ? localErrors.school_year[0] : ''}
+              IconItem={null}
+              disabled={false}
+            />
+          )
+        case 'ENSEIGNANTS':
+          return (
+            <TeachersDropZone classe={currentData} handleTeachersChange={handleTeachersChange} teachers={teachers} isEditing={isEditing || isCreating} />
+          );
+        case 'ACTIONS':
+          return (
+            <div className="flex justify-center space-x-2">
+              <button
+                type="button"
+                onClick={() => (isEditing ? handleUpdateClass(editingClass, formData) : handleSaveNewClass())}
+                className="text-green-500 hover:text-green-700"
+              >
+                <Check className="w-5 h-5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => (isEditing ? setEditingClass(null) : setNewClass(null))}
+                className="text-red-500 hover:text-red-700"
+              >
+                <X className="w-5 h-5" />
               </button>
             </div>
-      <div className="bg-white rounded-lg border border-gray-200 max-w-8xl ml-0">
+          );
-        <Table
+        default:
-          columns={[
+          return null;
-            { 
+      }
-              name: 'AMBIANCE', 
-              transform: (row) => {
-                const ambiance = row.atmosphere_name ? row.atmosphere_name : '';
-                const trancheAge = row.age_range ? `${row.age_range} ans` : '';
-                
-                if (ambiance && trancheAge) {
-                  return `${ambiance} (${trancheAge})`;
-                } else if (ambiance) {
-                  return ambiance;
-                } else if (trancheAge) {
-                  return trancheAge;
     } else {
-                  return 'Non spécifié';
+      switch (column) {
-                }
+        case 'AMBIANCE':
-              }
+          return classe.atmosphere_name;
-            },
+        case 'TRANCHE D\'AGE':
-            {
+          return classe.age_range;
-              name: 'NIVEAUX',
+        case 'NIVEAUX':
-              transform: (row) => {
+          const levelLabels = Array.isArray(classe.levels) ? getNiveauxLabels(classe.levels) : [];
-                const levelLabels = Array.isArray(row.levels) ? getNiveauxLabels(row.levels) : [];
           return (
             <div className="flex flex-wrap justify-center items-center space-x-2">
               {levelLabels.length > 0 
@@ -91,74 +338,89 @@ const ClassesSection = ({ classes, teachers, handleCreate, handleEdit, handleDel
               : 'Aucun niveau'}
             </div>
           );
-              }
+        case 'CAPACITE':
-            },
+          return classe.number_of_students;
-            { name: 'CAPACITÉ MAX', transform: (row) => row.number_of_students },
+        case 'ANNÉE SCOLAIRE' :
-            { name: 'ANNÉE SCOLAIRE', transform: (row) => row.school_year },
+          return classe.school_year;
-            {
+        case 'ENSEIGNANTS':
-              name: 'ENSEIGNANTS',
+          return (
-              transform: (row) => (
+            <div className="flex justify-center space-x-2 flex-wrap">
-                <div key={row.id} className="flex flex-wrap justify-center items-center space-x-2">
+              {classe.teachers_details.map((teacher) => (
-                  {row.teachers_details.map((teacher, index) => (
+                <TeacherItem key={teacher.id} teacher={teacher} isDraggable={false} />
-                    <TeacherLabel key={`${teacher.id}-${index}`} nom={teacher.last_name} prenom={teacher.first_name} index={index} />
               ))}
             </div>
-              )
+          );
-            },
+        case 'MISE A JOUR':
-            { name: 'DATE DE CREATION', transform: (row) => row.updated_date_formatted },
+          return classe.updated_date_formatted;
-            {
+        case 'ACTIONS':
-              name: 'ACTIONS', transform: (row) => (
+          return (
-                <DropdownMenu
+            <div className="flex justify-center space-x-2">
-                  buttonContent={<MoreVertical size={20} className="text-gray-400 hover:text-gray-600" />}
+              <button
-                  items={[
+                type="button"
-                      { label: 'Inspecter', icon: ZoomIn, onClick: () => openEditModalDetails(row) },
+                onClick={() => setEditingClass(classe.id) || setFormData(classe)}
-                      { label: 'Modifier', icon: Edit3, onClick: () => openEditModal(row) },
+                className="text-blue-500 hover:text-blue-700"
-                      { label: 'Supprimer', icon: Trash2, onClick: () => handleDelete(row.id) }
+              >
-                    ]
+                <Edit3 className="w-5 h-5" />
-                  }
+              </button>
-                  buttonClassName="text-gray-400 hover:text-gray-600"
+              <button
-                  menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10 flex flex-col items-center"
+                type="button"
-                />
+                onClick={() => handleDelete(classe.id)}
-              )
+                className="text-red-500 hover:text-red-700"
-            }
+              >
-          ]}
+                <Trash2 className="w-5 h-5" />
-          data={classes}
+              </button>
-        />
+              <button
+                type="button"
+                onClick={() => openEditModalDetails(classe)}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                <ZoomIn className="w-5 h-5" />
+              </button>
             </div>
-      {isOpen && (
+          );
-        <ClasseFormProvider initialClasse={editingClass || {}}>
+        default:
-          <Modal 
+          return null;
-              isOpen={isOpen} 
+      }
-              setIsOpen={setIsOpen} 
+    }
-              title={editingClass ? "Modification de la classe" : "Création d'une nouvelle classe"}
+  };
-              size='sm:w-1/2'
-              ContentComponent={() => (
-                                        <ClassForm classe={editingClass || {}} onSubmit={handleModalSubmit} isNew={!editingClass} teachers={teachers} />
-                                      )}
-            />
-          </ClasseFormProvider>
-      )}
 
-      {isOpenDetails && (
+  const columns = [
-				<Modal 
+    { name: 'AMBIANCE', label: 'Nom d\'ambiance' },
-            isOpen={isOpenDetails} 
+    { name: 'TRANCHE D\'AGE', label: 'Tranche d\'âge' },
-            setIsOpen={setIsOpenDetails}
+    { name: 'NIVEAUX', label: 'Niveaux' },
-            title={(
+    { name: 'CAPACITE', label: 'Capacité max' },
-              <div className="flex items-center">
+    { name: 'ANNÉE SCOLAIRE', label: 'Année scolaire' },
-                <Users className="w-8 h-8 mr-2" />
+    { name: 'ENSEIGNANTS', label: 'Enseignants' },
-                {editingClass ? (
+    { name: 'MISE A JOUR', label: 'Date mise à jour' },
-                  <>
+    { name: 'ACTIONS', label: 'Actions' }
-                  {editingClass.atmosphere_name} - {editingClass.age_range[0]} à {editingClass.age_range[1]} ans
+  ];
-                  </>
+
-                  ) : ''}
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div className="space-y-4">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center mb-4">
+            <Users className="w-6 h-6 text-emerald-500 mr-2" />
+            <h2 className="text-xl font-semibold">Classes</h2>
           </div>
-            )}
+          <button type="button" onClick={handleAddClass} className="text-emerald-500 hover:text-emerald-700">
-            ContentComponent={() => (
+            <Plus className="w-5 h-5" />
-                                      <ClasseDetails classe={editingClass} />
+          </button>
-                                    )}
+        </div>
+        <Table
+          data={newClass ? [newClass, ...classes] : classes}
+          columns={columns}
+          renderCell={renderClassCell}
+        />
+        <Popup
+          visible={popupVisible}
+          message={popupMessage}
+          onConfirm={() => setPopupVisible(false)}
+          onCancel={() => setPopupVisible(false)}
+          uniqueConfirmButton={true}
         />
-      )}
       </div>
+    </DndProvider>
   );
 };
 

Front-End/src/components/Structure/Configuration/SpecialityItem.js

@@ -5,6 +5,24 @@ const ItemTypes = {
   SPECIALITY: 'speciality',
 };
 
+const lightenColor = (color, percent) => {
+  const num = parseInt(color.slice(1), 16),
+    amt = Math.round(2.55 * percent),
+    R = (num >> 16) + amt,
+    G = (num >> 8 & 0x00FF) + amt,
+    B = (num & 0x0000FF) + amt;
+  return `#${(0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1).toUpperCase()}`;
+};
+
+const darkenColor = (color, percent) => {
+  const num = parseInt(color.slice(1), 16),
+    amt = Math.round(2.55 * percent),
+    R = (num >> 16) - amt,
+    G = (num >> 8 & 0x00FF) - amt,
+    B = (num & 0x0000FF) - amt;
+  return `#${(0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1).toUpperCase()}`;
+};
+
 const SpecialityItem = ({ speciality, isDraggable = true }) => {
   const [{ isDragging }, drag] = useDrag(() => ({
     type: ItemTypes.SPECIALITY,
@@ -18,10 +36,15 @@ const SpecialityItem = ({ speciality, isDraggable = true }) => {
   return (
     <div
       ref={isDraggable ? drag : null}
-      className={`inline-block px-3 py-1 rounded-lg font-bold text-white text-center ${isDraggable ? 'cursor-pointer' : ''} transition-transform duration-200 ease-in-out ${
+      className={`inline-block px-3 py-1 rounded-lg font-bold text-white text-center transition-transform duration-200 ease-in-out ${
         isDragging ? 'opacity-30' : 'opacity-100'
-      } ${isDraggable ? 'hover:shadow-lg hover:scale-125' : ''}`}
+      } ${isDraggable ? 'cursor-grabbing hover:shadow-lg hover:scale-105' : ''}`}
-      style={{ backgroundColor: speciality.color_code }}
+      style={{
+        backgroundColor: isDragging ? lightenColor(speciality.color_code, 30) : speciality.color_code,
+        border: `1px solid ${darkenColor(speciality.color_code, 20)}`,
+        color: 'white',
+        boxShadow: isDraggable ? '0 2px 4px rgba(0, 0, 0, 0.1)' : 'none'
+      }}
     >
       {speciality.name}
     </div>

Front-End/src/components/Structure/Configuration/StructureManagement.js

@@ -7,7 +7,7 @@ import { BE_SCHOOL_SPECIALITY_URL, BE_SCHOOL_TEACHER_URL, BE_SCHOOL_SCHOOLCLASS_
 
 const StructureManagement = ({ specialities, setSpecialities, teachers, setTeachers, classes, setClasses, handleCreate, handleEdit, handleDelete }) => {
   return (
-    <div className="max-w-8xl mx-auto p-4 mt-6 space-y-6">
+    <div className="max-w-8xl mx-auto p-4 mt-6 space-y-8">
       <ClassesProvider>
         <div className="w-2/5 p-4 bg-white rounded-lg shadow-md">
           <SpecialitiesSection
@@ -28,9 +28,10 @@ const StructureManagement = ({ specialities, setSpecialities, teachers, setTeach
             handleDelete={(id) => handleDelete(`${BE_SCHOOL_TEACHER_URL}`, id, setTeachers)}
           />
         </div>
-        <div className="w-4/5 p-4 bg-white rounded-lg shadow-md">
+        <div className="w-full p-4 bg-white rounded-lg shadow-md">
           <ClassesSection
             classes={classes}
+            setClasses={setClasses}
             teachers={teachers}
             handleCreate={(newData) => handleCreate(`${BE_SCHOOL_SCHOOLCLASS_URL}`, newData, setClasses)}
             handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_SCHOOLCLASS_URL}`, id, updatedData, setClasses)}

Front-End/src/components/Structure/Configuration/TeacherItem.js

@@ -0,0 +1,35 @@
+import { useDrag } from 'react-dnd';
+import React from 'react';
+
+const ItemTypes = {
+  TEACHER: 'teacher',
+};
+
+const TeacherItem = ({ teacher, isDraggable = true }) => {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: ItemTypes.TEACHER,
+    item: { id: teacher.id, name: `${teacher.last_name} ${teacher.first_name}` },
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+    canDrag: () => isDraggable,
+  }), [isDraggable]);
+
+  return (
+    <div
+      ref={isDraggable ? drag : null}
+      className={`inline-block px-3 py-1 rounded-lg font-bold text-white text-center transition-transform duration-200 ease-in-out ${
+        isDragging ? 'opacity-30' : 'opacity-100'
+      } ${isDraggable ? 'cursor-grabbing hover:shadow-lg hover:scale-105' : ''}`}
+      style={{
+        backgroundColor: isDragging ? '#d1d5db' : isDraggable ? '#10b981' : '#a7f3d0', // Change background color based on dragging state and draggable state
+        border: isDraggable ? '1px solid #10b981' : '1px solid #a7f3d0', // Add a border
+        boxShadow: isDraggable ? '0 2px 4px rgba(0, 0, 0, 0.1)' : 'none' // Add a shadow if draggable
+      }}
+    >
+      {teacher.last_name} {teacher.first_name}
+    </div>
+  );
+};
+
+export default TeacherItem;

Front-End/src/components/Structure/Configuration/TeachersSection.js

@@ -9,6 +9,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import InputText from '@/components/InputText';
 import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';
+import TeacherItem from './TeacherItem';
 
 const ItemTypes = {
   SPECIALITY: 'speciality',
@@ -149,11 +150,11 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
   };
 
   const handleUpdateTeacher = (id, updatedData) => {
-    console.log('UpdatedData:', updatedData);
+    console.log(updatedData)
     const data = {
       email: updatedData.email,
       username: updatedData.email,
-      droit: updatedData.droit.id,
+      droit: updatedData.droit,
     };
     updateProfile(updatedData.associated_profile, data, csrfToken)
     .then(response => {
@@ -171,9 +172,15 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
   };
 
   const handleChange = (e) => {
-    const { name, value } = e.target;
+    const { name, value, type, checked } = e.target;
     let parsedValue = value;
 
+    if (type === 'checkbox') {
+      parsedValue = checked ? 1 : 0;
+    }
+
+    console.log(`handleChange - name: ${name}, parsedValue: ${parsedValue}, type: ${type}, checked: ${checked}`);
+
     if (editingTeacher) {
       setFormData((prevData) => ({
         ...prevData,
@@ -216,25 +223,26 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
 
     if (isEditing || isCreating) {
       switch (column) {
-        case 'NOM':
+        case 'NOM - PRENOM':
           return (
+            <div className="flex justify-center space-x-2">
               <InputText
                 name="last_name"
+                label="nom"
                 value={currentData.last_name}
                 onChange={handleChange}
                 placeholder="Nom de l'enseignant"
                 errorMsg={localErrors && localErrors.last_name && Array.isArray(localErrors.last_name) ? localErrors.last_name[0] : ''}
               />
-          );
-        case 'PRENOM':
-          return (
               <InputText
                 name="first_name"
+                label="prénom"
                 value={currentData.first_name}
                 onChange={handleChange}
                 placeholder="Prénom de l'enseignant"
                 errorMsg={localErrors && localErrors.first_name && Array.isArray(localErrors.firstname) ? localErrors.firstname[0] : ''}
               />
+            </div>
           );
         case 'EMAIL':
           return (
@@ -250,14 +258,16 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
           return (
             <SpecialitiesDropZone teacher={currentData} handleSpecialitiesChange={handleSpecialitiesChange} specialities={specialities} isEditing={isEditing || isCreating} />
           );
-        // case 'PROFIL':
+        case 'ADMINISTRATEUR':
-        //   return (
+          return (
-        //     <ToggleSwitch
+            <div className="flex justify-center">
-        //       name="profile"
+              <ToggleSwitch
-        //       checked={currentData.profile}
+                name="droit"
-        //       onChange={handleChange}
+                checked={currentData.droit === 1}
-        //     />
+                onChange={handleChange}
-        //   );
+              />
+            </div>
+          );
         case 'ACTIONS':
           return (
             <div className="flex justify-center space-x-2">
@@ -282,10 +292,10 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
       }
     } else {
       switch (column) {
-        case 'NOM':
+        case 'NOM - PRENOM':
-          return teacher.last_name;
+          return (
-        case 'PRENOM':
+            <TeacherItem key={teacher.id} teacher={teacher} />
-          return teacher.first_name;
+          );
         case 'EMAIL':
           return teacher.email;
         case 'SPECIALITES':
@@ -296,13 +306,14 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
               ))}
             </div>
           );
-        case 'PROFIL':
+        case 'ADMINISTRATEUR':
             if (teacher.associated_profile) {
-              const badgeClass = teacher.droit.label === 'ECOLE' ? 'bg-blue-100 text-blue-600' : 'bg-red-100 text-red-600';
+              const badgeClass = teacher.droit === 1 ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600';
+              const label = teacher.droit === 1 ? 'OUI' : 'NON';
               return (
                 <div key={teacher.id} className="flex justify-center items-center space-x-2">
                   <span className={`px-3 py-1 rounded-full font-bold ${badgeClass}`}>
-                    {teacher.droit.label}
+                    {label}
                   </span>
                 </div>
               );
@@ -337,11 +348,10 @@ const TeachersSection = ({ teachers, setTeachers, specialities, handleCreate, ha
   };
 
   const columns = [
-    { name: 'NOM', label: 'Nom' },
+    { name: 'NOM - PRENOM', label: 'Nom et prénom' },
-    { name: 'PRENOM', label: 'Prénom' },
     { name: 'EMAIL', label: 'Email' },
     { name: 'SPECIALITES', label: 'Spécialités' },
-    { name: 'PROFIL', label: 'Profil' },
+    { name: 'ADMINISTRATEUR', label: 'Profil' },
     { name: 'MISE A JOUR', label: 'Mise à jour' },
     { name: 'ACTIONS', label: 'Actions' }
   ];

Front-End/src/components/ToggleSwitch.js

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-const ToggleSwitch = ({ label, checked, onChange }) => {
+const ToggleSwitch = ({ name, label, checked, onChange }) => {
   const inputRef = useRef(null);
 
   const handleChange = (e) => {
@@ -16,15 +16,15 @@ const ToggleSwitch = ({ label, checked, onChange }) => {
       <div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
         <input
           type="checkbox"
-          name="toggle"
+          name={name}
-          id="toggle"
+          id={name}
           checked={checked}
           onChange={handleChange}
           className="hover:text-emerald-500 absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500 focus:outline-none focus:ring-0"
           ref={inputRef} // Reference to the input element
         />
         <label
-          htmlFor="toggle"
+          htmlFor={name}
           className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${checked ? 'bg-emerald-300' : 'bg-gray-300'}`}
         ></label>
       </div>