Implement collapse functionality in EvaluationDetailPage and DimensionCard components, allowing users to collapse all dimension cards simultaneously for improved usability and organization.

src/app/evaluations/[id]/page.tsx

@@ -54,6 +54,7 @@ export default function EvaluationDetailPage() {
   const [templates, setTemplates] = useState<{ id: string; name: string }[]>([]);
   const [exportOpen, setExportOpen] = useState(false);
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [collapseAllTrigger, setCollapseAllTrigger] = useState(0);
 
   const fetchEval = useCallback(() => {
     setLoading(true);
@@ -214,16 +215,22 @@ export default function EvaluationDetailPage() {
   const dimensions = evaluation.template?.dimensions ?? [];
   const dimensionScores = evaluation.dimensionScores ?? [];
   const scoreMap = new Map(dimensionScores.map((ds) => [ds.dimensionId, ds]));
-  const radarData = dimensionScores
-    .filter((ds) => ds.score != null)
-    .map((ds) => {
-      const title = ds.dimension?.title ?? "";
+  const radarData = dimensions
+    .filter((dim) => !(dim.title ?? "").startsWith("[Optionnel]"))
+    .map((dim) => {
+      const ds = scoreMap.get(dim.id);
+      const score = ds?.score;
+      if (score == null) return null;
+      const title = dim.title ?? "";
+      const s = Number(score);
+      if (Number.isNaN(s) || s < 0 || s > 5) return null;
       return {
         dimension: title.length > 12 ? title.slice(0, 12) + "…" : title,
-        score: ds.score ?? 0,
+        score: s,
         fullMark: 5,
       };
-    });
+    })
+    .filter((d): d is { dimension: string; score: number; fullMark: number } => d != null);
   const avgScore = computeAverageScore(dimensionScores);
 
   return (
@@ -275,7 +282,16 @@ export default function EvaluationDetailPage() {
       </section>
 
       <section>
-        <h2 className="mb-3 font-mono text-xs text-zinc-600 dark:text-zinc-500">Dimensions</h2>
+        <div className="mb-3 flex items-center justify-between gap-2">
+          <h2 className="font-mono text-xs text-zinc-600 dark:text-zinc-500">Dimensions</h2>
+          <button
+            type="button"
+            onClick={() => setCollapseAllTrigger((c) => c + 1)}
+            className="font-mono text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300"
+          >
+            tout fermer
+          </button>
+        </div>
         <nav className="mb-4 flex flex-wrap gap-1.5">
           {dimensions.map((dim, i) => {
             const ds = scoreMap.get(dim.id);
@@ -304,6 +320,7 @@ export default function EvaluationDetailPage() {
                 evaluationId={id}
                 score={scoreMap.get(dim.id) ?? null}
                 onScoreChange={handleScoreChange}
+                collapseAllTrigger={collapseAllTrigger}
               />
             </div>
           ))}