removed unused import.

1495 calendar bugfixes

lib/pages/analytics/models/phases_energy_consumption.dart

@@ -1,27 +1,66 @@
 import 'package:equatable/equatable.dart';
 
 class PhasesEnergyConsumption extends Equatable {
-  final int month;
-  final double phaseA;
-  final double phaseB;
-  final double phaseC;
+  final String uuid;
+  final DateTime createdAt;
+  final DateTime updatedAt;
+  final String deviceUuid;
+  final DateTime date;
+  final double energyConsumedKw;
+  final double energyConsumedA;
+  final double energyConsumedB;
+  final double energyConsumedC;
 
   const PhasesEnergyConsumption({
-    required this.month,
-    required this.phaseA,
-    required this.phaseB,
-    required this.phaseC,
+    required this.uuid,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.deviceUuid,
+    required this.date,
+    required this.energyConsumedKw,
+    required this.energyConsumedA,
+    required this.energyConsumedB,
+    required this.energyConsumedC,
   });
 
   @override
-  List<Object?> get props => [month, phaseA, phaseB, phaseC];
+  List<Object?> get props => [
+        uuid,
+        createdAt,
+        updatedAt,
+        deviceUuid,
+        date,
+        energyConsumedKw,
+        energyConsumedA,
+        energyConsumedB,
+        energyConsumedC,
+      ];
 
   factory PhasesEnergyConsumption.fromJson(Map<String, dynamic> json) {
     return PhasesEnergyConsumption(
-      month: json['month'] as int,
-      phaseA: (json['phaseA'] as num).toDouble(),
-      phaseB: (json['phaseB'] as num).toDouble(),
-      phaseC: (json['phaseC'] as num).toDouble(),
+      uuid: json['uuid'] as String,
+      createdAt: DateTime.parse(json['createdAt'] as String),
+      updatedAt: DateTime.parse(json['updatedAt'] as String),
+      deviceUuid: json['deviceUuid'] as String,
+      date: DateTime.parse(json['date'] as String),
+      energyConsumedKw: double.parse(json['energyConsumedKw']),
+      energyConsumedA: double.parse(json['energyConsumedA']),
+      energyConsumedB: double.parse(json['energyConsumedB']),
+      energyConsumedC: double.parse(json['energyConsumedC']),
     );
   }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'uuid': uuid,
+      'createdAt': createdAt.toIso8601String(),
+      'updatedAt': updatedAt.toIso8601String(),
+      'deviceUuid': deviceUuid,
+      'date': date.toIso8601String().split('T')[0],
+      'energyConsumedKw': energyConsumedKw.toString(),
+      'energyConsumedA': energyConsumedA.toString(),
+      'energyConsumedB': energyConsumedB.toString(),
+      'energyConsumedC': energyConsumedC.toString(),
+    };
+  }
 }

lib/pages/analytics/modules/analytics/views/analytics_page.dart

@@ -15,8 +15,8 @@ import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_he
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics_devices_service_delagate.dart';
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/remote_energy_management_analytics_devices_service.dart';
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/remote_occupancy_analytics_devices_service.dart';
-import 'package:syncrow_web/pages/analytics/services/energy_consumption_by_phases/fake_energy_consumption_by_phases_service.dart';
-import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/fake_energy_consumption_per_device_service.dart';
+import 'package:syncrow_web/pages/analytics/services/energy_consumption_by_phases/remote_energy_consumption_by_phases_service.dart';
+import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/remote_energy_consumption_per_device_service.dart';
 import 'package:syncrow_web/pages/analytics/services/occupacy/fake_occupacy_service.dart';
 import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/remote_occupancy_heat_map_service.dart';
 import 'package:syncrow_web/pages/analytics/services/power_clamp_info/remote_power_clamp_info_service.dart';
