Enhance device management UI with improved padding and SVG icon integration

<!--
  Thanks for contributing!

Provide a description of your changes below and a general summary in the
title

Please look at the following checklist to ensure that your PR can be
accepted quickly:
-->

## Jira Ticket
[SP-1594](https://syncrow.atlassian.net/browse/SP-1594)

## Description

1. Implemented `Bloc` and `Services` to integrate the device location
into the side panel of the AQI Analytics module.
2. Fixed bugs in side panel caused by `Expanded` widgets.

## Type of Change

<!--- Put an `x` in all the boxes that apply: -->

- [x] ✨ New feature (non-breaking change which adds functionality)
- [x] 🛠️ Bug fix (non-breaking change which fixes an issue)
- [ ] ❌ Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] 🧹 Code refactor
- [ ] ✅ Build configuration change
- [ ] 📝 Documentation
- [ ] 🗑️ Chore 


[SP-1594]:
https://syncrow.atlassian.net/browse/SP-1594?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

.github/pull_request_template.md

@@ -7,11 +7,7 @@
 -->
 
 ## Jira Ticket
-<!-- Add your Jira ticket number as a link (e.g., [PROJ-123](https://jira.company.com/browse/PROJ-123)) -->
-
-## Status
-
-**READY/IN DEVELOPMENT/HOLD**
+[SP-0000](https://syncrow.atlassian.net/browse/SP-0000)
 
 ## Description
 
@@ -27,4 +23,4 @@
 - [ ] 🧹 Code refactor
 - [ ] ✅ Build configuration change
 - [ ] 📝 Documentation
-- [ ] 🗑️ Chore 
+- [ ] 🗑️ Chore 

.github/workflows/azure-static-web-apps-mango-bush-01e607f10.yml

@@ -4,10 +4,6 @@ on:
   push:
     branches:
       - main
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - main
 
 jobs:
   build_and_deploy_job:

.github/workflows/azure-static-web-apps-polite-smoke-017c65c10.yml

@@ -4,18 +4,12 @@ on:
   push:
     branches:
       - dev
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - dev
 
 jobs:
   build_and_deploy_job:
-    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
     runs-on: ubuntu-latest
     name: Build and Deploy Job
     steps:
-      
       - name: Checkout Code
         uses: actions/checkout@v3
         with:

.github/workflows/pr-check.yml

@@ -0,0 +1,29 @@
+name: Pull Request Check
+
+on:
+  pull_request:
+    branches:
+      - dev
+      - main
+
+jobs:
+  setup_flutter:
+    runs-on: ubuntu-latest
+    name: Setup Flutter and Dependencies
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+        with:
+          submodules: true
+          lfs: false
+
+      - name: Set up Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          flutter-version: '3.27.3'
+
+      - name: Install dependencies
+        run: flutter pub get
+
+      - name: Run Flutter Build
+        run: flutter build web --web-renderer canvaskit -t lib/main_dev.dart

assets/icons/close_settings_icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C8.79469 24 5.78123 22.7518 3.51469 20.4853C1.24823 18.2188 0 15.2053 0 12C0 8.79469 1.24823 5.78123 3.51469 3.51469C5.78123 1.24823 8.79469 0 12 0C15.2053 0 18.2188 1.24823 20.4853 3.51469C22.7518 5.78123 24 8.79469 24 12C24 15.2053 22.7518 18.2188 20.4853 20.4853C18.2188 22.7518 15.2053 24 12 24ZM12 1.875C9.2955 1.875 6.75291 2.92819 4.84055 4.84055C2.92819 6.75291 1.875 9.2955 1.875 12C1.875 14.7045 2.92819 17.2471 4.84055 19.1595C6.75291 21.0718 9.2955 22.125 12 22.125C14.7045 22.125 17.2471 21.0718 19.1595 19.1595C21.0718 17.2471 22.125 14.7045 22.125 12C22.125 9.2955 21.0718 6.75291 19.1595 4.84055C17.2471 2.92819 14.7045 1.875 12 1.875ZM15.9775 17.3033L12 13.3258L8.02252 17.3033L6.6967 15.9775L10.6742 12L6.6967 8.02252L8.02252 6.6967L12 10.6742L15.9775 6.6967L17.3033 8.02252L13.3258 12L17.3033 15.9775L15.9775 17.3033Z" fill="#999999" fill-opacity="0.7"/>
+</svg>

assets/icons/edit_name_icon_settings.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4854 3.1332L9.8668 0.515228C9.64704 0.295536 9.34903 0.172119 9.03829 0.172119C8.72755 0.172119 8.42953 0.295536 8.20977 0.515228L0.983989 7.74042C0.874797 7.84895 0.788225 7.97806 0.729285 8.12027C0.670346 8.26249 0.640212 8.41499 0.640629 8.56894V11.1875C0.640629 11.4983 0.764094 11.7964 0.983864 12.0161C1.20363 12.2359 1.5017 12.3594 1.8125 12.3594H11.6563C11.8427 12.3594 12.0216 12.2853 12.1534 12.1534C12.2853 12.0216 12.3594 11.8427 12.3594 11.6562C12.3594 11.4698 12.2853 11.2909 12.1534 11.1591C12.0216 11.0272 11.8427 10.9531 11.6563 10.9531H6.32422L12.4854 4.79081C12.5942 4.68199 12.6806 4.55278 12.7395 4.41057C12.7984 4.26836 12.8288 4.11594 12.8288 3.96201C12.8288 3.80807 12.7984 3.65565 12.7395 3.51344C12.6806 3.37123 12.5942 3.24202 12.4854 3.1332ZM4.33204 10.9531H2.04688V8.66796L6.96875 3.74609L9.25391 6.03124L4.33204 10.9531ZM10.25 5.03515L7.96485 2.74999L9.03946 1.67538L11.3246 3.96054L10.25 5.03515Z" fill="#D5D5D5"/>
+</svg>

assets/icons/settings_button.svg

@@ -0,0 +1,24 @@
+<svg width="40" height="26" viewBox="0 0 40 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_9292_1537)">
+<rect x="3" y="3" width="34" height="20" rx="10" fill="#F5F6F7"/>
+<g clip-path="url(#clip0_9292_1537)">
+<path d="M20.4393 20H19.5607C18.85 20 18.2718 19.4218 18.2718 18.7112V18.414C17.9697 18.3174 17.6762 18.1956 17.3942 18.0497L17.1835 18.2603C16.6733 18.7711 15.8561 18.7562 15.3607 18.2601L14.7397 17.6391C14.2434 17.1434 14.2291 16.3264 14.7398 15.8163L14.9503 15.6058C14.8044 15.3238 14.6826 15.0303 14.586 14.7281H14.2888C13.5782 14.7281 13 14.15 13 13.4393V12.5607C13 11.85 13.5782 11.2719 14.2888 11.2719H14.586C14.6826 10.9697 14.8044 10.6762 14.9503 10.3942L14.7397 10.1836C14.2293 9.67374 14.2434 8.85666 14.7399 8.36072L15.3609 7.73969C15.8574 7.24247 16.6745 7.23006 17.1838 7.73986L17.3942 7.95032C17.6762 7.80441 17.9698 7.68257 18.2719 7.58602V7.28879C18.2719 6.57816 18.85 6 19.5607 6H20.4393C21.15 6 21.7281 6.57816 21.7281 7.28879V7.58605C22.0302 7.68257 22.3238 7.80441 22.6058 7.95035L22.8164 7.73969C23.3266 7.22886 24.1439 7.24384 24.6393 7.73988L25.2603 8.36086C25.7566 8.85657 25.7708 9.67358 25.2601 10.1837L25.0497 10.3942C25.1956 10.6762 25.3174 10.9697 25.414 11.2719H25.7112C26.4218 11.2719 27 11.85 27 12.5607V13.4393C27 14.15 26.4218 14.7281 25.7112 14.7281H25.414C25.3174 15.0303 25.1956 15.3238 25.0497 15.6058L25.2603 15.8164C25.7707 16.3263 25.7566 17.1434 25.2601 17.6393L24.6391 18.2603C24.1426 18.7576 23.3255 18.77 22.8162 18.2602L22.6058 18.0497C22.3238 18.1956 22.0302 18.3175 21.7281 18.414V18.7113C21.7281 19.4218 21.15 20 20.4393 20ZM17.5313 17.1882C17.9231 17.4199 18.3447 17.595 18.7845 17.7085C18.9656 17.7552 19.0922 17.9185 19.0922 18.1056V18.7112C19.0922 18.9695 19.3024 19.1797 19.5607 19.1797H20.4393C20.6976 19.1797 20.9078 18.9695 20.9078 18.7112V18.1056C20.9078 17.9185 21.0344 17.7552 21.2155 17.7085C21.6553 17.595 22.0769 17.4199 22.4687 17.1882C22.6299 17.0929 22.8351 17.1188 22.9675 17.2513L23.3965 17.6803C23.5815 17.8654 23.8785 17.8611 24.0589 17.6805L24.6803 17.059C24.8603 16.8793 24.8663 16.5822 24.6805 16.3966L24.2513 15.9675C24.1189 15.8351 24.093 15.6298 24.1883 15.4687C24.42 15.0769 24.595 14.6553 24.7085 14.2155C24.7552 14.0344 24.9186 13.9078 25.1056 13.9078H25.7112C25.9695 13.9078 26.1797 13.6977 26.1797 13.4394V12.5607C26.1797 12.3024 25.9695 12.0922 25.7112 12.0922H25.1056C24.9186 12.0922 24.7552 11.9657 24.7085 11.7846C24.595 11.3447 24.42 10.9231 24.1883 10.5314C24.093 10.3702 24.1189 10.165 24.2513 10.0326L24.6803 9.60358C24.8658 9.41835 24.8609 9.1214 24.6805 8.94118L24.0591 8.31979C23.879 8.13943 23.5819 8.13415 23.3967 8.31962L22.9676 8.74879C22.8352 8.88121 22.6299 8.90713 22.4687 8.81181C22.077 8.58013 21.6553 8.4051 21.2155 8.2916C21.0344 8.24487 20.9079 8.08152 20.9079 7.89446V7.28879C20.9079 7.03048 20.6977 6.82031 20.4394 6.82031H19.5607C19.3024 6.82031 19.0922 7.03048 19.0922 7.28879V7.8944C19.0922 8.08146 18.9657 8.24481 18.7845 8.29154C18.3447 8.40505 17.9231 8.58007 17.5314 8.81176C17.3701 8.90705 17.1649 8.88113 17.0325 8.74873L16.6036 8.31973C16.4186 8.13456 16.1216 8.13886 15.9412 8.31954L15.3197 8.94096C15.1398 9.12071 15.1337 9.41775 15.3196 9.60336L15.7487 10.0325C15.8811 10.1649 15.9071 10.3702 15.8118 10.5313C15.5801 10.9231 15.4051 11.3447 15.2916 11.7845C15.2448 11.9656 15.0815 12.0922 14.8944 12.0922H14.2888C14.0305 12.0922 13.8203 12.3024 13.8203 12.5607V13.4393C13.8203 13.6976 14.0305 13.9078 14.2888 13.9078H14.8944C15.0815 13.9078 15.2448 14.0344 15.2915 14.2155C15.405 14.6553 15.5801 15.0769 15.8117 15.4686C15.907 15.6298 15.8811 15.8351 15.7487 15.9675L15.3197 16.3965C15.1343 16.5817 15.1391 16.8786 15.3195 17.0589L15.9409 17.6802C16.121 17.8606 16.4181 17.8659 16.6033 17.6804L17.0325 17.2512C17.13 17.1537 17.333 17.0709 17.5313 17.1882Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M19.9992 16.0461C18.3196 16.0461 16.9531 14.6796 16.9531 13C16.9531 11.3204 18.3196 9.95391 19.9992 9.95391C21.6789 9.95391 23.0453 11.3204 23.0453 13C23.0453 14.6796 21.6789 16.0461 19.9992 16.0461ZM19.9992 10.7742C18.7719 10.7742 17.7734 11.7727 17.7734 13C17.7734 14.2273 18.7719 15.2258 19.9992 15.2258C21.2265 15.2258 22.225 14.2273 22.225 13C22.225 11.7727 21.2265 10.7742 19.9992 10.7742Z" fill="#023DFE" fill-opacity="0.7"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_9292_1537" x="0" y="0" width="40" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9292_1537"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9292_1537" result="shape"/>
+</filter>
+<clipPath id="clip0_9292_1537">
+<rect width="14" height="14" fill="white" transform="translate(13 6)"/>
+</clipPath>
+</defs>
+</svg>

lib/pages/analytics/models/air_quality_data_model.dart

@@ -0,0 +1,57 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class AirQualityDataModel extends Equatable {
+  const AirQualityDataModel({
+    required this.date,
+    required this.data,
+  });
+
+  final DateTime date;
+  final List<AirQualityPercentageData> data;
+
+  factory AirQualityDataModel.fromJson(Map<String, dynamic> json) {
+    return AirQualityDataModel(
+      date: DateTime.parse(json['date'] as String),
+      data: (json['data'] as List<dynamic>)
+          .map((e) => AirQualityPercentageData.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+
+  static final Map<String, Color> metricColors = {
+    'good': ColorsManager.goodGreen.withValues(alpha: 0.7),
+    'moderate': ColorsManager.moderateYellow.withValues(alpha: 0.7),
+    'poor': ColorsManager.poorOrange.withValues(alpha: 0.7),
+    'unhealthy': ColorsManager.unhealthyRed.withValues(alpha: 0.7),
+    'severe': ColorsManager.severePink.withValues(alpha: 0.7),
+    'hazardous': ColorsManager.hazardousPurple.withValues(alpha: 0.7),
+  };
+
+  @override
+  List<Object?> get props => [date, data];
+}
+
+class AirQualityPercentageData extends Equatable {
+  const AirQualityPercentageData({
+    required this.type,
+    required this.name,
+    required this.percentage,
+  });
+
+  final String type;
+  final String name;
+  final double percentage;
+
+  factory AirQualityPercentageData.fromJson(Map<String, dynamic> json) {
+    return AirQualityPercentageData(
+      type: json['type'] as String? ?? '',   
+      name: json['name'] as String? ?? '',
+      percentage: (json['percentage'] as num?)?.toDouble() ?? 0,
+    );
+  }
+
+  @override
+  List<Object?> get props => [type, name, percentage];
+}

lib/pages/analytics/models/analytics_device.dart

@@ -8,6 +8,8 @@ class AnalyticsDevice {
     this.isActive,
     this.productDevice,
     this.spaceUuid,
+    this.latitude,
+    this.longitude,
   });
 
   final String uuid;
@@ -18,22 +20,27 @@ class AnalyticsDevice {
   final bool? isActive;
   final ProductDevice? productDevice;
   final String? spaceUuid;
+  final double? latitude;
+  final double? longitude;
 
   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,
+      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(),
+      productDevice: json['productDevice'] != null
+          ? ProductDevice.fromJson(json['productDevice'] as Map<String, dynamic>)
+          : null,
+      spaceUuid: json['spaceUuid'] as String?,
+      latitude: json['lat'] != null ? double.parse(json['lat'] as String) : null,
+      longitude: json['lon'] != null ? double.parse(json['lon'] as String) : null,
     );
   }
 }
@@ -60,8 +67,12 @@ class ProductDevice {
   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,
+      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?,

lib/pages/analytics/models/device_location_info.dart

@@ -0,0 +1,55 @@
+import 'package:equatable/equatable.dart';
+
+class DeviceLocationInfo extends Equatable {
+  const DeviceLocationInfo({
+    this.airQuality,
+    this.humidity,
+    this.city,
+    this.country,
+    this.address,
+    this.temperature,
+  });
+
+  final double? airQuality;
+  final double? humidity;
+  final String? city;
+  final String? country;
+  final String? address;
+  final double? temperature;
+
+  factory DeviceLocationInfo.fromJson(Map<String, dynamic> json) {
+    return DeviceLocationInfo(
+      airQuality: json['aqi'] as double?,
+      humidity: json['humidity'] as double?,
+      temperature: json['temperature'] as double?,
+    );
+  }
+
+  DeviceLocationInfo copyWith({
+    double? airQuality,
+    double? humidity,
+    String? city,
+    String? country,
+    String? address,
+    double? temperature,
+  }) {
+    return DeviceLocationInfo(
+      airQuality: airQuality ?? this.airQuality,
+      humidity: humidity ?? this.humidity,
+      city: city ?? this.city,
+      country: country ?? this.country,
+      address: address ?? this.address,
+      temperature: temperature ?? this.temperature,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+        airQuality,
+        humidity,
+        city,
+        country,
+        address,
+        temperature,
+      ];
+}

lib/pages/analytics/models/range_of_aqi.dart

@@ -1,18 +1,49 @@
 import 'package:equatable/equatable.dart';
 
 class RangeOfAqi extends Equatable {
-  final double min;
-  final double avg;
-  final double max;
   final DateTime date;
+  final List<RangeOfAqiValue> data;
 
   const RangeOfAqi({
-    required this.min,
-    required this.avg,
-    required this.max,
+    required this.data,
     required this.date,
   });
 
+  factory RangeOfAqi.fromJson(Map<String, dynamic> json) {
+    return RangeOfAqi(
+      date: DateTime.parse(json['date'] as String),
+      data: (json['data'] as List<dynamic>)
+          .map((e) => RangeOfAqiValue.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+
   @override
-  List<Object?> get props => [min, avg, max, date];
+  List<Object?> get props => [data, date];
+}
+
+class RangeOfAqiValue extends Equatable {
+  final String type;
+  final double min;
+  final double average;
+  final double max;
+
+  const RangeOfAqiValue({
+    required this.type,
+    required this.min,
+    required this.average,
+    required this.max,
+  });
+
+  factory RangeOfAqiValue.fromJson(Map<String, dynamic> json) {
+    return RangeOfAqiValue(
+      type: json['type'] as String,
+      min: (json['min'] as num).toDouble(),
+      average: (json['average'] as num).toDouble(),
+      max: (json['max'] as num).toDouble(),
+    );
+  }
+
+  @override
+  List<Object?> get props => [type, min, average, max];
 }

lib/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart

@@ -0,0 +1,81 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/models/air_quality_data_model.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
+import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
+import 'package:syncrow_web/pages/analytics/services/air_quality_distribution/air_quality_distribution_service.dart';
+
+part 'air_quality_distribution_event.dart';
+part 'air_quality_distribution_state.dart';
+
+class AirQualityDistributionBloc
+    extends Bloc<AirQualityDistributionEvent, AirQualityDistributionState> {
+  final AirQualityDistributionService _aqiDistributionService;
+
+  AirQualityDistributionBloc(
+    this._aqiDistributionService,
+  ) : super(const AirQualityDistributionState()) {
+    on<LoadAirQualityDistribution>(_onLoadAirQualityDistribution);
+    on<ClearAirQualityDistribution>(_onClearAirQualityDistribution);
+    on<UpdateAqiTypeEvent>(_onUpdateAqiTypeEvent);
+  }
+
+  Future<void> _onLoadAirQualityDistribution(
+    LoadAirQualityDistribution event,
+    Emitter<AirQualityDistributionState> emit,
+  ) async {
+    try {
+      emit(state.copyWith(status: AirQualityDistributionStatus.loading));
+      final result = await _aqiDistributionService.getAirQualityDistribution(
+        event.param,
+      );
+      emit(
+        state.copyWith(
+          status: AirQualityDistributionStatus.success,
+          chartData: result,
+          filteredChartData: _arrangeChartDataByType(result, state.selectedAqiType),
+        ),
+      );
+    } catch (e) {
+      emit(
+        AirQualityDistributionState(
+          status: AirQualityDistributionStatus.failure,
+          errorMessage: e.toString(),
+          selectedAqiType: state.selectedAqiType,
+        ),
+      );
+    }
+  }
+
+  Future<void> _onClearAirQualityDistribution(
+    ClearAirQualityDistribution event,
+    Emitter<AirQualityDistributionState> emit,
+  ) async {
+    emit(const AirQualityDistributionState());
+  }
+
+  void _onUpdateAqiTypeEvent(
+    UpdateAqiTypeEvent event,
+    Emitter<AirQualityDistributionState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        selectedAqiType: event.aqiType,
+        filteredChartData: _arrangeChartDataByType(state.chartData, event.aqiType),
+      ),
+    );
+  }
+
+  List<AirQualityDataModel> _arrangeChartDataByType(
+    List<AirQualityDataModel> data,
+    AqiType aqiType,
+  ) {
+    final filteredData = data.map(
+      (data) => AirQualityDataModel(
+        date: data.date,
+        data: data.data.where((value) => value.type == aqiType.code).toList(),
+      ),
+    );
+    return filteredData.toList();
+  }
+}

lib/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_event.dart

@@ -0,0 +1,30 @@
+part of 'air_quality_distribution_bloc.dart';
+
+sealed class AirQualityDistributionEvent extends Equatable {
+  const AirQualityDistributionEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class LoadAirQualityDistribution extends AirQualityDistributionEvent {
+  final GetAirQualityDistributionParam param;
+
+  const LoadAirQualityDistribution(this.param);
+
+  @override
+  List<Object> get props => [param];
+}
+
+final class UpdateAqiTypeEvent extends AirQualityDistributionEvent {
+  const UpdateAqiTypeEvent(this.aqiType);
+
+  final AqiType aqiType;
+
+  @override
+  List<Object> get props => [aqiType];
+}
+
+final class ClearAirQualityDistribution extends AirQualityDistributionEvent {
+  const ClearAirQualityDistribution();
+}

lib/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_state.dart

@@ -0,0 +1,43 @@
+part of 'air_quality_distribution_bloc.dart';
+
+enum AirQualityDistributionStatus {
+  initial,
+  loading,
+  success,
+  failure,
+}
+
+class AirQualityDistributionState extends Equatable {
+  const AirQualityDistributionState({
+    this.status = AirQualityDistributionStatus.initial,
+    this.chartData = const [],
+    this.filteredChartData = const [],
+    this.errorMessage,
+    this.selectedAqiType = AqiType.aqi,
+  });
+
+  final AirQualityDistributionStatus status;
+  final List<AirQualityDataModel> chartData;
+  final List<AirQualityDataModel> filteredChartData;
+  final String? errorMessage;
+  final AqiType selectedAqiType;
+
+  AirQualityDistributionState copyWith({
+    AirQualityDistributionStatus? status,
+    List<AirQualityDataModel>? chartData,
+    List<AirQualityDataModel>? filteredChartData,
+    String? errorMessage,
+    AqiType? selectedAqiType,
+  }) {
+    return AirQualityDistributionState(
+      status: status ?? this.status,
+      chartData: chartData ?? this.chartData,
+      filteredChartData: filteredChartData ?? this.filteredChartData,
+      errorMessage: errorMessage ?? this.errorMessage,
+      selectedAqiType: selectedAqiType ?? this.selectedAqiType,
+    );
+  }
+
+  @override
+  List<Object?> get props => [status, chartData, errorMessage, selectedAqiType];
+}

lib/pages/analytics/modules/air_quality/blocs/device_location/device_location_bloc.dart

@@ -0,0 +1,50 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/analytics/models/device_location_info.dart';
+import 'package:syncrow_web/pages/analytics/params/get_device_location_data_param.dart';
+import 'package:syncrow_web/pages/analytics/services/device_location/device_location_service.dart';
+
+part 'device_location_event.dart';
+part 'device_location_state.dart';
+
+class DeviceLocationBloc extends Bloc<DeviceLocationEvent, DeviceLocationState> {
+  DeviceLocationBloc(
+    this._deviceLocationService,
+  ) : super(const DeviceLocationState()) {
+    on<LoadDeviceLocationEvent>(_onLoadDeviceLocation);
+    on<ClearDeviceLocationEvent>(_onClearDeviceLocation);
+  }
+
+  final DeviceLocationService _deviceLocationService;
+
+  Future<void> _onLoadDeviceLocation(
+    LoadDeviceLocationEvent event,
+    Emitter<DeviceLocationState> emit,
+  ) async {
+    emit(const DeviceLocationState(status: DeviceLocationStatus.loading));
+
+    try {
+      final locationInfo = await _deviceLocationService.get(event.param);
+      emit(
+        DeviceLocationState(
+          status: DeviceLocationStatus.success,
+          locationInfo: locationInfo,
+        ),
+      );
+    } catch (e) {
+      emit(
+        DeviceLocationState(
+          status: DeviceLocationStatus.failure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  void _onClearDeviceLocation(
+    ClearDeviceLocationEvent event,
+    Emitter<DeviceLocationState> emit,
+  ) {
+    emit(const DeviceLocationState());
+  }
+}

lib/pages/analytics/modules/air_quality/blocs/device_location/device_location_event.dart

@@ -0,0 +1,21 @@
+part of 'device_location_bloc.dart';
+
+sealed class DeviceLocationEvent extends Equatable {
+  const DeviceLocationEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+final class LoadDeviceLocationEvent extends DeviceLocationEvent {
+  const LoadDeviceLocationEvent(this.param);
+
+  final GetDeviceLocationDataParam param;
+
+  @override
+  List<Object?> get props => [param];
+}
+
+final class ClearDeviceLocationEvent extends DeviceLocationEvent {
+  const ClearDeviceLocationEvent();
+}

lib/pages/analytics/modules/air_quality/blocs/device_location/device_location_state.dart

@@ -0,0 +1,18 @@
+part of 'device_location_bloc.dart';
+
+enum DeviceLocationStatus { initial, loading, success, failure }
+
+final class DeviceLocationState extends Equatable {
+  const DeviceLocationState({
+    this.status = DeviceLocationStatus.initial,
+    this.locationInfo,
+    this.errorMessage,
+  });
+
+  final DeviceLocationStatus status;
+  final DeviceLocationInfo? locationInfo;
+  final String? errorMessage;
+
+  @override
+  List<Object?> get props => [status, locationInfo, errorMessage];
+}

lib/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart

@@ -1,6 +1,7 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/analytics/models/range_of_aqi.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
 import 'package:syncrow_web/pages/analytics/params/get_range_of_aqi_param.dart';
 import 'package:syncrow_web/pages/analytics/services/range_of_aqi/range_of_aqi_service.dart';
 
@@ -11,6 +12,7 @@ class RangeOfAqiBloc extends Bloc<RangeOfAqiEvent, RangeOfAqiState> {
   RangeOfAqiBloc(this._rangeOfAqiService) : super(const RangeOfAqiState()) {
     on<LoadRangeOfAqiEvent>(_onLoadRangeOfAqiEvent);
     on<ClearRangeOfAqiEvent>(_onClearRangeOfAqiEvent);
+    on<UpdateAqiTypeEvent>(_onUpdateAqiTypeEvent);
   }
 
   final RangeOfAqiService _rangeOfAqiService;
@@ -20,19 +22,55 @@ class RangeOfAqiBloc extends Bloc<RangeOfAqiEvent, RangeOfAqiState> {
     Emitter<RangeOfAqiState> emit,
   ) async {
     emit(
-      RangeOfAqiState(
-        status: RangeOfAqiStatus.loading,
-        rangeOfAqi: state.rangeOfAqi,
-      ),
+      state.copyWith(status: RangeOfAqiStatus.loading),
     );
     try {
       final rangeOfAqi = await _rangeOfAqiService.load(event.param);
-      emit(RangeOfAqiState(status: RangeOfAqiStatus.loaded, rangeOfAqi: rangeOfAqi));
+      emit(
+        state.copyWith(
+          status: RangeOfAqiStatus.loaded,
+          rangeOfAqi: rangeOfAqi,
+          filteredRangeOfAqi: _arrangeChartDataByType(
+            rangeOfAqi,
+            state.selectedAqiType,
+          ),
+        ),
+      );
     } catch (e) {
-      emit(RangeOfAqiState(status: RangeOfAqiStatus.failure, errorMessage: '$e'));
+      emit(
+        state.copyWith(
+          status: RangeOfAqiStatus.failure,
+          errorMessage: '$e',
+        ),
+      );
     }
   }
 
+  void _onUpdateAqiTypeEvent(
+    UpdateAqiTypeEvent event,
+    Emitter<RangeOfAqiState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        selectedAqiType: event.aqiType,
+        filteredRangeOfAqi: _arrangeChartDataByType(state.rangeOfAqi, event.aqiType),
+      ),
+    );
+  }
+
+  List<RangeOfAqi> _arrangeChartDataByType(
+    List<RangeOfAqi> rangeOfAqi,
+    AqiType aqiType,
+  ) {
+    final filteredRangeOfAqi = rangeOfAqi.map(
+      (data) => RangeOfAqi(
+        date: data.date,
+        data: data.data.where((value) => value.type == aqiType.code).toList(),
+      ),
+    );
+    return filteredRangeOfAqi.toList();
+  }
+
   void _onClearRangeOfAqiEvent(
     ClearRangeOfAqiEvent event,
     Emitter<RangeOfAqiState> emit,

lib/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_event.dart

@@ -16,6 +16,15 @@ class LoadRangeOfAqiEvent extends RangeOfAqiEvent {
   List<Object> get props => [param];
 }
 
+class UpdateAqiTypeEvent extends RangeOfAqiEvent {
+  const UpdateAqiTypeEvent(this.aqiType);
+
+  final AqiType aqiType;
+
+  @override
+  List<Object> get props => [aqiType];
+}
+
 class ClearRangeOfAqiEvent extends RangeOfAqiEvent {
   const ClearRangeOfAqiEvent();
 }

lib/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_state.dart

@@ -5,14 +5,35 @@ enum RangeOfAqiStatus { initial, loading, loaded, failure }
 final class RangeOfAqiState extends Equatable {
   const RangeOfAqiState({
     this.rangeOfAqi = const [],
+    this.filteredRangeOfAqi = const [],
     this.status = RangeOfAqiStatus.initial,
     this.errorMessage,
+    this.selectedAqiType = AqiType.aqi,
   });
 
   final RangeOfAqiStatus status;
   final List<RangeOfAqi> rangeOfAqi;
+  final List<RangeOfAqi> filteredRangeOfAqi;
   final String? errorMessage;
+  final AqiType selectedAqiType;
+
+  RangeOfAqiState copyWith({
+    RangeOfAqiStatus? status,
+    List<RangeOfAqi>? rangeOfAqi,
+    List<RangeOfAqi>? filteredRangeOfAqi,
+    String? errorMessage,
+    AqiType? selectedAqiType,
+  }) {
+    return RangeOfAqiState(
+      status: status ?? this.status,
+      rangeOfAqi: rangeOfAqi ?? this.rangeOfAqi,
+      filteredRangeOfAqi: filteredRangeOfAqi ?? this.filteredRangeOfAqi,
+      errorMessage: errorMessage ?? this.errorMessage,
+      selectedAqiType: selectedAqiType ?? this.selectedAqiType,
+    );
+  }
 
   @override
-  List<Object?> get props => [status, rangeOfAqi, errorMessage];
+  List<Object?> get props =>
+      [status, rangeOfAqi, filteredRangeOfAqi, errorMessage, selectedAqiType];
 }

lib/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.dart

@@ -1,11 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/device_location/device_location_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.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/params/get_air_quality_distribution_param.dart';
 import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
+import 'package:syncrow_web/pages/analytics/params/get_device_location_data_param.dart';
 import 'package:syncrow_web/pages/analytics/params/get_range_of_aqi_param.dart';
 
 abstract final class FetchAirQualityDataHelper {
@@ -13,8 +16,10 @@ abstract final class FetchAirQualityDataHelper {
 
   static void loadAirQualityData(
     BuildContext context, {
+    required DateTime date,
     required String communityUuid,
     required String spaceUuid,
+    bool shouldFetchAnalyticsDevices = true,
   }) {
     final date = context.read<AnalyticsDatePickerBloc>().state.monthlyDate;
     loadAnalyticsDevices(
@@ -26,7 +31,11 @@ abstract final class FetchAirQualityDataHelper {
       context,
       spaceUuid: spaceUuid,
       date: date,
-      aqiType: AqiType.aqi,
+    );
+    loadAirQualityDistribution(
+      context,
+      spaceUuid: spaceUuid,
+      date: date,
     );
   }
 
@@ -37,8 +46,12 @@ abstract final class FetchAirQualityDataHelper {
     context.read<RealtimeDeviceChangesBloc>().add(
           const RealtimeDeviceChangesClosed(),
         );
-
+    context.read<AirQualityDistributionBloc>().add(
+          const ClearAirQualityDistribution(),
+        );
     context.read<RangeOfAqiBloc>().add(const ClearRangeOfAqiEvent());
+
+    context.read<DeviceLocationBloc>().add(const ClearDeviceLocationEvent());
   }
 
   static void loadAnalyticsDevices(
@@ -52,12 +65,21 @@ abstract final class FetchAirQualityDataHelper {
               communityUuid: communityUuid,
               spaceUuid: spaceUuid,
               deviceTypes: ['AQI'],
-              requestType: AnalyticsDeviceRequestType.energyManagement,
+              requestType: AnalyticsDeviceRequestType.occupancy,
             ),
             onSuccess: (device) {
               context.read<RealtimeDeviceChangesBloc>()
                 ..add(const RealtimeDeviceChangesClosed())
                 ..add(RealtimeDeviceChangesStarted(device.uuid));
+
+              context.read<DeviceLocationBloc>().add(
+                    LoadDeviceLocationEvent(
+                      GetDeviceLocationDataParam(
+                        latitude: device.latitude ?? 0,
+                        longitude: device.longitude ?? 0,
+                      ),
+                    ),
+                  );
             },
           ),
         );
@@ -67,16 +89,26 @@ abstract final class FetchAirQualityDataHelper {
     BuildContext context, {
     required String spaceUuid,
     required DateTime date,
-    required AqiType aqiType,
   }) {
     context.read<RangeOfAqiBloc>().add(
           LoadRangeOfAqiEvent(
             GetRangeOfAqiParam(
               date: date,
               spaceUuid: spaceUuid,
-              aqiType: aqiType,
             ),
           ),
         );
   }
+
+  static void loadAirQualityDistribution(
+    BuildContext context, {
+    required String spaceUuid,
+    required DateTime date,
+  }) {
+    context.read<AirQualityDistributionBloc>().add(
+          LoadAirQualityDistribution(
+            GetAirQualityDistributionParam(spaceUuid: spaceUuid, date: date),
+          ),
+        );
+  }
 }

lib/pages/analytics/modules/air_quality/views/air_quality_view.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/air_quality_end_side_widget.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_box.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart';
 
 class AirQualityView extends StatelessWidget {
@@ -23,8 +24,14 @@ class AirQualityView extends StatelessWidget {
                   height: height * 1.2,
                   child: const AirQualityEndSideWidget(),
                 ),
-                SizedBox(height: height * 0.5, child: const RangeOfAqiChartBox()),
-                SizedBox(height: height * 0.5, child: const Placeholder()),
+                SizedBox(
+                  height: height * 0.5,
+                  child: const RangeOfAqiChartBox(),
+                ),
+                SizedBox(
+                  height: height * 0.5,
+                  child: const AqiDistributionChartBox(),
+                ),
               ],
             ),
           );
@@ -46,7 +53,7 @@ class AirQualityView extends StatelessWidget {
                           spacing: 20,
                           children: [
                             Expanded(child: RangeOfAqiChartBox()),
-                            Expanded(child: Placeholder()),
+                            Expanded(child: AqiDistributionChartBox()),
                           ],
                         ),
                       ),

lib/pages/analytics/modules/air_quality/widgets/aqi_device_info.dart

@@ -72,55 +72,54 @@ class AqiDeviceInfo extends StatelessWidget {
         return Container(
           decoration: secondarySection.copyWith(boxShadow: const []),
           padding: const EdgeInsetsDirectional.all(20),
-          child: Expanded(
-            child: Column(
-              spacing: 6,
-              children: [
-                const AirQualityEndSideLiveIndicator(),
-                AirQualityEndSideGaugeAndInfo(
-                  aqiLevel: status
-                      .firstWhere(
-                        (e) => e.code == 'air_quality_index',
-                        orElse: () => Status(code: 'air_quality_index', value: ''),
-                      )
-                      .value
-                      .toString(),
-                  temperature: int.parse(tempValue),
-                  humidity: int.parse(humidityValue),
-                ),
-                const SizedBox(height: 20),
-                AqiSubValueWidget(
-                  range: (0, 999),
-                  label: AqiType.pm25.value,
-                  value: pm25Value,
-                  unit: AqiType.pm25.unit,
-                ),
-                AqiSubValueWidget(
-                  range: (0, 999),
-                  label: AqiType.pm10.value,
-                  value: pm10Value,
-                  unit: AqiType.pm10.unit,
-                ),
-                AqiSubValueWidget(
-                  range: (0, 5),
-                  label: AqiType.hcho.value,
-                  value: ch2oValue,
-                  unit: AqiType.hcho.unit,
-                ),
-                AqiSubValueWidget(
-                  range: (0, 999),
-                  label: AqiType.tvoc.value,
-                  value: tvocValue,
-                  unit: AqiType.tvoc.unit,
-                ),
-                AqiSubValueWidget(
-                  range: (0, 5000),
-                  label: AqiType.co2.value,
-                  value: co2Value,
-                  unit: AqiType.co2.unit,
-                ),
-              ],
-            ),
+          child: Column(
+            spacing: 6,
+            mainAxisSize: MainAxisSize.max,
+            children: [
+              const AirQualityEndSideLiveIndicator(),
+              AirQualityEndSideGaugeAndInfo(
+                aqiLevel: status
+                    .firstWhere(
+                      (e) => e.code == 'air_quality_index',
+                      orElse: () => Status(code: 'air_quality_index', value: ''),
+                    )
+                    .value
+                    .toString(),
+                temperature: int.parse(tempValue),
+                humidity: int.parse(humidityValue),
+              ),
+              const SizedBox(height: 20),
+              AqiSubValueWidget(
+                range: (0, 999),
+                label: AqiType.pm25.value,
+                value: pm25Value,
+                unit: AqiType.pm25.unit,
+              ),
+              AqiSubValueWidget(
+                range: (0, 999),
+                label: AqiType.pm10.value,
+                value: pm10Value,
+                unit: AqiType.pm10.unit,
+              ),
+              AqiSubValueWidget(
+                range: (0, 5),
+                label: AqiType.hcho.value,
+                value: ch2oValue,
+                unit: AqiType.hcho.unit,
+              ),
+              AqiSubValueWidget(
+                range: (0, 999),
+                label: AqiType.tvoc.value,
+                value: tvocValue,
+                unit: AqiType.tvoc.unit,
+              ),
+              AqiSubValueWidget(
+                range: (0, 5000),
+                label: AqiType.co2.value,
+                value: co2Value,
+                unit: AqiType.co2.unit,
+              ),
+            ],
           ),
         );
       },

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart

@@ -0,0 +1,174 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/pages/analytics/models/air_quality_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';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AqiDistributionChart extends StatelessWidget {
+  const AqiDistributionChart({super.key, required this.chartData});
+  final List<AirQualityDataModel> chartData;
+
+  static const _rodStackItemsSpacing = 0.4;
+  static const _barWidth = 13.0;
+  static final _barBorderRadius = BorderRadius.circular(22);
+
+  @override
+  Widget build(BuildContext context) {
+    final sortedData = List<AirQualityDataModel>.from(chartData)
+      ..sort(
+        (a, b) => a.date.compareTo(b.date),
+      );
+
+    return BarChart(
+      BarChartData(
+        maxY: 100.1,
+        gridData: EnergyManagementChartsHelper.gridData(
+          horizontalInterval: 20,
+        ),
+        borderData: EnergyManagementChartsHelper.borderData(),
+        barTouchData: _barTouchData(context),
+        titlesData: _titlesData(context),
+        barGroups: _buildBarGroups(sortedData),
+      ),
+      duration: Duration.zero,
+    );
+  }
+
+  List<BarChartGroupData> _buildBarGroups(List<AirQualityDataModel> sortedData) {
+    return List.generate(sortedData.length, (index) {
+      final data = sortedData[index];
+      final stackItems = <BarChartRodData>[];
+      double currentY = 0;
+      bool isFirstElement = true;
+
+      // Sort data by type to ensure consistent order
+      final sortedPercentageData = List<AirQualityPercentageData>.from(data.data)
+        ..sort((a, b) => a.type.compareTo(b.type));
+
+      for (final percentageData in sortedPercentageData) {
+        stackItems.add(
+          BarChartRodData(
+            fromY: currentY,
+            toY: currentY + percentageData.percentage ,
+            color: AirQualityDataModel.metricColors[percentageData.name]!,
+            borderRadius: isFirstElement
+                ? const BorderRadius.only(
+                    topLeft: Radius.circular(22),
+                    topRight: Radius.circular(22),
+                  )
+                : _barBorderRadius,
+            width: _barWidth,
+          ),
+        );
+        currentY += percentageData.percentage + _rodStackItemsSpacing;
+        isFirstElement = false;
+      }
+
+      return BarChartGroupData(
+        x: index,
+        barRods: stackItems,
+        groupVertically: true,
+      );
+    });
+  }
+
+  BarTouchData _barTouchData(BuildContext context) {
+    return BarTouchData(
+      touchTooltipData: BarTouchTooltipData(
+        getTooltipColor: (_) => ColorsManager.whiteColors,
+        tooltipBorder: const BorderSide(
+          color: ColorsManager.semiTransparentBlack,
+        ),
+        tooltipRoundedRadius: 16,
+        tooltipPadding: const EdgeInsets.all(8),
+        getTooltipItem: (group, groupIndex, rod, rodIndex) {
+          final data = chartData[group.x.toInt()];
+
+          final List<TextSpan> children = [];
+
+          final textStyle = context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.blackColor,
+            fontSize: 12,
+          );
+
+          // Sort data by type to ensure consistent order
+          final sortedPercentageData = List<AirQualityPercentageData>.from(data.data)
+            ..sort((a, b) => a.type.compareTo(b.type));
+
+          for (final percentageData in sortedPercentageData) {
+            children.add(TextSpan(
+              text:
+                  '\n${percentageData.type.toUpperCase()}: ${percentageData.percentage.toStringAsFixed(1)}%',
+              style: textStyle,
+            ));
+          }
+
+          return BarTooltipItem(
+            DateFormat('dd/MM/yyyy').format(data.date),
+            context.textTheme.bodyMedium!.copyWith(
+              color: ColorsManager.blackColor,
+              fontSize: 16,
+              fontWeight: FontWeight.w600,
+            ),
+            children: children,
+          );
+        },
+      ),
+    );
+  }
+
+  FlTitlesData _titlesData(BuildContext context) {
+    final titlesData = EnergyManagementChartsHelper.titlesData(
+      context,
+      leftTitlesInterval: 20,
+    );
+
+    final leftTitles = titlesData.leftTitles.copyWith(
+      sideTitles: titlesData.leftTitles.sideTitles.copyWith(
+        reservedSize: 70,
+        interval: 20,
+        maxIncluded: false,
+        minIncluded: true,
+        getTitlesWidget: (value, meta) => Padding(
+          padding: const EdgeInsetsDirectional.only(end: 12),
+          child: FittedBox(
+            alignment: AlignmentDirectional.centerStart,
+            fit: BoxFit.scaleDown,
+            child: Text(
+              '${value.toStringAsFixed(0)}%',
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 12,
+                color: ColorsManager.lightGreyColor,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final bottomTitles = AxisTitles(
+      sideTitles: SideTitles(
+        showTitles: true,
+        getTitlesWidget: (value, _) => FittedBox(
+          alignment: AlignmentDirectional.bottomCenter,
+          fit: BoxFit.scaleDown,
+          child: Text(
+            chartData[value.toInt()].date.day.toString(),
+            style: context.textTheme.bodySmall?.copyWith(
+              color: ColorsManager.lightGreyColor,
+              fontSize: 8,
+            ),
+          ),
+        ),
+        reservedSize: 36,
+      ),
+    );
+
+    return titlesData.copyWith(
+      leftTitles: leftTitles,
+      bottomTitles: bottomTitles,
+    );
+  }
+}

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_box.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_title.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class AqiDistributionChartBox extends StatelessWidget {
+  const AqiDistributionChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<AirQualityDistributionBloc, AirQualityDistributionState>(
+      builder: (context, state) {
+        return Container(
+          padding: const EdgeInsetsDirectional.all(30),
+          decoration: subSectionContainerDecoration.copyWith(
+            borderRadius: BorderRadius.circular(30),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              if (state.errorMessage != null) ...[
+                AnalyticsErrorWidget(state.errorMessage),
+                const SizedBox(height: 10),
+              ],
+              AqiDistributionChartTitle(
+                isLoading: state.status == AirQualityDistributionStatus.loading,
+              ),
+              const SizedBox(height: 10),
+              const Divider(),
+              const SizedBox(height: 20),
+              Expanded(
+                child: AqiDistributionChart(chartData: state.filteredChartData),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_title.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.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';
+
+class AqiDistributionChartTitle extends StatelessWidget {
+  const AqiDistributionChartTitle({required this.isLoading, super.key});
+
+  final bool isLoading;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        ChartsLoadingWidget(isLoading: isLoading),
+        const Expanded(
+          flex: 3,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            alignment: AlignmentDirectional.centerStart,
+            child: ChartTitle(
+              title: Text('Distribution over Air Quality Index'),
+            ),
+          ),
+        ),
+        FittedBox(
+          alignment: AlignmentDirectional.centerEnd,
+          fit: BoxFit.scaleDown,
+          child: AqiTypeDropdown(
+            onChanged: (value) {
+              if (value != null) {
+                context
+                    .read<AirQualityDistributionBloc>()
+                    .add(UpdateAqiTypeEvent(value));
+              }
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/analytics/modules/air_quality/widgets/aqi_location.dart

@@ -6,7 +6,34 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class AqiLocation extends StatelessWidget {
-  const AqiLocation({super.key});
+  const AqiLocation({
+    required this.city,
+    required this.country,
+    required this.address,
+    super.key,
+  });
+
+  final String? city;
+  final String? country;
+  final String? address;
+
+  String _getFormattedLocation() {
+    if (city == null && country == null && address == null) {
+      return 'N/A';
+    }
+
+    final parts = <String>[];
+
+    if (city != null) parts.add(city!);
+    if (address != null) parts.add(address!);
+    final locationPart = parts.join(', ');
+
+    if (country != null) {
+      return locationPart.isEmpty ? country! : '$locationPart - $country';
+    }
+
+    return locationPart;
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -24,7 +51,7 @@ class AqiLocation extends StatelessWidget {
           _buildLocationPin(),
           Expanded(
             child: Text(
-              'Business Bay, Dubai - UAE',
+              _getFormattedLocation(),
               style: context.textTheme.bodySmall?.copyWith(
                 color: ColorsManager.textPrimaryColor,
                 fontWeight: FontWeight.w400,

lib/pages/analytics/modules/air_quality/widgets/aqi_location_info.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/device_location/device_location_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_location.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_location_info_cell.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
@@ -9,37 +11,46 @@ class AqiLocationInfo extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      decoration: secondarySection.copyWith(boxShadow: const []),
-      padding: const EdgeInsetsDirectional.all(20),
-      child: const Column(
-        spacing: 8,
-        children: [
-          AqiLocation(),
-          Expanded(
-            child: Row(
-              spacing: 8,
-              children: [
-                AqiLocationInfoCell(
-                  label: 'Temperature',
-                  value: ' 25°',
-                  svgPath: Assets.aqiTemperature,
+    return BlocBuilder<DeviceLocationBloc, DeviceLocationState>(
+      builder: (context, state) {
+        final info = state.locationInfo;
+        return Container(
+          decoration: secondarySection.copyWith(boxShadow: const []),
+          padding: const EdgeInsetsDirectional.all(20),
+          child: Column(
+            spacing: 8,
+            children: [
+              AqiLocation(
+                city: info?.city,
+                country: info?.country,
+                address: info?.address,
+              ),
+              Expanded(
+                child: Row(
+                  spacing: 8,
+                  children: [
+                    AqiLocationInfoCell(
+                      label: 'Temperature',
+                      value: ' ${info?.temperature?.roundToDouble() ?? '--'}°',
+                      svgPath: Assets.aqiTemperature,
+                    ),
+                    AqiLocationInfoCell(
+                      label: 'Humidity',
+                      value: '${info?.humidity?.roundToDouble() ?? '--'}%',
+                      svgPath: Assets.aqiHumidity,
+                    ),
+                    AqiLocationInfoCell(
+                      label: 'Air Quality',
+                      value: ' ${info?.airQuality?.roundToDouble() ?? '--'}',
+                      svgPath: Assets.aqiAirQuality,
+                    ),
+                  ],
                 ),
-                AqiLocationInfoCell(
-                  label: 'Humidity',
-                  value: '25%',
-                  svgPath: Assets.aqiHumidity,
-                ),
-                AqiLocationInfoCell(
-                  label: 'Air Quality',
-                  value: ' 120',
-                  svgPath: Assets.aqiAirQuality,
-                ),
-              ],
-            ),
+              ),
+            ],
           ),
-        ],
-      ),
+        );
+      },
     );
   }
 }

lib/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart

@@ -3,17 +3,18 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 enum AqiType {
-  aqi('AQI', ''),
-  pm25('PM2.5', 'µg/m³'),
-  pm10('PM10', 'µg/m³'),
-  hcho('HCHO', 'mg/m³'),
-  tvoc('TVOC', 'µg/m³'),
-  co2('CO2', 'ppm');
+  aqi('AQI', '', 'aqi'),
+  pm25('PM2.5', 'µg/m³', 'pm25'),
+  pm10('PM10', 'µg/m³', 'pm10'),
+  hcho('HCHO', 'mg/m³', 'hcho'),
+  tvoc('TVOC', 'µg/m³', 'tvoc'),
+  co2('CO2', 'ppm', 'co2');
 
-  const AqiType(this.value, this.unit);
+  const AqiType(this.value, this.unit, this.code);
 
   final String value;
   final String unit;
+  final String code;
 }
 
 class AqiTypeDropdown extends StatefulWidget {

lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart

@@ -13,23 +13,37 @@ class RangeOfAqiChart extends StatelessWidget {
     required this.chartData,
   });
 
-  List<(List<double> values, Color color, Color? dotColor)> get _lines => [
-        (
-          chartData.map((e) => e.max).toList(),
-          ColorsManager.maxPurple,
-          ColorsManager.maxPurpleDot,
-        ),
-        (
-          chartData.map((e) => e.avg).toList(),
-          Colors.white,
-          null,
-        ),
-        (
-          chartData.map((e) => e.min).toList(),
-          ColorsManager.minBlue,
-          ColorsManager.minBlueDot,
-        ),
-      ];
+  List<(List<double> values, Color color, Color? dotColor)> get _lines {
+    final sortedData = List<RangeOfAqi>.from(chartData)
+      ..sort((a, b) => a.date.compareTo(b.date));
+
+    return [
+      (
+        sortedData.map((e) {
+          final value = e.data.firstOrNull;
+          return value?.max ?? 0;
+        }).toList(),
+        ColorsManager.maxPurple,
+        ColorsManager.maxPurpleDot,
+      ),
+      (
+        sortedData.map((e) {
+          final value = e.data.firstOrNull;
+          return value?.average ?? 0;
+        }).toList(),
+        Colors.white,
+        null,
+      ),
+      (
+        sortedData.map((e) {
+          final value = e.data.firstOrNull;
+          return value?.min ?? 0;
+        }).toList(),
+        ColorsManager.minBlue,
+        ColorsManager.minBlueDot,
+      ),
+    ];
+  }
 
   @override
   Widget build(BuildContext context) {

lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart

@@ -32,7 +32,7 @@ class RangeOfAqiChartBox extends StatelessWidget {
               const SizedBox(height: 10),
               const Divider(),
               const SizedBox(height: 20),
-              Expanded(child: RangeOfAqiChart(chartData: state.rangeOfAqi)),
+              Expanded(child: RangeOfAqiChart(chartData: state.filteredRangeOfAqi)),
             ],
           ),
         );

lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_title.dart

@@ -1,15 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.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/chart_informative_cell.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/pages/space_tree/bloc/space_tree_bloc.dart';
 
 class RangeOfAqiChartTitle extends StatelessWidget {
-  const RangeOfAqiChartTitle({required this.isLoading, super.key});
+  const RangeOfAqiChartTitle({
+    required this.isLoading,
+    super.key,
+  });
+
   final bool isLoading;
 
   static const List<(Color color, String title, bool hasBorder)> _colors = [
@@ -66,12 +69,9 @@ class RangeOfAqiChartTitle extends StatelessWidget {
 
                 if (spaceUuid == null) return;
 
-                FetchAirQualityDataHelper.loadRangeOfAqi(
-                  context,
-                  spaceUuid: spaceUuid,
-                  date: context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
-                  aqiType: value ?? AqiType.aqi,
-                );
+                if (value != null) {
+                  context.read<RangeOfAqiBloc>().add(UpdateAqiTypeEvent(value));
+                }
               },
             ),
           ),

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

@@ -3,6 +3,7 @@ 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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 
 part 'analytics_devices_event.dart';
 part 'analytics_devices_state.dart';
@@ -36,6 +37,13 @@ class AnalyticsDevicesBloc
       if (devices.isNotEmpty) {
         event.onSuccess(devices.first);
       }
+    } on APIException catch (e) {
+      emit(
+        AnalyticsDevicesState(
+          status: AnalyticsDevicesStatus.failure,
+          errorMessage: e.message,
+        ),
+      );
     } catch (e) {
       emit(
         AnalyticsDevicesState(

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

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.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/strategies/analytics_data_loading_strategy.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';
@@ -26,10 +27,10 @@ final class AirQualityDataLoadingStrategy implements AnalyticsDataLoadingStrateg
     final spaceTreeBloc = context.read<SpaceTreeBloc>();
     final isSpaceSelected = spaceTreeBloc.state.selectedSpaces.contains(space.uuid);
 
-    if (isSpaceSelected) {
-      clearData(context);
-      return;
-    }
+    final hasSelectedSpaces = spaceTreeBloc.state.selectedSpaces.isNotEmpty;
+    if (hasSelectedSpaces) clearData(context);
+
+    if (isSpaceSelected) return;
 
     spaceTreeBloc
       ..add(const SpaceTreeClearSelectionEvent())
@@ -39,21 +40,15 @@ final class AirQualityDataLoadingStrategy implements AnalyticsDataLoadingStrateg
       context,
       communityUuid: community.uuid,
       spaceUuid: space.uuid ?? '',
+      date: context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
     );
   }
 
-  @override
-  void onChildSpaceSelected(
-    BuildContext context,
-    CommunityModel community,
-    SpaceModel child,
-  ) {
-    return onSpaceSelected(context, community, child);
-  }
-
   @override
   void clearData(BuildContext context) {
-    context.read<SpaceTreeBloc>().add(const SpaceTreeClearSelectionEvent());
+    context.read<SpaceTreeBloc>().add(
+          const AnalyticsClearAllSpaceTreeSelectionsEvent(),
+        );
     FetchAirQualityDataHelper.clearAllData(context);
   }
 }

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

@@ -13,10 +13,5 @@ abstract class AnalyticsDataLoadingStrategy {
     CommunityModel community,
     SpaceModel space,
   );
-  void onChildSpaceSelected(
-    BuildContext context,
-    CommunityModel community,
-    SpaceModel child,
-  );
   void clearData(BuildContext context);
 }

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

@@ -14,24 +14,14 @@ class EnergyManagementDataLoadingStrategy implements AnalyticsDataLoadingStrateg
     CommunityModel community,
     List<SpaceModel> spaces,
   ) {
-    context.read<SpaceTreeBloc>().add(
-          OnCommunitySelected(
-            community.uuid,
-            spaces,
-          ),
-        );
+    final spaceTreeBloc = context.read<SpaceTreeBloc>();
+    final isCommunitySelected =
+        spaceTreeBloc.state.selectedCommunities.contains(community.uuid);
 
-    final spaceTreeState = context.read<SpaceTreeBloc>().state;
-    if (spaceTreeState.selectedCommunities.contains(community.uuid)) {
+    if (isCommunitySelected) {
       clearData(context);
       return;
     }
-
-    FetchEnergyManagementDataHelper.loadEnergyManagementData(
-      context,
-      communityId: community.uuid,
-      spaceId: spaces.isNotEmpty ? spaces.first.uuid ?? '' : '',
-    );
   }
 
   @override
@@ -40,21 +30,31 @@ class EnergyManagementDataLoadingStrategy implements AnalyticsDataLoadingStrateg
     CommunityModel community,
     SpaceModel space,
   ) {
-    context.read<SpaceTreeBloc>().add(
-          OnSpaceSelected(
-            community,
-            space.uuid ?? '',
-            space.children,
-          ),
-        );
+    final spaceTreeBloc = context.read<SpaceTreeBloc>();
+    final isSpaceSelected = spaceTreeBloc.state.selectedSpaces.contains(space.uuid);
+    final hasSelectedSpaces = spaceTreeBloc.state.selectedSpaces.isNotEmpty;
 
-    final spaceTreeState = context.read<SpaceTreeBloc>().state;
-    if (spaceTreeState.selectedCommunities.contains(community.uuid) ||
-        spaceTreeState.selectedSpaces.contains(space.uuid)) {
-      clearData(context);
+    if (isSpaceSelected) {
+      final firstSelectedSpace = spaceTreeBloc.state.selectedSpaces.first;
+      final isTheFirstSelectedSpace = firstSelectedSpace == space.uuid;
+      if (isTheFirstSelectedSpace) {
+        clearData(context);
+      }
       return;
     }
 
+    if (hasSelectedSpaces) {
+      clearData(context);
+    }
+
+    spaceTreeBloc.add(
+      OnSpaceSelected(
+        community,
+        space.uuid ?? '',
+        space.children,
+      ),
+    );
+
     FetchEnergyManagementDataHelper.loadEnergyManagementData(
       context,
       communityId: community.uuid,
@@ -62,18 +62,11 @@ class EnergyManagementDataLoadingStrategy implements AnalyticsDataLoadingStrateg
     );
   }
 
-  @override
-  void onChildSpaceSelected(
-    BuildContext context,
-    CommunityModel community,
-    SpaceModel child,
-  ) {
-    return onSpaceSelected(context, community, child);
-  }
-
   @override
   void clearData(BuildContext context) {
-    context.read<SpaceTreeBloc>().add(const SpaceTreeClearSelectionEvent());
+    context.read<SpaceTreeBloc>().add(
+          const AnalyticsClearAllSpaceTreeSelectionsEvent(),
+        );
     FetchEnergyManagementDataHelper.clearAllData(context);
   }
 }

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

@@ -26,10 +26,10 @@ class OccupancyDataLoadingStrategy implements AnalyticsDataLoadingStrategy {
     final spaceTreeBloc = context.read<SpaceTreeBloc>();
     final isSpaceSelected = spaceTreeBloc.state.selectedSpaces.contains(space.uuid);
 
-    if (isSpaceSelected) {
-      clearData(context);
-      return;
-    }
+    final hasSelectedSpaces = spaceTreeBloc.state.selectedSpaces.isNotEmpty;
+    if (hasSelectedSpaces) clearData(context);
+
+    if (isSpaceSelected) return;
 
     spaceTreeBloc
       ..add(const SpaceTreeClearSelectionEvent())
@@ -42,18 +42,11 @@ class OccupancyDataLoadingStrategy implements AnalyticsDataLoadingStrategy {
     );
   }
 
-  @override
-  void onChildSpaceSelected(
-    BuildContext context,
-    CommunityModel community,
-    SpaceModel child,
-  ) {
-    return onSpaceSelected(context, community, child);
-  }
-
   @override
   void clearData(BuildContext context) {
-    context.read<SpaceTreeBloc>().add(const SpaceTreeClearSelectionEvent());
+    context.read<SpaceTreeBloc>().add(
+          const AnalyticsClearAllSpaceTreeSelectionsEvent(),
+        );
     FetchOccupancyDataHelper.clearAllData(context);
   }
 }

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

@@ -1,5 +1,8 @@
+import 'package:dio/dio.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/device_location/device_location_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_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';
@@ -13,9 +16,12 @@ import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/real
 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/air_quality_distribution/fake_air_quality_distribution_service.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/device_location/device_location_details_service_decorator.dart';
+import 'package:syncrow_web/pages/analytics/services/device_location/remote_device_location_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/remote_occupancy_service.dart';
@@ -101,6 +107,23 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
             FakeRangeOfAqiService(),
           ),
         ),
+        BlocProvider(
+          create: (context) => AirQualityDistributionBloc(
+            FakeAirQualityDistributionService(),
+          ),
+        ),
+        BlocProvider(
+          create: (context) => DeviceLocationBloc(
+            DeviceLocationDetailsServiceDecorator(
+              RemoteDeviceLocationService(_httpService),
+              Dio(
+                BaseOptions(
+                  baseUrl: 'https://nominatim.openstreetmap.org/',
+                ),
+              ),
+            ),
+          ),
+        ),
       ],
       child: const AnalyticsPageForm(),
     );

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

@@ -21,7 +21,7 @@ class AnalyticsCommunitiesSidebar extends StatelessWidget {
           strategy.onSpaceSelected(context, community, space);
         },
         onSelectChildSpace: (community, child) {
-          strategy.onChildSpaceSelected(context, community, child);
+          strategy.onSpaceSelected(context, community, child);
         },
       ),
     );

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.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';
@@ -56,33 +57,16 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
                   const Spacer(),
                   Visibility(
                     key: ValueKey(selectedTab),
-                    visible: selectedTab == AnalyticsPageTab.energyManagement,
+                    visible: selectedTab == AnalyticsPageTab.energyManagement ||
+                        selectedTab == AnalyticsPageTab.airQuality,
                     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 ?? '',
-                              );
-                            }
+                          onDateSelected: (value) {
+                            _onDateChanged(context, value, selectedTab);
                           },
                           selectedDate: context
                               .watch<AnalyticsDatePickerBloc>()
@@ -112,4 +96,73 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
       child: child,
     );
   }
+
+  void _onDateChanged(
+    BuildContext context,
+    DateTime date,
+    AnalyticsPageTab selectedTab,
+  ) {
+    context.read<AnalyticsDatePickerBloc>().add(
+          UpdateAnalyticsDatePickerEvent(montlyDate: date),
+        );
+
+    final spaceTreeState = context.read<SpaceTreeBloc>().state;
+    final communities = spaceTreeState.selectedCommunities;
+    final spaces = spaceTreeState.selectedSpaces;
+    if (spaceTreeState.selectedSpaces.isNotEmpty) {
+      switch (selectedTab) {
+        case AnalyticsPageTab.energyManagement:
+          _onEnergyManagementDateChanged(
+            context,
+            date: date,
+            communityUuid: communities.firstOrNull ?? '',
+            spaceUuid: spaces.firstOrNull ?? '',
+          );
+          break;
+        case AnalyticsPageTab.airQuality:
+          _onAirQualityDateChanged(
+            context,
+            date: date,
+            communityUuid: communities.firstOrNull ?? '',
+            spaceUuid: spaces.firstOrNull ?? '',
+          );
+        default:
+          break;
+      }
+    }
+  }
+
+  void _onEnergyManagementDateChanged(
+    BuildContext context, {
+    required DateTime date,
+    required String communityUuid,
+    required String spaceUuid,
+  }) {
+    context.read<AnalyticsDatePickerBloc>().add(
+          UpdateAnalyticsDatePickerEvent(montlyDate: date),
+        );
+
+    FetchEnergyManagementDataHelper.loadEnergyManagementData(
+      context,
+      shouldFetchAnalyticsDevices: false,
+      selectedDate: date,
+      communityId: communityUuid,
+      spaceId: spaceUuid,
+    );
+  }
+
+  void _onAirQualityDateChanged(
+    BuildContext context, {
+    required DateTime date,
+    required String communityUuid,
+    required String spaceUuid,
+  }) {
+    FetchAirQualityDataHelper.loadAirQualityData(
+      context,
+      date: date,
+      communityUuid: communityUuid,
+      spaceUuid: spaceUuid,
+      shouldFetchAnalyticsDevices: false,
+    );
+  }
 }

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

@@ -3,6 +3,7 @@ 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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 
 part 'energy_consumption_by_phases_event.dart';
 part 'energy_consumption_by_phases_state.dart';
@@ -31,6 +32,13 @@ class EnergyConsumptionByPhasesBloc
           chartData: chartData,
         ),
       );
+    } on APIException catch (e) {
+      emit(
+        state.copyWith(
+          status: EnergyConsumptionByPhasesStatus.failure,
+          errorMessage: e.message,
+        ),
+      );
     } catch (e) {
       emit(
         state.copyWith(

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

@@ -3,6 +3,7 @@ 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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 
 part 'energy_consumption_per_device_event.dart';
 part 'energy_consumption_per_device_state.dart';
@@ -13,7 +14,8 @@ class EnergyConsumptionPerDeviceBloc
     this._energyConsumptionPerDeviceService,
   ) : super(const EnergyConsumptionPerDeviceState()) {
     on<LoadEnergyConsumptionPerDeviceEvent>(_onLoadEnergyConsumptionPerDeviceEvent);
-    on<ClearEnergyConsumptionPerDeviceEvent>(_onClearEnergyConsumptionPerDeviceEvent);
+    on<ClearEnergyConsumptionPerDeviceEvent>(
+        _onClearEnergyConsumptionPerDeviceEvent);
   }
 
   final EnergyConsumptionPerDeviceService _energyConsumptionPerDeviceService;
@@ -31,6 +33,13 @@ class EnergyConsumptionPerDeviceBloc
           chartData: chartData,
         ),
       );
+    } on APIException catch (e) {
+      emit(
+        state.copyWith(
+          status: EnergyConsumptionPerDeviceStatus.failure,
+          errorMessage: e.message,
+        ),
+      );
     } catch (e) {
       emit(
         state.copyWith(

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

@@ -3,6 +3,7 @@ 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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 
 part 'power_clamp_info_event.dart';
 part 'power_clamp_info_state.dart';
@@ -31,6 +32,13 @@ class PowerClampInfoBloc extends Bloc<PowerClampInfoEvent, PowerClampInfoState>
           powerClampModel: powerClampModel,
         ),
       );
+    } on APIException catch (e) {
+      emit(
+        state.copyWith(
+          status: PowerClampInfoStatus.error,
+          errorMessage: e.message,
+        ),
+      );
     } catch (e) {
       emit(
         state.copyWith(

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

@@ -3,6 +3,7 @@ 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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 
 part 'total_energy_consumption_event.dart';
 part 'total_energy_consumption_state.dart';
@@ -31,6 +32,13 @@ class TotalEnergyConsumptionBloc
           status: TotalEnergyConsumptionStatus.loaded,
         ),
       );
+    } on APIException catch (e) {
+      emit(
+        state.copyWith(
+          errorMessage: e.message,
+          status: TotalEnergyConsumptionStatus.failure,
+        ),
+      );
     } catch (e) {
       emit(
         state.copyWith(

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

@@ -38,7 +38,7 @@ abstract final class EnergyManagementChartsHelper {
         sideTitles: SideTitles(
           showTitles: true,
           maxIncluded: false,
-          minIncluded: false,
+          minIncluded: true,
           interval: leftTitlesInterval,
           reservedSize: 110,
           getTitlesWidget: (value, meta) => Padding(

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

@@ -16,7 +16,6 @@ import 'package:syncrow_web/pages/analytics/params/get_total_energy_consumption_
 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;
   }
@@ -48,7 +47,6 @@ abstract final class FetchEnergyManagementDataHelper {
     loadTotalEnergyConsumption(
       context,
       selectedDate: selectedDate0,
-      communityId: communityId,
       spaceId: spaceId,
     );
     final selectedDevice = getSelectedDevice(context);
@@ -61,7 +59,6 @@ abstract final class FetchEnergyManagementDataHelper {
     }
     loadEnergyConsumptionPerDevice(
       context,
-      communityId: communityId,
       spaceId: spaceId,
       selectedDate: selectedDate0,
     );
@@ -84,12 +81,10 @@ abstract final class FetchEnergyManagementDataHelper {
   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(
@@ -100,12 +95,10 @@ abstract final class FetchEnergyManagementDataHelper {
   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(

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

@@ -1,34 +1,11 @@
 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 {
+class AnalyticsEnergyManagementView extends StatelessWidget {
   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) {

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

@@ -23,7 +23,6 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
           ),
           padding: const EdgeInsets.all(30),
           child: Column(
-            spacing: 20,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               AnalyticsErrorWidget(state.errorMessage),
@@ -52,7 +51,9 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
                   ),
                 ],
               ),
+              const SizedBox(height: 20),
               const Divider(height: 0),
+              const SizedBox(height: 20),
               Expanded(
                 child: EnergyConsumptionPerDeviceChart(chartData: state.chartData),
               ),

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

@@ -41,7 +41,7 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
         .color;
 
     return Tooltip(
-      message: '${device.name}\n${device.productDevice?.uuid ?? ''}',
+      message: '${device.name}\n${device.spaceUuid ?? ''}',
       child: ChartInformativeCell(title: Text(device.name), color: deviceColor),
     );
   }

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

@@ -41,7 +41,7 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
                 AnalyticsErrorWidget(state.errorMessage),
                 AnalyticsSidebarHeader(
                   title: 'Smart Power Clamp',
-                  showSpaceUuid: true,
+                  showSpaceUuidInDevicesDropdown: true,
                   onChanged: (device) {
                     FetchEnergyManagementDataHelper.loadEnergyConsumptionByPhases(
                       context,

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

@@ -19,7 +19,6 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
         ),
         padding: const EdgeInsets.all(30),
         child: Column(
-          spacing: 20,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             AnalyticsErrorWidget(state.errorMessage),
@@ -39,7 +38,9 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
                 const Spacer(flex: 4),
               ],
             ),
+            const SizedBox(height: 20),
             const Divider(),
+            const SizedBox(height: 20),
             TotalEnergyConsumptionChart(chartData: state.chartData),
           ],
         ),

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

@@ -3,6 +3,7 @@ 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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 
 part 'occupancy_event.dart';
 part 'occupancy_state.dart';
@@ -23,6 +24,8 @@ class OccupancyBloc extends Bloc<OccupancyEvent, OccupancyState> {
     try {
       final chartData = await _occupacyService.load(event.param);
       emit(state.copyWith(chartData: chartData, status: OccupancyStatus.loaded));
+    } on APIException catch (e) {
+      emit(state.copyWith(status: OccupancyStatus.failure, errorMessage: e.message));
     } catch (e) {
       emit(state.copyWith(status: OccupancyStatus.failure, errorMessage: '$e'));
     }

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

@@ -3,6 +3,7 @@ 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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 
 part 'occupancy_heat_map_event.dart';
 part 'occupancy_heat_map_state.dart';
@@ -30,6 +31,13 @@ class OccupancyHeatMapBloc
           heatMapData: occupancyHeatMap,
         ),
       );
+    } on APIException catch (e) {
+      emit(
+        state.copyWith(
+          status: OccupancyHeatMapStatus.failure,
+          errorMessage: e.message,
+        ),
+      );
     } catch (e) {
       emit(
         state.copyWith(

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

@@ -16,7 +16,7 @@ class OccupancyChart extends StatelessWidget {
   Widget build(BuildContext context) {
     return BarChart(
       BarChartData(
-        maxY: 100.0,
+        maxY: 100.001,
         gridData: EnergyManagementChartsHelper.gridData().copyWith(
           checkToShowHorizontalLine: (value) => true,
           horizontalInterval: 20,
@@ -134,7 +134,7 @@ class OccupancyChart extends StatelessWidget {
           alignment: AlignmentDirectional.bottomCenter,
           fit: BoxFit.scaleDown,
           child: Text(
-            (value + 1).toString(),
+            chartData[value.toInt()].date.day.toString(),
             style: context.textTheme.bodySmall?.copyWith(
               color: ColorsManager.greyColor,
               fontSize: 8,

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

@@ -22,7 +22,6 @@ class OccupancyChartBox extends StatelessWidget {
           padding: const EdgeInsets.all(30),
           decoration: containerWhiteDecoration,
           child: Column(
-            spacing: 20,
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -65,7 +64,9 @@ class OccupancyChartBox extends StatelessWidget {
                   ),
                 ],
               ),
-              const Divider(height: 0),
+              const SizedBox(height: 20),
+              const Divider(),
+              const SizedBox(height: 20),
               Expanded(child: OccupancyChart(chartData: state.chartData)),
             ],
           ),

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

@@ -22,7 +22,6 @@ class OccupancyHeatMapBox extends StatelessWidget {
           padding: const EdgeInsets.all(30),
           decoration: containerWhiteDecoration,
           child: Column(
-            spacing: 20,
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -66,7 +65,9 @@ class OccupancyHeatMapBox extends StatelessWidget {
                   ),
                 ],
               ),
-              const Divider(height: 0),
+              const SizedBox(height: 20),
+              const Divider(),
+              const SizedBox(height: 20),
               Expanded(
                 child: OccupancyHeatMap(
                   heatMapData: state.heatMapData.asMap().map(

lib/pages/analytics/params/get_air_quality_distribution_param.dart

@@ -0,0 +1,9 @@
+class GetAirQualityDistributionParam {
+  final DateTime date;
+  final String spaceUuid;
+
+  const GetAirQualityDistributionParam({
+    required this.date,
+    required this.spaceUuid,
+  });
+}

lib/pages/analytics/params/get_device_location_data_param.dart

@@ -0,0 +1,11 @@
+class GetDeviceLocationDataParam {
+  const GetDeviceLocationDataParam({
+    required this.latitude,
+    required this.longitude,
+  });
+
+  final double latitude;
+  final double longitude;
+
+  Map<String, dynamic> toJson() => {'lat': latitude, 'lon': longitude};
+}

lib/pages/analytics/params/get_energy_consumption_per_device_param.dart

@@ -2,18 +2,15 @@ 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,
+        if (spaceId != null) 'spaceUuid': spaceId,
         'groupByDevice': true,
       };
 }

lib/pages/analytics/params/get_range_of_aqi_param.dart

@@ -1,16 +1,12 @@
 import 'package:equatable/equatable.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
 
 class GetRangeOfAqiParam extends Equatable {
   final DateTime date;
   final String spaceUuid;
-  final AqiType aqiType;
 
-  const GetRangeOfAqiParam(
-    {
+  const GetRangeOfAqiParam({
     required this.date,
     required this.spaceUuid,
-    required this.aqiType,
   });
 
   @override

lib/pages/analytics/params/get_total_energy_consumption_param.dart

@@ -1,20 +1,17 @@
 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,
+      if (spaceId != null) 'spaceUuid': spaceId,
       'groupByDevice': false,
     };
   }

lib/pages/analytics/services/air_quality_distribution/air_quality_distribution_service.dart

@@ -0,0 +1,8 @@
+import 'package:syncrow_web/pages/analytics/models/air_quality_data_model.dart';
+import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
+
+abstract interface class AirQualityDistributionService {
+  Future<List<AirQualityDataModel>> getAirQualityDistribution(
+    GetAirQualityDistributionParam param,
+  );
+}

lib/pages/analytics/services/air_quality_distribution/fake_air_quality_distribution_service.dart

@@ -0,0 +1,95 @@
+import 'dart:math';
+
+import 'package:syncrow_web/pages/analytics/models/air_quality_data_model.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
+import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
+import 'package:syncrow_web/pages/analytics/services/air_quality_distribution/air_quality_distribution_service.dart';
+
+class FakeAirQualityDistributionService implements AirQualityDistributionService {
+  final _random = Random();
+
+  @override
+  Future<List<AirQualityDataModel>> getAirQualityDistribution(
+    GetAirQualityDistributionParam param,
+  ) async {
+    return Future.delayed(
+      const Duration(milliseconds: 400),
+      () => List.generate(30, (index) {
+        final date = DateTime(2025, 5, 1).add(Duration(days: index));
+
+        final values = _generateRandomPercentages();
+        final nullMask = List.generate(6, (_) => _shouldBeNull());
+
+        if (nullMask.every((isNull) => isNull)) {
+          nullMask[_random.nextInt(6)] = false;
+        }
+
+        final nonNullValues = _redistributePercentages(values, nullMask);
+
+        return AirQualityDataModel(
+          date: date,
+          data: [
+            AirQualityPercentageData(
+              type: AqiType.aqi.code,
+              percentage: nonNullValues[0],
+              name: 'good',
+            ),
+            AirQualityPercentageData(
+              name: 'moderate',
+              type: AqiType.co2.code,
+              percentage: nonNullValues[1],
+            ),
+            AirQualityPercentageData(
+              name: 'poor',
+              percentage: nonNullValues[2],
+              type: AqiType.hcho.code,
+
+            ),
+            AirQualityPercentageData(
+              name: 'unhealthy',
+              percentage: nonNullValues[3],
+              type: AqiType.pm10.code,
+            ),
+            AirQualityPercentageData(
+              name: 'severe',
+              type: AqiType.pm25.code,
+              percentage: nonNullValues[4],
+            ),
+            AirQualityPercentageData(
+              name: 'hazardous',
+              percentage: nonNullValues[5],
+              type: AqiType.co2.code,
+            ),
+          ],
+        );
+      }),
+    );
+  }
+
+  List<double> _redistributePercentages(
+    List<double> originalValues,
+    List<bool> nullMask,
+  ) {
+    double nonNullSum = 0;
+    for (int i = 0; i < originalValues.length; i++) {
+      if (!nullMask[i]) {
+        nonNullSum += originalValues[i];
+      }
+    }
+
+    return List.generate(originalValues.length, (i) {
+      if (nullMask[i]) return 0;
+      return (originalValues[i] / nonNullSum * 100).roundToDouble();
+    });
+  }
+
+  bool _shouldBeNull() => _random.nextDouble() < 0.6;
+
+  List<double> _generateRandomPercentages() {
+    final values = List.generate(6, (_) => _random.nextDouble());
+
+    final sum = values.reduce((a, b) => a + b);
+
+    return values.map((value) => (value / sum * 100).roundToDouble()).toList();
+  }
+}

lib/pages/analytics/services/air_quality_distribution/remote_air_quality_distribution_service.dart

@@ -0,0 +1,36 @@
+import 'package:syncrow_web/pages/analytics/models/air_quality_data_model.dart';
+import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
+import 'package:syncrow_web/pages/analytics/services/air_quality_distribution/air_quality_distribution_service.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+class RemoteAirQualityDistributionService implements AirQualityDistributionService {
+  RemoteAirQualityDistributionService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<AirQualityDataModel>> getAirQualityDistribution(
+    GetAirQualityDistributionParam param,
+  ) async {
+    try {
+      final response = await _httpService.get(
+        path: 'endpoint',
+        queryParameters: {
+          'spaceUuid': param.spaceUuid,
+          'date': param.date.toIso8601String(),
+        },
+        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 AirQualityDataModel.fromJson(jsonData);
+          }).toList();
+        },
+      );
+      return response;
+    } catch (e) {
+      throw Exception('Failed to load energy consumption per phase: $e');
+    }
+  }
+}

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

@@ -1,6 +1,8 @@
+import 'package:dio/dio.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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 final class RemoteEnergyManagementAnalyticsDevicesService
@@ -9,6 +11,8 @@ final class RemoteEnergyManagementAnalyticsDevicesService
 
   final HTTPService _httpService;
 
+  static const _defaultErrorMessage = 'Failed to load analytics devices';
+
   @override
   Future<List<AnalyticsDevice>> getDevices(GetAnalyticsDevicesParam param) async {
     try {
@@ -29,8 +33,14 @@ final class RemoteEnergyManagementAnalyticsDevicesService
       );
 
       return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      throw Exception('Failed to load total energy consumption: $e');
+      throw APIException('$_defaultErrorMessage: $e');
     }
   }
 }

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

@@ -1,7 +1,9 @@
+import 'package:dio/dio.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';
 import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 class RemoteOccupancyAnalyticsDevicesService implements AnalyticsDevicesService {
@@ -9,6 +11,8 @@ class RemoteOccupancyAnalyticsDevicesService implements AnalyticsDevicesService
 
   final HTTPService _httpService;
 
+  static const _defaultErrorMessage = 'Failed to load analytics devices';
+
   @override
   Future<List<AnalyticsDevice>> getDevices(GetAnalyticsDevicesParam param) async {
     try {
@@ -26,8 +30,15 @@ class RemoteOccupancyAnalyticsDevicesService implements AnalyticsDevicesService
 
       final result = requests.map((e) => e.first).toList();
       return result;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      throw Exception('Failed to load total energy consumption: $e');
+      final formattedErrorMessage = [_defaultErrorMessage, e.toString()].join(': ');
+      throw APIException(formattedErrorMessage);
     }
   }
 
@@ -54,8 +65,14 @@ class RemoteOccupancyAnalyticsDevicesService implements AnalyticsDevicesService
         },
       );
       return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      rethrow;
+      throw APIException('$_defaultErrorMessage: $e');
     }
   }
 }

lib/pages/analytics/services/device_location/device_location_details_service_decorator.dart

@@ -0,0 +1,40 @@
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/analytics/models/device_location_info.dart';
+import 'package:syncrow_web/pages/analytics/params/get_device_location_data_param.dart';
+import 'package:syncrow_web/pages/analytics/services/device_location/device_location_service.dart';
+
+class DeviceLocationDetailsServiceDecorator implements DeviceLocationService {
+  const DeviceLocationDetailsServiceDecorator(this._decoratee, this._dio);
+
+  final DeviceLocationService _decoratee;
+  final Dio _dio;
+
+  @override
+  Future<DeviceLocationInfo> get(GetDeviceLocationDataParam param) async {
+    try {
+      final deviceLocationInfo = await _decoratee.get(param);
+      final response = await _dio.get<Map<String, dynamic>>(
+        'reverse',
+        queryParameters: {
+          'format': 'json',
+          'lat': param.latitude,
+          'lon': param.longitude,
+        },
+      );
+
+      final data = response.data;
+      if (data != null) {
+        final addressData = data['address'] as Map<String, dynamic>;
+        return deviceLocationInfo.copyWith(
+          city: addressData['city'],
+          country: addressData['country_code'].toString().toUpperCase(),
+          address: addressData['state'],
+        );
+      }
+
+      return deviceLocationInfo;
+    } catch (e) {
+      throw Exception('Failed to load device location info: ${e.toString()}');
+    }
+  }
+}

lib/pages/analytics/services/device_location/device_location_service.dart

@@ -0,0 +1,6 @@
+import 'package:syncrow_web/pages/analytics/models/device_location_info.dart';
+import 'package:syncrow_web/pages/analytics/params/get_device_location_data_param.dart';
+
+abstract interface class DeviceLocationService {
+  Future<DeviceLocationInfo> get(GetDeviceLocationDataParam param);
+}

lib/pages/analytics/services/device_location/remote_device_location_service.dart

@@ -0,0 +1,37 @@
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/analytics/models/device_location_info.dart';
+import 'package:syncrow_web/pages/analytics/params/get_device_location_data_param.dart';
+import 'package:syncrow_web/pages/analytics/services/device_location/device_location_service.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+class RemoteDeviceLocationService implements DeviceLocationService {
+  const RemoteDeviceLocationService(this._httpService);
+
+  final HTTPService _httpService;
+
+  static const _defaultErrorMessage = 'Failed to load device location';
+
+  @override
+  Future<DeviceLocationInfo> get(GetDeviceLocationDataParam param) async {
+    try {
+      final response = await _httpService.get(
+        path: '/weather',
+        queryParameters: param.toJson(),
+        expectedResponseModel: (data) {
+          final response = data as Map<String, dynamic>;
+          final location = response['data'] as Map<String, dynamic>;
+
+          return DeviceLocationInfo.fromJson(location);
+        },
+      );
+      return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      throw Exception(errorMessage);
+    } catch (e) {
+      throw Exception('$_defaultErrorMessage: $e');
+    }
+  }
+}

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

@@ -1,6 +1,8 @@
+import 'package:dio/dio.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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 final class RemoteEnergyConsumptionByPhasesService
@@ -9,6 +11,8 @@ final class RemoteEnergyConsumptionByPhasesService
 
   final HTTPService _httpService;
 
+  static const _defaultErrorMessage = 'Failed to load energy consumption per phase';
+
   @override
   Future<List<PhasesEnergyConsumption>> load(
     GetEnergyConsumptionByPhasesParam param,
@@ -28,8 +32,15 @@ final class RemoteEnergyConsumptionByPhasesService
         },
       );
       return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      throw Exception('Failed to load energy consumption per phase: $e');
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
     }
   }
 }

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

@@ -1,8 +1,10 @@
+import 'package:dio/dio.dart';
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
 import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
 import 'package:syncrow_web/pages/analytics/params/get_energy_consumption_per_device_param.dart';
 import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/energy_consumption_per_device_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 class RemoteEnergyConsumptionPerDeviceService
@@ -11,6 +13,8 @@ class RemoteEnergyConsumptionPerDeviceService
 
   final HTTPService _httpService;
 
+  static const _defaultErrorMessage = 'Failed to load energy consumption per device';
+
   @override
   Future<List<DeviceEnergyDataModel>> load(
     GetEnergyConsumptionPerDeviceParam param,
@@ -23,8 +27,15 @@ class RemoteEnergyConsumptionPerDeviceService
         expectedResponseModel: _EnergyConsumptionPerDeviceMapper.map,
       );
       return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      throw Exception('Failed to load energy consumption per device: $e');
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
     }
   }
 }

lib/pages/analytics/services/occupacy/remote_occupancy_service.dart

@@ -1,6 +1,8 @@
+import 'package:dio/dio.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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 final class RemoteOccupancyService implements OccupacyService {
@@ -8,6 +10,8 @@ final class RemoteOccupancyService implements OccupacyService {
 
   final HTTPService _httpService;
 
+  static const _defaultErrorMessage = 'Failed to load occupancy';
+
   @override
   Future<List<Occupacy>> load(GetOccupancyParam param) async {
     try {
@@ -25,8 +29,15 @@ final class RemoteOccupancyService implements OccupacyService {
         },
       );
       return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      throw Exception('Failed to load energy consumption per phase: $e');
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
     }
   }
-}
+}

lib/pages/analytics/services/occupancy_heat_map/remote_occupancy_heat_map_service.dart

@@ -1,6 +1,8 @@
+import 'package:dio/dio.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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 final class RemoteOccupancyHeatMapService implements OccupancyHeatMapService {
@@ -8,6 +10,8 @@ final class RemoteOccupancyHeatMapService implements OccupancyHeatMapService {
 
   final HTTPService _httpService;
 
+  static const _defaultErrorMessage = 'Failed to load occupancy heat map';
+
   @override
   Future<List<OccupancyHeatMapModel>> load(GetOccupancyHeatMapParam param) async {
     try {
@@ -28,8 +32,15 @@ final class RemoteOccupancyHeatMapService implements OccupancyHeatMapService {
       );
 
       return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      throw Exception('Failed to load total energy consumption:');
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
     }
   }
 }

lib/pages/analytics/services/power_clamp_info/remote_power_clamp_info_service.dart

@@ -1,5 +1,7 @@
+import 'package:dio/dio.dart';
 import 'package:syncrow_web/pages/analytics/services/power_clamp_info/power_clamp_info_service.dart';
 import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clamp_model.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 final class RemotePowerClampInfoService implements PowerClampInfoService {
@@ -7,6 +9,8 @@ final class RemotePowerClampInfoService implements PowerClampInfoService {
 
   final HTTPService _httpService;
 
+  static const _defaultErrorMessage = 'Failed to fetch power clamp info';
+
   @override
   Future<PowerClampModel> getInfo(String deviceId) async {
     try {
@@ -20,8 +24,15 @@ final class RemotePowerClampInfoService implements PowerClampInfoService {
         },
       );
       return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      throw Exception('Failed to fetch power clamp info: $e');
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
     }
   }
 }

lib/pages/analytics/services/range_of_aqi/fake_range_of_aqi_service.dart

@@ -1,4 +1,5 @@
 import 'package:syncrow_web/pages/analytics/models/range_of_aqi.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
 import 'package:syncrow_web/pages/analytics/params/get_range_of_aqi_param.dart';
 import 'package:syncrow_web/pages/analytics/services/range_of_aqi/range_of_aqi_service.dart';
 
@@ -18,10 +19,15 @@ class FakeRangeOfAqiService implements RangeOfAqiService {
         final avg = (min + avgDelta).clamp(0.0, 301.0);
         final max = (avg + maxDelta).clamp(0.0, 301.0);
 
-        return RangeOfAqi(
-          min: min,
-          avg: avg,
-          max: max,
+        return RangeOfAqi(  
+          data: [
+            RangeOfAqiValue(type: AqiType.aqi.code, min: min, average: avg, max: max),
+            RangeOfAqiValue(type: AqiType.pm25.code, min: min, average: avg, max: max),
+            RangeOfAqiValue(type: AqiType.pm10.code, min: min, average: avg, max: max),
+            RangeOfAqiValue(type: AqiType.hcho.code, min: min, average: avg, max: max),
+            RangeOfAqiValue(type: AqiType.tvoc.code, min: min, average: avg, max: max),
+            RangeOfAqiValue(type: AqiType.co2.code, min: min, average: avg, max: max),
+          ],
           date: date,
         );
       });

lib/pages/analytics/services/range_of_aqi/remote_range_of_aqi_service.dart

@@ -0,0 +1,34 @@
+import 'package:syncrow_web/pages/analytics/models/range_of_aqi.dart';
+import 'package:syncrow_web/pages/analytics/params/get_range_of_aqi_param.dart';
+import 'package:syncrow_web/pages/analytics/services/range_of_aqi/range_of_aqi_service.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+final class RemoteRangeOfAqiService implements RangeOfAqiService {
+  const RemoteRangeOfAqiService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<RangeOfAqi>> load(GetRangeOfAqiParam param) async {
+    try {
+      final response = await _httpService.get(
+        path: 'endpoint',
+        queryParameters: {
+          'spaceUuid': param.spaceUuid,
+          'date': param.date.toIso8601String(),
+        },
+        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 RangeOfAqi.fromJson(jsonData);
+          }).toList();
+        },
+      );
+      return response;
+    } catch (e) {
+      throw Exception('Failed to load energy consumption per phase: $e');
+    }
+  }
+}

lib/pages/analytics/services/total_energy_consumption/remote_total_energy_consumption_service.dart

@@ -1,6 +1,8 @@
+import 'package:dio/dio.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';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 class RemoteTotalEnergyConsumptionService implements TotalEnergyConsumptionService {
@@ -8,6 +10,8 @@ class RemoteTotalEnergyConsumptionService implements TotalEnergyConsumptionServi
 
   final HTTPService _httpService;
 
+  static const _defaultErrorMessage = 'Failed to load total energy consumption';
+
   @override
   Future<List<EnergyDataModel>> load(
     GetTotalEnergyConsumptionParam param,
@@ -21,8 +25,15 @@ class RemoteTotalEnergyConsumptionService implements TotalEnergyConsumptionServi
       );
 
       return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(': ');
+      throw APIException(formattedErrorMessage);
     } catch (e) {
-      throw Exception('Failed to load total energy consumption: $e');
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
     }
   }
 }

