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>
+  );
+}