feat: Pre cablage du dashboard [#]

Front-End/src/components/ClasseDetails.js

@@ -58,11 +58,11 @@ const ClasseDetails = ({ classe }) => {
       <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: 'NOM', transform: (row) => row.name },
+            { name: 'PRENOM', transform: (row) => row.first_name },
             { name: 'AGE', transform: (row) => `${row.age}` }
           ]}
-          data={classe.eleves}
+          data={classe.students}
         />
       </div>
     </div>

Front-End/src/components/Popup.js

@@ -4,21 +4,41 @@ import ReactDOM from 'react-dom';
 const Popup = ({ visible, message, onConfirm, onCancel, uniqueConfirmButton = false }) => {
   if (!visible) return null;
 
-  // Diviser le message en lignes
-  const messageLines = message.split('\n');
+  // Vérifier si le message est une chaîne de caractères
+  const isStringMessage = typeof message === 'string';
+  // Diviser le message en lignes seulement si c'est une chaîne
+  const messageLines = isStringMessage ? message.split('\n') : null;
 
   return ReactDOM.createPortal(
     <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="bg-white p-6 rounded-md shadow-md">
-        {messageLines.map((line, index) => (
-          <p key={index} className="mb-4">{line}</p>
-        ))}
-        <div className={`flex ${uniqueConfirmButton ? 'justify-center' : 'justify-end'} gap-4`}>
-          {!uniqueConfirmButton && (
-            <button className="px-4 py-2 bg-gray-200 rounded-md" onClick={onCancel}>Annuler</button>
+      <div className="bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
+        <div className="mb-4">
+          {isStringMessage ? (
+            // Afficher le message sous forme de lignes si c'est une chaîne
+            messageLines.map((line, index) => (
+              <p key={index} className="text-gray-700">
+                {line}
+              </p>
+            ))
+          ) : (
+            // Sinon, afficher directement le contenu React
+            message
           )}
-          <button className="px-4 py-2 bg-emerald-500 text-white rounded-md" onClick={onConfirm}>
-            {uniqueConfirmButton ? 'Compris !' : 'Confirmer'}
+        </div>
+        <div className="flex justify-end space-x-2">
+          {!uniqueConfirmButton && (
+            <button
+              className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+              onClick={onCancel}
+            >
+              Annuler
+            </button>
+          )}
+          <button
+            className="px-4 py-2 bg-emerald-500 text-white rounded hover:bg-emerald-600"
+            onClick={onConfirm}
+          >
+            {uniqueConfirmButton ? 'Fermer' : 'Confirmer'}
           </button>
         </div>
       </div>

Front-End/src/components/StatCard.js

@@ -0,0 +1,16 @@
+// Composant StatCard pour afficher une statistique
+const StatCard = ({ title, value, icon, color = "blue" }) => (
+  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+    <div className="flex justify-between items-start">
+      <div>
+        <h3 className="text-gray-500 text-sm font-medium">{title}</h3>
+        <p className="text-2xl font-semibold mt-1">{value}</p>
+      </div>
+      <div className={`p-3 rounded-full bg-${color}-100`}>
+        {icon}
+      </div>
+    </div>
+  </div>
+);
+
+export default StatCard;

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

@@ -11,6 +11,7 @@ import { DndProvider, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ESTABLISHMENT_ID } from '@/utils/Url';
 import logger from '@/utils/logger';
+import ClasseDetails from '@/components/ClasseDetails';
 
 const ItemTypes = {
   TEACHER: 'teacher',
@@ -100,6 +101,8 @@ const ClassesSection = ({ classes, setClasses, teachers, handleCreate, handleEdi
   const [removePopupVisible, setRemovePopupVisible] = useState(false);
   const [removePopupMessage, setRemovePopupMessage] = useState("");
   const [removePopupOnConfirm, setRemovePopupOnConfirm] = useState(() => {});
+  const [detailsModalVisible, setDetailsModalVisible] = useState(false);
+  const [selectedClass, setSelectedClass] = useState(null);
 
   const niveauxPremierCycle = [
     { id: 1, name: 'TPS', age: 2 },
@@ -252,6 +255,11 @@ const ClassesSection = ({ classes, setClasses, teachers, handleCreate, handleEdi
     }
   };
 
+  const openEditModalDetails = (classe) => {
+    setSelectedClass(classe);
+    setDetailsModalVisible(true);
+  };
+
   const renderClassCell = (classe, column) => {
     const isEditing = editingClass === classe.id;
     const isCreating = newClass && newClass.id === classe.id;
@@ -449,6 +457,13 @@ const ClassesSection = ({ classes, setClasses, teachers, handleCreate, handleEdi
           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}