feat: Sauvegarde des compétences d'un élève [#16]

Front-End/src/components/Grades/GradesStatsCircle.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
+
+export default function GradesStatsCircle({ grades }) {
+  // grades : { [competence_id]: grade }
+  const total = Object.keys(grades).length;
+  const acquired = Object.values(grades).filter((g) => g === 3).length;
+  const inProgress = Object.values(grades).filter((g) => g === 2).length;
+  const notAcquired = Object.values(grades).filter((g) => g === 1).length;
+  const notEvaluated = Object.values(grades).filter((g) => g === 0).length;
+
+  // Pourcentage d'acquis
+  const percent = total ? Math.round((acquired / total) * 100) : 0;
+
+  return (
+    <div className="flex flex-col items-center gap-4 bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+      <h2 className="text-xl font-semibold mb-2">Statistiques globales</h2>
+      <div style={{ width: 120, height: 120 }}>
+        <CircularProgressbar
+          value={percent}
+          text={`${percent}%`}
+          styles={buildStyles({
+            textColor: '#059669',
+            pathColor: '#059669',
+            trailColor: '#d1fae5',
+          })}
+        />
+      </div>
+      <div className="flex flex-col items-center text-sm mt-2">
+        <span className="text-emerald-700 font-semibold">
+          {acquired} acquis
+        </span>
+        <span className="text-yellow-600">{inProgress} en cours</span>
+        <span className="text-red-500">{notAcquired} non acquis</span>
+        <span className="text-gray-400">{notEvaluated} non évalués</span>
+      </div>
+    </div>
+  );
+}