feat: Pre cablage du dashboard [#]

2026-01-28 23:43:22 +00:00 · 2025-02-22 17:06:11 +01:00
parent c7723eceee
commit 1911f79f45
8 changed files with 132 additions and 86 deletions
--- a/Front-End/src/app/[locale]/admin/page.js
+++ b/Front-End/src/app/[locale]/admin/page.js
@ -6,26 +6,10 @@ import { Users, Clock, CalendarCheck, School, TrendingUp, UserCheck } from 'luci
 import Loader from '@/components/Loader';
 import ClasseDetails from '@/components/ClasseDetails';
 import { fetchClasses } from '@/app/actions/schoolAction';
+import StatCard from '@/components/StatCard';
+import logger from '@/utils/logger';
+import { fetchRegisterForms } from '@/app/actions/subscriptionAction';

-// Composant StatCard pour afficher une statistique
-const StatCard = ({ title, value, icon, change, 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>
-        {change && (
-          <p className={`text-sm ${change > 0 ? 'text-green-500' : 'text-red-500'}`}>
-            {change > 0 ? '+' : ''}{change}% depuis le mois dernier
-          </p>
-        )}
-      </div>
-      <div className={`p-3 rounded-full bg-${color}-100`}>
-        {icon}
-      </div>
-    </div>
-  </div>
-);

 // Composant EventCard pour afficher les événements
 const EventCard = ({ title, date, description, type }) => (
@ -44,18 +28,16 @@ const EventCard = ({ title, date, description, type }) => (
 export default function DashboardPage() {
  const t = useTranslations('dashboard');
  const [isLoading, setIsLoading] = useState(true);
-  const [stats, setStats] = useState({
-    totalStudents: 0,
-    averageInscriptionTime: 0,
-    reInscriptionRate: 0,
-    structureCapacity: 0,
-    upcomingEvents: [],
-    monthlyStats: {
-      inscriptions: [],
-      completionRate: 0
-    }
+  const [totalStudents, setTotalStudents] = useState(0);
+  const [pendingRegistration, setPendingRegistration] = useState(0);
+  const [structureCapacity, setStructureCapacity] = useState(0);
+  const [upcomingEvents, setUpcomingEvents] = useState([]);
+  const [monthlyStats, setMonthlyStats] = useState({
+    inscriptions: [],
+    completionRate: 0
  });

+
  const [classes, setClasses] = useState([]);


@ -63,40 +45,50 @@ export default function DashboardPage() {
    // Fetch data for classes
    fetchClasses().then(data => {
        setClasses(data);
+        logger.info('Classes fetched:', data);
+        const nbMaxStudents = data.reduce((acc, classe) => acc + classe.number_of_students, 0);
+        const nbStudents = data.reduce((acc, classe) => acc + classe.students.length, 0);
+        setStructureCapacity(nbMaxStudents);
+        setTotalStudents(nbStudents);
+
      })
      .catch(error => {
-        console.error('Error fetching classes:', error);
+        logger.error('Error fetching classes:', error);
+      });
+
+      fetchRegisterForms().then(data => {
+        logger.info('Pending registrations fetched:', data);
+        setPendingRegistration(data.count);
+      })
+      .catch(error => {
+        logger.error('Error fetching pending registrations:', error);
      });

    // Simulation de chargement des données
    setTimeout(() => {
-      setStats({
-        totalStudents: 245,
-        averageInscriptionTime: 3.5,
-        reInscriptionRate: 85,
-        structureCapacity: 300,
-        upcomingEvents: [
-          {
-            title: "Réunion de rentrée",
-            date: "2024-09-01",
-            description: "Présentation de l'année scolaire",
-            type: "meeting"
-          },
-          {
-            title: "Date limite inscriptions",
-            date: "2024-08-15",
-            description: "Clôture des inscriptions",
-            type: "deadline"
-          }
-        ],
-        monthlyStats: {
-          inscriptions: [150, 180, 210, 245],
-          completionRate: 78
+      setUpcomingEvents([
+        {
+          title: "Réunion de rentrée",
+          date: "2024-09-01",
+          description: "Présentation de l'année scolaire",
+          type: "meeting"
+        },
+        {
+          title: "Date limite inscriptions",
+          date: "2024-08-15",
+          description: "Clôture des inscriptions",
+          type: "deadline"
        }
+      ]);
+      setMonthlyStats({
+        inscriptions: [150, 180, 210, 245],
+        completionRate: 78
      });
      setIsLoading(false);
    }, 1000);
-  }, []);
+  }
+  , []);
+

  if (isLoading) return <Loader />;

@ -108,25 +100,24 @@ export default function DashboardPage() {
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard
          title={t('totalStudents')}
-          value={stats.totalStudents}
+          value={totalStudents}
          icon={<Users className="text-blue-500" size={24} />}
-          change={12}
        />
        <StatCard
-          title={t('averageInscriptionTime')}
-          value={`${stats.averageInscriptionTime} jours`}
+          title={t('pendingRegistrations')}
+          value={`${pendingRegistration} `}
          icon={<Clock className="text-green-500" size={24} />}
          color="green"
        />
-        <StatCard
-          title={t('reInscriptionRate')}
-          value={`${stats.reInscriptionRate}%`}
-          icon={<UserCheck className="text-purple-500" size={24} />}
-          color="purple"
-        />
        <StatCard
          title={t('structureCapacity')}
-          value={`${(stats.totalStudents/stats.structureCapacity * 100).toFixed(1)}%`}
+          value={`${structureCapacity}`}
+          icon={<School className="text-green-500" size={24} />}
+          color="emerald"
+        />
+         <StatCard
+          title={t('capacityRate')}
+          value={`${(totalStudents/structureCapacity * 100).toFixed(1)}%`}
          icon={<School className="text-orange-500" size={24} />}
          color="orange"
        />
@ -146,7 +137,7 @@ export default function DashboardPage() {
        {/* Événements à venir */}
        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
          <h2 className="text-lg font-semibold mb-4">{t('upcomingEvents')}</h2>
-          {stats.upcomingEvents.map((event, index) => (
+          {upcomingEvents.map((event, index) => (
            <EventCard key={index} {...event} />
          ))}
        </div>
--- a/Front-End/src/components/ClasseDetails.js
+++ b/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>
--- a/Front-End/src/components/Popup.js
+++ b/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>
--- a/Front-End/src/components/StatCard.js
+++ b/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;
--- a/Front-End/src/components/Structure/Configuration/ClassesSection.js
+++ b/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}