lib/pages/analytics/widgets/analytics_error_widget.dart

@@ -11,14 +11,17 @@ class AnalyticsErrorWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Visibility(
       visible: errorMessage != null || (errorMessage?.isNotEmpty ?? false),
-      child: Text(
-        errorMessage ?? 'Something went wrong',
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-        style: context.textTheme.bodySmall?.copyWith(
-          color: ColorsManager.red,
-          fontWeight: FontWeight.w400,
-          fontSize: 8,
+      child: Padding(
+        padding: const EdgeInsetsDirectional.only(bottom: 10),
+        child: Text(
+          errorMessage ?? 'Something went wrong',
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.red,
+            fontWeight: FontWeight.w400,
+            fontSize: 8,
+          ),
         ),
       ),
     );

lib/pages/analytics/widgets/analytics_sidebar_header.dart

@@ -10,13 +10,13 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
 class AnalyticsSidebarHeader extends StatelessWidget {
   const AnalyticsSidebarHeader({
     required this.title,
-    this.showSpaceUuid = false,
+    this.showSpaceUuidInDevicesDropdown = false,
     this.onChanged,
     super.key,
   });
 
   final String title;
-  final bool showSpaceUuid;
+  final bool showSpaceUuidInDevicesDropdown;
   final void Function(AnalyticsDevice device)? onChanged;
 
   @override
@@ -49,6 +49,7 @@ class AnalyticsSidebarHeader extends StatelessWidget {
                 alignment: AlignmentDirectional.centerEnd,
                 fit: BoxFit.scaleDown,
                 child: AnalyticsDeviceDropdown(
+                  showSpaceUuid: showSpaceUuidInDevicesDropdown,
                   onChanged: (value) {
                     context.read<AnalyticsDevicesBloc>().add(
                           SelectAnalyticsDeviceEvent(value),

lib/pages/auth/bloc/auth_bloc.dart

@@ -13,6 +13,7 @@ import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/home/bloc/home_bloc.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/services/api/api_exception.dart';
 import 'package:syncrow_web/services/auth_api.dart';
 import 'package:syncrow_web/utils/constants/strings_manager.dart';
 import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
@@ -99,7 +100,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
     emit(const TimerState(isButtonEnabled: true, remainingTime: 0));
   }
 
-  Future<void> changePassword(ChangePasswordEvent event, Emitter<AuthState> emit) async {
+Future<void> changePassword(
+      ChangePasswordEvent event, Emitter<AuthState> emit) async {
     emit(LoadingForgetState());
     try {
       var response = await AuthenticationAPI.verifyOtp(
@@ -113,14 +115,14 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
         emit(const TimerState(isButtonEnabled: true, remainingTime: 0));
         emit(SuccessForgetState());
       }
-    } on DioException catch (e) {
-      final errorData = e.response!.data;
-      String errorMessage = errorData['error']['message'] ?? 'something went wrong';
+    } on APIException catch (e) {
+      final errorMessage = e.message;
       validate = errorMessage;
       emit(AuthInitialState());
     }
   }
 
+
   String? validateCode(String? value) {
     if (value == null || value.isEmpty) {
       return 'Code is required';
@@ -149,6 +151,7 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
   static UserModel? user;
   bool showValidationMessage = false;
 
+ 
   void _login(LoginButtonPressed event, Emitter<AuthState> emit) async {
     emit(AuthLoading());
     if (isChecked) {
@@ -161,25 +164,24 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
 
         token = await AuthenticationAPI.loginWithEmail(
           model: LoginWithEmailModel(
-            email: event.username,
+            email: event.username.toLowerCase(),
             password: event.password,
           ),
         );
-      } on DioException catch (e) {
-        final errorData = e.response!.data;
-        String errorMessage = errorData['error']['message'];
-        if (errorMessage == "Access denied for web platform") {
-          validate = errorMessage;
-        } else {
-          validate = 'Invalid Credentials!';
-        }
+      } on APIException catch (e) {
+        validate = e.message;
+        emit(LoginInitial());
+        return;
+      } catch (e) {
+        validate = 'Something went wrong';
         emit(LoginInitial());
         return;
       }
 
       if (token.accessTokenIsNotEmpty) {
         FlutterSecureStorage storage = const FlutterSecureStorage();
-        await storage.write(key: Token.loginAccessTokenKey, value: token.accessToken);
+        await storage.write(
+            key: Token.loginAccessTokenKey, value: token.accessToken);
         const FlutterSecureStorage().write(
             key: UserModel.userUuidKey,
             value: Token.decodeToken(token.accessToken)['uuid'].toString());
@@ -195,6 +197,7 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
     }
   }
 
+
   checkBoxToggle(
     CheckBoxEvent event,
     Emitter<AuthState> emit,

lib/pages/common/custom_table.dart

@@ -162,31 +162,34 @@ class _DynamicTableState extends State<DynamicTable> {
                   child: SingleChildScrollView(
                     scrollDirection: Axis.horizontal,
                     controller: _horizontalBodyScrollController,
-                    child: SizedBox(
-                      width: widget.size.width,
-                      child: widget.isEmpty
-                          ? _buildEmptyState()
-                          : Column(
-                              children:
-                                  List.generate(widget.data.length, (rowIndex) {
-                                final row = widget.data[rowIndex];
-                                return Row(
-                                  children: [
-                                    if (widget.withCheckBox)
-                                      _buildRowCheckbox(
-                                          rowIndex, widget.size.height * 0.08),
-                                    ...row.asMap().entries.map((entry) {
-                                      return _buildTableCell(
-                                        entry.value.toString(),
-                                        widget.size.height * 0.08,
-                                        rowIndex: rowIndex,
-                                        columnIndex: entry.key,
-                                      );
-                                    }).toList(),
-                                  ],
-                                );
-                              }),
-                            ),
+                    child: Container(
+                      color: ColorsManager.whiteColors,
+                      child: SizedBox(
+                        width: widget.size.width,
+                        child: widget.isEmpty
+                            ? _buildEmptyState()
+                            : Column(
+                                children: List.generate(widget.data.length,
+                                    (rowIndex) {
+                                  final row = widget.data[rowIndex];
+                                  return Row(
+                                    children: [
+                                      if (widget.withCheckBox)
+                                        _buildRowCheckbox(rowIndex,
+                                            widget.size.height * 0.08),
+                                      ...row.asMap().entries.map((entry) {
+                                        return _buildTableCell(
+                                          entry.value.toString(),
+                                          widget.size.height * 0.08,
+                                          rowIndex: rowIndex,
+                                          columnIndex: entry.key,
+                                        );
+                                      }).toList(),
+                                    ],
+                                  );
+                                }),
+                              ),
+                      ),
                     ),
                   ),
                 ),
@@ -310,7 +313,12 @@ class _DynamicTableState extends State<DynamicTable> {
     bool isSettingsColumn = widget.headers[columnIndex] == 'Settings';
 
     if (isSettingsColumn) {
-      return _buildSettingsIcon(rowIndex, size);
+      return buildSettingsIcon(
+        width: 120,
+        height: 60,
+        iconSize: 40,
+        onTap: () => widget.onSettingsPressed?.call(rowIndex),
+      );
     }
 
     Color? statusColor;
@@ -364,22 +372,63 @@ class _DynamicTableState extends State<DynamicTable> {
     );
   }
 
-  Widget _buildSettingsIcon(int rowIndex, double size) {
-    return Container(
-      height: size,
-      width: 120,
-      padding: const EdgeInsets.all(5.0),
-      decoration: const BoxDecoration(
-        border: Border(
-          bottom: BorderSide(color: ColorsManager.boxDivider, width: 1.0),
+  Widget buildSettingsIcon(
+      {double width = 120,
+      double height = 60,
+      double iconSize = 40,
+      VoidCallback? onTap}) {
+    return Column(
+      children: [
+        Container(
+          padding: const EdgeInsets.only(top: 10, bottom: 15, left: 10),
+          margin: const EdgeInsets.only(right: 15),
+          decoration: const BoxDecoration(
+            color: ColorsManager.whiteColors,
+            border: Border(
+              bottom: BorderSide(
+                color: ColorsManager.boxDivider,
+                width: 1.0,
+              ),
+            ),
+          ),
+          width: width,
+          child: Padding(
+            padding: const EdgeInsets.only(
+              right: 16.0,
+              left: 17.0,
+            ),
+            child: Container(
+              width: 50,
+              decoration: BoxDecoration(
+                color: const Color(0xFFF7F8FA),
+                borderRadius: BorderRadius.circular(height / 2),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.black.withOpacity(0.17),
+                    blurRadius: 14,
+                    offset: const Offset(0, 4),
+                  ),
+                ],
+              ),
+              child: InkWell(
+                onTap: onTap,
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Center(
+                    child: SvgPicture.asset(
+                      Assets.settings, // ضع المسار الصحيح هنا
+                      width: 40,
+                      height: 22,
+                      color: ColorsManager
+                          .primaryColor, // نفس لون الأيقونة في الصورة
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
         ),
-        color: Colors.white,
-      ),
-      alignment: Alignment.center,
-      child: IconButton(
-        icon: SvgPicture.asset(Assets.settings),
-        onPressed: () => widget.onSettingsPressed?.call(rowIndex),
-      ),
+      ],
     );
   }
 }

lib/pages/device_managment/all_devices/view/device_managment_page.dart

@@ -95,7 +95,7 @@ class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
             return const RoutinesView();
           }
           if (state.createRoutineView) {
-            return CreateNewRoutineView();
+            return const CreateNewRoutineView();
           }
 
           return BlocBuilder<DeviceManagementBloc, DeviceManagementState>(

lib/pages/device_managment/all_devices/widgets/device_managment_body.dart

@@ -6,9 +6,11 @@ import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/widgets/device_search_filters.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/device_settings_panel.dart';
 import 'package:syncrow_web/pages/device_managment/shared/device_batch_control_dialog.dart';
 import 'package:syncrow_web/pages/device_managment/shared/device_control_dialog.dart';
 import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/format_date_time.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -58,7 +60,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
           'Low Battery ($lowBatteryCount)',
         ];
 
-        final buttonLabel = (selectedDevices.length > 1) ? 'Batch Control' : 'Control';
+        final buttonLabel =
+            (selectedDevices.length > 1) ? 'Batch Control' : 'Control';
 
         return Row(
           children: [
@@ -105,18 +108,23 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                             if (selectedDevices.length == 1) {
                                               showDialog(
                                                 context: context,
-                                                builder: (context) => DeviceControlDialog(
+                                                builder: (context) =>
+                                                    DeviceControlDialog(
                                                   device: selectedDevices.first,
                                                 ),
                                               );
-                                            } else if (selectedDevices.length > 1) {
-                                              final productTypes = selectedDevices
-                                                  .map((device) => device.productType)
-                                                  .toSet();
+                                            } else if (selectedDevices.length >
+                                                1) {
+                                              final productTypes =
+                                                  selectedDevices
+                                                      .map((device) =>
+                                                          device.productType)
+                                                      .toSet();
                                               if (productTypes.length == 1) {
                                                 showDialog(
                                                   context: context,
-                                                  builder: (context) => DeviceBatchControlDialog(
+                                                  builder: (context) =>
+                                                      DeviceBatchControlDialog(
                                                     devices: selectedDevices,
                                                   ),
                                                 );
@@ -130,7 +138,9 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                       textAlign: TextAlign.center,
                                       style: TextStyle(
                                         fontSize: 12,
-                                        color: isControlButtonEnabled ? Colors.white : Colors.grey,
+                                        color: isControlButtonEnabled
+                                            ? Colors.white
+                                            : Colors.grey,
                                       ),
                                     ),
                                   ),
@@ -166,29 +176,40 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                 'Installation Date and Time',
                                 'Status',
                                 'Last Offline Date and Time',
+                                'Settings'
                               ],
                               data: devicesToShow.map((device) {
                                 final combinedSpaceNames = device.spaces != null
-                                    ? device.spaces!.map((space) => space.spaceName).join(' > ') +
+                                    ? device.spaces!
+                                            .map((space) => space.spaceName)
+                                            .join(' > ') +
                                         (device.community != null
                                             ? ' > ${device.community!.name}'
                                             : '')
-                                    : (device.community != null ? device.community!.name : '');
+                                    : (device.community != null
+                                        ? device.community!.name
+                                        : '');
 
                                 return [
                                   device.name ?? '',
                                   device.productName ?? '',
                                   device.uuid ?? '',
-                                  (device.spaces != null && device.spaces!.isNotEmpty)
+                                  (device.spaces != null &&
+                                          device.spaces!.isNotEmpty)
                                       ? device.spaces![0].spaceName
                                       : '',
                                   combinedSpaceNames,
-                                  device.batteryLevel != null ? '${device.batteryLevel}%' : '-',
-                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
-                                      (device.createTime ?? 0) * 1000)),
+                                  device.batteryLevel != null
+                                      ? '${device.batteryLevel}%'
+                                      : '-',
+                                  formatDateTime(
+                                      DateTime.fromMillisecondsSinceEpoch(
+                                          (device.createTime ?? 0) * 1000)),
                                   device.online == true ? 'Online' : 'Offline',
-                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
-                                      (device.updateTime ?? 0) * 1000)),
+                                  formatDateTime(
+                                      DateTime.fromMillisecondsSinceEpoch(
+                                          (device.updateTime ?? 0) * 1000)),
+                                  'Settings',
                                 ];
                               }).toList(),
                               onSelectionChanged: (selectedRows) {
@@ -202,6 +223,10 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                   .map((device) => device.uuid!)
                                   .toList(),
                               isEmpty: devicesToShow.isEmpty,
+                              onSettingsPressed: (rowIndex) {
+                                final device = devicesToShow[rowIndex];
+                                showDeviceSettingsSidebar(context, device);
+                              },
                             ),
                           ),
                         )
@@ -213,4 +238,37 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
       },
     );
   }
+
+  void showDeviceSettingsSidebar(BuildContext context, AllDevicesModel device) {
+    showGeneralDialog(
+      context: context,
+      barrierDismissible: true,
+      barrierLabel: "Device Settings",
+      transitionDuration: const Duration(milliseconds: 300),
+      pageBuilder: (context, anim1, anim2) {
+        return Align(
+          alignment: Alignment.centerRight,
+          child: Material(
+            child: Container(
+              width: MediaQuery.of(context).size.width * 0.3,
+              color: ColorsManager.whiteColors,
+              child: DeviceSettingsPanel(
+                device: device,
+                onClose: () => Navigator.of(context).pop(),
+              ),
+            ),
+          ),
+        );
+      },
+      transitionBuilder: (context, anim1, anim2, child) {
+        return SlideTransition(
+          position: Tween<Offset>(
+            begin: const Offset(1, 0),
+            end: Offset.zero,
+          ).animate(anim1),
+          child: child,
+        );
+      },
+    );
+  }
 }

lib/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart

@@ -0,0 +1,165 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_state.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/services/devices_mang_api.dart';
+import 'package:syncrow_web/services/space_mana_api.dart';
+import 'package:syncrow_web/utils/snack_bar.dart';
+part 'setting_bloc_event.dart';
+
+class SettingDeviceBloc extends Bloc<DeviceSettingEvent, DeviceSettingsState> {
+  final String deviceId;
+  SettingDeviceBloc({
+    required this.deviceId,
+  }) : super(const DeviceSettingsInitial()) {
+    on<DeviceSettingInitialInfo>(_fetchDeviceInfo);
+    on<SettingBlocSaveName>(_saveName);
+    on<ChangeNameEvent>(_changeName);
+    on<SettingBlocDeleteDevice>(_deleteDevice);
+    on<SettingBlocFetchRooms>(_fetchRooms);
+    on<SettingBlocAssignRoom>(_onAssignDevice);
+  }
+  final TextEditingController nameController = TextEditingController();
+  List<SubSpaceModel> roomsList = [];
+  bool isEditingName = false;
+
+  bool _validateInputs() {
+    final nameError = _fullNameValidator(nameController.text);
+    if (nameError != null) {
+      CustomSnackBar.displaySnackBar(nameError);
+      return true;
+    }
+    return false;
+  }
+
+  String? _fullNameValidator(String? value) {
+    if (value == null) return 'name is required';
+    final withoutExtraSpaces = value.replaceAll(RegExp(r"\s+"), ' ').trim();
+    if (withoutExtraSpaces.length < 2 || withoutExtraSpaces.length > 30) {
+      return 'name must be between 2 and 30 characters long';
+    }
+    if (RegExp(r"/[^ a-zA-Z0-9-\']/").hasMatch(withoutExtraSpaces)) {
+      return 'Only alphanumeric characters, space, dash and single quote are allowed';
+    }
+    return null;
+  }
+
+  Future<void> _saveName(
+      SettingBlocSaveName event, Emitter<DeviceSettingsState> emit) async {
+    if (_validateInputs()) return;
+    try {
+      emit(DeviceSettingsLoading());
+      await DevicesManagementApi.putDeviceName(
+          deviceId: deviceId, deviceName: nameController.text);
+      add(DeviceSettingInitialInfo());
+      CustomSnackBar.displaySnackBar('Save Successfully');
+      emit(DeviceSettingsUpdate(deviceName: nameController.text));
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+    }
+  }
+
+  Future<void> _fetchDeviceInfo(
+      DeviceSettingInitialInfo event, Emitter<DeviceSettingsState> emit) async {
+    try {
+      emit(DeviceSettingsLoading());
+      var response = await DevicesManagementApi.getDeviceInfo(deviceId);
+      DeviceInfoModel deviceInfo = DeviceInfoModel.fromJson(response);
+      nameController.text = deviceInfo.name;
+      emit(DeviceSettingsUpdate(
+        deviceName: nameController.text,
+        deviceInfo: deviceInfo,
+        roomsList: roomsList,
+      ));
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+    }
+  }
+
+  bool editName = false;
+  final FocusNode focusNode = FocusNode();
+
+  void _changeName(ChangeNameEvent event, Emitter<DeviceSettingsState> emit) {
+    emit(DeviceSettingsInitial(
+      deviceName: nameController.text,
+      deviceId: deviceId,
+      isEditingName: event.value ?? false,
+      editingNameValue: event.value?.toString() ?? '',
+      deviceInfo: state.deviceInfo,
+    ));
+    editName = event.value!;
+    if (editName) {
+      Future.delayed(const Duration(milliseconds: 500), () {
+        focusNode.requestFocus();
+      });
+    } else {
+      add(const SettingBlocSaveName());
+      focusNode.unfocus();
+    }
+    emit(DeviceSettingsUpdate(
+      deviceName: nameController.text,
+      deviceInfo: state.deviceInfo,
+      roomsList: roomsList,
+    ));
+  }
+
+  void _deleteDevice(
+      SettingBlocDeleteDevice event, Emitter<DeviceSettingsState> emit) async {
+    try {
+      emit(DeviceSettingsLoading());
+      await DevicesManagementApi.resetDevice(devicesUuid: deviceId);
+      CustomSnackBar.displaySnackBar('Reset Successfully');
+      emit(DeviceSettingsUpdate(
+        deviceName: nameController.text,
+        deviceInfo: state.deviceInfo,
+        roomsList: roomsList,
+      ));
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+      return;
+    }
+  }
+
+  void _onAssignDevice(
+      SettingBlocAssignRoom event, Emitter<DeviceSettingsState> emit) async {
+    try {
+      emit(DeviceSettingsLoading());
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      await CommunitySpaceManagementApi.assignDeviceToRoom(
+          communityId: event.communityUuid,
+          spaceId: event.spaceUuid,
+          subSpaceId: event.subSpaceUuid,
+          deviceId: deviceId,
+          projectId: projectUuid);
+      add(DeviceSettingInitialInfo());
+      CustomSnackBar.displaySnackBar('Save Successfully');
+      emit(DeviceSettingsSaveSelectionSuccess());
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+      return;
+    }
+  }
+
+  void _fetchRooms(
+      SettingBlocFetchRooms event, Emitter<DeviceSettingsState> emit) async {
+    try {
+      emit(DeviceSettingsLoading());
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      roomsList = await CommunitySpaceManagementApi.getSubSpaceBySpaceId(
+          communityId: event.communityUuid,
+          spaceId: event.spaceUuid,
+          projectId: projectUuid);
+      emit(DeviceSettingsUpdate(
+        deviceName: nameController.text,
+        deviceInfo: state.deviceInfo,
+        roomsList: roomsList,
+      ));
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+      return;
+    }
+  }
+}

lib/pages/device_managment/device_setting/bloc/setting_bloc_event.dart

@@ -0,0 +1,69 @@
+part of 'setting_bloc_bloc.dart';
+
+abstract class DeviceSettingEvent extends Equatable {
+  const DeviceSettingEvent();
+  @override
+  List<Object?> get props => [];
+}
+
+class SettingBlocSaveDeviceName extends DeviceSettingEvent {
+  final String deviceName;
+  final String deviceId;
+
+  const SettingBlocSaveDeviceName(
+      {required this.deviceName, required this.deviceId});
+
+  @override
+  List<Object?> get props => [deviceName, deviceId];
+}
+
+class SettingBlocStartEditingName extends DeviceSettingEvent {}
+
+class SettingBlocCancelEditingName extends DeviceSettingEvent {}
+
+class SettingBlocChangeEditingNameValue extends DeviceSettingEvent {
+  final String value;
+  const SettingBlocChangeEditingNameValue(this.value);
+
+  @override
+  List<Object?> get props => [value];
+}
+
+class SettingBlocFetchRooms extends DeviceSettingEvent {
+  final String communityUuid;
+  final String spaceUuid;
+
+  const SettingBlocFetchRooms(
+      {required this.communityUuid, required this.spaceUuid});
+
+  @override
+  List<Object?> get props => [communityUuid, spaceUuid];
+}
+
+class SettingBlocSaveName extends DeviceSettingEvent {
+  const SettingBlocSaveName();
+}
+
+class DeviceSettingInitialInfo extends DeviceSettingEvent {}
+
+class ChangeNameEvent extends DeviceSettingEvent {
+  final bool? value;
+  const ChangeNameEvent({this.value});
+}
+
+class SettingBlocDeleteDevice extends DeviceSettingEvent {}
+
+class SettingBlocAssignRoom extends DeviceSettingEvent {
+  final String communityUuid;
+  final String spaceUuid;
+  final String subSpaceUuid;
+
+  const SettingBlocAssignRoom({
+    required this.communityUuid,
+    required this.spaceUuid,
+    required this.subSpaceUuid,
+  });
+
+  @override
+  List<Object?> get props => [spaceUuid, communityUuid, subSpaceUuid];
+}

lib/pages/device_managment/device_setting/bloc/setting_bloc_state.dart

@@ -0,0 +1,81 @@
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+
+abstract class DeviceSettingsState extends Equatable {
+  const DeviceSettingsState({this.deviceInfo});
+
+  final DeviceInfoModel? deviceInfo;
+
+  @override
+  List<Object?> get props => [deviceInfo];
+}
+
+class DeviceSettingsInitial extends DeviceSettingsState {
+  final String deviceName;
+  final String deviceId;
+  final bool isEditingName;
+  final String editingNameValue;
+
+  const DeviceSettingsInitial({
+    this.deviceName = '',
+    this.deviceId = '',
+    this.isEditingName = false,
+    this.editingNameValue = '',
+    super.deviceInfo,
+  });
+
+  DeviceSettingsInitial copyWith({
+    String? deviceName,
+    String? deviceId,
+    bool? isEditingName,
+    String? editingNameValue,
+  }) =>
+      DeviceSettingsInitial(
+        deviceName: deviceName ?? this.deviceName,
+        deviceId: deviceId ?? this.deviceId,
+        isEditingName: isEditingName ?? this.isEditingName,
+        editingNameValue: editingNameValue ?? this.editingNameValue,
+      );
+
+  @override
+  List<Object?> get props =>
+      [deviceName, deviceId, isEditingName, editingNameValue];
+}
+
+class DeviceSettingsLoading extends DeviceSettingsState {}
+
+class DeviceSettingsUpdate extends DeviceSettingsState {
+  final String? deviceName;
+  final List<SubSpaceModel> roomsList;
+
+  const DeviceSettingsUpdate({
+    this.deviceName,
+    super.deviceInfo,
+    this.roomsList = const [],
+  });
+
+  @override
+  List<Object?> get props => [deviceName, deviceInfo, roomsList];
+}
+
+class DeviceSettingsError extends DeviceSettingsState {
+  final String message;
+
+  const DeviceSettingsError({required this.message});
+  @override
+  List<Object?> get props => [message];
+}
+
+class DeviceSettingsFetchRooms extends DeviceSettingsState {
+  final List<SubSpaceModel> roomsList;
+
+  const DeviceSettingsFetchRooms({required this.roomsList});
+
+  @override
+  List<Object?> get props => [roomsList];
+}
+
+class DeviceSettingsSaveSelectionSuccess extends DeviceSettingsState {}
+
+class ChangeNameState extends DeviceSettingsState {}

lib/pages/device_managment/device_setting/device_icon_type_helper.dart

@@ -0,0 +1,28 @@
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class DeviceIconTypeHelper {
+  static const Map<String, String> _iconMap = {
+    'AC': Assets.ac,
+    'GW': Assets.gateway,
+    'CPS': Assets.sensors,
+    'DL': Assets.doorLock,
+    'WPS': Assets.sensors,
+    '3G': Assets.gangSwitch,
+    '2G': Assets.twoGang,
+    '1G': Assets.oneGang,
+    'CUR': Assets.curtain,
+    'WH': Assets.waterHeater,
+    'DS': Assets.doorSensor,
+    '1GT': Assets.oneTouchSwitch,
+    '2GT': Assets.twoTouchSwitch,
+    '3GT': Assets.threeTouchSwitch,
+    'GD': Assets.garageDoor,
+    'WL': Assets.waterLeakNormal,
+    'NCPS': Assets.sensors,
+  };
+
+  static String getDeviceIconByTypeCode(String? typeCode) {
+    if (typeCode == null) return Assets.logoHorizontal;
+    return _iconMap[typeCode] ?? Assets.logoHorizontal;
+  }
+}

lib/pages/device_managment/device_setting/device_management_content.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.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/web_layout/default_container.dart';
+
+class DeviceManagementContent extends StatelessWidget {
+  const DeviceManagementContent({
+    super.key,
+    required this.device,
+    required this.subSpaces,
+    required this.deviceInfo,
+  });
+
+  final AllDevicesModel device;
+  final List<SubSpaceModel> subSpaces;
+  final DeviceInfoModel deviceInfo;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget infoRow(
+        {required String label,
+        required String value,
+        Widget? trailing,
+        required Color? valueColor}) {
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              label,
+              style: context.theme.textTheme.bodyMedium!.copyWith(
+                fontSize: 14,
+                color: ColorsManager.grayColor,
+              ),
+            ),
+            const SizedBox(width: 15),
+            Expanded(
+              child: Text(
+                value,
+                textAlign: TextAlign.end,
+                style: context.theme.textTheme.bodyMedium!
+                    .copyWith(fontSize: 14, color: valueColor),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+            const SizedBox(width: 12),
+            trailing ?? const SizedBox.shrink(),
+          ],
+        ),
+      );
+    }
+
+    return DefaultContainer(
+      padding: EdgeInsets.zero,
+      child: Column(
+        children: [
+          const SizedBox(height: 5),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: InkWell(
+              onTap: () {
+                showSubSpaceDialog(
+                  context,
+                  communityUuid: device.community!.uuid!,
+                  spaceUuid: device.spaces!.first.uuid!,
+                  subSpaces: subSpaces,
+                  selected: device.subspace!.uuid,
+                );
+              },
+              child: infoRow(
+                  label: 'Sub-Space:',
+                  value: deviceInfo.subspace.subspaceName,
+                  valueColor: ColorsManager.blackColor,
+                  trailing: SvgPicture.asset(
+                    Assets.arrowDown,
+                    width: 10,
+                    height: 10,
+                    color: ColorsManager.greyColor,
+                  )),
+            ),
+          ),
+          const Divider(color: ColorsManager.dividerColor),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: infoRow(
+              label: 'Virtual Address:',
+              value: deviceInfo.productUuid,
+              valueColor: ColorsManager.blackColor,
+              trailing: InkWell(
+                onTap: () {
+                  Clipboard.setData(
+                    ClipboardData(text: device.productUuid ?? ''),
+                  );
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    const SnackBar(
+                      content: Text('Virtual Address copied to clipboard'),
+                    ),
+                  );
+                },
+                child: const Icon(
+                  Icons.copy,
+                  size: 15,
+                  color: ColorsManager.greyColor,
+                ),
+              ),
+            ),
+          ),
+          const Divider(color: ColorsManager.dividerColor),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: infoRow(
+              label: 'MAC Address:',
+              valueColor: ColorsManager.blackColor,
+              value: deviceInfo.macAddress,
+            ),
+          ),
+          const SizedBox(height: 5),
+        ],
+      ),
+    );
+  }
+}

