feat: Pre cablage du dashboard [#]

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>