@@ -57,12 +57,12 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
         ),
         BlocProvider(
           create: (context) => EnergyConsumptionByPhasesBloc(
-            FakeEnergyConsumptionByPhasesService(),
+            RemoteEnergyConsumptionByPhasesService(_httpService),
           ),
         ),
         BlocProvider(
           create: (context) => EnergyConsumptionPerDeviceBloc(
-            FakeEnergyConsumptionPerDeviceService(),
+            RemoteEnergyConsumptionPerDeviceService(_httpService),
           ),
         ),
         BlocProvider(

lib/pages/analytics/modules/analytics/widgets/analytics_page_tabs_and_children.dart

@@ -14,7 +14,6 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final spaceTreeState = context.read<SpaceTreeBloc>().state;
     return BlocBuilder<AnalyticsTabBloc, AnalyticsPageTab>(
       buildWhen: (previous, current) => previous != current,
       builder: (context, selectedTab) => Column(
@@ -68,15 +67,21 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
                             context.read<AnalyticsDatePickerBloc>().add(
                                   UpdateAnalyticsDatePickerEvent(montlyDate: value),
                                 );
-                            FetchEnergyManagementDataHelper.loadEnergyManagementData(
-                              context,
-                              selectedDate: value,
-                              communityId:
-                                  spaceTreeState.selectedCommunities.firstOrNull ??
-                                      '',
-                              spaceId:
-                                  spaceTreeState.selectedSpaces.firstOrNull ?? '',
-                            );
+
+                            final spaceTreeState =
+                                context.read<SpaceTreeBloc>().state;
+                            if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                              FetchEnergyManagementDataHelper
+                                  .loadEnergyManagementData(
+                                context,
+                                selectedDate: value,
+                                communityId:
+                                    spaceTreeState.selectedCommunities.firstOrNull ??
+                                        '',
+                                spaceId:
+                                    spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              );
+                            }
                           },
                           selectedDate: context
                               .watch<AnalyticsDatePickerBloc>()

lib/pages/analytics/modules/analytics/widgets/month_picker_widget.dart

@@ -45,7 +45,7 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
   @override
   Widget build(BuildContext context) {
     return Dialog(
-      backgroundColor: Theme.of(context).colorScheme.surface,
+      backgroundColor: ColorsManager.whiteColors,
       child: Container(
         padding: const EdgeInsetsDirectional.all(20),
         width: 320,
@@ -121,6 +121,7 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
   }
 
   Row _buildYearSelector() {
+    final currentYear = DateTime.now().year;
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
@@ -134,17 +135,35 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
         ),
         const Spacer(),
         IconButton(
-          onPressed: () => setState(() => _currentYear = _currentYear - 1),
+          onPressed: () {
+            setState(() {
+              _currentYear = _currentYear - 1;
+            });
+          },
           icon: const Icon(
             Icons.chevron_left,
             color: ColorsManager.grey700,
           ),
         ),
         IconButton(
-          onPressed: () => setState(() => _currentYear = _currentYear + 1),
-          icon: const Icon(
+          onPressed: _currentYear < currentYear
+              ? () {
+                  setState(() {
+                    _currentYear = _currentYear + 1;
+                    // Clear selected month if it becomes invalid in the new year
+                    if (_currentYear == currentYear &&
+                        _selectedMonth != null &&
+                        _selectedMonth! > DateTime.now().month - 1) {
+                      _selectedMonth = null;
+                    }
+                  });
+                }
+              : null,
+          icon: Icon(
             Icons.chevron_right,
-            color: ColorsManager.grey700,
+            color: _currentYear < currentYear
+                ? ColorsManager.grey700
+                : ColorsManager.grey700.withValues(alpha: 0.3),
           ),
         ),
       ],
@@ -152,6 +171,9 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
   }
 
   Widget _buildMonthsGrid() {
+    final currentDate = DateTime.now();
+    final isCurrentYear = _currentYear == currentDate.year;
+
     return GridView.builder(
       shrinkWrap: true,
       itemCount: 12,
@@ -165,14 +187,18 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
       ),
       itemBuilder: (context, index) {
         final isSelected = _selectedMonth == index;
+        final isFutureMonth = isCurrentYear && index > currentDate.month - 1;
+
         return InkWell(
-          onTap: () => setState(() => _selectedMonth = index),
+          onTap: isFutureMonth ? null : () => setState(() => _selectedMonth = index),
           child: Container(
             alignment: Alignment.center,
             decoration: BoxDecoration(
               color: isSelected
                   ? ColorsManager.vividBlue.withValues(alpha: 0.7)
-                  : const Color(0xFFEDF2F7),
+                  : isFutureMonth
+                      ? ColorsManager.grey700.withValues(alpha: 0.1)
+                      : const Color(0xFFEDF2F7),
               borderRadius:
                   isSelected ? BorderRadius.circular(15) : BorderRadius.zero,
             ),
@@ -182,7 +208,9 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
                 fontSize: 12,
                 color: isSelected
                     ? ColorsManager.whiteColors
-                    : ColorsManager.blackColor.withValues(alpha: 0.8),
+                    : isFutureMonth
+                        ? ColorsManager.blackColor.withValues(alpha: 0.3)
+                        : ColorsManager.blackColor.withValues(alpha: 0.8),
                 fontWeight: FontWeight.w500,
               ),
             ),

lib/pages/analytics/modules/analytics/widgets/year_picker_widget.dart

@@ -20,9 +20,9 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
   late int _currentYear;
 
   static final years = List.generate(
-    DateTime.now().year - 2020 + 1,
+    DateTime.now().year - (DateTime.now().year - 5) + 1,
     (index) => (2020 + index),
-  );
+  ).where((year) => year <= DateTime.now().year).toList();
 
   @override
   void initState() {
@@ -33,7 +33,7 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
   @override
   Widget build(BuildContext context) {
     return Dialog(
-      backgroundColor: Theme.of(context).colorScheme.surface,
+      backgroundColor: ColorsManager.whiteColors,
       child: Container(
         padding: const EdgeInsetsDirectional.all(20),
         width: 320,

lib/pages/analytics/modules/energy_management/helpers/energy_consumption_by_phases_chart_helper.dart

@@ -1,20 +0,0 @@
-import 'package:syncrow_web/pages/analytics/models/phases_energy_consumption.dart';
-
-abstract final class EnergyConsumptionByPhasesChartHelper {
-  const EnergyConsumptionByPhasesChartHelper._();
-
-  static const fakeData = <PhasesEnergyConsumption>[
-    PhasesEnergyConsumption(month: 1, phaseA: 200, phaseB: 300, phaseC: 400),
-    PhasesEnergyConsumption(month: 2, phaseA: 300, phaseB: 400, phaseC: 500),
-    PhasesEnergyConsumption(month: 3, phaseA: 400, phaseB: 500, phaseC: 600),
-    PhasesEnergyConsumption(month: 4, phaseA: 100, phaseB: 100, phaseC: 100),
-    PhasesEnergyConsumption(month: 5, phaseA: 300, phaseB: 400, phaseC: 500),
-    PhasesEnergyConsumption(month: 6, phaseA: 300, phaseB: 100, phaseC: 400),
-    PhasesEnergyConsumption(month: 7, phaseA: 300, phaseB: 100, phaseC: 400),
-    PhasesEnergyConsumption(month: 8, phaseA: 500, phaseB: 100, phaseC: 100),
-    PhasesEnergyConsumption(month: 9, phaseA: 500, phaseB: 100, phaseC: 200),
-    PhasesEnergyConsumption(month: 10, phaseA: 100, phaseB: 50, phaseC: 50),
-    PhasesEnergyConsumption(month: 11, phaseA: 600, phaseB: 750, phaseC: 130),
-    PhasesEnergyConsumption(month: 12, phaseA: 100, phaseB: 80, phaseC: 100),
-  ];
-}

lib/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart

@@ -20,7 +20,8 @@ abstract final class EnergyManagementChartsHelper {
           interval: 1,
           reservedSize: 32,
           showTitles: true,
-          maxIncluded: true,
+          maxIncluded: false,
+          minIncluded: false,
           getTitlesWidget: (value, meta) => Padding(
             padding: const EdgeInsetsDirectional.only(top: 20.0),
             child: Text(
@@ -36,7 +37,8 @@ abstract final class EnergyManagementChartsHelper {
       leftTitles: AxisTitles(
         sideTitles: SideTitles(
           showTitles: true,
-          maxIncluded: true,
+          maxIncluded: false,
+          minIncluded: false,
           interval: leftTitlesInterval,
           reservedSize: 110,
           getTitlesWidget: (value, meta) => Padding(

lib/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart

@@ -34,26 +34,44 @@ abstract final class FetchEnergyManagementDataHelper {
 
     final datePickerState = context.read<AnalyticsDatePickerBloc>().state;
     final selectedDate0 = selectedDate ?? datePickerState.monthlyDate;
-    loadAnalyticsDevices(context, communityUuid: communityId, spaceUuid: spaceId);
+    loadAnalyticsDevices(
+      context,
+      communityUuid: communityId,
+      spaceUuid: spaceId,
+      selectedDate: selectedDate0,
+    );
     loadTotalEnergyConsumption(
       context,
       selectedDate: selectedDate0,
       communityId: communityId,
       spaceId: spaceId,
     );
-    loadEnergyConsumptionByPhases(context, selectedDate: selectedDate);
-    loadEnergyConsumptionPerDevice(context);
+    final selectedDevice = getSelectedDevice(context);
+    if (selectedDevice case final AnalyticsDevice device) {
+      loadEnergyConsumptionByPhases(
+        context,
+        powerClampUuid: device.uuid,
+        selectedDate: selectedDate0,
+      );
+    }
+    loadEnergyConsumptionPerDevice(
+      context,
+      communityId: communityId,
+      spaceId: spaceId,
+      selectedDate: selectedDate0,
+    );
     loadRealtimeDeviceChanges(context);
     loadPowerClampInfo(context);
   }
 
   static void loadEnergyConsumptionByPhases(
     BuildContext context, {
+    required String powerClampUuid,
     DateTime? selectedDate,
   }) {
     final param = GetEnergyConsumptionByPhasesParam(
-      startDate: selectedDate,
-      spaceId: '',
+      date: selectedDate,
+      powerClampUuid: powerClampUuid,
     );
     context.read<EnergyConsumptionByPhasesBloc>().add(
           LoadEnergyConsumptionByPhasesEvent(param: param),
@@ -76,10 +94,19 @@ abstract final class FetchEnergyManagementDataHelper {
         );
   }
 
-  static void loadEnergyConsumptionPerDevice(BuildContext context) {
-    const param = GetEnergyConsumptionPerDeviceParam();
+  static void loadEnergyConsumptionPerDevice(
+    BuildContext context, {
+    DateTime? selectedDate,
+    required String communityId,
+    required String spaceId,
+  }) {
+    final param = GetEnergyConsumptionPerDeviceParam(
+      spaceId: spaceId,
+      communityId: communityId,
+      monthDate: selectedDate,
+    );
     context.read<EnergyConsumptionPerDeviceBloc>().add(
-          const LoadEnergyConsumptionPerDeviceEvent(param),
+          LoadEnergyConsumptionPerDeviceEvent(param),
         );
   }
 
@@ -107,6 +134,7 @@ abstract final class FetchEnergyManagementDataHelper {
     BuildContext context, {
     required String communityUuid,
     required String spaceUuid,
+    required DateTime selectedDate,
   }) {
     context.read<AnalyticsDevicesBloc>().add(
           LoadAnalyticsDevicesEvent(
@@ -114,6 +142,11 @@ abstract final class FetchEnergyManagementDataHelper {
               context.read<PowerClampInfoBloc>().add(
                     LoadPowerClampInfoEvent(device.uuid),
                   );
+              loadEnergyConsumptionByPhases(
+                context,
+                powerClampUuid: device.uuid,
+                selectedDate: selectedDate,
+              );
               context.read<RealtimeDeviceChangesBloc>().add(
                     RealtimeDeviceChangesStarted(device.uuid),
                   );

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

@@ -1,6 +1,6 @@
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/analytics/helpers/get_month_name_from_int.dart';
+import 'package:intl/intl.dart';
 import 'package:syncrow_web/pages/analytics/models/phases_energy_consumption.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
@@ -18,7 +18,10 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
   Widget build(BuildContext context) {
     return BarChart(
       BarChartData(
-        gridData: EnergyManagementChartsHelper.gridData(),
+        gridData: EnergyManagementChartsHelper.gridData().copyWith(
+          checkToShowHorizontalLine: (value) => true,
+          horizontalInterval: 250,
+        ),
         borderData: EnergyManagementChartsHelper.borderData(),
         barTouchData: _barTouchData(context),
         titlesData: _titlesData(context),
@@ -31,21 +34,25 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
             barRods: [
               BarChartRodData(
                 color: ColorsManager.vividBlue.withValues(alpha: 0.1),
-                toY: data.phaseA + data.phaseB + data.phaseC,
+                toY: data.energyConsumedA +
+                    data.energyConsumedB +
+                    data.energyConsumedC,
                 rodStackItems: [
                   BarChartRodStackItem(
                     0,
-                    data.phaseA,
+                    data.energyConsumedA,
                     ColorsManager.vividBlue.withValues(alpha: 0.8),
                   ),
                   BarChartRodStackItem(
-                    data.phaseA,
-                    data.phaseA + data.phaseB,
+                    data.energyConsumedA,
+                    data.energyConsumedA + data.energyConsumedB,
                     ColorsManager.vividBlue.withValues(alpha: 0.4),
                   ),
                   BarChartRodStackItem(
-                    data.phaseA + data.phaseB,
-                    data.phaseA + data.phaseB + data.phaseC,
+                    data.energyConsumedA + data.energyConsumedB,
+                    data.energyConsumedA +
+                        data.energyConsumedB +
+                        data.energyConsumedC,
                     ColorsManager.vividBlue.withValues(alpha: 0.15),
                   ),
                 ],
@@ -91,18 +98,27 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
   }) {
     final data = energyData;
 
-    final month = data[group.x.toInt()].month.getMonthName;
-    final phaseA = data[group.x.toInt()].phaseA;
-    final phaseB = data[group.x.toInt()].phaseB;
-    final phaseC = data[group.x.toInt()].phaseC;
+    final date = DateFormat('dd/MM/yyyy').format(data[group.x.toInt()].date);
+    final phaseA = data[group.x.toInt()].energyConsumedA;
+    final phaseB = data[group.x.toInt()].energyConsumedB;
+    final phaseC = data[group.x.toInt()].energyConsumedC;
+    final total = data[group.x.toInt()].energyConsumedKw;
 
     return BarTooltipItem(
-      '$month\n',
+      '$date\n',
       context.textTheme.bodyMedium!.copyWith(
         color: ColorsManager.blackColor,
         fontSize: 14,
       ),
+      textAlign: TextAlign.start,
       children: [
+        TextSpan(
+          text: 'Total: $total\n',
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.blackColor,
+            fontSize: 12,
+          ),
+        ),
         TextSpan(
           text: 'Phase A: $phaseA\n',
           style: context.textTheme.bodySmall?.copyWith(
@@ -144,7 +160,7 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
       sideTitles: SideTitles(
         showTitles: true,
         getTitlesWidget: (value, _) {
-          final month = energyData[value.toInt()].month.getMonthName;
+          final month = DateFormat('dd/MM').format(energyData[value.toInt()].date);
           return FittedBox(
             alignment: AlignmentDirectional.bottomCenter,
             fit: BoxFit.scaleDown,

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

@@ -16,7 +16,10 @@ class EnergyConsumptionPerDeviceChart extends StatelessWidget {
           context,
           leftTitlesInterval: 250,
         ),
-        gridData: EnergyManagementChartsHelper.gridData(),
+        gridData: EnergyManagementChartsHelper.gridData().copyWith(
+          checkToShowHorizontalLine: (value) => true,
+          horizontalInterval: 250,
+        ),
         borderData: EnergyManagementChartsHelper.borderData(),
         lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
         lineBarsData: chartData.map((e) {

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

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/power_clamp_info/power_clamp_info_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart';
@@ -132,6 +133,12 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
             alignment: AlignmentDirectional.centerEnd,
             child: AnalyticsDeviceDropdown(
               onChanged: (value) {
+                FetchEnergyManagementDataHelper.loadEnergyConsumptionByPhases(
+                  context,
+                  powerClampUuid: value.uuid,
+                  selectedDate:
+                      context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
+                );
                 FetchEnergyManagementDataHelper.loadRealtimeDeviceChanges(
                   context,
                   deviceUuid: value.uuid,

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

@@ -4,15 +4,6 @@ import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
-// energy_consumption_chart will return id, name and consumption
-const phasesJson = {
-  "1": {
-    "phaseOne": 1000,
-    "phaseTwo": 2000,
-    "phaseThree": 3000,
-  }
-};
-
 class TotalEnergyConsumptionChart extends StatelessWidget {
   const TotalEnergyConsumptionChart({required this.chartData, super.key});
 
@@ -23,8 +14,14 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
     return Expanded(
       child: LineChart(
         LineChartData(
-          titlesData: EnergyManagementChartsHelper.titlesData(context),
-          gridData: EnergyManagementChartsHelper.gridData(),
+          titlesData: EnergyManagementChartsHelper.titlesData(
+            context,
+            leftTitlesInterval: 250,
+          ),
+          gridData: EnergyManagementChartsHelper.gridData().copyWith(
+            checkToShowHorizontalLine: (value) => true,
+            horizontalInterval: 250,
+          ),
           borderData: EnergyManagementChartsHelper.borderData(),
           lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
           lineBarsData: _lineBarsData,

lib/pages/analytics/modules/occupancy/helpers/fetch_occupancy_data_helper.dart

@@ -28,25 +28,13 @@ abstract final class FetchOccupancyDataHelper {
     loadAnalyticsDevices(context, communityUuid: communityId, spaceUuid: spaceId);
     final selectedDevice = context.read<AnalyticsDevicesBloc>().state.selectedDevice;
 
-    context.read<OccupancyBloc>().add(
-          LoadOccupancyEvent(
-            GetOccupancyParam(
-              monthDate:
-                  '${datePickerState.monthlyDate.year}-${datePickerState.monthlyDate.month}',
-              spaceUuid: spaceId,
-              communityUuid: communityId,
-            ),
-          ),
-        );
-
-    context.read<OccupancyHeatMapBloc>().add(
-          LoadOccupancyHeatMapEvent(
-            GetOccupancyHeatMapParam(
-              spaceUuid: spaceId,
-              year: datePickerState.yearlyDate,
-            ),
-          ),
-        );
+    loadOccupancyChartData(
+      context,
+      communityUuid: communityId,
+      spaceUuid: spaceId,
+      date: datePickerState.monthlyDate,
+    );
+    loadHeatMapData(context, spaceUuid: spaceId, year: datePickerState.yearlyDate);
 
     if (selectedDevice case final AnalyticsDevice device) {
       context.read<RealtimeDeviceChangesBloc>()
@@ -57,6 +45,35 @@ abstract final class FetchOccupancyDataHelper {
     }
   }
 
+  static void loadHeatMapData(
+    BuildContext context, {
+    required String spaceUuid,
+    required DateTime year,
+  }) {
+    context.read<OccupancyHeatMapBloc>().add(
+          LoadOccupancyHeatMapEvent(
+            GetOccupancyHeatMapParam(spaceUuid: spaceUuid, year: year),
+          ),
+        );
+  }
+
+  static void loadOccupancyChartData(
+    BuildContext context, {
+    required String communityUuid,
+    required String spaceUuid,
+    required DateTime date,
+  }) {
+    context.read<OccupancyBloc>().add(
+          LoadOccupancyEvent(
+            GetOccupancyParam(
+              monthDate: '${date.year}-${date.month}',
+              spaceUuid: spaceUuid,
+              communityUuid: communityUuid,
+            ),
+          ),
+        );
+  }
+
   static void loadAnalyticsDevices(
     BuildContext context, {
     required String communityUuid,

lib/pages/analytics/modules/occupancy/widgets/heat_map_tooltip.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class HeatMapTooltip extends StatelessWidget {
+  const HeatMapTooltip({
+    required this.date,
+    required this.value,
+    super.key,
+  });
+
+  final DateTime date;
+  final int value;
+
+  @override
+  Widget build(BuildContext context) {
+    return FittedBox(
+      fit: BoxFit.scaleDown,
+      alignment: AlignmentDirectional.topStart,
+      child: Container(
+        padding: const EdgeInsets.all(8),
+        decoration: BoxDecoration(
+          color: ColorsManager.grey700,
+          borderRadius: BorderRadius.circular(3),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Text(
+              DateFormat('MMM d, yyyy').format(date),
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 12,
+                fontWeight: FontWeight.w700,
+                color: ColorsManager.whiteColors,
+              ),
+            ),
+            const Divider(height: 2, thickness: 1),
+            Text(
+              '$value Occupants',
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 10,
+                fontWeight: FontWeight.w500,
+                color: ColorsManager.whiteColors,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/analytics/modules/occupancy/widgets/interactive_heat_map.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/heat_map_tooltip.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_painter.dart';
+
+class InteractiveHeatMap extends StatefulWidget {
+  const InteractiveHeatMap({
+    required this.items,
+    required this.maxValue,
+    required this.cellSize,
+    super.key,
+  });
+
+  final List<OccupancyPaintItem> items;
+  final int maxValue;
+  final double cellSize;
+
+  @override
+  State<InteractiveHeatMap> createState() => _InteractiveHeatMapState();
+}
+
+class _InteractiveHeatMapState extends State<InteractiveHeatMap> {
+  OccupancyPaintItem? _hoveredItem;
+  OverlayEntry? _overlayEntry;
+  final LayerLink _layerLink = LayerLink();
+
+  @override
+  void dispose() {
+    _removeOverlay();
+    _overlayEntry?.dispose();
+    super.dispose();
+  }
+
+  void _removeOverlay() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+  }
+
+  void _showTooltip(OccupancyPaintItem item, Offset localPosition) {
+    _removeOverlay();
+
+    final column = item.index ~/ 7;
+    final row = item.index % 7;
+    final x = column * widget.cellSize;
+    final y = row * widget.cellSize;
+
+    _overlayEntry = OverlayEntry(
+      builder: (context) => Positioned(
+        child: CompositedTransformFollower(
+          link: _layerLink,
+          offset: Offset(x + widget.cellSize, y),
+          child: Material(
+            color: Colors.transparent,
+            child: Transform.translate(
+              offset: Offset(-(widget.cellSize * 2.5), -50),
+              child: HeatMapTooltip(date: item.date, value: item.value),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    Overlay.of(context).insert(_overlayEntry!);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CompositedTransformTarget(
+      link: _layerLink,
+      child: MouseRegion(
+        onHover: (event) {
+          final column = event.localPosition.dx ~/ widget.cellSize;
+          final row = event.localPosition.dy ~/ widget.cellSize;
+          final index = column * 7 + row;
+
+          if (index >= 0 && index < widget.items.length) {
+            final item = widget.items[index];
+            if (_hoveredItem != item) {
+              setState(() => _hoveredItem = item);
+              _showTooltip(item, event.localPosition);
+            }
+          } else {
+            _removeOverlay();
+            setState(() => _hoveredItem = null);
+          }
+        },
+        onExit: (_) {
+          _removeOverlay();
+          setState(() => _hoveredItem = null);
+        },
+        child: CustomPaint(
+          isComplex: true,
+          size: _painterSize,
+          painter: OccupancyPainter(
+            items: widget.items,
+            maxValue: widget.maxValue,
+            hoveredItem: _hoveredItem,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Size get _painterSize {
+    final height = 7 * widget.cellSize;
+    final width = widget.items.length ~/ 7 * widget.cellSize;
+    return Size(width, height);
+  }
+}

lib/pages/analytics/modules/occupancy/widgets/occupancy_chart.dart

@@ -23,7 +23,14 @@ class OccupancyChart extends StatelessWidget {
         ),
         borderData: EnergyManagementChartsHelper.borderData(),
         barTouchData: _barTouchData(context),
-        titlesData: _titlesData(context),
+        titlesData: _titlesData(context).copyWith(
+          leftTitles: _titlesData(context).leftTitles.copyWith(
+                sideTitles: _titlesData(context).leftTitles.sideTitles.copyWith(
+                      maxIncluded: true,
+                      minIncluded: true,
+                    ),
+              ),
+        ),
         barGroups: List.generate(chartData.length, (index) {
           final actual = chartData[index];
           return BarChartGroupData(

lib/pages/analytics/modules/occupancy/widgets/occupancy_chart_box.dart

@@ -47,11 +47,17 @@ class OccupancyChartBox extends StatelessWidget {
                           context.read<AnalyticsDatePickerBloc>().add(
                                 UpdateAnalyticsDatePickerEvent(montlyDate: value),
                               );
-                          FetchOccupancyDataHelper.loadOccupancyData(
-                            context,
-                            communityId: spaceTreeState.selectedCommunities.firstOrNull ?? '',
-                            spaceId: spaceTreeState.selectedSpaces.firstOrNull ?? '',
-                          );
+                          if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                            FetchOccupancyDataHelper.loadOccupancyChartData(
+                              context,
+                              communityUuid:
+                                  spaceTreeState.selectedCommunities.firstOrNull ??
+                                      '',
+                              spaceUuid:
+                                  spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              date: value,
+                            );
+                          }
                         },
                         selectedDate: context
                             .watch<AnalyticsDatePickerBloc>()

lib/pages/analytics/modules/occupancy/widgets/occupancy_heat_map.dart

@@ -1,6 +1,7 @@
 import 'dart:math' as math show max;
 
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/interactive_heat_map.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_days.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_gradient.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_months.dart';
@@ -28,7 +29,7 @@ class OccupancyHeatMap extends StatelessWidget {
     return List.generate(_totalWeeks * 7, (index) {
       final date = startDate.add(Duration(days: index));
       final value = heatMapData[date] ?? 0;
-      return OccupancyPaintItem(index: index, value: value);
+      return OccupancyPaintItem(index: index, value: value, date: date);
     });
   }
 
@@ -58,15 +59,13 @@ class OccupancyHeatMap extends StatelessWidget {
                   child: Row(
                     children: [
                       const OccupancyHeatMapDays(cellSize: _cellSize),
-                      CustomPaint(
-                        size: const Size(_totalWeeks * _cellSize, 7 * _cellSize),
-                        child: CustomPaint(
-                          isComplex: true,
-                          size: const Size(_totalWeeks * _cellSize, 7 * _cellSize),
-                          painter: OccupancyPainter(
-                            items: paintItems,
-                            maxValue: _maxValue,
-                          ),
+                      SizedBox(
+                        width: _totalWeeks * _cellSize,
+                        height: 7 * _cellSize,
+                        child: InteractiveHeatMap(
+                          items: paintItems,
+                          maxValue: _maxValue,
+                          cellSize: _cellSize,
                         ),
                       ),
                     ],

lib/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_box.dart

@@ -47,12 +47,14 @@ class OccupancyHeatMapBox extends StatelessWidget {
                           context.read<AnalyticsDatePickerBloc>().add(
                                 UpdateAnalyticsDatePickerEvent(yearlyDate: value),
                               );
-                          FetchOccupancyDataHelper.loadOccupancyData(
-                            context,
-                            communityId:
-                                spaceTreeState.selectedCommunities.firstOrNull ?? '',
-                            spaceId: spaceTreeState.selectedSpaces.firstOrNull ?? '',
-                          );
+                          if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                            FetchOccupancyDataHelper.loadHeatMapData(
+                              context,
+                              spaceUuid:
+                                  spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              year: value,
+                            );
+                          }
                         },
                         datePickerType: DatePickerType.year,
                         selectedDate: context

lib/pages/analytics/modules/occupancy/widgets/occupancy_painter.dart

@@ -4,18 +4,25 @@ import 'package:syncrow_web/utils/color_manager.dart';
 class OccupancyPaintItem {
   final int index;
   final int value;
+  final DateTime date;
 
-  const OccupancyPaintItem({required this.index, required this.value});
+  const OccupancyPaintItem({
+    required this.index,
+    required this.value,
+    required this.date,
+  });
 }
 
 class OccupancyPainter extends CustomPainter {
   OccupancyPainter({
     required this.items,
     required this.maxValue,
+    this.hoveredItem,
   });
 
   final List<OccupancyPaintItem> items;
   final int maxValue;
+  final OccupancyPaintItem? hoveredItem;
 
   static const double cellSize = 16.0;
 
@@ -25,6 +32,10 @@ class OccupancyPainter extends CustomPainter {
     final Paint borderPaint = Paint()
       ..color = ColorsManager.grayBorder.withValues(alpha: 0.4)
       ..style = PaintingStyle.stroke;
+    final Paint hoveredBorderPaint = Paint()
+      ..color = Colors.black
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1.5;
 
     for (final item in items) {
       final column = item.index ~/ 7;
@@ -37,22 +48,27 @@ class OccupancyPainter extends CustomPainter {
       final rect = Rect.fromLTWH(x, y, cellSize, cellSize);
       canvas.drawRect(rect, fillPaint);
 
-      _drawDashedLine(
-        canvas,
-        Offset(x, y),
-        Offset(x + cellSize, y),
-        borderPaint,
-      );
-      _drawDashedLine(
-        canvas,
-        Offset(x, y + cellSize),
-        Offset(x + cellSize, y + cellSize),
-        borderPaint,
-      );
+      // Highlight the hovered item
+      if (hoveredItem != null && hoveredItem!.index == item.index) {
+        canvas.drawRect(rect, hoveredBorderPaint);
+      } else {
+        _drawDashedLine(
+          canvas,
+          Offset(x, y),
+          Offset(x + cellSize, y),
+          borderPaint,
+        );
+        _drawDashedLine(
+          canvas,
+          Offset(x, y + cellSize),
+          Offset(x + cellSize, y + cellSize),
+          borderPaint,
+        );
 
-      canvas.drawLine(Offset(x, y), Offset(x, y + cellSize), borderPaint);
-      canvas.drawLine(
-          Offset(x + cellSize, y), Offset(x + cellSize, y + cellSize), borderPaint);
+        canvas.drawLine(Offset(x, y), Offset(x, y + cellSize), borderPaint);
+        canvas.drawLine(Offset(x + cellSize, y), Offset(x + cellSize, y + cellSize),
+            borderPaint);
+      }
     }
   }
 
@@ -80,5 +96,6 @@ class OccupancyPainter extends CustomPainter {
   }
 
   @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+  bool shouldRepaint(covariant OccupancyPainter oldDelegate) =>
+      oldDelegate.hoveredItem != hoveredItem;
 }

lib/pages/analytics/params/get_energy_consumption_by_phases_param.dart

@@ -1,24 +1,20 @@
 import 'package:equatable/equatable.dart';
 
 class GetEnergyConsumptionByPhasesParam extends Equatable {
-  final DateTime? startDate;
-  final DateTime? endDate;
-  final String? spaceId;
+  final String powerClampUuid;
+  final DateTime? date;
 
   const GetEnergyConsumptionByPhasesParam({
-    this.startDate,
-    this.endDate,
-    this.spaceId,
+    required this.powerClampUuid,
+    this.date,
   });
 
   Map<String, dynamic> toJson() {
     return {
-      'startDate': startDate?.toIso8601String(),
-      'endDate': endDate?.toIso8601String(),
-      'spaceId': spaceId,
+      'monthDate': '${date?.year}-${date?.month.toString().padLeft(2, '0')}',
     };
   }
 
   @override
-  List<Object?> get props => [startDate, endDate, spaceId];
+  List<Object?> get props => [powerClampUuid, date];
 }

lib/pages/analytics/params/get_energy_consumption_per_device_param.dart

@@ -1,3 +1,19 @@
 class GetEnergyConsumptionPerDeviceParam {
-  const GetEnergyConsumptionPerDeviceParam();
+  const GetEnergyConsumptionPerDeviceParam({
+    this.monthDate,
+    this.spaceId,
+    this.communityId,
+  });
+
+  final DateTime? monthDate;
+  final String? spaceId;
+  final String? communityId;
+
+  Map<String, dynamic> toJson() => {
+        'monthDate':
+            '${monthDate?.year}-${monthDate?.month.toString().padLeft(2, '0')}',
+        if (spaceId == null || spaceId == null) 'spaceUuid': spaceId,
+        'communityUuid': communityId,
+        'groupByDevice': true,
+      };
 }

lib/pages/analytics/params/get_total_energy_consumption_param.dart

@@ -13,7 +13,7 @@ class GetTotalEnergyConsumptionParam {
     return {
       'monthDate':
           '${monthDate?.year}-${monthDate?.month.toString().padLeft(2, '0')}',
-      if (communityId == null || communityId!.isEmpty) 'spaceUuid': spaceId,
+      if (spaceId == null || spaceId == null) 'spaceUuid': spaceId,
       'communityUuid': communityId,
       'groupByDevice': false,
     };

lib/pages/analytics/services/analytics_devices/remote_occupancy_analytics_devices_service.dart

@@ -39,7 +39,6 @@ class RemoteOccupancyAnalyticsDevicesService implements AnalyticsDevicesService
         path:
             '/projects/$projectUuid/communities/${param.communityUuid}/spaces/${param.spaceUuid}/devices',
         queryParameters: {
-          'requestType': param.requestType.name,
           'communityUuid': param.communityUuid,
           'spaceUuid': param.spaceUuid,
           'productType': param.deviceTypes.first,

lib/pages/analytics/services/energy_consumption_by_phases/fake_energy_consumption_by_phases_service.dart

@@ -1,29 +0,0 @@
-import 'package:syncrow_web/pages/analytics/models/phases_energy_consumption.dart';
-import 'package:syncrow_web/pages/analytics/params/get_energy_consumption_by_phases_param.dart';
-import 'package:syncrow_web/pages/analytics/services/energy_consumption_by_phases/energy_consumption_by_phases_service.dart';
-
-class FakeEnergyConsumptionByPhasesService
-    implements EnergyConsumptionByPhasesService {
-  @override
-  Future<List<PhasesEnergyConsumption>> load(
-    GetEnergyConsumptionByPhasesParam param,
-  ) {
-    return Future.delayed(
-      const Duration(milliseconds: 500),
-      () => const [
-        PhasesEnergyConsumption(month: 1, phaseA: 200, phaseB: 300, phaseC: 400),
-        PhasesEnergyConsumption(month: 2, phaseA: 300, phaseB: 400, phaseC: 500),
-        PhasesEnergyConsumption(month: 3, phaseA: 400, phaseB: 500, phaseC: 600),
-        PhasesEnergyConsumption(month: 4, phaseA: 100, phaseB: 100, phaseC: 100),
-        PhasesEnergyConsumption(month: 5, phaseA: 300, phaseB: 400, phaseC: 500),
-        PhasesEnergyConsumption(month: 6, phaseA: 300, phaseB: 100, phaseC: 400),
-        PhasesEnergyConsumption(month: 7, phaseA: 300, phaseB: 100, phaseC: 400),
-        PhasesEnergyConsumption(month: 8, phaseA: 500, phaseB: 100, phaseC: 100),
-        PhasesEnergyConsumption(month: 9, phaseA: 500, phaseB: 100, phaseC: 200),
-        PhasesEnergyConsumption(month: 10, phaseA: 100, phaseB: 50, phaseC: 50),
-        PhasesEnergyConsumption(month: 11, phaseA: 600, phaseB: 750, phaseC: 130),
-        PhasesEnergyConsumption(month: 12, phaseA: 100, phaseB: 100, phaseC: 100),
-      ],
-    );
-  }
-}

lib/pages/analytics/services/energy_consumption_by_phases/remote_energy_consumption_by_phases_service.dart

@@ -15,8 +15,9 @@ final class RemoteEnergyConsumptionByPhasesService
   ) async {
     try {
       final response = await _httpService.get(
-        path: 'endpoint',
+        path: '/power-clamp/${param.powerClampUuid}/historical',
         showServerMessage: true,
+        queryParameters: param.toJson(),
         expectedResponseModel: (data) {
           final json = data as Map<String, dynamic>? ?? {};
           final mappedData = json['data'] as List<dynamic>? ?? [];
@@ -28,7 +29,7 @@ final class RemoteEnergyConsumptionByPhasesService
       );
       return response;
     } catch (e) {
-      throw Exception('Failed to load energy consumption per device: $e');
+      throw Exception('Failed to load energy consumption per phase: $e');
     }
   }
 }

lib/pages/analytics/services/energy_consumption_per_device/remote_energy_consumption_per_device_service.dart

@@ -1,4 +1,6 @@
+import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
+import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
 import 'package:syncrow_web/pages/analytics/params/get_energy_consumption_per_device_param.dart';
 import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/energy_consumption_per_device_service.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
@@ -15,16 +17,10 @@ class RemoteEnergyConsumptionPerDeviceService
   ) async {
     try {
       final response = await _httpService.get(
-        path: 'endpoint',
+        path: '/power-clamp/historical',
         showServerMessage: true,
-        expectedResponseModel: (data) {
-          final json = data as Map<String, dynamic>? ?? {};
-          final mappedData = json['data'] as List<dynamic>? ?? [];
-          return mappedData.map((e) {
-            final jsonData = e as Map<String, dynamic>;
-            return DeviceEnergyDataModel.fromJson(jsonData);
-          }).toList();
-        },
+        queryParameters: param.toJson(),
+        expectedResponseModel: _EnergyConsumptionPerDeviceMapper.map,
       );
       return response;
     } catch (e) {
@@ -32,3 +28,33 @@ class RemoteEnergyConsumptionPerDeviceService
     }
   }
 }
+
+abstract final class _EnergyConsumptionPerDeviceMapper {
+  const _EnergyConsumptionPerDeviceMapper._();
+  static List<DeviceEnergyDataModel> map(dynamic data) {
+    final json = data as Map<String, dynamic>? ?? {};
+    final mappedData = json['data'] as List<dynamic>? ?? [];
+    return mappedData.where((e) {
+      final deviceData = (e as Map<String, dynamic>)['data'] as List<dynamic>? ?? [];
+      return deviceData.isNotEmpty;
+    }).map((e) {
+      final deviceData = e as Map<String, dynamic>;
+      final energyData = deviceData['data'] as List<dynamic>;
+
+      return DeviceEnergyDataModel(
+        deviceId: deviceData['deviceUuid'] as String,
+        deviceName: deviceData['deviceName'] as String,
+        color: Color((DateTime.now().microsecondsSinceEpoch +
+                deviceData['deviceUuid'].hashCode) |
+            0xFF000000),
+        energy: energyData.map((data) {
+          final energyJson = data as Map<String, dynamic>;
+          return EnergyDataModel(
+            date: DateTime.parse(energyJson['date'] as String),
+            value: double.parse(energyJson['total_energy_consumed_kw'] as String),
+          );
+        }).toList(),
+      );
+    }).toList();
+  }
+}