SP-1580-FE-Watermark-Does-Not-Match-Design-Specification

Sp 1475 fe only the arrow button is clickable make the whole name clickable with the arrow

.gitignore

@@ -30,6 +30,7 @@ migrate_working_dir/
 .pub-cache/
 .pub/
 /build/
+pubspec.lock
 
 # Symbolication related
 app.*.symbols

analysis_options.yaml

@@ -10,6 +10,7 @@
 analyzer:
   errors:
     constant_identifier_names: ignore
+    overridden_fields: ignore
 include: package:flutter_lints/flutter.yaml
 
 linter:
@@ -26,6 +27,7 @@ linter:
   rules:
     # avoid_print: false  # Uncomment to disable the `avoid_print` rule
     # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+    prefer_const_constructors: true
 
 # Additional information about this file can be found at
 # https://dart.dev/guides/language/analysis-options

assets/icons/blank_calendar.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.25 2.1875H14.6875V1.875C14.6875 1.62636 14.5887 1.3879 14.4129 1.21209C14.2371 1.03627 13.9986 0.9375 13.75 0.9375C13.5014 0.9375 13.2629 1.03627 13.0871 1.21209C12.9113 1.3879 12.8125 1.62636 12.8125 1.875V2.1875H7.1875V1.875C7.1875 1.62636 7.08873 1.3879 6.91291 1.21209C6.7371 1.03627 6.49864 0.9375 6.25 0.9375C6.00136 0.9375 5.7629 1.03627 5.58709 1.21209C5.41127 1.3879 5.3125 1.62636 5.3125 1.875V2.1875H3.75C3.3356 2.1875 2.93817 2.35212 2.64515 2.64515C2.35212 2.93817 2.1875 3.3356 2.1875 3.75V16.25C2.1875 16.6644 2.35212 17.0618 2.64515 17.3549C2.93817 17.6479 3.3356 17.8125 3.75 17.8125H16.25C16.6644 17.8125 17.0618 17.6479 17.3549 17.3549C17.6479 17.0618 17.8125 16.6644 17.8125 16.25V3.75C17.8125 3.3356 17.6479 2.93817 17.3549 2.64515C17.0618 2.35212 16.6644 2.1875 16.25 2.1875ZM5.3125 4.0625C5.3125 4.31114 5.41127 4.5496 5.58709 4.72541C5.7629 4.90123 6.00136 5 6.25 5C6.49864 5 6.7371 4.90123 6.91291 4.72541C7.08873 4.5496 7.1875 4.31114 7.1875 4.0625H12.8125C12.8125 4.31114 12.9113 4.5496 13.0871 4.72541C13.2629 4.90123 13.5014 5 13.75 5C13.9986 5 14.2371 4.90123 14.4129 4.72541C14.5887 4.5496 14.6875 4.31114 14.6875 4.0625H15.9375V5.9375H4.0625V4.0625H5.3125ZM4.0625 15.9375V7.8125H15.9375V15.9375H4.0625Z" fill="#475569"/>
+</svg>

assets/icons/refresh_status_icon.svg

@@ -0,0 +1,12 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7305_15779)">
+<path d="M17.0872 11.5142C17.0872 13.2025 16.427 14.8021 15.2211 15.9954C14.0278 17.2014 12.4283 17.8615 10.7399 17.8615C9.05141 17.8615 7.45185 17.2014 6.25856 15.9954C5.05262 14.8021 4.39249 13.2025 4.39249 11.5142C4.39249 9.82574 5.05266 8.22618 6.25856 7.03289C7.45185 5.8269 9.05141 5.16681 10.7399 5.16681C11.8063 5.16681 12.8471 5.43337 13.7866 5.95388L11.2984 8.97523H21.0861L18.6486 0L16.2113 2.97053C14.5737 1.91691 12.6948 1.35835 10.7398 1.35835C8.02314 1.35835 5.47142 2.41197 3.55459 4.32888C1.63765 6.24578 0.583984 8.79747 0.583984 11.5142C0.583984 14.2309 1.63765 16.7825 3.55459 18.6994C5.47146 20.6163 8.0231 21.67 10.7398 21.67C13.4565 21.67 16.0082 20.6163 17.925 18.6994C19.8419 16.7825 20.8956 14.2309 20.8956 11.5142V10.8794H17.0872V11.5142Z" fill="#77DD00"/>
+<path d="M17.0876 10.8799H20.8961V11.5146C20.8961 14.2313 19.8424 16.7829 17.9254 18.6998C16.0086 20.6168 13.4569 21.6704 10.7402 21.6704V17.862C12.4287 17.862 14.0282 17.2019 15.2215 15.9959C16.4275 14.8026 17.0876 13.203 17.0876 11.5147V10.8799H17.0876Z" fill="#66BB00"/>
+<path d="M13.787 5.95388C12.8475 5.43333 11.8066 5.16681 10.7402 5.16681V1.35835C12.6952 1.35835 14.5741 1.91691 16.2117 2.97057L18.6491 0L21.0866 8.97523H11.2989L13.787 5.95388Z" fill="#66BB00"/>
+</g>
+<defs>
+<clipPath id="clip0_7305_15779">
+<rect width="21.67" height="21.67" fill="white"/>
+</clipPath>
+</defs>
+</svg>

lib/pages/analytics/helpers/dashed_border_painter.dart

