From d8faafd1c0264202c4ac60c38dcf64baef514659 Mon Sep 17 00:00:00 2001
From: Faris Armoush <farmoush@uba.com.jo>
Date: Sun, 4 May 2025 10:55:32 +0300
Subject: [PATCH] Extracted and implemented
 `EnergyConsumptionPerDeviceDevicesList`.

---
 ...ergy_consumption_per_device_chart_box.dart | 71 ++++++++++++++-----
 1 file changed, 53 insertions(+), 18 deletions(-)

diff --git a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart
index 4bc4306e..9ee15a12 100644
--- a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
@@ -12,7 +13,7 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
         borderRadius: BorderRadius.circular(30),
       ),
       padding: const EdgeInsets.all(30),
-      child: Column(
+      child: const Column(
         spacing: 20,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -29,23 +30,7 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
               Spacer(),
               Expanded(
                 flex: 2,
-                child: SingleChildScrollView(
-                  scrollDirection: Axis.horizontal,
-                  child: Row(
-                    spacing: 16,
-                    mainAxisSize: MainAxisSize.min,
-                    crossAxisAlignment: CrossAxisAlignment.end,
-                    mainAxisAlignment: MainAxisAlignment.end,
-                    children: List.generate(
-                      20,
-                      (index) => Chip(
-                        label: Text('Device ${index + 1}'),
-                        backgroundColor: Colors.blueAccent,
-                        labelStyle: TextStyle(color: Colors.white),
-                      ),
-                    ).toList(),
-                  ),
-                ),
+                child: EnergyConsumptionPerDeviceDevicesList(),
               ),
             ],
           ),
@@ -56,3 +41,53 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
     );
   }
 }
+
+class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
+  const EnergyConsumptionPerDeviceDevicesList({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        spacing: 16,
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.end,
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: List.generate(
+          20,
+          (index) => _buildDeviceCell(index),
+        ).toList(),
+      ),
+    );
+  }
+
+  Widget _buildDeviceCell(int index) {
+    return Container(
+      padding: EdgeInsetsDirectional.symmetric(
+        vertical: 8,
+        horizontal: 12,
+      ),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadiusDirectional.circular(8),
+        border: Border.all(
+          color: ColorsManager.greyColor,
+          width: 1,
+        ),
+      ),
+      child: Row(
+        spacing: 6,
+        children: [
+          CircleAvatar(
+            radius: 4,
+            backgroundColor: Colors.purple,
+          ),
+          Text(
+            'Device ${index + 1}',
+            textAlign: TextAlign.center,
+          ),
+        ],
+      ),
+    );
+  }
+}