Refactor TotalEnergyConsumptionChart to accept chartData as a parameter that it takes from TotalEnergyConsumptionBlocand update TotalEnergyConsumptionChartBox to use Bloc for state management.

lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart

@@ -6,21 +6,6 @@ import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
-final _chartData = [
-  EnergyDataModel(date: DateTime(2025, 1), value: 18000),
-  EnergyDataModel(date: DateTime(2025, 2), value: 25000),
-  EnergyDataModel(date: DateTime(2025, 3), value: 22000),
-  EnergyDataModel(date: DateTime(2025, 4), value: 21000),
-  EnergyDataModel(date: DateTime(2025, 5), value: 30000),
-  EnergyDataModel(date: DateTime(2025, 6), value: 23000),
-  EnergyDataModel(date: DateTime(2025, 7), value: 21000),
-  EnergyDataModel(date: DateTime(2025, 8), value: 25000),
-  EnergyDataModel(date: DateTime(2025, 9), value: 21100),
-  EnergyDataModel(date: DateTime(2025, 10), value: 22000),
-  EnergyDataModel(date: DateTime(2025, 11), value: 21000),
-  EnergyDataModel(date: DateTime(2025, 12), value: 27500),
-];
-
 // energy_consumption_chart will return id, name and consumption
 const phasesJson = {
   "1": {
@@ -31,7 +16,9 @@ const phasesJson = {
 };
 
 class TotalEnergyConsumptionChart extends StatelessWidget {
-  const TotalEnergyConsumptionChart({super.key});
+  const TotalEnergyConsumptionChart({required this.chartData, super.key});
+
+  final List<EnergyDataModel> chartData;
 
   @override
   Widget build(BuildContext context) {
@@ -73,7 +60,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
         preventCurveOvershootingThreshold: 0.1,
         curveSmoothness: 0.55,
         preventCurveOverShooting: true,
-        spots: _chartData
+        spots: chartData
             .asMap()
             .entries
             .map(
@@ -122,7 +109,8 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
             child: FittedBox(
               fit: BoxFit.scaleDown,
               child: Text(
-                _chartData[value.toInt()].date.month.getMonthName,
+                chartData.elementAtOrNull(value.toInt())?.date.month.getMonthName ??
+                    '',
                 style: context.textTheme.bodySmall?.copyWith(
                   fontSize: 12,
                   color: ColorsManager.greyColor,

lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart

@@ -1,30 +1,55 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/total_energy_consumption/total_energy_consumption_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart';
+import 'package:syncrow_web/pages/analytics/params/get_total_energy_consumption_param.dart';
 import 'package:syncrow_web/utils/style.dart';
 
-class TotalEnergyConsumptionChartBox extends StatelessWidget {
+class TotalEnergyConsumptionChartBox extends StatefulWidget {
   const TotalEnergyConsumptionChartBox({super.key});
 
+  @override
+  State<TotalEnergyConsumptionChartBox> createState() =>
+      _TotalEnergyConsumptionChartBoxState();
+}
+
+class _TotalEnergyConsumptionChartBoxState
+    extends State<TotalEnergyConsumptionChartBox> {
+  @override
+  void initState() {
+    final param = GetTotalEnergyConsumptionParam(
+      startDate: DateTime.now().subtract(const Duration(days: 30)),
+      endDate: DateTime.now(),
+      spaceId: '123',
+    );
+    context.read<TotalEnergyConsumptionBloc>().add(
+          TotalEnergyConsumptionLoadEvent(param: param),
+        );
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return BlocBuilder<TotalEnergyConsumptionBloc, TotalEnergyConsumptionState>(
-      decoration: subSectionContainerDecoration.copyWith(
+      builder: (context, state) => Container(
-        borderRadius: BorderRadius.circular(30),
+        decoration: subSectionContainerDecoration.copyWith(
-      ),
+          borderRadius: BorderRadius.circular(30),
-      padding: const EdgeInsets.all(30),
+        ),
-      child: Column(
+        padding: const EdgeInsets.all(30),
-        spacing: 20,
+        child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+          spacing: 20,
-        children: [
+          crossAxisAlignment: CrossAxisAlignment.start,
-          Text(
+          children: [
-            'Total Energy Consumption',
+            Text(
-            style: TextStyle(
+              'Total Energy Consumption',
-              fontSize: 22,
+              style: TextStyle(
-              fontWeight: FontWeight.w700,
+                fontSize: 22,
+                fontWeight: FontWeight.w700,
+              ),
             ),
-          ),
+            TotalEnergyConsumptionChart(chartData: state.chartData),
-          const TotalEnergyConsumptionChart(),
+          ],
-        ],
+        ),
       ),
     );
   }

lib/pages/analytics/params/get_total_energy_consumption_param.dart

@@ -1,6 +1,6 @@
 class GetTotalEnergyConsumptionParam {
-  final String? startDate;
+  final DateTime? startDate;
-  final String? endDate;
+  final DateTime? endDate;
   final String? spaceId;
 
   GetTotalEnergyConsumptionParam({
@@ -11,8 +11,8 @@ class GetTotalEnergyConsumptionParam {
 
   Map<String, dynamic> toJson() {
     return {
-      'startDate': startDate,
+      'startDate': startDate?.toIso8601String(),
-      'endDate': endDate,
+      'endDate': endDate?.toIso8601String(),
       'spaceId': spaceId,
     };
   }