@@ -0,0 +1,56 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+class DashedBorderPainter extends CustomPainter {
+  final double dashWidth;
+  final double dashSpace;
+  final Color color;
+
+  DashedBorderPainter({
+    this.dashWidth = 4.0,
+    this.dashSpace = 2.0,
+    this.color = Colors.black,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = color
+      ..strokeWidth = 0.5
+      ..style = PaintingStyle.stroke;
+
+    final Path topPath = Path()
+      ..moveTo(0, 0)
+      ..lineTo(size.width, 0);
+
+    final Path bottomPath = Path()
+      ..moveTo(0, size.height)
+      ..lineTo(size.width, size.height);
+
+    final dashedTopPath = _createDashedPath(topPath, dashWidth, dashSpace);
+    final dashedBottomPath = _createDashedPath(bottomPath, dashWidth, dashSpace);
+
+    canvas.drawPath(dashedTopPath, paint);
+    canvas.drawPath(dashedBottomPath, paint);
+  }
+
+  Path _createDashedPath(Path source, double dashWidth, double dashSpace) {
+    final Path dashedPath = Path();
+    for (PathMetric pathMetric in source.computeMetrics()) {
+      double distance = 0.0;
+      while (distance < pathMetric.length) {
+        final double nextDistance = distance + dashWidth;
+        dashedPath.addPath(
+          pathMetric.extractPath(distance, nextDistance),
+          Offset.zero,
+        );
+        distance = nextDistance + dashSpace;
+      }
+    }
+    return dashedPath;
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}

lib/pages/analytics/helpers/format_number_to_kwh.dart

@@ -0,0 +1,6 @@
+extension FormatNumberToKwh on num {
+  String get formatNumberToKwh {
+    final regExp = RegExp(r'(\d)(?=(\d{3})+$)');
+    return '${toStringAsFixed(0).replaceAllMapped(regExp, (match) => '${match[1]},')} kWh';
+  }
+}

lib/pages/analytics/helpers/get_month_name_from_int.dart

@@ -0,0 +1,19 @@
+extension GetMonthNameFromNumber on num {
+  String get getMonthName {
+    return switch (this) {
+      1 => 'JAN',
+      2 => 'FEB',
+      3 => 'MAR',
+      4 => 'APR',
+      5 => 'MAY',
+      6 => 'JUN',
+      7 => 'JUL',
+      8 => 'AUG',
+      9 => 'SEP',
+      10 => 'OCT',
+      11 => 'NOV',
+      12 => 'DEC',
+      _ => 'N/A'
+    };
+  }
+}

lib/pages/analytics/models/analytics_device.dart

@@ -0,0 +1,71 @@
+class AnalyticsDevice {
+  const AnalyticsDevice({
+    required this.uuid,
+    required this.name,
+    this.createdAt,
+    this.updatedAt,
+    this.deviceTuyaUuid,
+    this.isActive,
+    this.productDevice,
+    this.spaceUuid,
+  });
+
+  final String uuid;
+  final String name;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+  final String? deviceTuyaUuid;
+  final bool? isActive;
+  final ProductDevice? productDevice;
+  final String? spaceUuid;
+
+  factory AnalyticsDevice.fromJson(Map<String, dynamic> json) {
+    return AnalyticsDevice(
+      uuid: json['uuid'] as String,
+      name: json['name'] as String,
+      createdAt: json['createdAt'] != null ? DateTime.parse(json['createdAt'] as String) : null,
+      updatedAt: json['updatedAt'] != null ? DateTime.parse(json['updatedAt'] as String) : null,
+      deviceTuyaUuid: json['deviceTuyaUuid'] as String?,
+      isActive: json['isActive'] as bool?,
+      productDevice: json['productDevice'] != null 
+        ? ProductDevice.fromJson(json['productDevice'] as Map<String, dynamic>) 
+        : null,
+      spaceUuid: (json['spaces'] as List<dynamic>?)
+          ?.map((e) => e['uuid'])
+          .firstOrNull
+          ?.toString(),
+    );
+  }
+}
+
+class ProductDevice {
+  const ProductDevice({
+    this.uuid,
+    this.createdAt,
+    this.updatedAt,
+    this.catName,
+    this.prodId,
+    this.name,
+    this.prodType,
+  });
+
+  final String? uuid;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+  final String? catName;
+  final String? prodId;
+  final String? name;
+  final String? prodType;
+
+  factory ProductDevice.fromJson(Map<String, dynamic> json) {
+    return ProductDevice(
+      uuid: json['uuid'] as String?,
+      createdAt: json['createdAt'] != null ? DateTime.parse(json['createdAt'] as String) : null,
+      updatedAt: json['updatedAt'] != null ? DateTime.parse(json['updatedAt'] as String) : null,
+      catName: json['catName'] as String?,
+      prodId: json['prodId'] as String?,
+      name: json['name'] as String?,
+      prodType: json['prodType'] as String?,
+    );
+  }
+}

lib/pages/analytics/models/device_energy_data_model.dart

@@ -0,0 +1,32 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter/widgets.dart';
+import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
+
+class DeviceEnergyDataModel extends Equatable {
+  const DeviceEnergyDataModel({
+    required this.energy,
+    required this.deviceName,
+    required this.deviceId,
+    required this.color,
+  });
+
+  final List<EnergyDataModel> energy;
+  final String deviceName;
+  final String deviceId;
+  final Color color;
+
+  @override
+  List<Object?> get props => [energy, deviceName, deviceId];
+
+  factory DeviceEnergyDataModel.fromJson(Map<String, dynamic> json) {
+    final energy = (json['energy'] as List<dynamic>? ?? [])
+        .map((e) => EnergyDataModel.fromJson(e))
+        .toList();
+    return DeviceEnergyDataModel(
+      energy: energy,
+      deviceName: json['device_name'] as String? ?? '',
+      deviceId: json['device_id'] as String? ?? '',
+      color: Color(int.parse(json['color'] as String? ?? '0xFF000000')),
+    );
+  }
+}

lib/pages/analytics/models/energy_data_model.dart

@@ -0,0 +1,21 @@
+import 'package:equatable/equatable.dart';
+
+class EnergyDataModel extends Equatable {
+  const EnergyDataModel({
+    required this.date,
+    required this.value,
+  });
+
+  final DateTime date;
+  final double value;
+
+  factory EnergyDataModel.fromJson(Map<String, dynamic> json) {
+    return EnergyDataModel(
+      date: DateTime.parse(json['date'] as String),
+      value: (json['value'] as num).toDouble(),
+    );
+  }
+
+  @override
+  List<Object?> get props => [date, value];
+}

lib/pages/analytics/models/occupacy.dart

@@ -0,0 +1,18 @@
+import 'package:equatable/equatable.dart';
+
+class Occupacy extends Equatable {
+  final String date;
+  final String occupancy;
+
+  const Occupacy({required this.date, required this.occupancy});
+
+  factory Occupacy.fromJson(Map<String, dynamic> json) {
+    return Occupacy(
+      date: json['date'] as String,
+      occupancy: json['occupancy'] as String,
+    );
+  }
+
+  @override
+  List<Object?> get props => [date, occupancy];
+}

lib/pages/analytics/models/occupancy_heat_map_model.dart

@@ -0,0 +1,28 @@
+import 'package:equatable/equatable.dart';
+
+class OccupancyHeatMapModel extends Equatable {
+  final String uuid;
+
+  final DateTime eventDate;
+
+  final int countTotalPresenceDetected;
+
+  const OccupancyHeatMapModel({
+    required this.uuid,
+    required this.eventDate,
+    required this.countTotalPresenceDetected,
+  });
+
+  factory OccupancyHeatMapModel.fromJson(Map<String, dynamic> json) {
+    return OccupancyHeatMapModel(
+      uuid: json['uuid'] as String? ?? '',
+      eventDate: DateTime.parse(
+        json['event_date'] as String? ?? '${DateTime.now()}',
+      ),
+      countTotalPresenceDetected: json['count_total_presence_detected'] as int? ?? 0,
+    );
+  }
+
+  @override
+  List<Object?> get props => [uuid, eventDate, countTotalPresenceDetected];
+}

lib/pages/analytics/models/phases_energy_consumption.dart

@@ -0,0 +1,66 @@
+import 'package:equatable/equatable.dart';
+
+class PhasesEnergyConsumption extends Equatable {
+  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.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 => [
+        uuid,
+        createdAt,
+        updatedAt,
+        deviceUuid,
+        date,
+        energyConsumedKw,
+        energyConsumedA,
+        energyConsumedB,
+        energyConsumedC,
+      ];
+
+  factory PhasesEnergyConsumption.fromJson(Map<String, dynamic> json) {
+    return PhasesEnergyConsumption(
+      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/models/power_clamp_energy_status.dart

@@ -0,0 +1,13 @@
+class PowerClampEnergyStatus {
+  final String iconPath;
+  final String title;
+  final String value;
+  final String unit;
+
+  const PowerClampEnergyStatus({
+    required this.iconPath,
+    required this.title,
+    required this.value,
+    required this.unit,
+  });
+}

lib/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart

@@ -0,0 +1,24 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+
+part 'analytics_date_picker_event.dart';
+part 'analytics_date_picker_state.dart';
+
+class AnalyticsDatePickerBloc
+    extends Bloc<AnalyticsDatePickerEvent, AnalyticsDatePickerState> {
+  AnalyticsDatePickerBloc() : super(AnalyticsDatePickerState()) {
+    on<UpdateAnalyticsDatePickerEvent>(_onUpdateAnalyticsDatePickerEvent);
+  }
+
+  void _onUpdateAnalyticsDatePickerEvent(
+    UpdateAnalyticsDatePickerEvent event,
+    Emitter<AnalyticsDatePickerState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        monthlyDate: event.montlyDate ?? state.monthlyDate,
+        yearlyDate: event.yearlyDate ?? state.yearlyDate,
+      ),
+    );
+  }
+}

lib/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_event.dart

@@ -0,0 +1,18 @@
+part of 'analytics_date_picker_bloc.dart';
+
+sealed class AnalyticsDatePickerEvent extends Equatable {
+  const AnalyticsDatePickerEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+final class UpdateAnalyticsDatePickerEvent extends AnalyticsDatePickerEvent {
+  const UpdateAnalyticsDatePickerEvent({this.montlyDate, this.yearlyDate});
+
+  final DateTime? montlyDate;
+  final DateTime? yearlyDate;
+
+  @override
+  List<Object?> get props => [montlyDate, yearlyDate];
+}

lib/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_state.dart

@@ -0,0 +1,25 @@
+part of 'analytics_date_picker_bloc.dart';
+
+final class AnalyticsDatePickerState extends Equatable {
+  AnalyticsDatePickerState({
+    DateTime? monthlyDate,
+    DateTime? yearlyDate,
+  })  : monthlyDate = monthlyDate ?? DateTime.now(),
+        yearlyDate = yearlyDate ?? DateTime.now();
+
+  final DateTime monthlyDate;
+  final DateTime yearlyDate;
+
+  AnalyticsDatePickerState copyWith({
+    DateTime? monthlyDate,
+    DateTime? yearlyDate,
+  }) {
+    return AnalyticsDatePickerState(
+      monthlyDate: monthlyDate ?? this.monthlyDate,
+      yearlyDate: yearlyDate ?? this.yearlyDate,
+    );
+  }
+
+  @override
+  List<Object?> get props => [monthlyDate, yearlyDate];
+}

lib/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart

@@ -0,0 +1,69 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
+import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
+import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics_devices_service.dart';
+
+part 'analytics_devices_event.dart';
+part 'analytics_devices_state.dart';
+
+class AnalyticsDevicesBloc
+    extends Bloc<AnalyticsDevicesEvent, AnalyticsDevicesState> {
+  AnalyticsDevicesBloc(
+    this._analyticsDevicesService,
+  ) : super(const AnalyticsDevicesState()) {
+    on<LoadAnalyticsDevicesEvent>(_onLoadAnalyticsDevices);
+    on<SelectAnalyticsDeviceEvent>(_onSelectAnalyticsDevice);
+    on<ClearAnalyticsDeviceEvent>(_onClearAnalyticsDevice);
+  }
+  final AnalyticsDevicesService _analyticsDevicesService;
+
+  Future<void> _onLoadAnalyticsDevices(
+    LoadAnalyticsDevicesEvent event,
+    Emitter<AnalyticsDevicesState> emit,
+  ) async {
+    emit(const AnalyticsDevicesState(status: AnalyticsDevicesStatus.loading));
+
+    try {
+      final devices = await _analyticsDevicesService.getDevices(event.param);
+      emit(
+        AnalyticsDevicesState(
+          status: AnalyticsDevicesStatus.loaded,
+          devices: devices,
+          selectedDevice: devices.firstOrNull,
+        ),
+      );
+      if (devices.isNotEmpty) {
+        event.onSuccess(devices.first);
+      }
+    } catch (e) {
+      emit(
+        AnalyticsDevicesState(
+          status: AnalyticsDevicesStatus.failure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  void _onSelectAnalyticsDevice(
+    SelectAnalyticsDeviceEvent event,
+    Emitter<AnalyticsDevicesState> emit,
+  ) {
+    emit(
+      AnalyticsDevicesState(
+        selectedDevice: event.device,
+        devices: state.devices,
+        errorMessage: state.errorMessage,
+        status: state.status,
+      ),
+    );
+  }
+
+  void _onClearAnalyticsDevice(
+    ClearAnalyticsDeviceEvent event,
+    Emitter<AnalyticsDevicesState> emit,
+  ) {
+    emit(const AnalyticsDevicesState());
+  }
+}

lib/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_event.dart

@@ -0,0 +1,31 @@
+part of 'analytics_devices_bloc.dart';
+
+sealed class AnalyticsDevicesEvent extends Equatable {
+  const AnalyticsDevicesEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class LoadAnalyticsDevicesEvent extends AnalyticsDevicesEvent {
+  const LoadAnalyticsDevicesEvent({required this.param, required this.onSuccess});
+
+  final GetAnalyticsDevicesParam param;
+  final void Function(AnalyticsDevice device) onSuccess;
+
+  @override
+  List<Object> get props => [param];
+}
+
+final class SelectAnalyticsDeviceEvent extends AnalyticsDevicesEvent {
+  const SelectAnalyticsDeviceEvent(this.device);
+
+  final AnalyticsDevice device;
+
+  @override
+  List<Object> get props => [device];
+}
+
+final class ClearAnalyticsDeviceEvent extends AnalyticsDevicesEvent {
+  const ClearAnalyticsDeviceEvent();
+}

lib/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_state.dart

@@ -0,0 +1,20 @@
+part of 'analytics_devices_bloc.dart';
+
+enum AnalyticsDevicesStatus { initial, loading, loaded, failure }
+
+final class AnalyticsDevicesState extends Equatable {
+  const AnalyticsDevicesState({
+    this.status = AnalyticsDevicesStatus.initial,
+    this.devices = const [],
+    this.errorMessage,
+    this.selectedDevice,
+  });
+
+  final AnalyticsDevicesStatus status;
+  final List<AnalyticsDevice> devices;
+  final AnalyticsDevice? selectedDevice;
+  final String? errorMessage;
+
+  @override
+  List<Object?> get props => [status, devices, errorMessage, selectedDevice];
+}

lib/pages/analytics/modules/analytics/blocs/analytics_tab/analytics_tab_bloc.dart

@@ -0,0 +1,18 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/enums/analytics_page_tab.dart';
+
+part 'analytics_tab_event.dart';
+
+class AnalyticsTabBloc extends Bloc<AnalyticsTabEvent, AnalyticsPageTab> {
+  AnalyticsTabBloc() : super(AnalyticsPageTab.energyManagement) {
+    on<UpdateAnalyticsTabEvent>(_onUpdateAnalyticsTabEvent);
+  }
+
+  void _onUpdateAnalyticsTabEvent(
+    UpdateAnalyticsTabEvent event,
+    Emitter<AnalyticsPageTab> emit,
+  ) {
+    emit(event.analyticsTab);
+  }
+}

lib/pages/analytics/modules/analytics/blocs/analytics_tab/analytics_tab_event.dart

@@ -0,0 +1,17 @@
+part of 'analytics_tab_bloc.dart';
+
+sealed class AnalyticsTabEvent extends Equatable {
+  const AnalyticsTabEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class UpdateAnalyticsTabEvent extends AnalyticsTabEvent { 
+  const UpdateAnalyticsTabEvent(this.analyticsTab);
+
+  final AnalyticsPageTab analyticsTab;
+
+  @override
+  List<Object> get props => [analyticsTab];
+}

lib/pages/analytics/modules/analytics/enums/analytics_page_tab.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/views/analytics_occupancy_view.dart';
+
+enum AnalyticsPageTab {
+  energyManagement(
+    title: 'Energy Management',
+    child: AnalyticsEnergyManagementView(),
+  ),
+  occupancy(
+    title: 'Occupancy',
+    child: AnalyticsOccupancyView(),
+  );
+
+  const AnalyticsPageTab({
+    required this.title,
+    required this.child,
+  });
+
+  final Widget child;
+  final String title;
+}

lib/pages/analytics/modules/analytics/strategies/analytics_data_loading_strategy.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
+
+abstract class AnalyticsDataLoadingStrategy {
+  void onCommunitySelected(
+    BuildContext context,
+    CommunityModel community,
+    List<SpaceModel> spaces,
+  );
+  void onSpaceSelected(
+    BuildContext context,
+    CommunityModel community,
+    SpaceModel space,
+  );
+  void onChildSpaceSelected(
+    BuildContext context,
+    CommunityModel community,
+    SpaceModel child,
+  );
+  void clearData(BuildContext context);
+}

lib/pages/analytics/modules/analytics/strategies/analytics_data_loading_strategy_factory.dart

@@ -0,0 +1,14 @@
+import 'package:syncrow_web/pages/analytics/modules/analytics/enums/analytics_page_tab.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/strategies/analytics_data_loading_strategy.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/strategies/energy_management_data_loading_strategy.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/strategies/occupancy_data_loading_strategy.dart';
+
+abstract final class AnalyticsDataLoadingStrategyFactory {
+  const AnalyticsDataLoadingStrategyFactory._();
+  static AnalyticsDataLoadingStrategy getStrategy(AnalyticsPageTab tab) {
+    return switch (tab) {
+      AnalyticsPageTab.energyManagement => EnergyManagementDataLoadingStrategy(),
+      AnalyticsPageTab.occupancy => OccupancyDataLoadingStrategy(),
+    };
+  }
+}

lib/pages/analytics/modules/analytics/strategies/energy_management_data_loading_strategy.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/strategies/analytics_data_loading_strategy.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
+
+class EnergyManagementDataLoadingStrategy implements AnalyticsDataLoadingStrategy {
+  @override
+  void onCommunitySelected(
+    BuildContext context,
+    CommunityModel community,
+    List<SpaceModel> spaces,
+  ) {
+    // Add to space tree bloc first
+    context.read<SpaceTreeBloc>().add(
+          OnCommunitySelected(
+            community.uuid,
+            spaces,
+          ),
+        );
+
+    final spaceTreeState = context.read<SpaceTreeBloc>().state;
+    if (spaceTreeState.selectedCommunities.contains(community.uuid)) {
+      clearData(context);
+      return;
+    }
+
+    FetchEnergyManagementDataHelper.loadEnergyManagementData(
+      context,
+      communityId: community.uuid,
+      spaceId: spaces.isNotEmpty ? spaces.first.uuid ?? '' : '',
+    );
+  }
+
+  @override
+  void onSpaceSelected(
+    BuildContext context,
+    CommunityModel community,
+    SpaceModel space,
+  ) {
+    context.read<SpaceTreeBloc>().add(
+          OnSpaceSelected(
+            community,
+            space.uuid ?? '',
+            space.children,
+          ),
+        );
+
+    final spaceTreeState = context.read<SpaceTreeBloc>().state;
+    if (spaceTreeState.selectedCommunities.contains(community.uuid) ||
+        spaceTreeState.selectedSpaces.contains(space.uuid)) {
+      clearData(context);
+      return;
+    }
+
+    FetchEnergyManagementDataHelper.loadEnergyManagementData(
+      context,
+      communityId: community.uuid,
+      spaceId: space.uuid ?? '',
+    );
+  }
+
+  @override
+  void onChildSpaceSelected(
+    BuildContext context,
+    CommunityModel community,
+    SpaceModel child,
+  ) {
+    // Do nothing else as per original implementation
+  }
+
+  @override
+  void clearData(BuildContext context) {
+    context.read<SpaceTreeBloc>().add(const SpaceTreeClearSelectionEvent());
+    FetchEnergyManagementDataHelper.clearAllData(context);
+  }
+}

lib/pages/analytics/modules/analytics/strategies/occupancy_data_loading_strategy.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/strategies/analytics_data_loading_strategy.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/helpers/fetch_occupancy_data_helper.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
+
+class OccupancyDataLoadingStrategy implements AnalyticsDataLoadingStrategy {
+  @override
+  void onCommunitySelected(
+    BuildContext context,
+    CommunityModel community,
+    List<SpaceModel> spaces,
+  ) {
+    context.read<SpaceTreeBloc>().add(
+          OnCommunitySelected(
+            community.uuid,
+            spaces.isNotEmpty ? [spaces.first] : [],
+          ),
+        );
+
+    final spaceTreeState = context.read<SpaceTreeBloc>().state;
+    if (spaceTreeState.selectedCommunities.contains(community.uuid)) {
+      clearData(context);
+      return;
+    }
+    FetchOccupancyDataHelper.loadOccupancyData(
+      context,
+      communityId: community.uuid,
+      spaceId: spaces.isNotEmpty ? spaces.first.uuid ?? '' : '',
+    );
+  }
+
+  @override
+  void onSpaceSelected(
+    BuildContext context,
+    CommunityModel community,
+    SpaceModel space,
+  ) {
+    final spaceTreeBloc = context.read<SpaceTreeBloc>();
+    final selectedSpacesIds = spaceTreeBloc.state.selectedSpaces;
+    final isSpaceSelected = selectedSpacesIds.contains(space.uuid);
+
+    if (selectedSpacesIds.isEmpty) {
+      spaceTreeBloc.add(OnCommunitySelected(community.uuid, [space]));
+    } else if (isSpaceSelected) {
+      spaceTreeBloc.add(const SpaceTreeClearSelectionEvent());
+    } else {
+      spaceTreeBloc
+        ..add(const SpaceTreeClearSelectionEvent())
+        ..add(OnSpaceSelected(community, space.uuid ?? '', []));
+    }
+
+    final spaceTreeState = context.read<SpaceTreeBloc>().state;
+    if (spaceTreeState.selectedCommunities.contains(community.uuid) ||
+        spaceTreeState.selectedSpaces.contains(space.uuid)) {
+      clearData(context);
+      return;
+    }
+
+    FetchOccupancyDataHelper.loadOccupancyData(
+      context,
+      communityId: community.uuid,
+      spaceId: space.uuid ?? '',
+    );
+  }
+
+  @override
+  void onChildSpaceSelected(
+    BuildContext context,
+    CommunityModel community,
+    SpaceModel child,
+  ) {
+    // Do nothing
+  }
+
+  @override
+  void clearData(BuildContext context) {
+    context.read<SpaceTreeBloc>().add(const SpaceTreeClearSelectionEvent());
+    FetchOccupancyDataHelper.clearAllData(context);
+  }
+}

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

@@ -0,0 +1,119 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.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/analytics/blocs/analytics_tab/analytics_tab_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/analytics_communities_sidebar.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/analytics_page_tabs_and_children.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/energy_consumption_by_phases/energy_consumption_by_phases_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/energy_consumption_per_device/energy_consumption_per_device_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';
+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/occupancy/blocs/occupancy/occupancy_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_bloc.dart';
+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/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';
+import 'package:syncrow_web/pages/analytics/services/realtime_device_service/firebase_realtime_device_service.dart';
+import 'package:syncrow_web/pages/analytics/services/total_energy_consumption/remote_total_energy_consumption_service.dart';
+import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
+import 'package:syncrow_web/web_layout/web_scaffold.dart';
+
+class AnalyticsPage extends StatefulWidget {
+  const AnalyticsPage({super.key});
+
+  @override
+  State<AnalyticsPage> createState() => _AnalyticsPageState();
+}
+
+class _AnalyticsPageState extends State<AnalyticsPage> {
+  late final HTTPService _httpService;
+
+  @override
+  void initState() {
+    super.initState();
+    _httpService = HTTPService();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider<AnalyticsTabBloc>(
+          create: (context) => AnalyticsTabBloc(),
+        ),
+        BlocProvider(
+          create: (context) => TotalEnergyConsumptionBloc(
+            RemoteTotalEnergyConsumptionService(_httpService),
+          ),
+        ),
+        BlocProvider(
+          create: (context) => EnergyConsumptionByPhasesBloc(
+            RemoteEnergyConsumptionByPhasesService(_httpService),
+          ),
+        ),
+        BlocProvider(
+          create: (context) => EnergyConsumptionPerDeviceBloc(
+            RemoteEnergyConsumptionPerDeviceService(_httpService),
+          ),
+        ),
+        BlocProvider(
+          create: (context) => PowerClampInfoBloc(
+            RemotePowerClampInfoService(_httpService),
+          ),
+        ),
+        BlocProvider<RealtimeDeviceChangesBloc>(
+          create: (context) => RealtimeDeviceChangesBloc(
+            FirebaseRealtimeDeviceService(),
+          ),
+        ),
+        BlocProvider(create: (context) => OccupancyBloc(FakeOccupacyService())),
+        BlocProvider(
+          create: (context) => OccupancyHeatMapBloc(
+            RemoteOccupancyHeatMapService(_httpService),
+          ),
+        ),
+        BlocProvider(create: (context) => AnalyticsDatePickerBloc()),
+        BlocProvider(
+          create: (context) => AnalyticsDevicesBloc(
+            AnalyticsDevicesServiceDelegate(
+              RemoteOccupancyAnalyticsDevicesService(_httpService),
+              RemoteEnergyManagementAnalyticsDevicesService(_httpService),
+            ),
+          ),
+        ),
+      ],
+      child: const AnalyticsPageForm(),
+    );
+  }
+}
+
+class AnalyticsPageForm extends StatelessWidget {
+  const AnalyticsPageForm({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return WebScaffold(
+      rightBody: const NavigateHomeGridView(),
+      appBarTitle: Text(
+        'Syncrow Analytics',
+        style: ResponsiveTextTheme.of(context).deviceManagementTitle,
+      ),
+      enableMenuSidebar: false,
+      scaffoldBody: const Row(
+        children: [
+          AnalyticsCommunitiesSidebar(),
+          Expanded(flex: 5, child: AnalyticsPageTabsAndChildren()),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_tab/analytics_tab_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/strategies/analytics_data_loading_strategy_factory.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/sidebar/analytics_space_tree_view.dart';
+
+class AnalyticsCommunitiesSidebar extends StatelessWidget {
+  const AnalyticsCommunitiesSidebar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedTab = context.watch<AnalyticsTabBloc>().state;
+    final strategy = AnalyticsDataLoadingStrategyFactory.getStrategy(selectedTab);
+
+    return Expanded(
+      child: AnalyticsSpaceTreeView(
+        onSelectCommunity: (community, spaces) {
+          strategy.onCommunitySelected(context, community, spaces);
+        },
+        onSelectSpace: (community, space) {
+          strategy.onSpaceSelected(context, community, space);
+        },
+        onSelectChildSpace: (community, child) {
+          strategy.onChildSpaceSelected(context, community, child);
+        },
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/month_picker_widget.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/year_picker_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+enum DatePickerType { month, year }
+
+class AnalyticsDateFilterButton extends StatefulWidget {
+  const AnalyticsDateFilterButton({
+    required this.selectedDate,
+    required this.onDateSelected,
+    this.datePickerType = DatePickerType.month,
+    super.key,
+  });
+
+  final DateTime selectedDate;
+  final void Function(DateTime)? onDateSelected;
+  final DatePickerType datePickerType;
+
+  static final _color = ColorsManager.blackColor.withValues(alpha: 0.8);
+
+  @override
+  State<AnalyticsDateFilterButton> createState() =>
+      _AnalyticsDateFilterButtonState();
+}
+
+class _AnalyticsDateFilterButtonState extends State<AnalyticsDateFilterButton> {
+  @override
+  Widget build(BuildContext context) {
+    return TextButton.icon(
+      style: TextButton.styleFrom(
+        foregroundColor: AnalyticsDateFilterButton._color,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+          side: const BorderSide(
+            color: ColorsManager.greyColor,
+            width: 1,
+          ),
+        ),
+        backgroundColor: ColorsManager.transparentColor,
+        padding: const EdgeInsets.symmetric(
+          horizontal: 32,
+          vertical: 16,
+        ),
+      ),
+      icon: SvgPicture.asset(
+        Assets.blankCalendar,
+        height: 20,
+        width: 20,
+        colorFilter:
+            ColorFilter.mode(AnalyticsDateFilterButton._color, BlendMode.srcIn),
+      ),
+      label: Text(
+        _formatDate(widget.selectedDate),
+        style: const TextStyle(
+          fontWeight: FontWeight.w700,
+        ),
+      ),
+      onPressed: () {
+        showDialog(
+          context: context,
+          builder: (_) {
+            return switch (widget.datePickerType) {
+              DatePickerType.month => MonthPickerWidget(
+                  selectedDate: widget.selectedDate,
+                  onDateSelected: (value) {
+                    widget.onDateSelected?.call(value);
+                  },
+                ),
+              DatePickerType.year => YearPickerWidget(
+                  selectedDate: widget.selectedDate,
+                  onDateSelected: (value) {
+                    widget.onDateSelected?.call(value);
+                  },
+                ),
+            };
+          },
+        );
+      },
+    );
+  }
+
+  String _formatDate(DateTime? date) {
+    final formatterBasedOnDatePickerType = switch (widget.datePickerType) {
+      DatePickerType.month => DateFormat('MMMM yyyy'),
+      DatePickerType.year => DateFormat('yyyy'),
+    };
+    final formattedDate = formatterBasedOnDatePickerType.format(
+      date ?? DateTime.now(),
+    );
+    return formattedDate;
+  }
+}

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

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_tab/analytics_tab_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/enums/analytics_page_tab.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/strategies/analytics_data_loading_strategy_factory.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class AnalyticsPageTabButton extends StatelessWidget {
+  const AnalyticsPageTabButton({
+    super.key,
+    required this.tab,
+    required this.isSelected,
+  });
+
+  final AnalyticsPageTab tab;
+  final bool isSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      onPressed: () {
+        AnalyticsDataLoadingStrategyFactory.getStrategy(tab).clearData(context);
+        context.read<AnalyticsTabBloc>().add(
+            UpdateAnalyticsTabEvent(tab),
+          );
+      },
+      child: Text(
+        tab.title,
+        textAlign: TextAlign.center,
+        maxLines: 1,
+        softWrap: false,
+        overflow: TextOverflow.ellipsis,
+        style: TextStyle(
+          fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400,
+          fontSize: 16,
+          color:
+              isSelected ? ColorsManager.slidingBlueColor : ColorsManager.textGray,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.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_tab/analytics_tab_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/enums/analytics_page_tab.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/analytics_date_filter_button.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/analytics_page_tab_button.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class AnalyticsPageTabsAndChildren extends StatelessWidget {
+  const AnalyticsPageTabsAndChildren({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<AnalyticsTabBloc, AnalyticsPageTab>(
+      buildWhen: (previous, current) => previous != current,
+      builder: (context, selectedTab) => Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Expanded(
+            child: Container(
+              decoration: subSectionContainerDecoration,
+              padding: const EdgeInsets.symmetric(horizontal: 32),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Expanded(
+                    flex: 4,
+                    child: FittedBox(
+                      alignment: AlignmentDirectional.centerStart,
+                      fit: BoxFit.scaleDown,
+                      child: Row(
+                        spacing: 32,
+                        mainAxisSize: MainAxisSize.min,
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: [
+                          ...AnalyticsPageTab.values.map(
+                            (tab) => _buildAnimation(
+                              child: AnalyticsPageTabButton(
+                                key: ValueKey(selectedTab),
+                                tab: tab,
+                                isSelected: tab == selectedTab,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                  const Spacer(),
+                  Visibility(
+                    key: ValueKey(selectedTab),
+                    visible: selectedTab == AnalyticsPageTab.energyManagement,
+                    child: Expanded(
+                      flex: 2,
+                      child: FittedBox(
+                        fit: BoxFit.scaleDown,
+                        alignment: AlignmentDirectional.centerEnd,
+                        child: AnalyticsDateFilterButton(
+                          onDateSelected: (DateTime value) {
+                            context.read<AnalyticsDatePickerBloc>().add(
+                                  UpdateAnalyticsDatePickerEvent(montlyDate: value),
+                                );
+
+                            final spaceTreeState =
+                                context.read<SpaceTreeBloc>().state;
+                            if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                              FetchEnergyManagementDataHelper
+                                  .loadEnergyManagementData(
+                                context,
+                                shouldFetchAnalyticsDevices: false,
+                                selectedDate: value,
+                                communityId:
+                                    spaceTreeState.selectedCommunities.firstOrNull ??
+                                        '',
+                                spaceId:
+                                    spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              );
+                            }
+                          },
+                          selectedDate: context
+                              .watch<AnalyticsDatePickerBloc>()
+                              .state
+                              .monthlyDate,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          Expanded(
+            flex: 8,
+            child: _buildAnimation(child: selectedTab.child),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildAnimation({required Widget child}) {
+    return AnimatedSwitcher(
+      switchInCurve: Curves.easeIn,
+      duration: const Duration(milliseconds: 200),
+      child: child,
+    );
+  }
+}

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

@@ -0,0 +1,233 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class MonthPickerWidget extends StatefulWidget {
+  const MonthPickerWidget({
+    super.key,
+    required this.selectedDate,
+    required this.onDateSelected,
+  });
+
+  final DateTime selectedDate;
+  final ValueChanged<DateTime>? onDateSelected;
+
+  @override
+  State<MonthPickerWidget> createState() => _MonthPickerWidgetState();
+}
+
+class _MonthPickerWidgetState extends State<MonthPickerWidget> {
+  late int _currentYear;
+  int? _selectedMonth;
+
+  static const _monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  @override
+  void initState() {
+    super.initState();
+    _currentYear = widget.selectedDate.year;
+    _selectedMonth = widget.selectedDate.month - 1;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: ColorsManager.whiteColors,
+      child: Container(
+        padding: const EdgeInsetsDirectional.all(20),
+        width: 320,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _buildYearSelector(),
+            _buildMonthsGrid(),
+            const SizedBox(height: 20),
+            Row(
+              spacing: 12,
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                FilledButton(
+                  onPressed: () => Navigator.pop(context),
+                  style: FilledButton.styleFrom(
+                    fixedSize: const Size(106, 40),
+                    backgroundColor: const Color(0xFFEDF2F7),
+                    padding: const EdgeInsetsDirectional.symmetric(
+                      vertical: 10,
+                      horizontal: 16,
+                    ),
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(20),
+                    ),
+                  ),
+                  child: Text(
+                    'Cancel',
+                    style: context.textTheme.titleSmall?.copyWith(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                      color: ColorsManager.grey700,
+                    ),
+                  ),
+                ),
+                FilledButton(
+                  onPressed: () {
+                    Navigator.pop(context);
+                    final date = DateTime(
+                      _currentYear,
+                      _selectedMonth! + 1,
+                    );
+                    widget.onDateSelected?.call(date);
+                  },
+                  style: FilledButton.styleFrom(
+                    fixedSize: const Size(106, 40),
+                    backgroundColor: ColorsManager.vividBlue.withValues(
+                      alpha: 0.7,
+                    ),
+                    padding: const EdgeInsetsDirectional.symmetric(
+                      vertical: 10,
+                      horizontal: 16,
+                    ),
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(20),
+                    ),
+                  ),
+                  child: Text(
+                    'Done',
+                    style: context.textTheme.titleSmall?.copyWith(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                      color: ColorsManager.whiteColors,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Row _buildYearSelector() {
+    final currentYear = DateTime.now().year;
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text(
+          '$_currentYear',
+          style: context.textTheme.titleSmall?.copyWith(
+            fontSize: 14,
+            fontWeight: FontWeight.w500,
+            color: ColorsManager.grey700,
+          ),
+        ),
+        const Spacer(),
+        IconButton(
+          onPressed: () {
+            setState(() {
+              _currentYear = _currentYear - 1;
+            });
+          },
+          icon: const Icon(
+            Icons.chevron_left,
+            color: ColorsManager.grey700,
+          ),
+        ),
+        IconButton(
+          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: _currentYear < currentYear
+                ? ColorsManager.grey700
+                : ColorsManager.grey700.withValues(alpha: 0.3),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildMonthsGrid() {
+    final currentDate = DateTime.now();
+    final isCurrentYear = _currentYear == currentDate.year;
+
+    return GridView.builder(
+      shrinkWrap: true,
+      itemCount: 12,
+      physics: const NeverScrollableScrollPhysics(),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        childAspectRatio: 2.5,
+        mainAxisSpacing: 8,
+        mainAxisExtent: 30,
+      ),
+      itemBuilder: (context, index) {
+        final isSelected = _selectedMonth == index;
+        final isFutureMonth = isCurrentYear && index > currentDate.month - 1;
+
+        return InkWell(
+          onTap: isFutureMonth ? null : () => setState(() => _selectedMonth = index),
+          child: DecoratedBox(
+            decoration: BoxDecoration(
+              color: const Color(0xFFEDF2F7),
+              borderRadius: BorderRadius.only(
+                topLeft: index % 3 == 0 ? const Radius.circular(16) : Radius.zero,
+                bottomLeft: index % 3 == 0 ? const Radius.circular(16) : Radius.zero,
+                topRight: index % 3 == 2 ? const Radius.circular(16) : Radius.zero,
+                bottomRight:
+                    index % 3 == 2 ? const Radius.circular(16) : Radius.zero,
+              ),
+            ),
+            child: Container(
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                color: isSelected
+                    ? ColorsManager.vividBlue.withValues(alpha: 0.7)
+                    : isFutureMonth
+                        ? ColorsManager.grey700.withValues(alpha: 0.1)
+                        : const Color(0xFFEDF2F7),
+                borderRadius:
+                    isSelected ? BorderRadius.circular(15) : BorderRadius.zero,
+              ),
+              child: Text(
+                _monthNames[index],
+                style: context.textTheme.titleSmall?.copyWith(
+                  fontSize: 12,
+                  color: isSelected
+                      ? ColorsManager.whiteColors
+                      : isFutureMonth
+                          ? ColorsManager.blackColor.withValues(alpha: 0.3)
+                          : ColorsManager.blackColor.withValues(alpha: 0.8),
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/pages/analytics/modules/analytics/widgets/sidebar/analytics_space_tree_view.dart

@@ -0,0 +1,188 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/common/widgets/search_bar.dart';
+import 'package:syncrow_web/common/widgets/sidebar_communities_list.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
+import 'package:syncrow_web/pages/space_tree/view/custom_expansion.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AnalyticsSpaceTreeView extends StatefulWidget {
+  const AnalyticsSpaceTreeView({
+    super.key,
+    this.onSelectCommunity,
+    this.onSelectSpace,
+    this.onSelectChildSpace,
+  });
+
+  final void Function(
+    CommunityModel community,
+    List<SpaceModel> spaces,
+  )? onSelectCommunity;
+  final void Function(
+    CommunityModel community,
+    SpaceModel space,
+  )? onSelectSpace;
+  final void Function(
+    CommunityModel community,
+    SpaceModel child,
+  )? onSelectChildSpace;
+
+  @override
+  State<AnalyticsSpaceTreeView> createState() => _AnalyticsSpaceTreeViewState();
+}
+
+class _AnalyticsSpaceTreeViewState extends State<AnalyticsSpaceTreeView> {
+  late final ScrollController _scrollController;
+
+  @override
+  void initState() {
+    _scrollController = ScrollController();
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
+      final communities = state.searchQuery.isNotEmpty
+          ? state.filteredCommunity
+          : state.communityList;
+      return Container(
+        height: MediaQuery.sizeOf(context).height,
+        decoration: const BoxDecoration(color: ColorsManager.whiteColors),
+        child: state is SpaceTreeLoadingState
+            ? const Center(child: CircularProgressIndicator())
+            : Column(
+                children: [
+                  Container(
+                    alignment: AlignmentDirectional.centerStart,
+                    padding: const EdgeInsets.all(24),
+                    child: DefaultTextStyle(
+                      style: context.textTheme.titleMedium!.copyWith(
+                        color: ColorsManager.blackColor,
+                        fontSize: 20,
+                      ),
+                      child: const Text('Communities'),
+                    ),
+                  ),
+                  CustomSearchBar(
+                    onSearchChanged: (query) => context.read<SpaceTreeBloc>().add(
+                          SearchQueryEvent(query),
+                        ),
+                  ),
+                  const SizedBox(height: 16),
+                  Expanded(
+                    child: state.isSearching
+                        ? const Center(child: CircularProgressIndicator())
+                        : SidebarCommunitiesList(
+                            onScrollToEnd: () {
+                              if (!state.paginationIsLoading) {
+                                context.read<SpaceTreeBloc>().add(
+                                      PaginationEvent(
+                                        state.paginationModel,
+                                        state.communityList,
+                                      ),
+                                    );
+                              }
+                            },
+                            scrollController: _scrollController,
+                            communities: communities,
+                            itemBuilder: (context, index) {
+                              return CustomExpansionTileSpaceTree(
+                                title: communities[index].name,
+                                isSelected: state.selectedCommunities
+                                    .contains(communities[index].uuid),
+                                isSoldCheck: state.selectedCommunities
+                                    .contains(communities[index].uuid),
+                                onExpansionChanged: () =>
+                                    context.read<SpaceTreeBloc>().add(
+                                          OnCommunityExpanded(
+                                            communities[index].uuid,
+                                          ),
+                                        ),
+                                isExpanded: state.expandedCommunities.contains(
+                                  communities[index].uuid,
+                                ),
+                                onItemSelected: () => widget.onSelectCommunity?.call(
+                                  communities[index],
+                                  communities[index].spaces,
+                                ),
+                                children: communities[index].spaces.map(
+                                  (space) {
+                                    return CustomExpansionTileSpaceTree(
+                                      title: space.name,
+                                      isExpanded:
+                                          state.expandedSpaces.contains(space.uuid),
+                                      onItemSelected: () =>
+                                          widget.onSelectSpace?.call(
+                                        communities[index],
+                                        space,
+                                      ),
+                                      onExpansionChanged: () =>
+                                          context.read<SpaceTreeBloc>().add(
+                                                OnSpaceExpanded(
+                                                  communities[index].uuid,
+                                                  space.uuid ?? '',
+                                                ),
+                                              ),
+                                      isSelected: state.selectedSpaces
+                                              .contains(space.uuid) ||
+                                          state.soldCheck.contains(space.uuid),
+                                      isSoldCheck:
+                                          state.soldCheck.contains(space.uuid),
+                                      children: _buildNestedSpaces(
+                                        context,
+                                        state,
+                                        space,
+                                        communities[index],
+                                      ),
+                                    );
+                                  },
+                                ).toList(),
+                              );
+                            },
+                          ),
+                  ),
+                  if (state.paginationIsLoading) const CircularProgressIndicator(),
+                ],
+              ),
+      );
+    });
+  }
+
+  List<Widget> _buildNestedSpaces(
+    BuildContext context,
+    SpaceTreeState state,
+    SpaceModel space,
+    CommunityModel community,
+  ) {
+    return space.children.map((child) {
+      return CustomExpansionTileSpaceTree(
+        isSelected: state.selectedSpaces.contains(child.uuid) ||
+            state.soldCheck.contains(child.uuid),
+        isSoldCheck: state.soldCheck.contains(child.uuid),
+        title: child.name,
+        isExpanded: state.expandedSpaces.contains(child.uuid),
+        onItemSelected: () {
+          widget.onSelectChildSpace?.call(community, child);
+        },
+        onExpansionChanged: () {
+          context.read<SpaceTreeBloc>().add(
+                OnSpaceExpanded(community.uuid, child.uuid ?? ''),
+              );
+        },
+        children: _buildNestedSpaces(context, state, child, community),
+      );
+    }).toList();
+  }
+}

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

@@ -0,0 +1,158 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class YearPickerWidget extends StatefulWidget {
+  const YearPickerWidget({
+    super.key,
+    required this.selectedDate,
+    required this.onDateSelected,
+  });
+
+  final DateTime selectedDate;
+  final ValueChanged<DateTime>? onDateSelected;
+
+  @override
+  State<YearPickerWidget> createState() => _YearPickerWidgetState();
+}
+
+class _YearPickerWidgetState extends State<YearPickerWidget> {
+  late int _currentYear;
+
+  static final years = List.generate(
+    DateTime.now().year - (DateTime.now().year - 5) + 1,
+    (index) => (2020 + index),
+  ).where((year) => year <= DateTime.now().year).toList();
+
+  @override
+  void initState() {
+    super.initState();
+    _currentYear = widget.selectedDate.year;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: ColorsManager.whiteColors,
+      child: Container(
+        padding: const EdgeInsetsDirectional.all(20),
+        width: 320,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _buildMonthsGrid(),
+            const SizedBox(height: 20),
+            Row(
+              spacing: 12,
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                FilledButton(
+                  onPressed: () => Navigator.pop(context),
+                  style: FilledButton.styleFrom(
+                    fixedSize: const Size(106, 40),
+                    backgroundColor: const Color(0xFFEDF2F7),
+                    padding: const EdgeInsetsDirectional.symmetric(
+                      vertical: 10,
+                      horizontal: 16,
+                    ),
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(20),
+                    ),
+                  ),
+                  child: Text(
+                    'Cancel',
+                    style: context.textTheme.titleSmall?.copyWith(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                      color: ColorsManager.grey700,
+                    ),
+                  ),
+                ),
+                FilledButton(
+                  onPressed: () {
+                    Navigator.pop(context);
+                    final date = DateTime(_currentYear);
+                    widget.onDateSelected?.call(date);
+                  },
+                  style: FilledButton.styleFrom(
+                    fixedSize: const Size(106, 40),
+                    backgroundColor: ColorsManager.vividBlue.withValues(
+                      alpha: 0.7,
+                    ),
+                    padding: const EdgeInsetsDirectional.symmetric(
+                      vertical: 10,
+                      horizontal: 16,
+                    ),
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(20),
+                    ),
+                  ),
+                  child: Text(
+                    'Done',
+                    style: context.textTheme.titleSmall?.copyWith(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                      color: ColorsManager.whiteColors,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildMonthsGrid() {
+    return GridView.builder(
+      shrinkWrap: true,
+      itemCount: years.length,
+      physics: const NeverScrollableScrollPhysics(),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        childAspectRatio: 2.5,
+        mainAxisSpacing: 8,
+        mainAxisExtent: 30,
+      ),
+      itemBuilder: (context, index) {
+        final isSelected = _currentYear == years[index];
+        return InkWell(
+          onTap: () => setState(() => _currentYear = years[index]),
+          child: DecoratedBox(
+            decoration: BoxDecoration(
+              color: const Color(0xFFEDF2F7),
+              borderRadius: BorderRadius.only(
+                topLeft: index % 3 == 0 ? const Radius.circular(16) : Radius.zero,
+                bottomLeft: index % 3 == 0 ? const Radius.circular(16) : Radius.zero,
+                topRight: index % 3 == 2 ? const Radius.circular(16) : Radius.zero,
+                bottomRight:
+                    index % 3 == 2 ? const Radius.circular(16) : Radius.zero,
+              ),
+            ),
+            child: Container(
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                color: isSelected
+                    ? ColorsManager.vividBlue.withValues(alpha: 0.7)
+                    : const Color(0xFFEDF2F7),
+                borderRadius:
+                    isSelected ? BorderRadius.circular(15) : BorderRadius.zero,
+              ),
+              child: Text(
+                years[index].toString(),
+                style: context.textTheme.titleSmall?.copyWith(
+                  fontSize: 12,
+                  color: isSelected
+                      ? ColorsManager.whiteColors
+                      : ColorsManager.blackColor.withValues(alpha: 0.8),
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/pages/analytics/modules/energy_management/blocs/energy_consumption_by_phases/energy_consumption_by_phases_bloc.dart

@@ -0,0 +1,50 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+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';
+
+part 'energy_consumption_by_phases_event.dart';
+part 'energy_consumption_by_phases_state.dart';
+
+class EnergyConsumptionByPhasesBloc
+    extends Bloc<EnergyConsumptionByPhasesEvent, EnergyConsumptionByPhasesState> {
+  EnergyConsumptionByPhasesBloc(
+    this._energyConsumptionByPhasesService,
+  ) : super(const EnergyConsumptionByPhasesState()) {
+    on<LoadEnergyConsumptionByPhasesEvent>(_onLoadEnergyConsumptionByPhasesEvent);
+    on<ClearEnergyConsumptionByPhasesEvent>(_onClearEnergyConsumptionByPhasesEvent);
+  }
+
+  final EnergyConsumptionByPhasesService _energyConsumptionByPhasesService;
+
+  Future<void> _onLoadEnergyConsumptionByPhasesEvent(
+    LoadEnergyConsumptionByPhasesEvent event,
+    Emitter<EnergyConsumptionByPhasesState> emit,
+  ) async {
+    emit(state.copyWith(status: EnergyConsumptionByPhasesStatus.loading));
+    try {
+      final chartData = await _energyConsumptionByPhasesService.load(event.param);
+      emit(
+        state.copyWith(
+          status: EnergyConsumptionByPhasesStatus.loaded,
+          chartData: chartData,
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: EnergyConsumptionByPhasesStatus.failure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  void _onClearEnergyConsumptionByPhasesEvent(
+    ClearEnergyConsumptionByPhasesEvent event,
+    Emitter<EnergyConsumptionByPhasesState> emit,
+  ) async {
+    emit(const EnergyConsumptionByPhasesState());
+  }
+}

lib/pages/analytics/modules/energy_management/blocs/energy_consumption_by_phases/energy_consumption_by_phases_event.dart

@@ -0,0 +1,23 @@
+part of 'energy_consumption_by_phases_bloc.dart';
+
+sealed class EnergyConsumptionByPhasesEvent extends Equatable {
+  const EnergyConsumptionByPhasesEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class LoadEnergyConsumptionByPhasesEvent extends EnergyConsumptionByPhasesEvent {
+  const LoadEnergyConsumptionByPhasesEvent({
+    required this.param,
+  });
+
+  final GetEnergyConsumptionByPhasesParam param;
+
+  @override
+  List<Object> get props => [param];
+}
+
+final class ClearEnergyConsumptionByPhasesEvent extends EnergyConsumptionByPhasesEvent {
+  const ClearEnergyConsumptionByPhasesEvent();
+}

lib/pages/analytics/modules/energy_management/blocs/energy_consumption_by_phases/energy_consumption_by_phases_state.dart

@@ -0,0 +1,35 @@
+part of 'energy_consumption_by_phases_bloc.dart';
+
+enum EnergyConsumptionByPhasesStatus {
+  initial,
+  loading,
+  loaded,
+  failure,
+}
+
+final class EnergyConsumptionByPhasesState extends Equatable {
+  const EnergyConsumptionByPhasesState({
+    this.status = EnergyConsumptionByPhasesStatus.initial,
+    this.chartData = const <PhasesEnergyConsumption>[],
+    this.errorMessage,
+  });
+
+  final List<PhasesEnergyConsumption> chartData;
+  final EnergyConsumptionByPhasesStatus status;
+  final String? errorMessage;
+
+  EnergyConsumptionByPhasesState copyWith({
+    List<PhasesEnergyConsumption>? chartData,
+    EnergyConsumptionByPhasesStatus? status,
+    String? errorMessage,
+  }) {
+    return EnergyConsumptionByPhasesState(
+      chartData: chartData ?? this.chartData,
+      status: status ?? this.status,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [chartData, status, errorMessage];
+}

lib/pages/analytics/modules/energy_management/blocs/energy_consumption_per_device/energy_consumption_per_device_bloc.dart

@@ -0,0 +1,50 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/models/device_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';
+
+part 'energy_consumption_per_device_event.dart';
+part 'energy_consumption_per_device_state.dart';
+
+class EnergyConsumptionPerDeviceBloc
+    extends Bloc<EnergyConsumptionPerDeviceEvent, EnergyConsumptionPerDeviceState> {
+  EnergyConsumptionPerDeviceBloc(
+    this._energyConsumptionPerDeviceService,
+  ) : super(const EnergyConsumptionPerDeviceState()) {
+    on<LoadEnergyConsumptionPerDeviceEvent>(_onLoadEnergyConsumptionPerDeviceEvent);
+    on<ClearEnergyConsumptionPerDeviceEvent>(_onClearEnergyConsumptionPerDeviceEvent);
+  }
+
+  final EnergyConsumptionPerDeviceService _energyConsumptionPerDeviceService;
+
+  Future<void> _onLoadEnergyConsumptionPerDeviceEvent(
+    LoadEnergyConsumptionPerDeviceEvent event,
+    Emitter<EnergyConsumptionPerDeviceState> emit,
+  ) async {
+    emit(state.copyWith(status: EnergyConsumptionPerDeviceStatus.loading));
+    try {
+      final chartData = await _energyConsumptionPerDeviceService.load(event.param);
+      emit(
+        state.copyWith(
+          status: EnergyConsumptionPerDeviceStatus.loaded,
+          chartData: chartData,
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: EnergyConsumptionPerDeviceStatus.failure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  void _onClearEnergyConsumptionPerDeviceEvent(
+    ClearEnergyConsumptionPerDeviceEvent event,
+    Emitter<EnergyConsumptionPerDeviceState> emit,
+  ) async {
+    emit(const EnergyConsumptionPerDeviceState());
+  }
+}

lib/pages/analytics/modules/energy_management/blocs/energy_consumption_per_device/energy_consumption_per_device_event.dart

@@ -0,0 +1,23 @@
+part of 'energy_consumption_per_device_bloc.dart';
+
+sealed class EnergyConsumptionPerDeviceEvent extends Equatable {
+  const EnergyConsumptionPerDeviceEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class LoadEnergyConsumptionPerDeviceEvent
+    extends EnergyConsumptionPerDeviceEvent {
+  const LoadEnergyConsumptionPerDeviceEvent(this.param);
+
+  final GetEnergyConsumptionPerDeviceParam param;
+
+  @override
+  List<Object> get props => [param];
+}
+
+final class ClearEnergyConsumptionPerDeviceEvent
+    extends EnergyConsumptionPerDeviceEvent {
+  const ClearEnergyConsumptionPerDeviceEvent();
+}

lib/pages/analytics/modules/energy_management/blocs/energy_consumption_per_device/energy_consumption_per_device_state.dart

@@ -0,0 +1,30 @@
+part of 'energy_consumption_per_device_bloc.dart';
+
+enum EnergyConsumptionPerDeviceStatus { initial, loading, loaded, failure }
+
+final class EnergyConsumptionPerDeviceState extends Equatable {
+  const EnergyConsumptionPerDeviceState({
+    this.status = EnergyConsumptionPerDeviceStatus.initial,
+    this.chartData = const <DeviceEnergyDataModel>[],
+    this.errorMessage,
+  });
+
+  final List<DeviceEnergyDataModel> chartData;
+  final EnergyConsumptionPerDeviceStatus status;
+  final String? errorMessage;
+
+  EnergyConsumptionPerDeviceState copyWith({
+    List<DeviceEnergyDataModel>? chartData,
+    EnergyConsumptionPerDeviceStatus? status,
+    String? errorMessage,
+  }) {
+    return EnergyConsumptionPerDeviceState(
+      chartData: chartData ?? this.chartData,
+      status: status ?? this.status,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [chartData, status, errorMessage];
+}

lib/pages/analytics/modules/energy_management/blocs/power_clamp_info/power_clamp_info_bloc.dart

@@ -0,0 +1,63 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/services/power_clamp_info/power_clamp_info_service.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clamp_model.dart';
+
+part 'power_clamp_info_event.dart';
+part 'power_clamp_info_state.dart';
+
+class PowerClampInfoBloc extends Bloc<PowerClampInfoEvent, PowerClampInfoState> {
+  PowerClampInfoBloc(
+    this._powerClampInfoService,
+  ) : super(const PowerClampInfoState()) {
+    on<LoadPowerClampInfoEvent>(_onLoadPowerClampInfoEvent);
+    on<UpdatePowerClampStatusEvent>(_onUpdatePowerClampStatusEvent);
+    on<ClearPowerClampInfoEvent>(_onClearPowerClampInfoEvent);
+  }
+
+  final PowerClampInfoService _powerClampInfoService;
+
+  Future<void> _onLoadPowerClampInfoEvent(
+    LoadPowerClampInfoEvent event,
+    Emitter<PowerClampInfoState> emit,
+  ) async {
+    emit(state.copyWith(status: PowerClampInfoStatus.loading));
+    try {
+      final powerClampModel = await _powerClampInfoService.getInfo(event.deviceId);
+      emit(
+        state.copyWith(
+          status: PowerClampInfoStatus.loaded,
+          powerClampModel: powerClampModel,
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: PowerClampInfoStatus.error,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  void _onUpdatePowerClampStatusEvent(
+    UpdatePowerClampStatusEvent event,
+    Emitter<PowerClampInfoState> emit,
+  ) async {
+    final currentModel = state.powerClampModel;
+    if (currentModel == null) return;
+
+    final updatedStatus = PowerStatus.fromStatusList(event.statusList);
+    final updatedModel = currentModel.copyWith(statusPower: updatedStatus);
+
+    emit(state.copyWith(powerClampModel: updatedModel));
+  }
+
+  void _onClearPowerClampInfoEvent(
+    ClearPowerClampInfoEvent event,
+    Emitter<PowerClampInfoState> emit,
+  ) {
+    emit(const PowerClampInfoState());
+  }
+}

lib/pages/analytics/modules/energy_management/blocs/power_clamp_info/power_clamp_info_event.dart

@@ -0,0 +1,31 @@
+part of 'power_clamp_info_bloc.dart';
+
+sealed class PowerClampInfoEvent extends Equatable {
+  const PowerClampInfoEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class LoadPowerClampInfoEvent extends PowerClampInfoEvent {
+  const LoadPowerClampInfoEvent(this.deviceId);
+
+  final String deviceId;
+
+  @override
+  List<Object> get props => [deviceId];
+}
+
+
+final class UpdatePowerClampStatusEvent extends PowerClampInfoEvent {
+  const UpdatePowerClampStatusEvent(this.statusList);
+
+  final List<Status> statusList;
+
+  @override
+  List<Object> get props => [statusList];
+}
+
+final class ClearPowerClampInfoEvent extends PowerClampInfoEvent {
+  const ClearPowerClampInfoEvent();
+}

lib/pages/analytics/modules/energy_management/blocs/power_clamp_info/power_clamp_info_state.dart

@@ -0,0 +1,30 @@
+part of 'power_clamp_info_bloc.dart';
+
+enum PowerClampInfoStatus { initial, loading, loaded, error }
+
+final class PowerClampInfoState extends Equatable {
+  const PowerClampInfoState({
+    this.status = PowerClampInfoStatus.initial,
+    this.powerClampModel,
+    this.errorMessage,
+  });
+
+  final PowerClampInfoStatus status;
+  final PowerClampModel? powerClampModel;
+  final String? errorMessage;
+
+  PowerClampInfoState copyWith({
+    PowerClampInfoStatus? status,
+    PowerClampModel? powerClampModel,
+    String? errorMessage,
+  }) {
+    return PowerClampInfoState(
+      status: status ?? this.status,
+      powerClampModel: powerClampModel ?? this.powerClampModel,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [status, powerClampModel, errorMessage];
+}

lib/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart

@@ -0,0 +1,80 @@
+import 'dart:async';
+
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/services/realtime_device_service/realtime_device_service.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+
+part 'realtime_device_changes_event.dart';
+part 'realtime_device_changes_state.dart';
+
+class RealtimeDeviceChangesBloc
+    extends Bloc<RealtimeDeviceChangesEvent, RealtimeDeviceChangesState> {
+  RealtimeDeviceChangesBloc(
+    this._realtimeDeviceService,
+  ) : super(const RealtimeDeviceChangesState()) {
+    on<RealtimeDeviceChangesStarted>(_onRealtimeDeviceChangesStarted);
+    on<RealtimeDeviceChangesClosed>(_onRealtimeDeviceChangesClosed);
+    on<_RealtimeDeviceChangesUpdated>(_onRealtimeDeviceChangesUpdated);
+  }
+
+  final RealtimeDeviceService _realtimeDeviceService;
+  StreamSubscription<List<Status>>? _subscription;
+
+  Future<void> _onRealtimeDeviceChangesStarted(
+    RealtimeDeviceChangesStarted event,
+    Emitter<RealtimeDeviceChangesState> emit,
+  ) async {
+    await _subscription?.cancel();
+    _subscription = _realtimeDeviceService.subscribe(event.deviceId).listen(
+      (data) {
+        add(_RealtimeDeviceChangesUpdated(data));
+      },
+      onError: (error) {
+        emit(
+          state.copyWith(
+            status: RealtimeDeviceChangesStatus.failure,
+            errorMessage: '$error',
+          ),
+        );
+      },
+    );
+  }
+
+  Future<void> _onRealtimeDeviceChangesClosed(
+    RealtimeDeviceChangesClosed event,
+    Emitter<RealtimeDeviceChangesState> emit,
+  ) async {
+    add(const _RealtimeDeviceChangesUpdated([]));
+    await _subscription?.cancel();
+    _subscription = null;
+    emit(const RealtimeDeviceChangesState());
+  }
+
+  void _onRealtimeDeviceChangesUpdated(
+    _RealtimeDeviceChangesUpdated event,
+    Emitter<RealtimeDeviceChangesState> emit,
+  ) {
+    final currentState = state;
+    final updatedList = [
+      ...currentState.deviceStatusList.where(
+        (device) => !event.deviceStatusList
+            .any((newDevice) => newDevice.code == device.code),
+      ),
+      ...event.deviceStatusList,
+    ];
+
+    emit(
+      state.copyWith(
+        status: RealtimeDeviceChangesStatus.loaded,
+        deviceStatusList: updatedList,
+      ),
+    );
+  }
+
+  @override
+  Future<void> close() async {
+    await _subscription?.cancel();
+    return super.close();
+  }
+}

lib/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_event.dart

@@ -0,0 +1,27 @@
+part of 'realtime_device_changes_bloc.dart';
+
+sealed class RealtimeDeviceChangesEvent extends Equatable {
+  const RealtimeDeviceChangesEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class RealtimeDeviceChangesStarted extends RealtimeDeviceChangesEvent {
+  const RealtimeDeviceChangesStarted(this.deviceId);
+
+  final String deviceId;
+
+  @override
+  List<Object> get props => [deviceId];
+}
+
+final class RealtimeDeviceChangesClosed extends RealtimeDeviceChangesEvent {
+  const RealtimeDeviceChangesClosed();
+}
+
+class _RealtimeDeviceChangesUpdated extends RealtimeDeviceChangesEvent {
+  final List<Status> deviceStatusList;
+
+  const _RealtimeDeviceChangesUpdated(this.deviceStatusList);
+}

lib/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_state.dart

@@ -0,0 +1,30 @@
+part of 'realtime_device_changes_bloc.dart';
+
+enum RealtimeDeviceChangesStatus { initial, loaded, failure }
+
+final class RealtimeDeviceChangesState extends Equatable {
+  const RealtimeDeviceChangesState({
+    this.status = RealtimeDeviceChangesStatus.initial,
+    this.deviceStatusList = const <Status>[],
+    this.errorMessage,
+  });
+
+  final RealtimeDeviceChangesStatus status;
+  final List<Status> deviceStatusList;
+  final String? errorMessage;
+
+  RealtimeDeviceChangesState copyWith({
+    RealtimeDeviceChangesStatus? status,
+    List<Status>? deviceStatusList,
+    String? errorMessage,
+  }) {
+    return RealtimeDeviceChangesState(
+      status: status ?? this.status,
+      deviceStatusList: deviceStatusList ?? this.deviceStatusList,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [status, deviceStatusList, errorMessage];
+}

lib/pages/analytics/modules/energy_management/blocs/total_energy_consumption/total_energy_consumption_bloc.dart

@@ -0,0 +1,50 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
+import 'package:syncrow_web/pages/analytics/params/get_total_energy_consumption_param.dart';
+import 'package:syncrow_web/pages/analytics/services/total_energy_consumption/total_energy_consumption_service.dart';
+
+part 'total_energy_consumption_event.dart';
+part 'total_energy_consumption_state.dart';
+
+class TotalEnergyConsumptionBloc
+    extends Bloc<TotalEnergyConsumptionEvent, TotalEnergyConsumptionState> {
+  TotalEnergyConsumptionBloc(
+    this._totalEnergyConsumptionService,
+  ) : super(const TotalEnergyConsumptionState()) {
+    on<TotalEnergyConsumptionLoadEvent>(_onTotalEnergyConsumptionLoadEvent);
+    on<ClearTotalEnergyConsumptionEvent>(_onClearTotalEnergyConsumptionEvent);
+  }
+
+  final TotalEnergyConsumptionService _totalEnergyConsumptionService;
+
+  Future<void> _onTotalEnergyConsumptionLoadEvent(
+    TotalEnergyConsumptionLoadEvent event,
+    Emitter<TotalEnergyConsumptionState> emit,
+  ) async {
+    try {
+      emit(state.copyWith(status: TotalEnergyConsumptionStatus.loading));
+      final chartData = await _totalEnergyConsumptionService.load(event.param);
+      emit(
+        state.copyWith(
+          chartData: chartData,
+          status: TotalEnergyConsumptionStatus.loaded,
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          errorMessage: e.toString(),
+          status: TotalEnergyConsumptionStatus.failure,
+        ),
+      );
+    }
+  }
+
+  void _onClearTotalEnergyConsumptionEvent(
+    ClearTotalEnergyConsumptionEvent event,
+    Emitter<TotalEnergyConsumptionState> emit,
+  ) async {
+    emit(const TotalEnergyConsumptionState());
+  }
+}

lib/pages/analytics/modules/energy_management/blocs/total_energy_consumption/total_energy_consumption_event.dart

@@ -0,0 +1,21 @@
+part of 'total_energy_consumption_bloc.dart';
+
+sealed class TotalEnergyConsumptionEvent extends Equatable {
+  const TotalEnergyConsumptionEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+final class TotalEnergyConsumptionLoadEvent extends TotalEnergyConsumptionEvent {
+  const TotalEnergyConsumptionLoadEvent({required this.param});
+
+  final GetTotalEnergyConsumptionParam param;
+
+  @override
+  List<Object?> get props => [param];
+}
+
+final class ClearTotalEnergyConsumptionEvent extends TotalEnergyConsumptionEvent {
+  const ClearTotalEnergyConsumptionEvent();
+}

lib/pages/analytics/modules/energy_management/blocs/total_energy_consumption/total_energy_consumption_state.dart

@@ -0,0 +1,35 @@
+part of 'total_energy_consumption_bloc.dart';
+
+enum TotalEnergyConsumptionStatus {
+  initial,
+  loading,
+  loaded,
+  failure,
+}
+
+final class TotalEnergyConsumptionState extends Equatable {
+  const TotalEnergyConsumptionState({
+    this.status = TotalEnergyConsumptionStatus.initial,
+    this.chartData = const <EnergyDataModel>[],
+    this.errorMessage,
+  });
+
+  final List<EnergyDataModel> chartData;
+  final TotalEnergyConsumptionStatus status;
+  final String? errorMessage;
+
+  TotalEnergyConsumptionState copyWith({
+    List<EnergyDataModel>? chartData,
+    TotalEnergyConsumptionStatus? status,
+    String? errorMessage,
+  }) {
+    return TotalEnergyConsumptionState(
+      chartData: chartData ?? this.chartData,
+      status: status ?? this.status,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [chartData, status, errorMessage];
+}

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

@@ -0,0 +1,131 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/helpers/format_number_to_kwh.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+abstract final class EnergyManagementChartsHelper {
+  const EnergyManagementChartsHelper._();
+
+  static FlTitlesData titlesData(
+    BuildContext context, {
+    double? leftTitlesInterval,
+  }) {
+    const emptyTitle = AxisTitles(sideTitles: SideTitles(showTitles: false));
+    return FlTitlesData(
+      show: true,
+      bottomTitles: AxisTitles(
+        drawBelowEverything: true,
+        sideTitles: SideTitles(
+          interval: 1,
+          reservedSize: 32,
+          showTitles: true,
+          maxIncluded: true,
+          minIncluded: true,
+          getTitlesWidget: (value, meta) => Padding(
+            padding: const EdgeInsetsDirectional.only(top: 20.0),
+            child: Text(
+              value.toString(),
+              style: context.textTheme.bodySmall?.copyWith(
+                color: ColorsManager.lightGreyColor,
+                fontSize: 12,
+              ),
+            ),
+          ),
+        ),
+      ),
+      leftTitles: AxisTitles(
+        sideTitles: SideTitles(
+          showTitles: true,
+          maxIncluded: false,
+          minIncluded: true,
+          interval: leftTitlesInterval,
+          reservedSize: 110,
+          getTitlesWidget: (value, meta) => Padding(
+            padding: const EdgeInsetsDirectional.only(end: 12),
+            child: FittedBox(
+              alignment: AlignmentDirectional.centerStart,
+              fit: BoxFit.scaleDown,
+              child: Text(
+                value.formatNumberToKwh,
+                style: context.textTheme.bodySmall?.copyWith(
+                  fontSize: 12,
+                  color: ColorsManager.greyColor,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+      rightTitles: emptyTitle,
+      topTitles: emptyTitle,
+    );
+  }
+
+  static String getToolTipLabel(num month, double value) {
+    final monthLabel = month.toString();
+    final valueLabel = value.formatNumberToKwh;
+    final labels = [monthLabel, valueLabel];
+    return labels.where((element) => element.isNotEmpty).join(', ');
+  }
+
+  static List<LineTooltipItem?> getTooltipItems(List<LineBarSpot> touchedSpots) {
+    return touchedSpots.map((spot) {
+      return LineTooltipItem(
+        getToolTipLabel(spot.x, spot.y),
+        const TextStyle(
+          color: ColorsManager.textPrimaryColor,
+          fontWeight: FontWeight.w600,
+          fontSize: 12,
+        ),
+      );
+    }).toList();
+  }
+
+  static LineTouchTooltipData lineTouchTooltipData() {
+    return LineTouchTooltipData(
+      getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
+      tooltipBorder: const BorderSide(color: ColorsManager.semiTransparentBlack),
+      tooltipRoundedRadius: 16,
+      showOnTopOfTheChartBoxArea: false,
+      tooltipPadding: const EdgeInsets.all(8),
+      getTooltipItems: getTooltipItems,
+    );
+  }
+
+  static FlGridData gridData() {
+    return FlGridData(
+      show: true,
+      drawVerticalLine: false,
+      drawHorizontalLine: true,
+      horizontalInterval: 250,
+      getDrawingHorizontalLine: (value) {
+        return FlLine(
+          color: ColorsManager.greyColor,
+          strokeWidth: 1,
+          dashArray: value == 0 ? null : [5, 5],
+        );
+      },
+    );
+  }
+
+  static FlBorderData borderData() {
+    return FlBorderData(
+      border: const Border(
+        bottom: BorderSide(
+          color: ColorsManager.greyColor,
+          style: BorderStyle.solid,
+        ),
+      ),
+      show: true,
+    );
+  }
+
+  static LineTouchData lineTouchData() {
+    return LineTouchData(
+      handleBuiltInTouches: true,
+      touchSpotThreshold: 16,
+      touchTooltipData: EnergyManagementChartsHelper.lineTouchTooltipData(),
+    );
+  }
+}

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

@@ -0,0 +1,188 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/models/analytics_device.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/energy_consumption_by_phases/energy_consumption_by_phases_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/energy_consumption_per_device/energy_consumption_per_device_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';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/total_energy_consumption/total_energy_consumption_bloc.dart';
+import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
+import 'package:syncrow_web/pages/analytics/params/get_energy_consumption_by_phases_param.dart';
+import 'package:syncrow_web/pages/analytics/params/get_energy_consumption_per_device_param.dart';
+import 'package:syncrow_web/pages/analytics/params/get_total_energy_consumption_param.dart';
+
+abstract final class FetchEnergyManagementDataHelper {
+  const FetchEnergyManagementDataHelper._();
+
+  // static const String _powerClampId = 'cb71d6ad-6e29-4eaa-ae3e-1a0d1c5f60fa';
+  static AnalyticsDevice? getSelectedDevice(BuildContext context) {
+    return context.read<AnalyticsDevicesBloc>().state.selectedDevice;
+  }
+
+  static void loadEnergyManagementData(
+    BuildContext context, {
+    required String communityId,
+    required String spaceId,
+    DateTime? selectedDate,
+    bool shouldFetchAnalyticsDevices = true,
+  }) {
+    if (communityId.isEmpty && spaceId.isEmpty) {
+      clearAllData(context);
+      return;
+    }
+
+    final datePickerState = context.read<AnalyticsDatePickerBloc>().state;
+    final selectedDate0 = selectedDate ?? datePickerState.monthlyDate;
+    if (shouldFetchAnalyticsDevices) {
+      loadAnalyticsDevices(
+        context,
+        communityUuid: communityId,
+        spaceUuid: spaceId,
+        selectedDate: selectedDate0,
+      );
+      loadRealtimeDeviceChanges(context);
+      loadPowerClampInfo(context);
+    }
+    loadTotalEnergyConsumption(
+      context,
+      selectedDate: selectedDate0,
+      communityId: communityId,
+      spaceId: spaceId,
+    );
+    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,
+    );
+  }
+
+  static void loadEnergyConsumptionByPhases(
+    BuildContext context, {
+    required String powerClampUuid,
+    DateTime? selectedDate,
+  }) {
+    final param = GetEnergyConsumptionByPhasesParam(
+      date: selectedDate,
+      powerClampUuid: powerClampUuid,
+    );
+    context.read<EnergyConsumptionByPhasesBloc>().add(
+          LoadEnergyConsumptionByPhasesEvent(param: param),
+        );
+  }
+
+  static void loadTotalEnergyConsumption(
+    BuildContext context, {
+    DateTime? selectedDate,
+    required String communityId,
+    required String spaceId,
+  }) {
+    final param = GetTotalEnergyConsumptionParam(
+      spaceId: spaceId,
+      communityId: communityId,
+      monthDate: selectedDate,
+    );
+    context.read<TotalEnergyConsumptionBloc>().add(
+          TotalEnergyConsumptionLoadEvent(param: param),
+        );
+  }
+
+  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(
+          LoadEnergyConsumptionPerDeviceEvent(param),
+        );
+  }
+
+  static void loadPowerClampInfo(BuildContext context) {
+    final selectedDevice = getSelectedDevice(context);
+    if (selectedDevice case final AnalyticsDevice device) {
+      context.read<PowerClampInfoBloc>().add(
+            LoadPowerClampInfoEvent(device.uuid),
+          );
+    }
+  }
+
+  static void loadRealtimeDeviceChanges(
+    BuildContext context, {
+    String? deviceUuid,
+  }) {
+    final selectedDevice = getSelectedDevice(context);
+
+    context.read<RealtimeDeviceChangesBloc>().add(
+          RealtimeDeviceChangesStarted(deviceUuid ?? selectedDevice?.uuid ?? ''),
+        );
+  }
+
+  static void loadAnalyticsDevices(
+    BuildContext context, {
+    required String communityUuid,
+    required String spaceUuid,
+    required DateTime selectedDate,
+  }) {
+    context.read<AnalyticsDevicesBloc>().add(
+          LoadAnalyticsDevicesEvent(
+            onSuccess: (device) {
+              context.read<PowerClampInfoBloc>().add(
+                    LoadPowerClampInfoEvent(device.uuid),
+                  );
+              loadEnergyConsumptionByPhases(
+                context,
+                powerClampUuid: device.uuid,
+                selectedDate: selectedDate,
+              );
+              context.read<RealtimeDeviceChangesBloc>().add(
+                    RealtimeDeviceChangesStarted(device.uuid),
+                  );
+            },
+            param: GetAnalyticsDevicesParam(
+              communityUuid: communityUuid,
+              spaceUuid: spaceUuid,
+              deviceTypes: ['PC'],
+              requestType: AnalyticsDeviceRequestType.energyManagement,
+            ),
+          ),
+        );
+  }
+
+  static void clearAllData(BuildContext context) {
+    context.read<PowerClampInfoBloc>().add(
+          const ClearPowerClampInfoEvent(),
+        );
+    context.read<RealtimeDeviceChangesBloc>().add(
+          const RealtimeDeviceChangesClosed(),
+        );
+
+    context.read<EnergyConsumptionPerDeviceBloc>().add(
+          const ClearEnergyConsumptionPerDeviceEvent(),
+        );
+
+    context.read<TotalEnergyConsumptionBloc>().add(
+          const ClearTotalEnergyConsumptionEvent(),
+        );
+
+    context.read<EnergyConsumptionByPhasesBloc>().add(
+          const ClearEnergyConsumptionByPhasesEvent(),
+        );
+    context.read<AnalyticsDevicesBloc>().add(const ClearAnalyticsDeviceEvent());
+  }
+}

lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+
+class AnalyticsEnergyManagementView extends StatefulWidget {
+  const AnalyticsEnergyManagementView({super.key});
+
+  @override
+  State<AnalyticsEnergyManagementView> createState() =>
+      _AnalyticsEnergyManagementViewState();
+}
+
+class _AnalyticsEnergyManagementViewState
+    extends State<AnalyticsEnergyManagementView> {
+  @override
+  void initState() {
+    final spaceTreeBloc = context.read<SpaceTreeBloc>();
+    final communityId = spaceTreeBloc.state.selectedCommunities.firstOrNull;
+    final spaceId = spaceTreeBloc.state.selectedSpaces.firstOrNull;
+    FetchEnergyManagementDataHelper.loadEnergyManagementData(
+      context,
+      communityId: communityId ?? '',
+      spaceId: spaceId ?? '',
+    );
+    super.initState();
+  }
+
+  static const _padding = EdgeInsetsDirectional.all(32);
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isMediumOrLess = constraints.maxWidth <= 900;
+        if (isMediumOrLess) {
+          return SingleChildScrollView(
+            padding: _padding,
+            child: Column(
+              spacing: 32,
+              children: [
+                SizedBox(
+                  height: MediaQuery.sizeOf(context).height * 1.2,
+                  child: const PowerClampEnergyDataWidget(),
+                ),
+                SizedBox(
+                  height: MediaQuery.sizeOf(context).height * 0.5,
+                  child: const TotalEnergyConsumptionChartBox(),
+                ),
+                SizedBox(
+                  height: MediaQuery.sizeOf(context).height * 0.5,
+                  child: const EnergyConsumptionPerDeviceChartBox(),
+                ),
+              ],
+            ),
+          );
+        }
+
+        return SingleChildScrollView(
+          child: Container(
+            padding: _padding,
+            height: MediaQuery.sizeOf(context).height * 1,
+            child: const Column(
+              children: [
+                Expanded(
+                  child: Row(
+                    spacing: 32,
+                    children: [
+                      Expanded(
+                        flex: 2,
+                        child: Column(
+                          spacing: 20,
+                          children: [
+                            Expanded(child: TotalEnergyConsumptionChartBox()),
+                            Expanded(child: EnergyConsumptionPerDeviceChartBox()),
+                          ],
+                        ),
+                      ),
+                      Expanded(child: PowerClampEnergyDataWidget()),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AnalyticsDeviceDropdown extends StatelessWidget {
+  const AnalyticsDeviceDropdown({required this.onChanged, super.key});
+
+  final ValueChanged<AnalyticsDevice> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<AnalyticsDevicesBloc, AnalyticsDevicesState>(
+      builder: (context, state) {
+        return Container(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(16),
+            border: Border.all(
+              color: ColorsManager.greyColor,
+              width: 1,
+            ),
+          ),
+          child: Visibility(
+            visible: state.devices.isNotEmpty,
+            replacement: _buildNoDevicesFound(context),
+            child: _buildDevicesDropdown(context, state),
+          ),
+        );
+      },
+    );
+  }
+
+  static const _defaultPadding = EdgeInsetsDirectional.symmetric(
+    horizontal: 20,
+    vertical: 2,
+  );
+
+  Widget _buildNoDevicesFound(BuildContext context) {
+    return Padding(
+      padding: _defaultPadding,
+      child: Text(
+        'no devices found',
+        style: _getTextStyle(context),
+      ),
+    );
+  }
+
+  Widget _buildDevicesDropdown(BuildContext context, AnalyticsDevicesState state) {
+    final spaceUuid = state.selectedDevice?.spaceUuid;
+    return DropdownButton<AnalyticsDevice?>(
+      value: state.selectedDevice,
+      isDense: true,
+      borderRadius: BorderRadius.circular(16),
+      dropdownColor: ColorsManager.whiteColors,
+      underline: const SizedBox.shrink(),
+      icon: const RotatedBox(
+        quarterTurns: 1,
+        child: Icon(Icons.chevron_right, size: 16),
+      ),
+      style: _getTextStyle(context),
+      padding: _defaultPadding,
+      selectedItemBuilder: (context) {
+        return state.devices.map((e) => Text(e.name)).toList();
+      },
+      items: state.devices.map((e) {
+        return DropdownMenuItem(
+          value: e,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(e.name),
+              if (spaceUuid != null)
+                FittedBox(
+                  fit: BoxFit.scaleDown,
+                  alignment: AlignmentDirectional.centerStart,
+                  child: Text(
+                    spaceUuid,
+                    style: _getTextStyle(context)?.copyWith(
+                      fontSize: 10,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        );
+      }).toList(),
+      onChanged: (value) {
+        if (value case final AnalyticsDevice device) {
+          context.read<AnalyticsDevicesBloc>().add(
+                SelectAnalyticsDeviceEvent(device),
+              );
+          onChanged.call(device);
+        }
+      },
+    );
+  }
+
+  TextStyle? _getTextStyle(BuildContext context) {
+    return context.textTheme.labelSmall?.copyWith(
+      color: ColorsManager.textPrimaryColor,
+      fontWeight: FontWeight.w700,
+      fontSize: 14,
+    );
+  }
+}

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

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class ChartTitle extends StatelessWidget {
+  const ChartTitle({super.key, required this.title});
+
+  final Widget title;
+
+  @override
+  Widget build(BuildContext context) {
+    return DefaultTextStyle(
+      style: context.textTheme.titleLarge!.copyWith(
+        fontSize: 22,
+        fontWeight: FontWeight.w700,
+        color: ColorsManager.blackColor,
+      ),
+      child: title,
+    );
+  }
+}

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

@@ -0,0 +1,189 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.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';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class EnergyConsumptionByPhasesChart extends StatelessWidget {
+  const EnergyConsumptionByPhasesChart({
+    super.key,
+    required this.energyData,
+  });
+
+  final List<PhasesEnergyConsumption> energyData;
+
+  @override
+  Widget build(BuildContext context) {
+    return BarChart(
+      BarChartData(
+        gridData: EnergyManagementChartsHelper.gridData().copyWith(
+          checkToShowHorizontalLine: (value) => true,
+          horizontalInterval: 250,
+        ),
+        borderData: EnergyManagementChartsHelper.borderData(),
+        barTouchData: _barTouchData(context),
+        titlesData: _titlesData(context),
+        barGroups: energyData.asMap().entries.map((entry) {
+          final index = entry.key;
+          final data = entry.value;
+
+          return BarChartGroupData(
+            x: index,
+            barRods: [
+              BarChartRodData(
+                color: ColorsManager.vividBlue.withValues(alpha: 0.1),
+                toY: data.energyConsumedA +
+                    data.energyConsumedB +
+                    data.energyConsumedC,
+                rodStackItems: [
+                  BarChartRodStackItem(
+                    0,
+                    data.energyConsumedA,
+                    ColorsManager.vividBlue.withValues(alpha: 0.8),
+                  ),
+                  BarChartRodStackItem(
+                    data.energyConsumedA,
+                    data.energyConsumedA + data.energyConsumedB,
+                    ColorsManager.vividBlue.withValues(alpha: 0.4),
+                  ),
+                  BarChartRodStackItem(
+                    data.energyConsumedA + data.energyConsumedB,
+                    data.energyConsumedA +
+                        data.energyConsumedB +
+                        data.energyConsumedC,
+                    ColorsManager.vividBlue.withValues(alpha: 0.15),
+                  ),
+                ],
+                width: 8,
+                borderRadius: const BorderRadius.only(
+                  topLeft: Radius.circular(8),
+                  topRight: Radius.circular(8),
+                ),
+              ),
+            ],
+          );
+        }).toList(),
+      ),
+      duration: Duration.zero,
+    );
+  }
+
+  BarTouchData _barTouchData(BuildContext context) {
+    return BarTouchData(
+      touchTooltipData: BarTouchTooltipData(
+        getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
+        tooltipBorder: const BorderSide(
+          color: ColorsManager.semiTransparentBlack,
+        ),
+        tooltipRoundedRadius: 16,
+        tooltipPadding: const EdgeInsets.all(8),
+        getTooltipItem: (group, groupIndex, rod, rodIndex) => getTooltipItem(
+          context: context,
+          group: group,
+          groupIndex: groupIndex,
+          rod: rod,
+          rodIndex: rodIndex,
+        ),
+      ),
+    );
+  }
+
+  BarTooltipItem? getTooltipItem({
+    required BuildContext context,
+    required BarChartGroupData group,
+    required int groupIndex,
+    required BarChartRodData rod,
+    required int rodIndex,
+  }) {
+    final data = energyData;
+
+    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(
+      '$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(
+            color: ColorsManager.blackColor,
+            fontSize: 12,
+          ),
+        ),
+        TextSpan(
+          text: 'Phase B: $phaseB\n',
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.blackColor,
+            fontSize: 12,
+          ),
+        ),
+        TextSpan(
+          text: 'Phase C: $phaseC',
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.blackColor,
+            fontSize: 12,
+          ),
+        ),
+      ],
+    );
+  }
+
+  FlTitlesData _titlesData(BuildContext context) {
+    final titlesData = EnergyManagementChartsHelper.titlesData(
+      context,
+      leftTitlesInterval: 250,
+    );
+
+    final leftTitles = titlesData.leftTitles.copyWith(
+      sideTitles: titlesData.leftTitles.sideTitles.copyWith(
+        reservedSize: 70,
+      ),
+    );
+
+    final bottomTitles = AxisTitles(
+      sideTitles: SideTitles(
+        showTitles: true,
+        getTitlesWidget: (value, _) {
+          final month = DateFormat('d').format(energyData[value.toInt()].date);
+          return FittedBox(
+            alignment: AlignmentDirectional.center,
+            fit: BoxFit.scaleDown,
+            child: RotatedBox(
+              quarterTurns: 3,
+              child: Text(
+                month,
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.greyColor,
+                  fontSize: 11,
+                ),
+              ),
+            ),
+          );
+        },
+        reservedSize: 18,
+      ),
+    );
+
+    return titlesData.copyWith(
+      leftTitles: leftTitles,
+      bottomTitles: bottomTitles,
+    );
+  }
+}

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

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/energy_consumption_by_phases/energy_consumption_by_phases_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_title.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class EnergyConsumptionByPhasesChartBox extends StatelessWidget {
+  const EnergyConsumptionByPhasesChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<EnergyConsumptionByPhasesBloc,
+        EnergyConsumptionByPhasesState>(
+      builder: (context, state) {
+        return Container(
+          padding: const EdgeInsetsDirectional.all(20),
+          decoration: secondarySection,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            spacing: 20,
+            children: [
+              AnalyticsErrorWidget(state.errorMessage),
+              EnergyConsumptionByPhasesTitle(isLoading: state.status == EnergyConsumptionByPhasesStatus.loading,),
+              Expanded(
+                child: EnergyConsumptionByPhasesChart(
+                  energyData: state.chartData,
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class EnergyConsumptionByPhasesTitle extends StatelessWidget {
+  const EnergyConsumptionByPhasesTitle({super.key, required this.isLoading});
+  final bool isLoading;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        ChartsLoadingWidget(isLoading: isLoading),
+        Expanded(
+          flex: 4,
+          child: FittedBox(
+            alignment: AlignmentDirectional.centerStart,
+            fit: BoxFit.scaleDown,
+            child: ChartTitle(
+              title: Text(
+                'Energy Consumption by Phases',
+                style: context.textTheme.titleLarge?.copyWith(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w400,
+                  color: ColorsManager.textPrimaryColor,
+                ),
+              ),
+            ),
+          ),
+        ),
+        const Spacer(),
+        ...<(String title, double opacity)>[
+          ('A', 0.8),
+          ('B', 0.4),
+          ('C', 0.15),
+        ].map((phase) => _buildPhaseCell(context, phase)),
+      ],
+    );
+  }
+
+  Widget _buildPhaseCell(
+    BuildContext context,
+    (String title, double colorOpacity) phase,
+  ) {
+    final (title, colorOpacity) = phase;
+
+    return Expanded(
+      child: FittedBox(
+        fit: BoxFit.scaleDown,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          spacing: 4,
+          children: [
+            CircleAvatar(
+              backgroundColor: ColorsManager.vividBlue.withValues(
+                alpha: colorOpacity,
+              ),
+              radius: 4,
+            ),
+            Text(
+              'Phase $title',
+              style: context.textTheme.labelSmall?.copyWith(
+                fontSize: 8,
+                fontWeight: FontWeight.w400,
+                color: ColorsManager.lightGreyColor,
+              ),
+            ),
+            const SizedBox(width: 4),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,59 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
+
+class EnergyConsumptionPerDeviceChart extends StatelessWidget {
+  const EnergyConsumptionPerDeviceChart({super.key, required this.chartData});
+
+  final List<DeviceEnergyDataModel> chartData;
+
+  @override
+  Widget build(BuildContext context) {
+    return LineChart(
+      LineChartData(
+        titlesData: EnergyManagementChartsHelper.titlesData(
+          context,
+          leftTitlesInterval: 250,
+        ),
+        
+        gridData: EnergyManagementChartsHelper.gridData().copyWith(
+          checkToShowHorizontalLine: (value) => true,
+          horizontalInterval: 250,
+        ),
+        borderData: EnergyManagementChartsHelper.borderData(),
+        lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
+        lineBarsData: chartData.map((e) {
+          return _buildChartBar(
+            color: e.color,
+            spots: e.energy
+                .map(
+                  (energy) => FlSpot(
+                    energy.date.day.toDouble(),
+                    energy.value,
+                  ),
+                )
+                .toList(),
+          );
+        }).toList(),
+      ),
+      duration: Duration.zero,
+      curve: Curves.easeIn,
+    );
+  }
+
+  LineChartBarData _buildChartBar({
+    required Color color,
+    required List<FlSpot> spots,
+  }) {
+    return LineChartBarData(
+      spots: spots,
+      dashArray: [12, 18],
+      isCurved: true,
+      color: color,
+      barWidth: 3,
+      isStrokeCapRound: true,
+      dotData: const FlDotData(show: false),
+    );
+  }
+}

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

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_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/energy_consumption_per_device/energy_consumption_per_device_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
+  const EnergyConsumptionPerDeviceChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<EnergyConsumptionPerDeviceBloc,
+        EnergyConsumptionPerDeviceState>(
+      builder: (context, state) {
+        return Container(
+          decoration: subSectionContainerDecoration.copyWith(
+            borderRadius: BorderRadius.circular(30),
+          ),
+          padding: const EdgeInsets.all(30),
+          child: Column(
+            spacing: 20,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AnalyticsErrorWidget(state.errorMessage),
+              Row(
+                spacing: 32,
+                children: [
+                  if (state.status == EnergyConsumptionPerDeviceStatus.loading)
+                    const ChartsLoadingWidget(isLoading: true),
+                  const Expanded(
+                    flex: 3,
+                    child: FittedBox(
+                      fit: BoxFit.scaleDown,
+                      alignment: AlignmentDirectional.centerStart,
+                      child: ChartTitle(
+                        title: Text('Energy Consumption per Device'),
+                      ),
+                    ),
+                  ),
+                  const Spacer(),
+                  Expanded(
+                    flex: 2,
+                    child: EnergyConsumptionPerDeviceDevicesList(
+                      chartData: state.chartData,
+                      devices: context.watch<AnalyticsDevicesBloc>().state.devices,
+                    ),
+                  ),
+                ],
+              ),
+              const Divider(height: 0),
+              Expanded(
+                child: EnergyConsumptionPerDeviceChart(chartData: state.chartData),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
+import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
+  const EnergyConsumptionPerDeviceDevicesList({
+    required this.chartData,
+    required this.devices,
+    super.key,
+  });
+
+  final List<AnalyticsDevice> devices;
+  final List<DeviceEnergyDataModel> chartData;
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        spacing: 16,
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.end,
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: devices.map((e) => _buildDeviceCell(context, e)).toList(),
+      ),
+    );
+  }
+
+  Widget _buildDeviceCell(BuildContext context, AnalyticsDevice device) {
+    final deviceColor = chartData
+        .firstWhere(
+          (element) => element.deviceId == device.uuid,
+          orElse: () => const DeviceEnergyDataModel(
+            energy: [],
+            deviceName: '',
+            deviceId: '',
+            color: Colors.red,
+          ),
+        )
+        .color;
+
+    return Tooltip(
+      message: '${device.name}\n${device.productDevice?.uuid ?? ''}',
+      child: Container(
+        height: MediaQuery.sizeOf(context).height * 0.0365,
+        padding: const EdgeInsetsDirectional.symmetric(
+          vertical: 8,
+          horizontal: 12,
+        ),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadiusDirectional.circular(8),
+          border: Border.all(
+            color: ColorsManager.greyColor,
+            width: 1,
+          ),
+        ),
+        child: FittedBox(
+          fit: BoxFit.scaleDown,
+          alignment: Alignment.center,
+          child: Row(
+            spacing: 6,
+            children: [
+              CircleAvatar(
+                radius: 4,
+                backgroundColor: deviceColor,
+              ),
+              Text(
+                device.name,
+                textAlign: TextAlign.center,
+                style: const TextStyle(
+                  color: ColorsManager.blackColor,
+                  fontWeight: FontWeight.w400,
+                  fontSize: 14,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,160 @@
+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';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/analytics_device_dropdown.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart_box.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clamp_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class PowerClampEnergyDataWidget extends StatelessWidget {
+  const PowerClampEnergyDataWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<RealtimeDeviceChangesBloc, RealtimeDeviceChangesState>(
+      listenWhen: (previous, current) =>
+          previous.deviceStatusList != current.deviceStatusList ||
+          previous.status != current.status,
+      listener: (context, state) => context.read<PowerClampInfoBloc>().add(
+            UpdatePowerClampStatusEvent(state.deviceStatusList),
+          ),
+      child: BlocBuilder<PowerClampInfoBloc, PowerClampInfoState>(
+        builder: (context, state) {
+          final generalDataPoints =
+              state.powerClampModel?.status.general.dataPoints ?? [];
+          return Container(
+            decoration: subSectionContainerDecoration.copyWith(
+              borderRadius: BorderRadius.circular(30),
+            ),
+            padding: const EdgeInsetsDirectional.all(32),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                AnalyticsErrorWidget(state.errorMessage),
+                _buildHeader(context),
+                Text(
+                  'Device ID:',
+                  style: context.textTheme.bodySmall?.copyWith(
+                    color: ColorsManager.textPrimaryColor,
+                    fontWeight: FontWeight.w400,
+                    fontSize: 12,
+                  ),
+                ),
+                const SizedBox(height: 6),
+                SelectableText(
+                  context.watch<AnalyticsDevicesBloc>().state.selectedDevice?.uuid ??
+                      'N/A',
+                  style: context.textTheme.bodySmall?.copyWith(
+                    color: ColorsManager.blackColor,
+                    fontWeight: FontWeight.w400,
+                    fontSize: 12,
+                  ),
+                ),
+                const Divider(),
+                Expanded(
+                  flex: 2,
+                  child: PowerClampEnergyStatusWidget(
+                    status: [
+                      PowerClampEnergyStatus(
+                        iconPath: Assets.powerActiveIcon,
+                        title: 'Active',
+                        value: _valueFromCode('EnergyConsumed', generalDataPoints),
+                        unit: 'W',
+                      ),
+                      PowerClampEnergyStatus(
+                        iconPath: Assets.voltMeterIcon,
+                        title: 'Current',
+                        value: _valueFromCode('Current', generalDataPoints),
+                        unit: 'A',
+                      ),
+                      PowerClampEnergyStatus(
+                        iconPath: Assets.frequencyIcon,
+                        title: 'Frequency',
+                        value: _valueFromCode('Frequency', generalDataPoints),
+                        unit: 'Hz',
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(height: 14),
+                Expanded(
+                  flex: 4,
+                  child: PowerClampPhasesDataWidget(
+                    phaseA: state.powerClampModel?.status.phaseA,
+                    phaseB: state.powerClampModel?.status.phaseB,
+                    phaseC: state.powerClampModel?.status.phaseC,
+                  ),
+                ),
+                const SizedBox(height: 14),
+                const Expanded(flex: 3, child: EnergyConsumptionByPhasesChartBox()),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildHeader(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Expanded(
+          flex: 3,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            alignment: AlignmentDirectional.centerStart,
+            child: SelectableText(
+              'Smart Power Clamp',
+              style: context.textTheme.headlineSmall?.copyWith(
+                fontWeight: FontWeight.w700,
+                color: ColorsManager.vividBlue.withValues(alpha: 0.6),
+                fontSize: 18,
+              ),
+            ),
+          ),
+        ),
+        const Spacer(),
+        Expanded(
+          flex: 2,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            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,
+                );
+              },
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  String _valueFromCode(String code, List<DataPoint> points) {
+    return points
+        .firstWhere((e) => e.code == code, orElse: () => DataPoint(value: '--'))
+        .value
+        .toString();
+  }
+}

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

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class PowerClampEnergyStatusWidget extends StatelessWidget {
+  const PowerClampEnergyStatusWidget({
+    super.key,
+    required this.status,
+  });
+
+  final List<PowerClampEnergyStatus> status;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: secondarySection.copyWith(boxShadow: const []),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: List.generate(
+          status.length * 2 - 1,
+          (index) => index.isEven
+              ? Expanded(child: _buildItem(context, status[index ~/ 2]))
+              : _buildDivider(),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildItem(BuildContext context, PowerClampEnergyStatus item) {
+    return Center(
+      child: ListTile(
+        titleAlignment: ListTileTitleAlignment.center,
+        leading: SvgPicture.asset(
+          item.iconPath,
+          fit: BoxFit.scaleDown,
+          alignment: AlignmentDirectional.centerEnd,
+          height: 18,
+          width: 18,
+        ),
+        contentPadding: const EdgeInsets.symmetric(horizontal: 20),
+        title: Text(
+          item.title,
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
+            fontWeight: FontWeight.w400,
+            fontSize: 16,
+          ),
+          softWrap: true,
+          maxLines: 2,
+          overflow: TextOverflow.ellipsis,
+        ),
+        trailing: Text.rich(
+          TextSpan(
+            style: context.textTheme.bodySmall?.copyWith(
+              color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
+              fontWeight: FontWeight.w700,
+              fontSize: 16,
+            ),
+            children: [
+              TextSpan(text: '${item.value} '),
+              TextSpan(
+                text: item.unit,
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
+                  fontWeight: FontWeight.w700,
+                  fontSize: 8,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildDivider() {
+    return Container(
+      height: 1,
+      decoration: const BoxDecoration(
+        boxShadow: [
+          BoxShadow(
+            color: Color.fromARGB(20, 0, 0, 0),
+            offset: Offset(0, 1),
+            blurRadius: 1,
+          ),
+          BoxShadow(
+            color: Color.fromARGB(30, 0, 0, 0),
+            offset: Offset(0, -2),
+            blurRadius: 3,
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class PowerClampPhase extends StatelessWidget {
+  const PowerClampPhase({
+    super.key,
+    required this.iconPath,
+    required this.title,
+    required this.value,
+    this.unit,
+  });
+
+  final String iconPath;
+  final String title;
+  final String value;
+  final String? unit;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Container(
+        margin: const EdgeInsets.only(bottom: 4),
+        decoration: containerWhiteDecoration.copyWith(boxShadow: const []),
+        padding: const EdgeInsetsDirectional.all(8),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          spacing: 10,
+          children: [
+            _buildIcon(),
+            Expanded(
+              flex: 3,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                spacing: 4,
+                children: [
+                  _buildTitle(context),
+                  _buildValue(context),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildValue(BuildContext context) {
+    final textStyle = context.textTheme.bodySmall?.copyWith(
+      color: ColorsManager.textPrimaryColor.withValues(
+        alpha: 0.83,
+      ),
+      fontWeight: FontWeight.w700,
+      fontSize: 15,
+    );
+
+    return Expanded(
+      flex: 2,
+      child: FittedBox(
+        alignment: AlignmentDirectional.topCenter,
+        fit: BoxFit.scaleDown,
+        child: Text.rich(
+          TextSpan(
+            style: textStyle,
+            children: [
+              TextSpan(text: '$value '),
+              if (unit != null)
+                TextSpan(
+                  text: unit,
+                  style: textStyle?.copyWith(
+                    color: ColorsManager.textPrimaryColor.withValues(
+                      alpha: 0.83,
+                    ),
+                    fontWeight: FontWeight.w700,
+                    fontSize: 8,
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildTitle(BuildContext context) {
+    return Expanded(
+      flex: 2,
+      child: FittedBox(
+        alignment: AlignmentDirectional.centerStart,
+        fit: BoxFit.scaleDown,
+        child: Text(
+          title,
+          style: context.textTheme.titleSmall?.copyWith(
+            color: ColorsManager.lightGreyColor,
+            fontWeight: FontWeight.w400,
+            fontSize: 8,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildIcon() {
+    return Expanded(
+      child: FittedBox(
+        fit: BoxFit.scaleDown,
+        child: SvgPicture.asset(iconPath),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,131 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_phase.dart';
+import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clamp_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class PowerClampPhasesDataWidget extends StatelessWidget {
+  const PowerClampPhasesDataWidget({
+    required this.phaseA,
+    required this.phaseB,
+    required this.phaseC,
+    super.key,
+  });
+
+  final Phase? phaseA;
+  final Phase? phaseB;
+  final Phase? phaseC;
+
+  @override
+  Widget build(BuildContext context) {
+    final phases = [phaseA, phaseB, phaseC];
+
+    return Container(
+      width: double.infinity,
+      decoration: secondarySection.copyWith(boxShadow: const []),
+      child: Row(
+        children: List.generate(5, (index) {
+          if (index.isOdd) return _buildSeparator();
+          final phaseIndex = index ~/ 2;
+          final phase = phases[phaseIndex];
+          final phaseSuffix = ['A', 'B', 'C'][phaseIndex];
+
+          return Expanded(
+            child: Padding(
+              padding: const EdgeInsetsDirectional.symmetric(horizontal: 14),
+              child: Column(
+                spacing: 4,
+                children: [
+                  const SizedBox(height: 8),
+                  FittedBox(
+                    fit: BoxFit.scaleDown,
+                    alignment: AlignmentDirectional.center,
+                    child: Text(
+                      'Phase ${phaseIndex + 1}',
+                      style: context.textTheme.titleLarge?.copyWith(
+                        color: ColorsManager.textPrimaryColor,
+                        fontWeight: FontWeight.w700,
+                        fontSize: 20,
+                      ),
+                    ),
+                  ),
+                  PowerClampPhase(
+                    iconPath: Assets.powerActiveIcon,
+                    title: 'Active Power',
+                    value: _valueFromCode(
+                      code: 'ReactivePower$phaseSuffix',
+                      points: phase?.dataPoints,
+                    ),
+                    unit: 'W',
+                  ),
+                  PowerClampPhase(
+                    iconPath: Assets.voltageIcon,
+                    title: 'Voltage',
+                    value: _valueFromCode(
+                      code: 'Voltage$phaseSuffix',
+                      points: phase?.dataPoints,
+                    ),
+                    unit: 'V',
+                  ),
+                  PowerClampPhase(
+                    iconPath: Assets.voltMeterIcon,
+                    title: 'Current',
+                    value: _valueFromCode(
+                      code: 'Current$phaseSuffix',
+                      points: phase?.dataPoints,
+                    ),
+                    unit: 'A',
+                  ),
+                  PowerClampPhase(
+                    iconPath: Assets.speedoMeter,
+                    title: 'Power Factor',
+                    value: _valueFromCode(
+                      code: 'PowerFactor$phaseSuffix',
+                      points: phase?.dataPoints,
+                    ),
+                  ),
+                  const SizedBox(height: 8),
+                ],
+              ),
+            ),
+          );
+        }),
+      ),
+    );
+  }
+
+  Widget _buildSeparator() {
+    return Container(
+      height: double.infinity,
+      width: 1,
+      decoration: const BoxDecoration(
+        boxShadow: [
+          BoxShadow(
+            color: Color.fromARGB(20, 0, 0, 0),
+            offset: Offset(1, 0),
+            blurRadius: 1,
+          ),
+          BoxShadow(
+            color: Color.fromARGB(30, 0, 0, 0),
+            offset: Offset(-2, 0),
+            blurRadius: 1,
+          ),
+        ],
+      ),
+    );
+  }
+
+  String _valueFromCode({
+    required String code,
+    required List<DataPoint>? points,
+  }) {
+    final element = points?.firstWhere(
+      (e) => e.code == code,
+      orElse: () => DataPoint(value: '--'),
+    );
+
+    return element?.value.toString() ?? '--';
+  }
+}

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

@@ -0,0 +1,74 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+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';
+
+class TotalEnergyConsumptionChart extends StatelessWidget {
+  const TotalEnergyConsumptionChart({required this.chartData, super.key});
+
+  final List<EnergyDataModel> chartData;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: LineChart(
+        LineChartData(
+          titlesData: EnergyManagementChartsHelper.titlesData(
+            context,
+            leftTitlesInterval: 250,
+          ),
+          gridData: EnergyManagementChartsHelper.gridData().copyWith(
+            checkToShowHorizontalLine: (value) => true,
+            horizontalInterval: 250,
+          ),
+          borderData: EnergyManagementChartsHelper.borderData(),
+          lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
+          lineBarsData: _lineBarsData,
+        ),
+        duration: Duration.zero,
+        curve: Curves.easeIn,
+      ),
+    );
+  }
+
+  List<LineChartBarData> get _lineBarsData {
+    return [
+      LineChartBarData(
+        preventCurveOvershootingThreshold: 0.1,
+        curveSmoothness: 0.55,
+        preventCurveOverShooting: true,
+        spots: chartData
+            .asMap()
+            .entries
+            .map(
+              (entry) => FlSpot(
+                entry.value.date.day.toDouble(),
+                entry.value.value,
+              ),
+            )
+            .toList(),
+        color: ColorsManager.blueColor.withValues(alpha: 0.6),
+        shadow: const Shadow(color: Colors.black12),
+        show: true,
+        isCurved: true,
+        belowBarData: BarAreaData(
+          show: true,
+          gradient: LinearGradient(
+            colors: [
+              ColorsManager.vividBlue.withValues(alpha: 0.3),
+              ColorsManager.vividBlue.withValues(alpha: 0.2),
+              ColorsManager.vividBlue.withValues(alpha: 0.1),
+              Colors.transparent,
+            ],
+            begin: Alignment.center,
+            end: Alignment.bottomCenter,
+          ),
+        ),
+        dotData: const FlDotData(show: false),
+        isStrokeCapRound: true,
+        barWidth: 3,
+      ),
+    ];
+  }
+}

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

@@ -0,0 +1,49 @@
+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/chart_title.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class TotalEnergyConsumptionChartBox extends StatelessWidget {
+  const TotalEnergyConsumptionChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<TotalEnergyConsumptionBloc, TotalEnergyConsumptionState>(
+      builder: (context, state) => Container(
+        decoration: subSectionContainerDecoration.copyWith(
+          borderRadius: BorderRadius.circular(30),
+        ),
+        padding: const EdgeInsets.all(30),
+        child: Column(
+          spacing: 20,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            AnalyticsErrorWidget(state.errorMessage),
+            Row(
+              children: [
+                ChartsLoadingWidget(
+                  isLoading: state.status == TotalEnergyConsumptionStatus.loading,
+                ),
+                const Expanded(
+                  flex: 3,
+                  child: FittedBox(
+                    alignment: AlignmentDirectional.centerStart,
+                    fit: BoxFit.scaleDown,
+                    child: ChartTitle(title: Text('Total Energy Consumption')),
+                  ),
+                ),
+                const Spacer(flex: 4),
+              ],
+            ),
+            const Divider(),
+            TotalEnergyConsumptionChart(chartData: state.chartData),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_bloc.dart

@@ -0,0 +1,37 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/models/occupacy.dart';
+import 'package:syncrow_web/pages/analytics/params/get_occupancy_param.dart';
+import 'package:syncrow_web/pages/analytics/services/occupacy/occupacy_service.dart';
+
+part 'occupancy_event.dart';
+part 'occupancy_state.dart';
+
+class OccupancyBloc extends Bloc<OccupancyEvent, OccupancyState> {
+  OccupancyBloc(this._occupacyService) : super(const OccupancyState()) {
+    on<LoadOccupancyEvent>(_onLoadOccupancyEvent);
+    on<ClearOccupancyEvent>(_onClearOccupancyEvent);
+  }
+
+  final OccupacyService _occupacyService;
+
+  Future<void> _onLoadOccupancyEvent(
+    LoadOccupancyEvent event,
+    Emitter<OccupancyState> emit,
+  ) async {
+    emit(state.copyWith(status: OccupancyStatus.loading));
+    try {
+      final chartData = await _occupacyService.load(event.param);
+      emit(state.copyWith(chartData: chartData, status: OccupancyStatus.loaded));
+    } catch (e) {
+      emit(state.copyWith(status: OccupancyStatus.failure, errorMessage: '$e'));
+    }
+  }
+
+  void _onClearOccupancyEvent(
+    ClearOccupancyEvent event,
+    Emitter<OccupancyState> emit,
+  ) {
+    emit(const OccupancyState());
+  }
+}

lib/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_event.dart

@@ -0,0 +1,21 @@
+part of 'occupancy_bloc.dart';
+
+sealed class OccupancyEvent extends Equatable {
+  const OccupancyEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class LoadOccupancyEvent extends OccupancyEvent {
+  const LoadOccupancyEvent(this.param);
+
+  final GetOccupancyParam param;
+
+  @override
+  List<Object> get props => [param];
+}
+
+final class ClearOccupancyEvent extends OccupancyEvent {
+  const ClearOccupancyEvent();
+}

lib/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_state.dart

@@ -0,0 +1,30 @@
+part of 'occupancy_bloc.dart';
+
+enum OccupancyStatus { initial, loading, loaded, failure }
+
+final class OccupancyState extends Equatable {
+  const OccupancyState({
+    this.chartData = const [],
+    this.status = OccupancyStatus.initial,
+    this.errorMessage,
+  });
+
+  final List<Occupacy> chartData;
+  final OccupancyStatus status;
+  final String? errorMessage;
+
+  OccupancyState copyWith({
+    List<Occupacy>? chartData,
+    OccupancyStatus? status,
+    String? errorMessage,
+  }) {
+    return OccupancyState(
+      chartData: chartData ?? this.chartData,
+      status: status ?? this.status,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [chartData, status, errorMessage];
+}

lib/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_bloc.dart

@@ -0,0 +1,49 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/models/occupancy_heat_map_model.dart';
+import 'package:syncrow_web/pages/analytics/params/get_occupancy_heat_map_param.dart';
+import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/occupancy_heat_map_service.dart';
+
+part 'occupancy_heat_map_event.dart';
+part 'occupancy_heat_map_state.dart';
+
+class OccupancyHeatMapBloc
+    extends Bloc<OccupancyHeatMapEvent, OccupancyHeatMapState> {
+  OccupancyHeatMapBloc(
+    this._occupancyHeatMapService,
+  ) : super(const OccupancyHeatMapState()) {
+    on<LoadOccupancyHeatMapEvent>(_onLoadOccupancyHeatMapEvent);
+    on<ClearOccupancyHeatMapEvent>(_onClearOccupancyHeatMapEvent);
+  }
+  final OccupancyHeatMapService _occupancyHeatMapService;
+
+  Future<void> _onLoadOccupancyHeatMapEvent(
+    LoadOccupancyHeatMapEvent event,
+    Emitter<OccupancyHeatMapState> emit,
+  ) async {
+    emit(state.copyWith(status: OccupancyHeatMapStatus.loading));
+    try {
+      final occupancyHeatMap = await _occupancyHeatMapService.load(event.param);
+      emit(
+        state.copyWith(
+          status: OccupancyHeatMapStatus.loaded,
+          heatMapData: occupancyHeatMap,
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: OccupancyHeatMapStatus.failure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  void _onClearOccupancyHeatMapEvent(
+    ClearOccupancyHeatMapEvent event,
+    Emitter<OccupancyHeatMapState> emit,
+  ) {
+    emit(const OccupancyHeatMapState());
+  }
+}

lib/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_event.dart

@@ -0,0 +1,21 @@
+part of 'occupancy_heat_map_bloc.dart';
+
+sealed class OccupancyHeatMapEvent extends Equatable {
+  const OccupancyHeatMapEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class LoadOccupancyHeatMapEvent extends OccupancyHeatMapEvent {
+  const LoadOccupancyHeatMapEvent(this.param);
+
+  final GetOccupancyHeatMapParam param;
+
+  @override
+  List<Object> get props => [param];
+}
+
+final class ClearOccupancyHeatMapEvent extends OccupancyHeatMapEvent {
+  const ClearOccupancyHeatMapEvent();
+}

lib/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_state.dart

@@ -0,0 +1,30 @@
+part of 'occupancy_heat_map_bloc.dart';
+
+enum OccupancyHeatMapStatus { initial, loading, loaded, failure }
+
+final class OccupancyHeatMapState extends Equatable {
+  const OccupancyHeatMapState({
+    this.status = OccupancyHeatMapStatus.initial,
+    this.heatMapData = const [],
+    this.errorMessage,
+  });
+
+  final OccupancyHeatMapStatus status;
+  final String? errorMessage;
+  final List<OccupancyHeatMapModel> heatMapData;
+
+  OccupancyHeatMapState copyWith({
+    OccupancyHeatMapStatus? status,
+    List<OccupancyHeatMapModel>? heatMapData,
+    String? errorMessage,
+  }) {
+    return OccupancyHeatMapState(
+      status: status ?? this.status,
+      heatMapData: heatMapData ?? this.heatMapData,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [status, errorMessage, heatMapData];
+}

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

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/models/analytics_device.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/realtime_device_changes/realtime_device_changes_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_bloc.dart';
+import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
+import 'package:syncrow_web/pages/analytics/params/get_occupancy_heat_map_param.dart';
+import 'package:syncrow_web/pages/analytics/params/get_occupancy_param.dart';
+
+abstract final class FetchOccupancyDataHelper {
+  const FetchOccupancyDataHelper._();
+
+  static void loadOccupancyData(
+    BuildContext context, {
+    required String communityId,
+    required String spaceId,
+  }) {
+    if (communityId.isEmpty && spaceId.isEmpty) {
+      clearAllData(context);
+      return;
+    }
+
+    final datePickerState = context.read<AnalyticsDatePickerBloc>().state;
+
+    loadAnalyticsDevices(context, communityUuid: communityId, spaceUuid: spaceId);
+    final selectedDevice = context.read<AnalyticsDevicesBloc>().state.selectedDevice;
+
+    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>()
+        ..add(const RealtimeDeviceChangesClosed())
+        ..add(
+          RealtimeDeviceChangesStarted(device.uuid),
+        );
+    }
+  }
+
+  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,
+    required String spaceUuid,
+  }) {
+    context.read<AnalyticsDevicesBloc>().add(
+          LoadAnalyticsDevicesEvent(
+            param: GetAnalyticsDevicesParam(
+              communityUuid: communityUuid,
+              spaceUuid: spaceUuid,
+              deviceTypes: ['WPS', 'CPS'],
+              requestType: AnalyticsDeviceRequestType.occupancy,
+            ),
+            onSuccess: (device) {
+              context.read<RealtimeDeviceChangesBloc>()
+                ..add(const RealtimeDeviceChangesClosed())
+                ..add(RealtimeDeviceChangesStarted(device.uuid));
+            },
+          ),
+        );
+  }
+
+  static void clearAllData(BuildContext context) {
+    context.read<OccupancyBloc>().add(
+          const ClearOccupancyEvent(),
+        );
+    context.read<OccupancyHeatMapBloc>().add(
+          const ClearOccupancyHeatMapEvent(),
+        );
+    context.read<RealtimeDeviceChangesBloc>().add(
+          const RealtimeDeviceChangesClosed(),
+        );
+
+    context.read<AnalyticsDevicesBloc>().add(
+          const ClearAnalyticsDeviceEvent(),
+        );
+  }
+}

lib/pages/analytics/modules/occupancy/views/analytics_occupancy_view.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_chart_box.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_end_side_bar.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_box.dart';
+
+class AnalyticsOccupancyView extends StatelessWidget {
+  const AnalyticsOccupancyView({super.key});
+
+  static const _padding = EdgeInsetsDirectional.all(32);
+
+  @override
+  Widget build(BuildContext context) {
+    final height = MediaQuery.sizeOf(context).height;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isMediumOrLess = constraints.maxWidth <= 900;
+        if (isMediumOrLess) {
+          return SingleChildScrollView(
+            padding: _padding,
+            child: Column(
+              spacing: 32,
+              children: [
+                SizedBox(height: height * 0.46, child: const OccupancyEndSideBar()),
+                SizedBox(height: height * 0.5, child: const OccupancyChartBox()),
+                SizedBox(height: height * 0.5, child: const OccupancyHeatMapBox()),
+              ],
+            ),
+          );
+        }
+
+        return SingleChildScrollView(
+          child: Container(
+            padding: _padding,
+            height: height * 0.9,
+            child: const Row(
+              spacing: 32,
+              children: [
+                Expanded(
+                  flex: 5,
+                  child: Column(
+                    spacing: 20,
+                    children: [
+                      Expanded(child: OccupancyChartBox()),
+                      Expanded(child: OccupancyHeatMapBox()),
+                    ],
+                  ),
+                ),
+                Expanded(flex: 2, child: OccupancyEndSideBar()),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,152 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/models/occupacy.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class OccupancyChart extends StatelessWidget {
+  const OccupancyChart({required this.chartData, super.key});
+
+  final List<Occupacy> chartData;
+
+  static const _chartWidth = 16.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return BarChart(
+      BarChartData(
+        maxY: 1.0,
+        gridData: EnergyManagementChartsHelper.gridData().copyWith(
+          checkToShowHorizontalLine: (value) => true,
+          horizontalInterval: 0.2,
+        ),
+        borderData: EnergyManagementChartsHelper.borderData(),
+        barTouchData: _barTouchData(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(
+            x: index,
+            barsSpace: 0,
+            groupVertically: true,
+            barRods: [
+              BarChartRodData(
+                toY: 1.0,
+                fromY: double.parse(actual.occupancy) + 0.025,
+                color: ColorsManager.graysColor,
+                width: _chartWidth,
+                borderRadius: BorderRadius.circular(10),
+              ),
+              BarChartRodData(
+                toY: double.parse(actual.occupancy),
+                color: ColorsManager.vividBlue.withValues(alpha: 0.8),
+                width: _chartWidth,
+                borderRadius: BorderRadius.circular(10),
+              ),
+            ],
+          );
+        }),
+      ),
+    );
+  }
+
+  BarTouchData _barTouchData(BuildContext context) {
+    return BarTouchData(
+      touchTooltipData: BarTouchTooltipData(
+        getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
+        tooltipBorder: const BorderSide(
+          color: ColorsManager.semiTransparentBlack,
+        ),
+        tooltipRoundedRadius: 16,
+        tooltipPadding: const EdgeInsets.all(8),
+        getTooltipItem: (group, groupIndex, rod, rodIndex) => getTooltipItem(
+          context: context,
+          group: group,
+          groupIndex: groupIndex,
+          rod: rod,
+          rodIndex: rodIndex,
+        ),
+      ),
+    );
+  }
+
+  BarTooltipItem? getTooltipItem({
+    required BuildContext context,
+    required BarChartGroupData group,
+    required int groupIndex,
+    required BarChartRodData rod,
+    required int rodIndex,
+  }) {
+    final data = chartData;
+
+    final occupancyValue = double.parse(data[group.x.toInt()].occupancy);
+    final percentage = '${(occupancyValue * 100).toStringAsFixed(0)}%';
+
+    return BarTooltipItem(
+      percentage,
+      context.textTheme.bodyMedium!.copyWith(
+        color: ColorsManager.blackColor,
+        fontSize: 14,
+      ),
+    );
+  }
+
+  FlTitlesData _titlesData(BuildContext context) {
+    final titlesData = EnergyManagementChartsHelper.titlesData(
+      context,
+      leftTitlesInterval: 250,
+    );
+
+    final leftTitles = titlesData.leftTitles.copyWith(
+      sideTitles: titlesData.leftTitles.sideTitles.copyWith(
+        reservedSize: 70,
+        interval: 0.2,
+        getTitlesWidget: (value, meta) => Padding(
+          padding: const EdgeInsetsDirectional.only(end: 12),
+          child: FittedBox(
+            alignment: AlignmentDirectional.centerStart,
+            fit: BoxFit.scaleDown,
+            child: Text(
+              '${(value * 100).toStringAsFixed(0)}%',
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 12,
+                color: ColorsManager.greyColor,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final bottomTitles = AxisTitles(
+      sideTitles: SideTitles(
+        showTitles: true,
+        getTitlesWidget: (value, _) => FittedBox(
+          alignment: AlignmentDirectional.bottomCenter,
+          fit: BoxFit.scaleDown,
+          child: Text(
+            (value + 1).toString(),
+            style: context.textTheme.bodySmall?.copyWith(
+              color: ColorsManager.greyColor,
+              fontSize: 8,
+            ),
+          ),
+        ),
+        reservedSize: 36,
+      ),
+    );
+
+    return titlesData.copyWith(
+      leftTitles: leftTitles,
+      bottomTitles: bottomTitles,
+    );
+  }
+}

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

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.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/widgets/analytics_date_filter_button.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/helpers/fetch_occupancy_data_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_chart.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class OccupancyChartBox extends StatelessWidget {
+  const OccupancyChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final spaceTreeState = context.watch<SpaceTreeBloc>().state;
+    return BlocBuilder<OccupancyBloc, OccupancyState>(
+      builder: (context, state) {
+        return Container(
+          padding: const EdgeInsets.all(30),
+          decoration: containerWhiteDecoration,
+          child: Column(
+            spacing: 20,
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AnalyticsErrorWidget(state.errorMessage),
+              Row(
+                children: [
+                  const Expanded(
+                    flex: 3,
+                    child: FittedBox(
+                      alignment: AlignmentDirectional.centerStart,
+                      fit: BoxFit.scaleDown,
+                      child: ChartTitle(title: Text('Occupancy')),
+                    ),
+                  ),
+                  const Spacer(),
+                  Expanded(
+                    child: FittedBox(
+                      fit: BoxFit.scaleDown,
+                      alignment: AlignmentDirectional.centerEnd,
+                      child: AnalyticsDateFilterButton(
+                        onDateSelected: (DateTime value) {
+                          context.read<AnalyticsDatePickerBloc>().add(
+                                UpdateAnalyticsDatePickerEvent(montlyDate: value),
+                              );
+                          if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                            FetchOccupancyDataHelper.loadOccupancyChartData(
+                              context,
+                              communityUuid:
+                                  spaceTreeState.selectedCommunities.firstOrNull ??
+                                      '',
+                              spaceUuid:
+                                  spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              date: value,
+                            );
+                          }
+                        },
+                        selectedDate: context
+                            .watch<AnalyticsDatePickerBloc>()
+                            .state
+                            .monthlyDate,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const Divider(height: 0),
+              Expanded(child: OccupancyChart(chartData: state.chartData)),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,142 @@
+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_devices/analytics_devices_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/analytics_device_dropdown.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class OccupancyEndSideBar extends StatelessWidget {
+  const OccupancyEndSideBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<RealtimeDeviceChangesBloc, RealtimeDeviceChangesState>(
+      builder: (context, state) {
+        return Container(
+          decoration: subSectionContainerDecoration.copyWith(
+            borderRadius: BorderRadius.circular(30),
+          ),
+          padding: const EdgeInsetsDirectional.all(32),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              _buildHeader(context),
+              Text(
+                'Device ID:',
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.textPrimaryColor,
+                  fontWeight: FontWeight.w400,
+                  fontSize: 12,
+                ),
+              ),
+              const SizedBox(height: 6),
+              SelectableText(
+                context.watch<AnalyticsDevicesBloc>().state.selectedDevice?.uuid ??
+                    'N/A',
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.blackColor,
+                  fontWeight: FontWeight.w400,
+                  fontSize: 12,
+                ),
+              ),
+              const SizedBox(height: 10),
+              const Divider(height: 1, color: ColorsManager.greyColor),
+              const SizedBox(height: 50),
+              SizedBox(
+                height: MediaQuery.sizeOf(context).height * 0.2,
+                child: PowerClampEnergyStatusWidget(
+                  status: [
+                    PowerClampEnergyStatus(
+                      iconPath: Assets.presenceState,
+                      title: 'Presence Status',
+                      value: _valueFromCode(
+                        'presence_state',
+                        state.deviceStatusList,
+                      ),
+                      unit: '',
+                    ),
+                    PowerClampEnergyStatus(
+                      iconPath: Assets.presenceTimeIcon,
+                      title: 'Presence Time',
+                      value:
+                          '${_valueFromCode('none_body_time', state.deviceStatusList)} Min',
+                      unit: '',
+                    ),
+                    PowerClampEnergyStatus(
+                      iconPath: Assets.currentDistanceIcon,
+                      title: 'Detection Distance',
+                      value:
+                          '${_valueFromCode('space_move_val', state.deviceStatusList)} M',
+                      unit: '',
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 20),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  String _valueFromCode(
+    String code,
+    List<Status> status, {
+    String? defaultValue,
+  }) {
+    final value = status
+        .firstWhere(
+          (e) => e.code == code,
+          orElse: () => Status(code: '--', value: '--'),
+        )
+        .value
+        .toString();
+    return value == 'null' ? defaultValue ?? '--' : value;
+  }
+
+  Widget _buildHeader(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Expanded(
+          flex: 3,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            alignment: AlignmentDirectional.centerStart,
+            child: SelectableText(
+              'Presnce Sensor',
+              style: context.textTheme.headlineSmall?.copyWith(
+                fontWeight: FontWeight.w700,
+                color: ColorsManager.vividBlue.withValues(alpha: 0.6),
+                fontSize: 18,
+              ),
+            ),
+          ),
+        ),
+        const Spacer(),
+        Expanded(
+          flex: 2,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            alignment: AlignmentDirectional.centerEnd,
+            child: AnalyticsDeviceDropdown(
+              onChanged: (value) =>
+                  FetchEnergyManagementDataHelper.loadRealtimeDeviceChanges(
+                context,
+                deviceUuid: value.uuid,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,83 @@
+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';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_painter.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class OccupancyHeatMap extends StatelessWidget {
+  const OccupancyHeatMap({required this.heatMapData, super.key});
+  final Map<DateTime, int> heatMapData;
+
+  static const _cellSize = 16.0;
+  static const _totalWeeks = 53;
+
+  int get _maxValue => heatMapData.isNotEmpty
+      ? heatMapData.keys.map((key) => heatMapData[key] ?? 0).reduce(math.max)
+      : 0;
+
+  DateTime _getStartingDate() {
+    final jan1 = DateTime(DateTime.now().year, 1, 1);
+    final startOfWeek = jan1.subtract(Duration(days: jan1.weekday - 1));
+    return startOfWeek;
+  }
+
+  List<OccupancyPaintItem> _generatePaintItems(DateTime startDate) {
+    return List.generate(_totalWeeks * 7, (index) {
+      final date = startDate.add(Duration(days: index));
+      final value = heatMapData[date] ?? 0;
+      return OccupancyPaintItem(index: index, value: value, date: date);
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final startDate = _getStartingDate();
+    final paintItems = _generatePaintItems(startDate);
+
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        OccupancyHeatMapMonths(startDate: startDate, cellSize: _cellSize),
+        Container(
+          decoration: const BoxDecoration(
+            border: Border(
+              bottom: BorderSide(color: ColorsManager.grayBorder),
+              top: BorderSide(color: ColorsManager.grayBorder),
+            ),
+          ),
+          width: double.infinity,
+          child: Row(
+            children: [
+              Expanded(
+                child: FittedBox(
+                  fit: BoxFit.fill,
+                  child: Row(
+                    children: [
+                      const OccupancyHeatMapDays(cellSize: _cellSize),
+                      SizedBox(
+                        width: _totalWeeks * _cellSize,
+                        height: 7 * _cellSize,
+                        child: InteractiveHeatMap(
+                          items: paintItems,
+                          maxValue: _maxValue,
+                          cellSize: _cellSize,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: 20),
+        OccupancyHeatMapGradient(maxValue: _maxValue),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.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/widgets/analytics_date_filter_button.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/helpers/fetch_occupancy_data_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class OccupancyHeatMapBox extends StatelessWidget {
+  const OccupancyHeatMapBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final spaceTreeState = context.watch<SpaceTreeBloc>().state;
+    return BlocBuilder<OccupancyHeatMapBloc, OccupancyHeatMapState>(
+      builder: (context, state) {
+        return Container(
+          padding: const EdgeInsets.all(30),
+          decoration: containerWhiteDecoration,
+          child: Column(
+            spacing: 20,
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AnalyticsErrorWidget(state.errorMessage),
+              Row(
+                children: [
+                  const Expanded(
+                    flex: 3,
+                    child: FittedBox(
+                      alignment: AlignmentDirectional.centerStart,
+                      fit: BoxFit.scaleDown,
+                      child: ChartTitle(title: Text('Occupancy Heat Map')),
+                    ),
+                  ),
+                  const Spacer(),
+                  Expanded(
+                    child: FittedBox(
+                      fit: BoxFit.scaleDown,
+                      alignment: AlignmentDirectional.centerEnd,
+                      child: AnalyticsDateFilterButton(
+                        onDateSelected: (DateTime value) {
+                          context.read<AnalyticsDatePickerBloc>().add(
+                                UpdateAnalyticsDatePickerEvent(yearlyDate: value),
+                              );
+                          if (spaceTreeState.selectedSpaces.isNotEmpty) {
+                            FetchOccupancyDataHelper.loadHeatMapData(
+                              context,
+                              spaceUuid:
+                                  spaceTreeState.selectedSpaces.firstOrNull ?? '',
+                              year: value,
+                            );
+                          }
+                        },
+                        datePickerType: DatePickerType.year,
+                        selectedDate: context
+                            .watch<AnalyticsDatePickerBloc>()
+                            .state
+                            .yearlyDate,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const Divider(height: 0),
+              Expanded(
+                child: OccupancyHeatMap(
+                  heatMapData: state.heatMapData.asMap().map(
+                        (_, value) => MapEntry(
+                          value.eventDate,
+                          value.countTotalPresenceDetected,
+                        ),
+                      ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class OccupancyHeatMapDays extends StatelessWidget {
+  const OccupancyHeatMapDays({
+    required this.cellSize,
+    this.textColor = ColorsManager.blackColor,
+    super.key,
+  });
+
+  final double cellSize;
+  final Color textColor;
+
+  static const _weekDayLabels = [
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday',
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: List.generate(7, (i) {
+        final dayLabel = _weekDayLabels[i];
+        return Container(
+          height: cellSize,
+          alignment: AlignmentDirectional.centerStart,
+          margin: const EdgeInsetsDirectional.all(0.5).add(
+            const EdgeInsetsDirectional.only(end: 4),
+          ),
+          padding: const EdgeInsets.only(right: 6),
+          child: Text(
+            dayLabel,
+            textAlign: TextAlign.start,
+            style: context.textTheme.bodySmall?.copyWith(
+              color: textColor,
+              fontSize: 8,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        );
+      }),
+    );
+  }
+}

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

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class OccupancyHeatMapGradient extends StatelessWidget {
+  const OccupancyHeatMapGradient({super.key, required this.maxValue});
+
+  final int maxValue;
+  List<Color> _heatMapColors() {
+    if (maxValue == 0) {
+      return [
+        ColorsManager.vividBlue.withValues(alpha: 0),
+        ColorsManager.vividBlue.withValues(alpha: 0),
+      ];
+    }
+    return List.generate(
+      maxValue + 1,
+      (index) => ColorsManager.vividBlue.withValues(alpha: index / maxValue),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        const Spacer(),
+        Tooltip(
+          message: 'Min: 0 - Max: $maxValue',
+          child: Container(
+            width: 150,
+            height: 20,
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: ColorsManager.grayBorder,
+                width: 1,
+              ),
+              gradient: LinearGradient(
+                begin: AlignmentDirectional.centerEnd,
+                end: AlignmentDirectional.centerStart,
+                colors: _heatMapColors(),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_days.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class OccupancyHeatMapMonths extends StatelessWidget {
+  const OccupancyHeatMapMonths({
+    required this.startDate,
+    required this.cellSize,
+    super.key,
+  });
+
+  final DateTime startDate;
+  final double cellSize;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 48,
+      width: double.infinity,
+      color: Colors.transparent,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.end,
+        children: [
+          OccupancyHeatMapDays(
+            cellSize: cellSize / 3,
+            textColor: Colors.transparent,
+          ),
+          ...List.generate(12, (monthIndex) {
+            final monthStartDate = DateTime(startDate.year, monthIndex + 1, 1);
+            final monthName = DateFormat.MMM().format(monthStartDate);
+            return Expanded(
+              child: RotatedBox(
+                quarterTurns: 3,
+                child: Container(
+                  padding: EdgeInsetsDirectional.zero,
+                  margin: EdgeInsetsDirectional.zero,
+                  decoration: const BoxDecoration(
+                    border: Border(
+                      top: BorderSide(color: ColorsManager.borderColor),
+                    ),
+                  ),
+                  width: cellSize * 4,
+                  child: Padding(
+                    padding: const EdgeInsets.only(left: 4, top: 2),
+                    child: Text(
+                      monthName,
+                      style: const TextStyle(fontSize: 8),
+                    ),
+                  ),
+                ),
+              ),
+            );
+          }),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+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,
+    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;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Paint fillPaint = Paint();
+    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;
+      final row = item.index % 7;
+
+      final x = column * cellSize;
+      final y = row * cellSize;
+
+      fillPaint.color = _getColor(item.value);
+      final rect = Rect.fromLTWH(x, y, cellSize, cellSize);
+      canvas.drawRect(rect, fillPaint);
+
+      // 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);
+      }
+    }
+  }
+
+  void _drawDashedLine(Canvas canvas, Offset start, Offset end, Paint paint) {
+    const double dashWidth = 2.0;
+    const double dashSpace = 4.0;
+    final double totalLength = (end - start).distance;
+    final Offset direction = (end - start) / (end - start).distance;
+
+    double currentLength = 0.0;
+    while (currentLength < totalLength) {
+      final Offset dashStart = start + direction * currentLength;
+      final double nextLength = currentLength + dashWidth;
+      final Offset dashEnd =
+          start + direction * (nextLength < totalLength ? nextLength : totalLength);
+      canvas.drawLine(dashStart, dashEnd, paint);
+      currentLength = nextLength + dashSpace;
+    }
+  }
+
+  Color _getColor(int value) {
+    if (maxValue == 0) return ColorsManager.vividBlue.withValues(alpha: 0);
+    final opacity = value.clamp(0, maxValue) / maxValue;
+    return ColorsManager.vividBlue.withValues(alpha: opacity);
+  }
+
+  @override
+  bool shouldRepaint(covariant OccupancyPainter oldDelegate) =>
+      oldDelegate.hoveredItem != hoveredItem;
+}

lib/pages/analytics/params/get_analytics_devices_param.dart

@@ -0,0 +1,22 @@
+enum AnalyticsDeviceRequestType { energyManagement, occupancy }
+
+class GetAnalyticsDevicesParam {
+  final String? spaceUuid;
+  final List<String> deviceTypes;
+  final String? communityUuid;
+  final AnalyticsDeviceRequestType requestType;
+
+  const GetAnalyticsDevicesParam({
+    required this.requestType,
+    required this.spaceUuid,
+    required this.deviceTypes,
+    required this.communityUuid,
+  });
+
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      if (spaceUuid != null) 'spaceUuid': spaceUuid,
+      if (communityUuid != null) 'communityUuid': communityUuid,
+    };
+  }
+}

lib/pages/analytics/params/get_energy_consumption_by_phases_param.dart

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

lib/pages/analytics/params/get_energy_consumption_per_device_param.dart

@@ -0,0 +1,19 @@
+class 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_occupancy_heat_map_param.dart

@@ -0,0 +1,13 @@
+class GetOccupancyHeatMapParam {
+  final DateTime year;
+  final String spaceUuid;
+
+  const GetOccupancyHeatMapParam({
+    required this.year,
+    required this.spaceUuid,
+  });
+
+  Map<String, dynamic> toJson() {
+    return {'year': year.year};
+  }
+}

lib/pages/analytics/params/get_occupancy_param.dart

@@ -0,0 +1,19 @@
+class GetOccupancyParam {
+  final String monthDate;
+  final String? spaceUuid;
+  final String communityUuid;
+
+  GetOccupancyParam({
+    required this.monthDate,
+    required this.spaceUuid,
+    required this.communityUuid,
+  });
+
+  Map<String, dynamic> toJson() {
+    return {
+      'monthDate': monthDate,
+      'spaceUuid': spaceUuid,
+      'communityUuid': communityUuid,
+    };
+  }
+}

lib/pages/analytics/params/get_total_energy_consumption_param.dart

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

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

@@ -0,0 +1,6 @@
+import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
+import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
+
+abstract interface class AnalyticsDevicesService {
+  Future<List<AnalyticsDevice>> getDevices(GetAnalyticsDevicesParam param);
+}

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

@@ -0,0 +1,24 @@
+import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
+import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
+import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics_devices_service.dart';
+
+class AnalyticsDevicesServiceDelegate implements AnalyticsDevicesService {
+  const AnalyticsDevicesServiceDelegate(
+    this._occupancyService,
+    this._energyManagementService,
+  );
+
+  final AnalyticsDevicesService _occupancyService;
+  final AnalyticsDevicesService _energyManagementService;
+
+  @override
+  Future<List<AnalyticsDevice>> getDevices(
+    GetAnalyticsDevicesParam param,
+  ) {
+    return switch (param.requestType) {
+      AnalyticsDeviceRequestType.occupancy => _occupancyService.getDevices(param),
+      AnalyticsDeviceRequestType.energyManagement =>
+        _energyManagementService.getDevices(param),
+    };
+  }
+}

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

@@ -0,0 +1,36 @@
+import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
+import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
+import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics_devices_service.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+final class RemoteEnergyManagementAnalyticsDevicesService
+    implements AnalyticsDevicesService {
+  const RemoteEnergyManagementAnalyticsDevicesService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<AnalyticsDevice>> getDevices(GetAnalyticsDevicesParam param) async {
+    try {
+      final response = await _httpService.get(
+        path: '/devices-space-community/recursive-child',
+        queryParameters: param.toJson()
+          ..addAll({'productType': param.deviceTypes.first}),
+        expectedResponseModel: (response) {
+          final json = response as Map<String, dynamic>;
+          final dailyData = json['data'] as List<dynamic>? ?? <dynamic>[];
+
+          final result = dailyData.map(
+            (json) => AnalyticsDevice.fromJson(json as Map<String, dynamic>),
+          );
+
+          return result.toList();
+        },
+      );
+
+      return response;
+    } catch (e) {
+      throw Exception('Failed to load total energy consumption: $e');
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
+import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
+import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics_devices_service.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+class RemoteOccupancyAnalyticsDevicesService implements AnalyticsDevicesService {
+  const RemoteOccupancyAnalyticsDevicesService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<AnalyticsDevice>> getDevices(GetAnalyticsDevicesParam param) async {
+    try {
+      final requests = await Future.wait<List<AnalyticsDevice>>(
+        param.deviceTypes.map((e) {
+          final mappedParam = GetAnalyticsDevicesParam(
+            requestType: AnalyticsDeviceRequestType.occupancy,
+            spaceUuid: param.spaceUuid,
+            deviceTypes: [e],
+            communityUuid: param.communityUuid,
+          );
+          return _makeRequest(mappedParam);
+        }).toList(),
+      );
+
+      final result = requests.map((e) => e.first).toList();
+      return result;
+    } catch (e) {
+      throw Exception('Failed to load total energy consumption: $e');
+    }
+  }
+
+  Future<List<AnalyticsDevice>> _makeRequest(GetAnalyticsDevicesParam param) async {
+    try {
+      final projectUuid = await ProjectManager.getProjectUUID();
+
+      final response = await _httpService.get(
+        path:
+            '/projects/$projectUuid/communities/${param.communityUuid}/spaces/${param.spaceUuid}/devices',
+        queryParameters: {
+          'communityUuid': param.communityUuid,
+          'spaceUuid': param.spaceUuid,
+          'productType': param.deviceTypes.first,
+        },
+        expectedResponseModel: (response) {
+          final json = response as Map<String, dynamic>;
+          final dailyData = json['data'] as List<dynamic>? ?? <dynamic>[];
+
+          final result = dailyData.map(
+            (json) => AnalyticsDevice.fromJson(json as Map<String, dynamic>),
+          );
+          return result.toList();
+        },
+      );
+      return response;
+    } catch (e) {
+      rethrow;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+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';
+
+abstract interface class EnergyConsumptionByPhasesService {
+  Future<List<PhasesEnergyConsumption>> load(
+    GetEnergyConsumptionByPhasesParam param,
+  );
+}

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

@@ -0,0 +1,35 @@
+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';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+final class RemoteEnergyConsumptionByPhasesService
+    implements EnergyConsumptionByPhasesService {
+  const RemoteEnergyConsumptionByPhasesService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<PhasesEnergyConsumption>> load(
+    GetEnergyConsumptionByPhasesParam param,
+  ) async {
+    try {
+      final response = await _httpService.get(
+        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>? ?? [];
+          return mappedData.map((e) {
+            final jsonData = e as Map<String, dynamic>;
+            return PhasesEnergyConsumption.fromJson(jsonData);
+          }).toList();
+        },
+      );
+      return response;
+    } catch (e) {
+      throw Exception('Failed to load energy consumption per phase: $e');
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
+import 'package:syncrow_web/pages/analytics/params/get_energy_consumption_per_device_param.dart';
+
+abstract interface class EnergyConsumptionPerDeviceService {
+  Future<List<DeviceEnergyDataModel>> load(
+    GetEnergyConsumptionPerDeviceParam param,
+  );
+}