refactoring

lib/shared/design_system/components/union_pie_chart.dart

@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:fl_chart/fl_chart.dart';
 import '../tokens/unionflow_colors.dart';
 
-/// Graphique circulaire UnionFlow - Pour afficher des répartitions
+/// Graphique circulaire UnionFlow — petit donut compact avec légende latérale
+/// Layout horizontal : donut 80×80 à gauche + légende à droite
+/// Style uniforme avec les autres cards du design system (border + borderRadius)
 class UnionPieChart extends StatelessWidget {
   final List<PieChartSectionData> sections;
   final String title;
@@ -19,47 +21,110 @@ class UnionPieChart extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // Forcer compact : radius 14, pas de titre dans le donut
+    final compactSections = sections
+        .map((s) => s.copyWith(radius: 14, showTitle: false))
+        .toList();
+
     return Container(
-      padding: const EdgeInsets.all(20),
+      padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
       decoration: BoxDecoration(
         color: UnionFlowColors.surface,
-        borderRadius: BorderRadius.circular(16),
-        boxShadow: UnionFlowColors.softShadow,
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(color: UnionFlowColors.border),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           // Header
-          Text(
-            title,
-            style: const TextStyle(
-              fontSize: 14,
-              fontWeight: FontWeight.w600,
-              color: UnionFlowColors.textPrimary,
-            ),
+          Row(
+            children: [
+              Text(
+                title,
+                style: const TextStyle(
+                  fontSize: 12,
+                  fontWeight: FontWeight.w700,
+                  color: UnionFlowColors.textPrimary,
+                ),
+              ),
+              const Spacer(),
+              if (subtitle != null)
+                Text(
+                  subtitle!,
+                  style: const TextStyle(
+                    fontSize: 10,
+                    color: UnionFlowColors.textTertiary,
+                  ),
+                ),
+            ],
           ),
-          if (subtitle != null) ...[
-            const SizedBox(height: 4),
-            Text(
-              subtitle!,
-              style: const TextStyle(
-                fontSize: 11,
-                color: UnionFlowColors.textSecondary,
-              ),
-            ),
-          ],
-          const SizedBox(height: 20),
+          const SizedBox(height: 10),
 
-          // Chart
-          SizedBox(
-            height: 180,
-            child: PieChart(
-              PieChartData(
-                sectionsSpace: 2,
-                centerSpaceRadius: centerSpaceRadius ?? 50,
-                sections: sections,
+          // Donut + légende côte à côte
+          Row(
+            children: [
+              // Petit donut
+              SizedBox(
+                width: 80,
+                height: 80,
+                child: PieChart(
+                  PieChartData(
+                    sectionsSpace: 2,
+                    centerSpaceRadius: centerSpaceRadius ?? 22,
+                    sections: compactSections,
+                  ),
+                ),
               ),
-            ),
+              const SizedBox(width: 14),
+
+              // Légende
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: sections.map((s) {
+                    // Le title de la section peut contenir '\n' ex: '50%\nActifs'
+                    final parts = s.title.split('\n');
+                    final pct = parts.isNotEmpty ? parts[0] : '';
+                    final label = parts.length > 1 ? parts[1] : s.title;
+                    return Padding(
+                      padding: const EdgeInsets.only(bottom: 6),
+                      child: Row(
+                        children: [
+                          Container(
+                            width: 8,
+                            height: 8,
+                            decoration: BoxDecoration(
+                              color: s.color,
+                              shape: BoxShape.circle,
+                            ),
+                          ),
+                          const SizedBox(width: 6),
+                          Expanded(
+                            child: Text(
+                              label,
+                              style: const TextStyle(
+                                fontSize: 10,
+                                color: UnionFlowColors.textSecondary,
+                              ),
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                          ),
+                          Text(
+                            pct,
+                            style: TextStyle(
+                              fontSize: 10,
+                              fontWeight: FontWeight.w700,
+                              color: s.color,
+                            ),
+                          ),
+                        ],
+                      ),
+                    );
+                  }).toList(),
+                ),
+              ),
+            ],
           ),
         ],
       ),
@@ -79,8 +144,9 @@ class UnionPieChartSection {
     return PieChartSectionData(
       color: color,
       value: value,
-      title: showTitle ? title : '',
+      title: title,
       radius: radius,
+      showTitle: showTitle,
       titleStyle: const TextStyle(
         fontSize: 11,
         fontWeight: FontWeight.w600,