feat: Génération d'une page de suivi pédagogique + fix utilisation

certains des composants

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

@@ -1,10 +1,144 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import SelectChoice from '@/components/SelectChoice';
+import Button from '@/components/Button';
+import Table from '@/components/Table';
 
 export default function Page() {
+  const [formData, setFormData] = useState({
+    selectedStudent: null,
+    absences: [],
+    competenceReview: [
+      { competence: 'Lecture', score: null },
+      { competence: 'Écriture', score: null },
+      { competence: 'Mathématiques', score: null },
+      { competence: 'Sciences', score: null },
+    ],
+  });
+
+  const students = [
+    { id: 1, name: 'John Doe', class: 'CM2' },
+    { id: 2, name: 'Jane Smith', class: 'CE1' },
+    { id: 3, name: 'Alice Johnson', class: 'CM1' },
+  ];
+
+  const absences = [
+    { date: '2023-09-01', reason: 'Maladie' },
+    { date: '2023-09-15', reason: 'Vacances' },
+    { date: '2023-10-05', reason: 'Retard justifié' },
+  ];
+
+  const handleChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleScoreChange = (index, score) => {
+    const updatedCompetenceReview = [...formData.competenceReview];
+    updatedCompetenceReview[index].score = score;
+    setFormData((prev) => ({
+      ...prev,
+      competenceReview: updatedCompetenceReview,
+    }));
+  };
+
   return (
-    <div className="p-8">
-      <h1 className="heading-section">Statistiques</h1>
+    <div className="p-8 space-y-8">
+      <h1 className="heading-section">Suivi pédagogique</h1>
+
+      {/* Sélection de l'élève */}
+      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+        <h2 className="text-xl font-semibold mb-4">Sélectionner un élève</h2>
+        <SelectChoice
+          name="selectedStudent"
+          label="Élève"
+          placeHolder="Sélectionnez un élève"
+          selected={formData.selectedStudent}
+          callback={(e) => handleChange('selectedStudent', e.target.value)}
+          choices={students.map((student) => ({
+            value: student.id,
+            label: `${student.name} - Classe : ${student.class}`,
+          }))}
+          required
+        />
+      </div>
+
+      {/* Liste des absences */}
+      {formData.selectedStudent && (
+        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+          <h2 className="text-xl font-semibold mb-4">Liste des absences</h2>
+          <ul className="space-y-2">
+            {absences.map((absence, index) => (
+              <li
+                key={index}
+                className="flex justify-between items-center bg-gray-50 p-4 rounded-md border border-gray-100"
+              >
+                <span className="text-gray-800">{absence.date}</span>
+                <span className="text-gray-500 italic">{absence.reason}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Bilan de compétence */}
+      {formData.selectedStudent && (
+        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+          <h2 className="text-xl font-semibold mb-4">Bilan de compétence</h2>
+          <Table
+            data={formData.competenceReview}
+            columns={[
+              {
+                name: 'Compétence',
+                transform: (row) => row.competence,
+              },
+              {
+                name: '1',
+                transform: (row, index) => (
+                  <input
+                    type="radio"
+                    name={`score-${index}`}
+                    value="1"
+                    checked={row.score === '1'}
+                    onChange={() => handleScoreChange(index, '1')}
+                  />
+                ),
+              },
+              {
+                name: '2',
+                transform: (row, index) => (
+                  <input
+                    type="radio"
+                    name={`score-${index}`}
+                    value="2"
+                    checked={row.score === '2'}
+                    onChange={() => handleScoreChange(index, '2')}
+                  />
+                ),
+              },
+              {
+                name: '3',
+                transform: (row, index) => (
+                  <input
+                    type="radio"
+                    name={`score-${index}`}
+                    value="3"
+                    checked={row.score === '3'}
+                    onChange={() => handleScoreChange(index, '3')}
+                  />
+                ),
+              },
+            ]}
+          />
+          <div className="mt-4">
+            <Button
+              text="Enregistrer"
+              onClick={() => console.log('FormData:', formData)}
+              primary
+              className="bg-emerald-500 text-white hover:bg-emerald-600"
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }