Refactoring - Version OK

unionflow-mobile-apps/lib/features/dashboard/presentation/widgets/components/cards/performance_card.dart

@@ -1,9 +1,12 @@
 import 'package:flutter/material.dart';
+import '../../../../../../shared/design_system/unionflow_design_system.dart';
 
 /// Carte de performance système réutilisable
-/// 
+///
 /// Widget spécialisé pour afficher les métriques de performance
 /// avec barres de progression et indicateurs colorés.
+///
+/// REFACTORISÉ pour utiliser le Design System UnionFlow.
 class PerformanceCard extends StatelessWidget {
   /// Titre de la carte
   final String title;
@@ -48,21 +51,21 @@ class PerformanceCard extends StatelessWidget {
            label: 'CPU',
            value: 67.3,
            unit: '%',
-           color: Colors.orange,
+           color: ColorTokens.warning,
            threshold: 80,
          ),
          PerformanceMetric(
            label: 'RAM',
            value: 78.5,
            unit: '%',
-           color: Colors.blue,
+           color: ColorTokens.info,
            threshold: 85,
          ),
          PerformanceMetric(
            label: 'Disque',
            value: 45.2,
            unit: '%',
-           color: Colors.green,
+           color: ColorTokens.success,
            threshold: 90,
          ),
        ],
@@ -81,21 +84,21 @@ class PerformanceCard extends StatelessWidget {
            label: 'Latence',
            value: 12.0,
            unit: 'ms',
-           color: Color(0xFF00B894),
+           color: ColorTokens.success,
            threshold: 100.0,
          ),
          PerformanceMetric(
            label: 'Débit',
            value: 85.0,
            unit: 'Mbps',
-           color: Color(0xFF6C5CE7),
+           color: ColorTokens.primary,
            threshold: 100.0,
          ),
          PerformanceMetric(
            label: 'Paquets perdus',
            value: 0.2,
            unit: '%',
-           color: Color(0xFFE17055),
+           color: ColorTokens.secondary,
            threshold: 5.0,
          ),
        ],
@@ -107,14 +110,13 @@ class PerformanceCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: onTap,
-      child: Container(
-        padding: const EdgeInsets.all(12),
-        decoration: _getDecoration(),
+      child: UFCard(
+        padding: const EdgeInsets.all(SpacingTokens.lg),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             _buildHeader(),
-            const SizedBox(height: 12),
+            const SizedBox(height: SpacingTokens.lg),
             _buildMetrics(),
           ],
         ),
@@ -129,19 +131,17 @@ class PerformanceCard extends StatelessWidget {
       children: [
         Text(
           title,
-          style: const TextStyle(
-            fontSize: 16,
+          style: TypographyTokens.titleMedium.copyWith(
             fontWeight: FontWeight.bold,
-            color: Color(0xFF6C5CE7),
+            color: ColorTokens.primary,
           ),
         ),
         if (subtitle != null) ...[
-          const SizedBox(height: 2),
+          const SizedBox(height: SpacingTokens.xs),
           Text(
             subtitle!,
-            style: TextStyle(
-              fontSize: 12,
-              color: Colors.grey[600],
+            style: TypographyTokens.bodySmall.copyWith(
+              color: ColorTokens.onSurfaceVariant,
             ),
           ),
         ],
@@ -153,7 +153,7 @@ class PerformanceCard extends StatelessWidget {
   Widget _buildMetrics() {
     return Column(
       children: metrics.map((metric) => Padding(
-        padding: const EdgeInsets.only(bottom: 8),
+        padding: const EdgeInsets.only(bottom: SpacingTokens.md),
         child: _buildMetricRow(metric),
       )).toList(),
     );
@@ -163,12 +163,12 @@ class PerformanceCard extends StatelessWidget {
   Widget _buildMetricRow(PerformanceMetric metric) {
     final isWarning = metric.value > metric.threshold * 0.8;
     final isCritical = metric.value > metric.threshold;
-    
+
     Color effectiveColor = metric.color;
     if (isCritical) {
-      effectiveColor = Colors.red;
+      effectiveColor = ColorTokens.error;
     } else if (isWarning) {
-      effectiveColor = Colors.orange;
+      effectiveColor = ColorTokens.warning;
     }
 
     return Column(
@@ -183,28 +183,26 @@ class PerformanceCard extends StatelessWidget {
                 shape: BoxShape.circle,
               ),
             ),
-            const SizedBox(width: 8),
+            const SizedBox(width: SpacingTokens.md),
             Text(
               metric.label,
-              style: const TextStyle(
+              style: TypographyTokens.labelMedium.copyWith(
                 fontWeight: FontWeight.w600,
-                fontSize: 12,
               ),
             ),
             const Spacer(),
             if (showValues)
               Text(
                 '${metric.value.toStringAsFixed(1)}${metric.unit}',
-                style: TextStyle(
+                style: TypographyTokens.labelMedium.copyWith(
                   color: effectiveColor,
                   fontWeight: FontWeight.w600,
-                  fontSize: 12,
                 ),
               ),
           ],
         ),
         if (showProgressBars) ...[
-          const SizedBox(height: 4),
+          const SizedBox(height: SpacingTokens.xs),
           _buildProgressBar(metric, effectiveColor),
         ],
       ],
@@ -214,12 +212,12 @@ class PerformanceCard extends StatelessWidget {
   /// Barre de progression
   Widget _buildProgressBar(PerformanceMetric metric, Color color) {
     final progress = (metric.value / metric.threshold).clamp(0.0, 1.0);
-    
+
     return Container(
       height: 4,
       decoration: BoxDecoration(
-        color: Colors.grey[200],
-        borderRadius: BorderRadius.circular(2),
+        color: ColorTokens.surfaceVariant,
+        borderRadius: BorderRadius.circular(SpacingTokens.radiusXs),
       ),
       child: FractionallySizedBox(
         alignment: Alignment.centerLeft,
@@ -227,44 +225,14 @@ class PerformanceCard extends StatelessWidget {
         child: Container(
           decoration: BoxDecoration(
             color: color,
-            borderRadius: BorderRadius.circular(2),
+            borderRadius: BorderRadius.circular(SpacingTokens.radiusXs),
           ),
         ),
       ),
     );
   }
 
-  /// Décoration selon le style
-  BoxDecoration _getDecoration() {
-    switch (style) {
-      case PerformanceCardStyle.elevated:
-        return BoxDecoration(
-          color: Colors.white,
-          borderRadius: BorderRadius.circular(8),
-          boxShadow: [
-            BoxShadow(
-              color: Colors.black.withOpacity(0.05),
-              blurRadius: 4,
-              offset: const Offset(0, 2),
-            ),
-          ],
-        );
-      case PerformanceCardStyle.outlined:
-        return BoxDecoration(
-          color: Colors.white,
-          borderRadius: BorderRadius.circular(8),
-          border: Border.all(
-            color: const Color(0xFF6C5CE7).withOpacity(0.2),
-            width: 1,
-          ),
-        );
-      case PerformanceCardStyle.minimal:
-        return BoxDecoration(
-          color: Colors.white,
-          borderRadius: BorderRadius.circular(8),
-        );
-    }
-  }
+
 }
 
 /// Modèle de données pour une métrique de performance