From fe2d4d45137df3b1ead4d21c29722fec0bd0fbab Mon Sep 17 00:00:00 2001
From: N3WT DE COMPET <n3wt.school@gmail.com>
Date: Sat, 31 May 2025 14:48:06 +0200
Subject: [PATCH] fix: PieChart

---
 Front-End/src/app/[locale]/admin/page.js    | 38 ++++++++--------
 Front-End/src/components/Charts/PieChart.js | 50 ++++++++++++++-------
 2 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/Front-End/src/app/[locale]/admin/page.js b/Front-End/src/app/[locale]/admin/page.js
index 07c4783..5b26f91 100644
--- a/Front-End/src/app/[locale]/admin/page.js
+++ b/Front-End/src/app/[locale]/admin/page.js
@@ -217,34 +217,36 @@ export default function DashboardPage() {
 
       {/* Événements et KPIs */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-        {/* Graphique des inscriptions */}
-        <div className="lg:col-span-1 bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100">
-          <h2 className="text-lg font-semibold mb-6">
-            {t('inscriptionTrends')}
-          </h2>
-          <div className="flex flex-row gap-4">
-            <div className="flex-1 p-6">
-              <LineChart data={monthlyRegistrations} />
-            </div>
-            <div className="flex-1 flex items-center justify-center">
-              <PieChart data={statusDistribution} />
+        {/* Colonne de gauche : Graphique des inscriptions + Présence */}
+        <div className="flex flex-col gap-6">
+          {/* Graphique des inscriptions */}
+          <div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100 flex-1">
+            <h2 className="text-lg font-semibold mb-6">
+              {t('inscriptionTrends')}
+            </h2>
+            <div className="flex flex-row gap-4">
+              <div className="flex-1 p-6">
+                <LineChart data={monthlyRegistrations} />
+              </div>
+              <div className="flex-1 flex items-center justify-center">
+                <PieChart data={statusDistribution} />
+              </div>
             </div>
           </div>
+          {/* Présence et assiduité */}
+          <div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100 flex-1">
+            <Attendance absences={absencesToday} readOnly={true} />
+          </div>
         </div>
 
-        {/* Événements à venir */}
-        <div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100">
+        {/* Colonne de droite : Événements à venir */}
+        <div className="bg-stone-50 p-6 rounded-lg shadow-sm border border-gray-100 flex-1 h-full">
           <h2 className="text-lg font-semibold mb-4">{t('upcomingEvents')}</h2>
           {upcomingEvents.map((event, index) => (
             <EventCard key={index} {...event} />
           ))}
         </div>
       </div>
-
-      {/* Ajout du composant Attendance en dessous, en lecture seule */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-        <Attendance absences={absencesToday} readOnly={true} />
-      </div>
     </div>
   );
 }
diff --git a/Front-End/src/components/Charts/PieChart.js b/Front-End/src/components/Charts/PieChart.js
index d144e1e..a5d1edf 100644
--- a/Front-End/src/components/Charts/PieChart.js
+++ b/Front-End/src/components/Charts/PieChart.js
@@ -1,10 +1,11 @@
 import React from 'react';
 
+// Utilisation de couleurs hexadécimales pour le SVG
 const COLORS = [
-  'fill-blue-400 text-blue-400',
-  'fill-orange-400 text-orange-400',
-  'fill-purple-400 text-purple-400',
-  'fill-emerald-400 text-emerald-400',
+  '#60a5fa', // bleu-400
+  '#fb923c', // orange-400
+  '#a78bfa', // violet-400
+  '#34d399', // émeraude-400
 ];
 
 export default function PieChart({ data }) {
@@ -23,7 +24,20 @@ export default function PieChart({ data }) {
     <div className="flex items-center justify-center w-full">
       <svg width={100} height={100} viewBox="0 0 32 32">
         {data.map((slice, idx) => {
+          if (slice.value === 0) return null;
           const value = (slice.value / total) * 100;
+          if (value === 100) {
+            // Cas 100% : on dessine un cercle plein
+            return (
+              <circle
+                key={idx}
+                cx="16"
+                cy="16"
+                r="16"
+                fill={COLORS[idx % COLORS.length]}
+              />
+            );
+          }
           const startAngle = (cumulative / 100) * 360;
           const endAngle = ((cumulative + value) / 100) * 360;
           const largeArc = value > 50 ? 1 : 0;
@@ -42,7 +56,7 @@ export default function PieChart({ data }) {
             <path
               key={idx}
               d={pathData}
-              className={COLORS[idx % COLORS.length].split(' ')[0]}
+              fill={COLORS[idx % COLORS.length]}
               stroke="#fff"
               strokeWidth="0.5"
             />
@@ -50,17 +64,21 @@ export default function PieChart({ data }) {
         })}
       </svg>
       <div className="ml-4 flex flex-col space-y-1">
-        {data.map((slice, idx) => (
-          <div
-            key={idx}
-            className={`flex items-center text-xs font-semibold ${COLORS[idx % COLORS.length].split(' ')[1]}`}
-          >
-            <span
-              className={`inline-block w-3 h-3 mr-2 rounded ${COLORS[idx % COLORS.length].split(' ')[0]}`}
-            />
-            {slice.label} : {slice.value}
-          </div>
-        ))}
+        {data.map((slice, idx) =>
+          slice.value > 0 && (
+            <div
+              key={idx}
+              className="flex items-center text-xs font-semibold"
+              style={{ color: COLORS[idx % COLORS.length] }}
+            >
+              <span
+                className="inline-block w-3 h-3 mr-2 rounded"
+                style={{ backgroundColor: COLORS[idx % COLORS.length] }}
+              />
+              {slice.label} : {slice.value}
+            </div>
+          )
+        )}
       </div>
     </div>
   );