lib/pages/device_managment/device_setting/device_settings_panel.dart

@@ -0,0 +1,218 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/device_icon_type_helper.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/device_management_content.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/remove_device_widget.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_state.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_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/web_layout/default_container.dart';
+
+class DeviceSettingsPanel extends StatelessWidget {
+  final VoidCallback? onClose;
+  final AllDevicesModel device;
+  const DeviceSettingsPanel({super.key, this.onClose, required this.device});
+
+  @override
+  Widget build(BuildContext context) {
+    final sectionTitle = context.theme.textTheme.titleMedium!.copyWith(
+      fontWeight: FontWeight.bold,
+      color: ColorsManager.grayColor,
+    );
+    return BlocProvider(
+      create: (context) => SettingDeviceBloc(
+        deviceId: device.uuid ?? '',
+      )
+        ..add(DeviceSettingInitialInfo())
+        ..add(SettingBlocFetchRooms(
+          communityUuid: device.community!.uuid!,
+          spaceUuid: device.spaces!.first.uuid!,
+        )),
+      child: Builder(
+        builder: (context) {
+          return BlocBuilder<SettingDeviceBloc, DeviceSettingsState>(
+            builder: (context, state) {
+              final _bloc = context.read<SettingDeviceBloc>();
+              final iconPath = DeviceIconTypeHelper.getDeviceIconByTypeCode(
+                  device.productType);
+              final deviceInfo = state is DeviceSettingsUpdate
+                  ? state.deviceInfo ?? DeviceInfoModel.empty()
+                  : DeviceInfoModel.empty();
+              final subSpaces =
+                  state is DeviceSettingsUpdate ? state.roomsList ?? [] : [];
+              return Stack(
+                children: [
+                  Container(
+                    width: MediaQuery.of(context).size.width * 0.3,
+                    color: ColorsManager.grey25,
+                    padding: const EdgeInsets.all(10),
+                    child: ListView(
+                      children: [
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            IconButton(
+                              icon: SvgPicture.asset(Assets.closeSettingsIcon),
+                              onPressed:
+                                  onClose ?? () => Navigator.of(context).pop(),
+                            ),
+                          ],
+                        ),
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Text(
+                              'Device Settings',
+                              style: context.theme.textTheme.titleLarge!
+                                  .copyWith(
+                                      fontWeight: FontWeight.w700,
+                                      color: ColorsManager.vividBlue
+                                          .withOpacity(0.7),
+                                      fontSize: 24),
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 24),
+                        DefaultContainer(
+                          borderRadius: BorderRadius.circular(15),
+                          child: Row(
+                            children: [
+                              Padding(
+                                padding: const EdgeInsets.only(left: 15),
+                                child: CircleAvatar(
+                                  radius: 38,
+                                  backgroundColor:
+                                      ColorsManager.grayBorder.withOpacity(0.5),
+                                  child: CircleAvatar(
+                                    backgroundColor: ColorsManager.whiteColors,
+                                    radius: 36,
+                                    child: SvgPicture.asset(
+                                      iconPath,
+                                      fit: BoxFit.cover,
+                                    ),
+                                  ),
+                                ),
+                              ),
+                              const SizedBox(width: 25),
+                              Expanded(
+                                child: Column(
+                                  mainAxisAlignment: MainAxisAlignment.start,
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    const SizedBox(height: 15),
+                                    Text(
+                                      'Device Name:',
+                                      style: context.textTheme.bodyMedium!
+                                          .copyWith(
+                                        color: ColorsManager.grayColor,
+                                      ),
+                                    ),
+                                    SizedBox(
+                                      height: 35,
+                                      child: Row(
+                                        children: [
+                                          SizedBox(
+                                            height: 50,
+                                            width: 190,
+                                            child: TextFormField(
+                                              scrollPadding: EdgeInsets.zero,
+                                              maxLength: 30,
+                                              style: const TextStyle(
+                                                color: ColorsManager.blackColor,
+                                                fontSize: 16,
+                                              ),
+                                              textAlign: TextAlign.start,
+                                              focusNode: _bloc.focusNode,
+                                              controller: _bloc.nameController,
+                                              enabled: _bloc.editName,
+                                              onFieldSubmitted: (value) {
+                                                _bloc.add(const ChangeNameEvent(
+                                                    value: false));
+                                              },
+                                              decoration: InputDecoration(
+                                                isDense: true,
+                                                contentPadding: EdgeInsets.zero,
+                                                border: InputBorder.none,
+                                                fillColor: Colors.white10,
+                                                counterText: '',
+                                              ),
+                                            ),
+                                          ),
+                                          Column(
+                                            children: [
+                                              SizedBox(
+                                                width: 15,
+                                                height: 25,
+                                                child: Visibility(
+                                                  visible:
+                                                      _bloc.editName != true,
+                                                  replacement: const SizedBox(),
+                                                  child: InkWell(
+                                                    onTap: () {
+                                                      _bloc.add(
+                                                          const ChangeNameEvent(
+                                                              value: true));
+                                                    },
+                                                    child: SvgPicture.asset(
+                                                      Assets
+                                                          .editNameIconSettings,
+                                                      color: ColorsManager
+                                                          .lightGrayBorderColor,
+                                                      height: 15,
+                                                      width: 15,
+                                                    ),
+                                                  ),
+                                                ),
+                                              ),
+                                            ],
+                                          ),
+                                        ],
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                        const SizedBox(height: 32),
+                        Padding(
+                          padding: const EdgeInsets.only(left: 10),
+                          child: Text('Device Management', style: sectionTitle),
+                        ),
+                        DeviceManagementContent(
+                          device: device,
+                          subSpaces: subSpaces.cast<SubSpaceModel>(),
+                          deviceInfo: deviceInfo,
+                        ),
+                        const SizedBox(height: 32),
+                        RemoveDeviceWidget(bloc: _bloc),
+                      ],
+                    ),
+                  ),
+                  if (state is DeviceSettingsLoading)
+                    Positioned.fill(
+                      child: Container(
+                        color: Colors.black.withOpacity(0.1),
+                        child: const Center(
+                          child: CircularProgressIndicator(
+                            color: ColorsManager.primaryColor,
+                          ),
+                        ),
+                      ),
+                    ),
+                ],
+              );
+            },
+          );
+        },
+      ),
+    );
+  }
+}

lib/pages/device_managment/device_setting/remove_device_widget.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/web_layout/default_container.dart';
+
+class RemoveDeviceWidget extends StatelessWidget {
+  const RemoveDeviceWidget({
+    super.key,
+    required SettingDeviceBloc bloc,
+  }) : _bloc = bloc;
+
+  final SettingDeviceBloc _bloc;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: double.infinity,
+      child: InkWell(
+        onTap: () {
+          showDialog(
+            context: context,
+            builder: (context) {
+              return AlertDialog(
+                title: Text(
+                  'Remove Device',
+                  style: context.textTheme.bodyMedium!.copyWith(
+                    fontWeight: FontWeight.w700,
+                    color: ColorsManager.red,
+                  ),
+                ),
+                content: Text(
+                  'Are you sure you want to remove this device?',
+                  style: context.textTheme.bodyMedium!.copyWith(
+                    color: ColorsManager.grayColor,
+                  ),
+                ),
+                actions: [
+                  TextButton(
+                    onPressed: () {
+                      Navigator.of(context).pop();
+                    },
+                    child: Text(
+                      'Cancel',
+                      style: context.textTheme.bodyMedium!.copyWith(
+                        color: ColorsManager.grayColor,
+                      ),
+                    ),
+                  ),
+                  TextButton(
+                    onPressed: () {
+                      _bloc.add(SettingBlocDeleteDevice());
+                      Navigator.of(context).pop();
+                    },
+                    child: Text(
+                      'Remove',
+                      style: context.textTheme.bodyMedium!.copyWith(
+                        color: ColorsManager.red,
+                      ),
+                    ),
+                  ),
+                ],
+              );
+            },
+          );
+        },
+        child: DefaultContainer(
+          padding: const EdgeInsets.all(25),
+          child: Center(
+            child: Text(
+              'Remove Device',
+              style: context.textTheme.bodyMedium!.copyWith(
+                  fontSize: 14,
+                  color: ColorsManager.red,
+                  fontWeight: FontWeight.w700),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/device_managment/device_setting/settings_model/device_info_model.dart

@@ -0,0 +1,183 @@
+class DeviceInfoModel {
+  final int activeTime;
+  final String category;
+  final String categoryName;
+  final int createTime;
+  final String gatewayId;
+  final String icon;
+  final String ip;
+  final String lat;
+  final String localKey;
+  final String lon;
+  final String model;
+  final String name;
+  final String nodeId;
+  final bool online;
+  final String ownerId;
+  final String productName;
+  final bool sub;
+  final String timeZone;
+  final int updateTime;
+  final String uuid;
+  final String productUuid;
+  final String productType;
+  final String permissionType;
+  final String macAddress;
+  final Subspace subspace;
+
+  DeviceInfoModel({
+    required this.activeTime,
+    required this.category,
+    required this.categoryName,
+    required this.createTime,
+    required this.gatewayId,
+    required this.icon,
+    required this.ip,
+    required this.lat,
+    required this.localKey,
+    required this.lon,
+    required this.model,
+    required this.name,
+    required this.nodeId,
+    required this.online,
+    required this.ownerId,
+    required this.productName,
+    required this.sub,
+    required this.timeZone,
+    required this.updateTime,
+    required this.uuid,
+    required this.productUuid,
+    required this.productType,
+    required this.permissionType,
+    required this.macAddress,
+    required this.subspace,
+  });
+
+  factory DeviceInfoModel.fromJson(Map<String, dynamic> json) {
+    return DeviceInfoModel(
+      activeTime: json['activeTime'] as int? ?? 0,
+      category: json['category'] ?? '',
+      categoryName: json['categoryName'] as String? ?? '',
+      createTime: json['createTime'] as int? ?? 0,
+      gatewayId: json['gatewayId'] as String? ?? '',
+      icon: json['icon'] as String? ?? '',
+      ip: json['ip'] as String? ?? '',
+      lat: json['lat'] as String? ?? '',
+      localKey: json['localKey'] as String? ?? '',
+      lon: json['lon'] as String? ?? '',
+      model: json['model'] as String? ?? '',
+      name: json['name'] as String? ?? '',
+      nodeId: json['nodeId'] as String? ?? '',
+      online: json['online'] as bool? ?? false,
+      ownerId: json['ownerId'] as String? ?? '',
+      productName: json['productName'] as String? ?? '',
+      sub: json['sub'] as bool? ?? false,
+      timeZone: json['timeZone'] as String? ?? '',
+      updateTime: json['updateTime'] as int? ?? 0,
+      uuid: json['uuid'] as String? ?? '',
+      productUuid: json['productUuid'] as String? ?? '',
+      productType: json['productType'] as String? ?? '',
+      permissionType: json['permissionType'] as String? ?? '',
+      macAddress: json['macAddress'] as String? ?? '',
+      subspace:
+          Subspace.fromJson(json['subspace'] as Map<String, dynamic>? ?? {}),
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'activeTime': activeTime,
+      'category': category,
+      'categoryName': categoryName,
+      'createTime': createTime,
+      'gatewayId': gatewayId,
+      'icon': icon,
+      'ip': ip,
+      'lat': lat,
+      'localKey': localKey,
+      'lon': lon,
+      'model': model,
+      'name': name,
+      'nodeId': nodeId,
+      'online': online,
+      'ownerId': ownerId,
+      'productName': productName,
+      'sub': sub,
+      'timeZone': timeZone,
+      'updateTime': updateTime,
+      'uuid': uuid,
+      'productUuid': productUuid,
+      'productType': productType,
+      'permissionType': permissionType,
+      'macAddress': macAddress,
+      'subspace': subspace.toJson(),
+    };
+  }
+
+  static DeviceInfoModel empty() {
+    return DeviceInfoModel(
+      activeTime: 0,
+      category: '',
+      categoryName: '',
+      createTime: 0,
+      gatewayId: '',
+      icon: '',
+      ip: '',
+      lat: '',
+      localKey: '',
+      lon: '',
+      model: '',
+      name: '',
+      nodeId: '',
+      online: false,
+      ownerId: '',
+      productName: '',
+      sub: false,
+      timeZone: '',
+      updateTime: 0,
+      uuid: '',
+      productUuid: '',
+      productType: '',
+      permissionType: '',
+      macAddress: '',
+      subspace: Subspace(
+        uuid: '',
+        createdAt: '',
+        updatedAt: '',
+        subspaceName: '',
+      ),
+    );
+  }
+}
+
+class Subspace {
+  final String uuid;
+  final String createdAt;
+  final String updatedAt;
+  final String subspaceName;
+
+  Subspace({
+    required this.uuid,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.subspaceName,
+  });
+
+  factory Subspace.fromJson(Map<String, dynamic> json) {
+    return Subspace(
+      uuid: json['uuid'] as String? ?? '',
+      createdAt: json['createdAt'] as String? ?? '',
+      updatedAt: json['updatedAt'] as String? ?? '',
+      subspaceName: json['subspaceName'] as String? ?? '',
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'uuid': uuid,
+      'createdAt': createdAt,
+      'updatedAt': updatedAt,
+      'subspaceName': subspaceName,
+    };
+  }
+}

lib/pages/device_managment/device_setting/settings_model/sub_space_model.dart

@@ -0,0 +1,35 @@
+import 'package:syncrow_web/pages/visitor_password/model/device_model.dart';
+
+class SubSpaceModel {
+  final String? id;
+  final String? name;
+  List<DeviceModel>? devices;
+
+  SubSpaceModel({
+    required this.id,
+    required this.name,
+    required this.devices,
+  });
+
+  Map<String, dynamic> toJson() {
+    return {
+      'id': id,
+      'name': name,
+      'devices': devices?.map((device) => device.toJson()).toList(),
+    };
+  }
+
+  factory SubSpaceModel.fromJson(Map<String, dynamic> json) {
+    List<DeviceModel> devices = [];
+    if (json['devices'] != null) {
+      for (var device in json['devices']) {
+        devices.add(DeviceModel.fromJson(device));
+      }
+    }
+    return SubSpaceModel(
+      id: json['uuid'] as String? ?? '',
+      name: json['subspaceName'] as String? ?? '',
+      devices: devices.isNotEmpty ? devices : null as List<DeviceModel>?,
+    );
+  }
+}

lib/pages/device_managment/device_setting/sub_space_dialog.dart

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/subspace_dialog_buttons.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubSpaceDialog extends StatefulWidget {
+  final List<SubSpaceModel> subSpaces;
+  final String? selected;
+  final void Function(SubSpaceModel?) onConfirmed;
+
+  const SubSpaceDialog({
+    Key? key,
+    required this.subSpaces,
+    this.selected,
+    required this.onConfirmed,
+  }) : super(key: key);
+
+  @override
+  State<SubSpaceDialog> createState() => _SubSpaceDialogState();
+}
+
+class _SubSpaceDialogState extends State<SubSpaceDialog> {
+  String? _selectedId;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedId = widget.selected;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: ColorsManager.whiteColors,
+      insetPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 60),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(28),
+      ),
+      child: Container(
+        width: MediaQuery.of(context).size.width * 0.35,
+        padding: const EdgeInsets.fromLTRB(0, 24, 0, 0),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              'Sub-Space',
+              style: context.textTheme.bodyMedium?.copyWith(
+                  fontWeight: FontWeight.w700,
+                  color: ColorsManager.blueColor,
+                  fontSize: 20),
+            ),
+            const Divider(),
+            const SizedBox(height: 10),
+            ...widget.subSpaces.map((space) {
+              return RadioListTile<String>(
+                value: space.id!,
+                groupValue: _selectedId,
+                onChanged: (value) {
+                  setState(() {
+                    _selectedId = value;
+                  });
+                },
+                activeColor: Color(0xFF2962FF),
+                title: Text(
+                  space.name ?? 'Unnamed Sub-Space',
+                  style: context.textTheme.bodyMedium?.copyWith(
+                    fontSize: 15,
+                    color: ColorsManager.grayColor,
+                    fontWeight: FontWeight.w400,
+                  ),
+                ),
+                controlAffinity: ListTileControlAffinity.trailing,
+                contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+              );
+            }).toList(),
+            const SizedBox(height: 12),
+            const Divider(height: 1, thickness: 1),
+            SubSpaceDialogButtons(selectedId: _selectedId, widget: widget),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+void showSubSpaceDialog(
+  BuildContext context, {
+  required List<SubSpaceModel> subSpaces,
+  String? selected,
+  required String communityUuid,
+  required String spaceUuid,
+}) {
+  showDialog(
+    context: context,
+    barrierDismissible: true,
+    builder: (ctx) => SubSpaceDialog(
+      subSpaces: subSpaces,
+      selected: selected,
+      onConfirmed: (selectedModel) {
+        if (selectedModel != null) {
+          context.read<SettingDeviceBloc>().add(
+                SettingBlocAssignRoom(
+                  communityUuid: communityUuid,
+                  spaceUuid: spaceUuid,
+                  subSpaceUuid: selectedModel.id ?? '',
+                ),
+              );
+        }
+      },
+    ),
+  );
+}

lib/pages/device_managment/device_setting/subspace_dialog_buttons.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubSpaceDialogButtons extends StatelessWidget {
+  const SubSpaceDialogButtons({
+    super.key,
+    required String? selectedId,
+    required this.widget,
+  }) : _selectedId = selectedId;
+
+  final String? _selectedId;
+  final SubSpaceDialog widget;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 50,
+      child: Row(
+        children: [
+          Expanded(
+            child: Container(
+              decoration: const BoxDecoration(
+                border: Border(
+                  right: BorderSide(
+                    color: ColorsManager.dividerColor,
+                    width: 0.5,
+                  ),
+                ),
+              ),
+              child: TextButton(
+                onPressed: () {
+                  Navigator.of(context).pop();
+                },
+                child: Text(
+                  'Cancel',
+                  style: context.textTheme.bodyMedium?.copyWith(
+                    color: ColorsManager.textGray,
+                    fontSize: 18,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Expanded(
+            child: Container(
+              decoration: const BoxDecoration(
+                border: Border(
+                  left: BorderSide(
+                    color: ColorsManager.dividerColor,
+                    width: 0.5,
+                  ),
+                ),
+              ),
+              child: TextButton(
+                onPressed: _selectedId == null
+                    ? null
+                    : () {
+                        final selectedModel = widget.subSpaces.firstWhere(
+                            (space) => space.id == _selectedId,
+                            orElse: () =>
+                                SubSpaceModel(id: null, name: '', devices: []));
+                        widget.onConfirmed(selectedModel);
+                        Navigator.of(context).pop();
+                      },
+                child: Text(
+                  'Confirm',
+                  style: context.textTheme.bodyMedium?.copyWith(
+                    color: ColorsManager.secondaryColor,
+                    fontSize: 14,
+                    fontWeight: FontWeight.w400,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+void showSubSpaceDialog(
+  BuildContext context, {
+  required List<SubSpaceModel> subSpaces,
+  String? selected,
+  required String communityUuid,
+  required String spaceUuid,
+}) {
+  showDialog(
+    context: context,
+    barrierDismissible: true,
+    builder: (ctx) => SubSpaceDialog(
+      subSpaces: subSpaces,
+      selected: selected,
+      onConfirmed: (selectedModel) {
+        if (selectedModel != null) {
+          context.read<SettingDeviceBloc>().add(
+                SettingBlocAssignRoom(
+                  communityUuid: communityUuid,
+                  spaceUuid: spaceUuid,
+                  subSpaceUuid: selectedModel.id ?? '',
+                ),
+              );
+        }
+      },
+    ),
+  );
+}

lib/pages/routines/bloc/routine_bloc/routine_bloc.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:bloc/bloc.dart';
+import 'package:dio/dio.dart';
 import 'package:equatable/equatable.dart';
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
@@ -15,6 +16,7 @@ import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/models/routine_details_model.dart';
 import 'package:syncrow_web/pages/routines/models/routine_model.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/devices_mang_api.dart';
 import 'package:syncrow_web/services/routines_api.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
@@ -64,7 +66,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     TriggerSwitchTabsEvent event,
     Emitter<RoutineState> emit,
   ) {
-    emit(state.copyWith(routineTab: event.isRoutineTab, createRoutineView: false));
+    emit(state.copyWith(
+        routineTab: event.isRoutineTab, createRoutineView: false));
     add(ResetRoutineState());
     if (event.isRoutineTab) {
       add(const LoadScenes());
@@ -90,8 +93,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     final updatedIfItems = List<Map<String, dynamic>>.from(state.ifItems);
 
     // Find the index of the item in teh current itemsList
-    int index =
-        updatedIfItems.indexWhere((map) => map['uniqueCustomId'] == event.item['uniqueCustomId']);
+    int index = updatedIfItems.indexWhere(
+        (map) => map['uniqueCustomId'] == event.item['uniqueCustomId']);
     // Replace the map if the index is valid
     if (index != -1) {
       updatedIfItems[index] = event.item;
@@ -100,18 +103,21 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
 
     if (event.isTabToRun) {
-      emit(state.copyWith(ifItems: updatedIfItems, isTabToRun: true, isAutomation: false));
+      emit(state.copyWith(
+          ifItems: updatedIfItems, isTabToRun: true, isAutomation: false));
     } else {
-      emit(state.copyWith(ifItems: updatedIfItems, isTabToRun: false, isAutomation: true));
+      emit(state.copyWith(
+          ifItems: updatedIfItems, isTabToRun: false, isAutomation: true));
     }
   }
 
-  void _onAddToThenContainer(AddToThenContainer event, Emitter<RoutineState> emit) {
+  void _onAddToThenContainer(
+      AddToThenContainer event, Emitter<RoutineState> emit) {
     final currentItems = List<Map<String, dynamic>>.from(state.thenItems);
 
     // Find the index of the item in teh current itemsList
-    int index =
-        currentItems.indexWhere((map) => map['uniqueCustomId'] == event.item['uniqueCustomId']);
+    int index = currentItems.indexWhere(
+        (map) => map['uniqueCustomId'] == event.item['uniqueCustomId']);
     // Replace the map if the index is valid
     if (index != -1) {
       currentItems[index] = event.item;
@@ -122,7 +128,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     emit(state.copyWith(thenItems: currentItems));
   }
 
-  void _onAddFunctionsToRoutine(AddFunctionToRoutine event, Emitter<RoutineState> emit) {
+  void _onAddFunctionsToRoutine(
+      AddFunctionToRoutine event, Emitter<RoutineState> emit) {
     try {
       if (event.functions.isEmpty) return;
 
@@ -157,7 +164,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       //   currentSelectedFunctions[event.uniqueCustomId] = List.from(event.functions);
       // }
 
-      currentSelectedFunctions[event.uniqueCustomId] = List.from(event.functions);
+      currentSelectedFunctions[event.uniqueCustomId] =
+          List.from(event.functions);
 
       emit(state.copyWith(selectedFunctions: currentSelectedFunctions));
     } catch (e) {
@@ -165,24 +173,30 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  Future<void> _onLoadScenes(LoadScenes event, Emitter<RoutineState> emit) async {
+  Future<void> _onLoadScenes(
+      LoadScenes event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true, errorMessage: null));
     List<ScenesModel> scenes = [];
     try {
       BuildContext context = NavigationService.navigatorKey.currentContext!;
       var createRoutineBloc = context.read<CreateRoutineBloc>();
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
-      if (createRoutineBloc.selectedSpaceId == '' && createRoutineBloc.selectedCommunityId == '') {
+      if (createRoutineBloc.selectedSpaceId == '' &&
+          createRoutineBloc.selectedCommunityId == '') {
         var spaceBloc = context.read<SpaceTreeBloc>();
         for (var communityId in spaceBloc.state.selectedCommunities) {
-          List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+          List<String> spacesList =
+              spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
           for (var spaceId in spacesList) {
-            scenes.addAll(await SceneApi.getScenes(spaceId, communityId, projectUuid));
+            scenes.addAll(
+                await SceneApi.getScenes(spaceId, communityId, projectUuid));
           }
         }
       } else {
         scenes.addAll(await SceneApi.getScenes(
-            createRoutineBloc.selectedSpaceId, createRoutineBloc.selectedCommunityId, projectUuid));
+            createRoutineBloc.selectedSpaceId,
+            createRoutineBloc.selectedCommunityId,
+            projectUuid));
       }
 
       emit(state.copyWith(
@@ -199,7 +213,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  Future<void> _onLoadAutomation(LoadAutomation event, Emitter<RoutineState> emit) async {
+  Future<void> _onLoadAutomation(
+      LoadAutomation event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true, errorMessage: null));
     List<ScenesModel> automations = [];
     final projectId = await ProjectManager.getProjectUUID() ?? '';
@@ -207,17 +222,22 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     BuildContext context = NavigationService.navigatorKey.currentContext!;
     var createRoutineBloc = context.read<CreateRoutineBloc>();
     try {
-      if (createRoutineBloc.selectedSpaceId == '' && createRoutineBloc.selectedCommunityId == '') {
+      if (createRoutineBloc.selectedSpaceId == '' &&
+          createRoutineBloc.selectedCommunityId == '') {
         var spaceBloc = context.read<SpaceTreeBloc>();
         for (var communityId in spaceBloc.state.selectedCommunities) {
-          List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+          List<String> spacesList =
+              spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
           for (var spaceId in spacesList) {
-            automations.addAll(await SceneApi.getAutomation(spaceId, communityId, projectId));
+            automations.addAll(
+                await SceneApi.getAutomation(spaceId, communityId, projectId));
           }
         }
       } else {
         automations.addAll(await SceneApi.getAutomation(
-            createRoutineBloc.selectedSpaceId, createRoutineBloc.selectedCommunityId, projectId));
+            createRoutineBloc.selectedSpaceId,
+            createRoutineBloc.selectedCommunityId,
+            projectId));
       }
       emit(state.copyWith(
         automations: automations,
@@ -233,14 +253,16 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onSearchRoutines(SearchRoutines event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _onSearchRoutines(
+      SearchRoutines event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true, errorMessage: null));
     await Future.delayed(const Duration(seconds: 1));
     emit(state.copyWith(isLoading: false, errorMessage: null));
     emit(state.copyWith(searchText: event.query));
   }
 
-  FutureOr<void> _onAddSelectedIcon(AddSelectedIcon event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onAddSelectedIcon(
+      AddSelectedIcon event, Emitter<RoutineState> emit) {
     emit(state.copyWith(selectedIcon: event.icon));
   }
 
@@ -254,7 +276,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     return actions.last['deviceId'] == 'delay';
   }
 
-  Future<void> _onCreateScene(CreateSceneEvent event, Emitter<RoutineState> emit) async {
+  Future<void> _onCreateScene(
+      CreateSceneEvent event, Emitter<RoutineState> emit) async {
     try {
       // Check if first action is delay
       // if (_isFirstActionDelay(state.thenItems)) {
@@ -267,7 +290,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
 
       if (_isLastActionDelay(state.thenItems)) {
         emit(state.copyWith(
-          errorMessage: 'A delay condition cannot be the only or the last action',
+          errorMessage:
+              'A delay condition cannot be the only or the last action',
           isLoading: false,
         ));
         return;
@@ -335,15 +359,18 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           errorMessage: 'Something went wrong',
         ));
       }
-    } catch (e) {
+    } on APIException catch (e) {
+      final errorData = e.message;
+      String errorMessage = errorData;
       emit(state.copyWith(
         isLoading: false,
-        errorMessage: 'Something went wrong',
+        errorMessage: errorMessage,
       ));
     }
   }
 
-  Future<void> _onCreateAutomation(CreateAutomationEvent event, Emitter<RoutineState> emit) async {
+  Future<void> _onCreateAutomation(
+      CreateAutomationEvent event, Emitter<RoutineState> emit) async {
     try {
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
       if (state.routineName == null || state.routineName!.isEmpty) {
@@ -365,7 +392,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
 
       if (_isLastActionDelay(state.thenItems)) {
         emit(state.copyWith(
-          errorMessage: 'A delay condition cannot be the only or the last action',
+          errorMessage:
+              'A delay condition cannot be the only or the last action',
           isLoading: false,
         ));
         CustomSnackBar.redSnackBar('Cannot have delay as the last action');
@@ -456,7 +484,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         actions: actions,
       );
 
-      final result = await SceneApi.createAutomation(createAutomationModel, projectUuid);
+      final result =
+          await SceneApi.createAutomation(createAutomationModel, projectUuid);
       if (result['success']) {
         add(ResetRoutineState());
         add(const LoadAutomation());
@@ -468,26 +497,32 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         ));
         CustomSnackBar.redSnackBar('Something went wrong');
       }
-    } catch (e) {
+    } on APIException catch (e) {
+      final errorData = e.message;
+      String errorMessage = errorData;
       emit(state.copyWith(
         isLoading: false,
-        errorMessage: 'Something went wrong',
+        errorMessage: errorMessage,
       ));
-      CustomSnackBar.redSnackBar('Something went wrong');
+      CustomSnackBar.redSnackBar(errorMessage);
     }
   }
 
-  FutureOr<void> _onRemoveDragCard(RemoveDragCard event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onRemoveDragCard(
+      RemoveDragCard event, Emitter<RoutineState> emit) {
     if (event.isFromThen) {
       final thenItems = List<Map<String, dynamic>>.from(state.thenItems);
-      final selectedFunctions = Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
+      final selectedFunctions =
+          Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
 
       thenItems.removeAt(event.index);
       selectedFunctions.remove(event.key);
-      emit(state.copyWith(thenItems: thenItems, selectedFunctions: selectedFunctions));
+      emit(state.copyWith(
+          thenItems: thenItems, selectedFunctions: selectedFunctions));
     } else {
       final ifItems = List<Map<String, dynamic>>.from(state.ifItems);
-      final selectedFunctions = Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
+      final selectedFunctions =
+          Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
 
       ifItems.removeAt(event.index);
       selectedFunctions.remove(event.key);
@@ -498,7 +533,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
             isAutomation: false,
             isTabToRun: false));
       } else {
-        emit(state.copyWith(ifItems: ifItems, selectedFunctions: selectedFunctions));
+        emit(state.copyWith(
+            ifItems: ifItems, selectedFunctions: selectedFunctions));
       }
     }
   }
@@ -510,11 +546,13 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     ));
   }
 
-  FutureOr<void> _onEffectiveTimeEvent(EffectiveTimePeriodEvent event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onEffectiveTimeEvent(
+      EffectiveTimePeriodEvent event, Emitter<RoutineState> emit) {
     emit(state.copyWith(effectiveTime: event.effectiveTime));
   }
 
-  FutureOr<void> _onSetRoutineName(SetRoutineName event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onSetRoutineName(
+      SetRoutineName event, Emitter<RoutineState> emit) {
     emit(state.copyWith(
       routineName: event.name,
     ));
@@ -641,7 +679,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
   //   return (thenItems, ifItems, currentFunctions);
   // }
 
-  Future<void> _onGetSceneDetails(GetSceneDetails event, Emitter<RoutineState> emit) async {
+  Future<void> _onGetSceneDetails(
+      GetSceneDetails event, Emitter<RoutineState> emit) async {
     try {
       emit(state.copyWith(
         isLoading: true,
@@ -689,10 +728,12 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         // if (!deviceCards.containsKey(deviceId)) {
         deviceCards[deviceId] = {
           'entityId': action.entityId,
-          'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
-          'uniqueCustomId': action.type == 'automation' || action.actionExecutor == 'delay'
-              ? action.entityId
-              : const Uuid().v4(),
+          'deviceId':
+              action.actionExecutor == 'delay' ? 'delay' : action.entityId,
+          'uniqueCustomId':
+              action.type == 'automation' || action.actionExecutor == 'delay'
+                  ? action.entityId
+                  : const Uuid().v4(),
           'title': action.actionExecutor == 'delay'
               ? 'Delay'
               : action.type == 'automation'
@@ -732,7 +773,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
             ),
           );
           // emit(state.copyWith(automationActionExecutor: action.actionExecutor));
-        } else if (action.executorProperty != null && action.actionExecutor != 'delay') {
+        } else if (action.executorProperty != null &&
+            action.actionExecutor != 'delay') {
           final functions = matchingDevice?.functions ?? [];
           final functionCode = action.executorProperty?.functionCode;
           for (DeviceFunction function in functions) {
@@ -798,7 +840,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onResetRoutineState(ResetRoutineState event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onResetRoutineState(
+      ResetRoutineState event, Emitter<RoutineState> emit) {
     emit(state.copyWith(
         ifItems: [],
         thenItems: [],
@@ -822,7 +865,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         createRoutineView: false));
   }
 
-  FutureOr<void> _deleteScene(DeleteScene event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _deleteScene(
+      DeleteScene event, Emitter<RoutineState> emit) async {
     try {
       final projectId = await ProjectManager.getProjectUUID() ?? '';
 
@@ -831,7 +875,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       var spaceBloc = context.read<SpaceTreeBloc>();
       if (state.isTabToRun) {
         await SceneApi.deleteScene(
-            unitUuid: spaceBloc.state.selectedSpaces[0], sceneId: state.sceneId ?? '');
+            unitUuid: spaceBloc.state.selectedSpaces[0],
+            sceneId: state.sceneId ?? '');
       } else {
         await SceneApi.deleteAutomation(
             unitUuid: spaceBloc.state.selectedSpaces[0],
@@ -854,11 +899,14 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       add(const LoadAutomation());
       add(ResetRoutineState());
       emit(state.copyWith(isLoading: false, createRoutineView: false));
-    } catch (e) {
+    } on APIException catch (e) {
+      final errorData = e.message;
+      String errorMessage = errorData;
       emit(state.copyWith(
         isLoading: false,
-        errorMessage: 'Failed to delete scene',
+        errorMessage: errorMessage,
       ));
+      CustomSnackBar.redSnackBar(errorMessage);
     }
   }
 
@@ -876,7 +924,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
   //   }
   // }
 
-  FutureOr<void> _fetchDevices(FetchDevicesInRoutine event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _fetchDevices(
+      FetchDevicesInRoutine event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true));
     try {
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
@@ -885,17 +934,21 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       var createRoutineBloc = context.read<CreateRoutineBloc>();
       var spaceBloc = context.read<SpaceTreeBloc>();
 
-      if (createRoutineBloc.selectedSpaceId == '' && createRoutineBloc.selectedCommunityId == '') {
+      if (createRoutineBloc.selectedSpaceId == '' &&
+          createRoutineBloc.selectedCommunityId == '') {
         for (var communityId in spaceBloc.state.selectedCommunities) {
-          List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+          List<String> spacesList =
+              spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
           for (var spaceId in spacesList) {
-            devices.addAll(
-                await DevicesManagementApi().fetchDevices(communityId, spaceId, projectUuid));
+            devices.addAll(await DevicesManagementApi()
+                .fetchDevices(communityId, spaceId, projectUuid));
           }
         }
       } else {
         devices.addAll(await DevicesManagementApi().fetchDevices(
-            createRoutineBloc.selectedCommunityId, createRoutineBloc.selectedSpaceId, projectUuid));
+            createRoutineBloc.selectedCommunityId,
+            createRoutineBloc.selectedSpaceId,
+            projectUuid));
       }
 
       emit(state.copyWith(isLoading: false, devices: devices));
@@ -904,7 +957,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onUpdateScene(UpdateScene event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _onUpdateScene(
+      UpdateScene event, Emitter<RoutineState> emit) async {
     try {
       // Check if first action is delay
       // if (_isFirstActionDelay(state.thenItems)) {
@@ -918,7 +972,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
 
       if (_isLastActionDelay(state.thenItems)) {
         emit(state.copyWith(
-          errorMessage: 'A delay condition cannot be the only or the last action',
+          errorMessage:
+              'A delay condition cannot be the only or the last action',
           isLoading: false,
         ));
         return;
@@ -971,7 +1026,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         actions: actions,
       );
 
-      final result = await SceneApi.updateScene(createSceneModel, state.sceneId ?? '');
+      final result =
+          await SceneApi.updateScene(createSceneModel, state.sceneId ?? '');
       if (result['success']) {
         add(ResetRoutineState());
         add(const LoadScenes());
@@ -990,7 +1046,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onUpdateAutomation(UpdateAutomation event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _onUpdateAutomation(
+      UpdateAutomation event, Emitter<RoutineState> emit) async {
     try {
       if (state.routineName == null || state.routineName!.isEmpty) {
         emit(state.copyWith(
@@ -1114,10 +1171,11 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           errorMessage: result['message'],
         ));
       }
-    } catch (e) {
+    } on APIException catch (e) {
+      final errorData = e.message;
       emit(state.copyWith(
         isLoading: false,
-        errorMessage: 'Something went wrong',
+        errorMessage: errorData,
       ));
     }
   }
@@ -1214,7 +1272,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         // if (!deviceThenCards.containsKey(deviceId)) {
         deviceThenCards[deviceId] = {
           'entityId': action.entityId,
-          'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
+          'deviceId':
+              action.actionExecutor == 'delay' ? 'delay' : action.entityId,
           'uniqueCustomId': const Uuid().v4(),
           'title': action.actionExecutor == 'delay'
               ? 'Delay'
@@ -1249,7 +1308,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           updatedFunctions[uniqueCustomId] = [];
         }
 
-        if (action.executorProperty != null && action.actionExecutor != 'delay') {
+        if (action.executorProperty != null &&
+            action.actionExecutor != 'delay') {
           final functions = matchingDevice.functions;
           final functionCode = action.executorProperty!.functionCode;
           for (var function in functions) {
@@ -1291,10 +1351,14 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         }
       }
 
-      final ifItems = deviceIfCards.values.where((card) => card['type'] == 'condition').toList();
+      final ifItems = deviceIfCards.values
+          .where((card) => card['type'] == 'condition')
+          .toList();
       final thenItems = deviceThenCards.values
           .where((card) =>
-              card['type'] == 'action' || card['type'] == 'automation' || card['type'] == 'scene')
+              card['type'] == 'action' ||
+              card['type'] == 'automation' ||
+              card['type'] == 'scene')
           .toList();
 
       emit(state.copyWith(
@@ -1316,7 +1380,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  Future<void> _onSceneTrigger(SceneTrigger event, Emitter<RoutineState> emit) async {
+  Future<void> _onSceneTrigger(
+      SceneTrigger event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(loadingSceneId: event.sceneId));
 
     try {
@@ -1358,24 +1423,29 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
 
       if (success) {
         final updatedAutomations = await SceneApi.getAutomationByUnitId(
-            event.automationStatusUpdate.spaceUuid, event.communityId, projectId);
+            event.automationStatusUpdate.spaceUuid,
+            event.communityId,
+            projectId);
 
         // Remove from loading set safely
-        final updatedLoadingIds = {...state.loadingAutomationIds!}..remove(event.automationId);
+        final updatedLoadingIds = {...state.loadingAutomationIds!}
+          ..remove(event.automationId);
 
         emit(state.copyWith(
           automations: updatedAutomations,
           loadingAutomationIds: updatedLoadingIds,
         ));
       } else {
-        final updatedLoadingIds = {...state.loadingAutomationIds!}..remove(event.automationId);
+        final updatedLoadingIds = {...state.loadingAutomationIds!}
+          ..remove(event.automationId);
         emit(state.copyWith(
           loadingAutomationIds: updatedLoadingIds,
           errorMessage: 'Update failed',
         ));
       }
     } catch (e) {
-      final updatedLoadingIds = {...state.loadingAutomationIds!}..remove(event.automationId);
+      final updatedLoadingIds = {...state.loadingAutomationIds!}
+        ..remove(event.automationId);
       emit(state.copyWith(
         loadingAutomationIds: updatedLoadingIds,
         errorMessage: 'Update error: ${e.toString()}',

lib/pages/routines/helper/save_routine_helper.dart

@@ -109,12 +109,12 @@ class SaveRoutineHelper {
       spacing: 16,
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: [
-        DialogFooterButton(
-          text: 'Cancel',
+ DialogFooterButton(
+          text: 'Back',
           onTap: () => Navigator.pop(context),
         ),
         DialogFooterButton(
-          text: 'Confirm',
+          text: 'Save',
           onTap: () {
             if (state.isAutomation) {
               if (state.isUpdate ?? false) {

lib/pages/space_tree/bloc/space_tree_bloc.dart

@@ -24,6 +24,9 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
     on<PaginationEvent>(_fetchPaginationSpaces);
     on<DebouncedSearchEvent>(_onDebouncedSearch);
     on<SpaceTreeClearSelectionEvent>(_onSpaceTreeClearSelectionEvent);
+    on<AnalyticsClearAllSpaceTreeSelectionsEvent>(
+      _onAnalyticsClearAllSpaceTreeSelectionsEvent,
+    );
   }
   Timer _timer = Timer(const Duration(microseconds: 0), () {});
 
@@ -493,6 +496,20 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
     );
   }
 
+  void _onAnalyticsClearAllSpaceTreeSelectionsEvent(
+    AnalyticsClearAllSpaceTreeSelectionsEvent event,
+    Emitter<SpaceTreeState> emit,
+  ) async {
+    emit(
+      state.copyWith(
+        selectedCommunities: [],
+        selectedCommunityAndSpaces: {},
+        selectedSpaces: [],
+        soldCheck: [],
+      ),
+    );
+  }
+
   @override
   Future<void> close() async {
     _timer.cancel();

lib/pages/space_tree/bloc/space_tree_event.dart

@@ -112,3 +112,7 @@ class ClearCachedData extends SpaceTreeEvent {}
 class SpaceTreeClearSelectionEvent extends SpaceTreeEvent {
   const SpaceTreeClearSelectionEvent();
 }
+
+final class AnalyticsClearAllSpaceTreeSelectionsEvent extends SpaceTreeEvent {
+  const AnalyticsClearAllSpaceTreeSelectionsEvent();
+}

lib/pages/space_tree/view/space_tree_view.dart

@@ -48,7 +48,8 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
+    return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(
+        builder: (context, state) {
       final communities = state.searchQuery.isNotEmpty
           ? state.filteredCommunity
           : state.communityList;
@@ -132,104 +133,118 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
                     )
                   else
                     CustomSearchBar(
-                      onSearchChanged: (query) => context.read<SpaceTreeBloc>().add(
-                            SearchQueryEvent(query),
-                          ),
+                      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,
+                        : communities.isEmpty
+                            ? Center(
+                                child: Text(
+                                  'No communities found',
+                                  style: context.textTheme.bodyMedium?.copyWith(
+                                    color: ColorsManager.textGray,
+                                  ),
                                 ),
-                                onItemSelected: () {
-                                  widget.onSelect();
-                                  context.read<SpaceTreeBloc>().add(
-                                        OnCommunitySelected(
-                                          communities[index].uuid,
-                                          communities[index].spaces,
-                                        ),
-                                      );
-                                },
-                                children: communities[index].spaces.map(
-                                  (space) {
-                                    return CustomExpansionTileSpaceTree(
-                                      title: space.name,
-                                      isExpanded:
-                                          state.expandedSpaces.contains(space.uuid),
-                                      onItemSelected: () {
-                                        final isParentSelected = _isParentSelected(
-                                          state,
-                                          communities[index],
-                                          space,
+                              )
+                            : SidebarCommunitiesList(
+                                onScrollToEnd: () {
+                                  if (!state.paginationIsLoading) {
+                                    context.read<SpaceTreeBloc>().add(
+                                          PaginationEvent(
+                                            state.paginationModel,
+                                            state.communityList,
+                                          ),
                                         );
-                                        if (widget
-                                                .shouldDisableDeselectingChildrenOfSelectedParent &&
-                                            isParentSelected) {
-                                          return;
-                                        }
-                                        widget.onSelect();
+                                  }
+                                },
+                                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(
-                                              OnSpaceSelected(
-                                                communities[index],
-                                                space.uuid ?? '',
-                                                space.children,
+                                              OnCommunityExpanded(
+                                                communities[index].uuid,
                                               ),
+                                            ),
+                                    isExpanded:
+                                        state.expandedCommunities.contains(
+                                      communities[index].uuid,
+                                    ),
+                                    onItemSelected: () {
+                                      widget.onSelect();
+                                      context.read<SpaceTreeBloc>().add(
+                                            OnCommunitySelected(
+                                              communities[index].uuid,
+                                              communities[index].spaces,
+                                            ),
+                                          );
+                                    },
+                                    children: communities[index].spaces.map(
+                                      (space) {
+                                        return CustomExpansionTileSpaceTree(
+                                          title: space.name,
+                                          isExpanded: state.expandedSpaces
+                                              .contains(space.uuid),
+                                          onItemSelected: () {
+                                            final isParentSelected =
+                                                _isParentSelected(
+                                              state,
+                                              communities[index],
+                                              space,
                                             );
+                                            if (widget
+                                                    .shouldDisableDeselectingChildrenOfSelectedParent &&
+                                                isParentSelected) {
+                                              return;
+                                            }
+                                            widget.onSelect();
+                                            context.read<SpaceTreeBloc>().add(
+                                                  OnSpaceSelected(
+                                                    communities[index],
+                                                    space.uuid ?? '',
+                                                    space.children,
+                                                  ),
+                                                );
+                                          },
+                                          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],
+                                          ),
+                                        );
                                       },
-                                      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(),
-                              );
-                            },
-                          ),
+                                    ).toList(),
+                                  );
+                                },
+                              ),
                   ),
-                  if (state.paginationIsLoading) const CircularProgressIndicator(),
+                  if (state.paginationIsLoading)
+                    const CircularProgressIndicator(),
                 ],
               ),
       );

lib/services/api/api_exception.dart

@@ -0,0 +1,10 @@
+class APIException implements Exception {
+  final String message;
+
+  APIException(this.message);
+
+  @override
+  String toString() {
+    return message;
+  }
+}