feat: Gestion des profils des enseignants / Visualisation d'une classe [#4]

Front-End/src/components/ClasseDetails.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import Table from '@/components/Table';
+import { GraduationCap } from 'lucide-react';
+
+const ClasseDetails = ({ classe }) => {
+  if (!classe) return null;
+
+  const nombreElevesInscrits = classe.eleves.length;
+  const capaciteTotale = classe.nombre_eleves;
+  const pourcentage = Math.round((nombreElevesInscrits / capaciteTotale) * 100);
+
+  const getColor = (pourcentage) => {
+    if (pourcentage < 50) return 'bg-emerald-500';
+    if (pourcentage < 75) return 'bg-orange-500';
+    return 'bg-red-500';
+  };
+
+  return (
+    <div className="p-4">
+      <div className="mb-4 flex justify-between items-center">
+        {/* Section Enseignant Principal */}
+        <div className="flex items-center space-x-4">
+          <div className="bg-gray-100 p-3 rounded-lg shadow-md flex items-center space-x-4">
+            <GraduationCap className="w-10 h-10 text-gray-600" />
+            <div>
+              <p className="italic text-gray-600">Enseignant Principal :</p>
+              <p className="font-bold text-gray-800">
+                {classe.enseignant_principal ? (
+                  `${classe.enseignant_principal.nom} ${classe.enseignant_principal.prenom}`
+                ) : (
+                  <i>Non assigné</i>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+        
+        {/* Section Capacité de la Classe */}
+        <div className="flex items-center space-x-4">
+          <div className="flex items-center">
+            <span className="font-bold text-gray-700 mr-4">
+              {nombreElevesInscrits}/{capaciteTotale}
+            </span>
+            <div className="w-32 bg-gray-200 rounded-full h-6 shadow-inner">
+            <div
+                className={`h-full rounded-full ${getColor(pourcentage)}`}
+                style={{ width: `${pourcentage}%` }}
+              ></div>
+            </div>
+            <span className="ml-4 font-bold text-gray-700">
+              {pourcentage}%
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <h3 className="text-xl font-semibold mb-4">Liste des élèves</h3>
+      <div className="bg-white rounded-lg border border-gray-200 shadow-md">
+        <Table
+          columns={[
+            { name: 'NOM', transform: (row) => row.nom },
+            { name: 'PRENOM', transform: (row) => row.prenom },
+            { name: 'AGE', transform: (row) => `${row.age}` }
+          ]}
+          data={classe.eleves}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ClasseDetails;