Delete unused File

<!--
  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-1605](https://syncrow.atlassian.net/browse/SP-1605)

## Description

<!--- Describe your changes in detail -->
Disable Clicking on Active Tabs in Devices and Spaces Management Views
## Type of Change

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

- [ ] ✨ 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-1605]:
https://syncrow.atlassian.net/browse/SP-1605?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/common/tag_dialog_textfield_dropdown.dart

@@ -17,7 +17,8 @@ class TagDialogTextfieldDropdown extends StatefulWidget {
   }) : super(key: key);
 
   @override
-  _DialogTextfieldDropdownState createState() => _DialogTextfieldDropdownState();
+  _DialogTextfieldDropdownState createState() =>
+      _DialogTextfieldDropdownState();
 }
 
 class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
@@ -36,6 +37,12 @@ class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
 
     _focusNode.addListener(() {
       if (!_focusNode.hasFocus) {
+        // Call onSelected when focus is lost
+        final selectedTag = _filteredItems.firstWhere(
+          (tag) => tag.tag == _controller.text,
+          orElse: () => Tag(tag: _controller.text),
+        );
+        widget.onSelected(selectedTag);
         _closeDropdown();
       }
     });
@@ -43,7 +50,9 @@ class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
 
   void _filterItems() {
     setState(() {
-      _filteredItems = widget.items.where((tag) => tag.product?.uuid == widget.product).toList();
+      _filteredItems = widget.items;
+      // .where((tag) => tag.product?.uuid == widget.product)
+      // .toList();
     });
   }
 
@@ -112,7 +121,9 @@ class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
                                     style: Theme.of(context)
                                         .textTheme
                                         .bodyMedium
-                                        ?.copyWith(color: ColorsManager.textPrimaryColor)),
+                                        ?.copyWith(
+                                            color: ColorsManager
+                                                .textPrimaryColor)),
                                 onTap: () {
                                   _controller.text = tag.tag ?? '';
                                   widget.onSelected(tag);
@@ -156,13 +167,15 @@ class _DialogTextfieldDropdownState extends State<TagDialogTextfieldDropdown> {
                 controller: _controller,
                 focusNode: _focusNode,
                 onFieldSubmitted: (value) {
-                  final selectedTag = _filteredItems.firstWhere((tag) => tag.tag == value,
+                  final selectedTag = _filteredItems.firstWhere(
+                      (tag) => tag.tag == value,
                       orElse: () => Tag(tag: value));
                   widget.onSelected(selectedTag);
                   _closeDropdown();
                 },
                 onTapOutside: (event) {
-                  widget.onSelected(_filteredItems.firstWhere((tag) => tag.tag == _controller.text,
+                  widget.onSelected(_filteredItems.firstWhere(
+                      (tag) => tag.tag == _controller.text,
                       orElse: () => Tag(tag: _controller.text)));
                   _closeDropdown();
                 },

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,6 +20,8 @@ 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(
@@ -35,6 +39,8 @@ class AnalyticsDevice {
           ? 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,
     );
   }
 }

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/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/helpers/fetch_air_quality_data_helper.dart

@@ -1,12 +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/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 {
@@ -48,6 +50,8 @@ abstract final class FetchAirQualityDataHelper {
           const ClearAirQualityDistribution(),
         );
     context.read<RangeOfAqiBloc>().add(const ClearRangeOfAqiEvent());
+
+    context.read<DeviceLocationBloc>().add(const ClearDeviceLocationEvent());
   }
 
   static void loadAnalyticsDevices(
@@ -61,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,
+                      ),
+                    ),
+                  );
             },
           ),
         );

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_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/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/views/analytics_page.dart

@@ -1,6 +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';
@@ -18,6 +20,8 @@ import 'package:syncrow_web/pages/analytics/services/air_quality_distribution/fa
 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';
@@ -108,6 +112,18 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
             FakeAirQualityDistributionService(),
           ),
         ),
+        BlocProvider(
+          create: (context) => DeviceLocationBloc(
+            DeviceLocationDetailsServiceDecorator(
+              RemoteDeviceLocationService(_httpService),
+              Dio(
+                BaseOptions(
+                  baseUrl: 'https://nominatim.openstreetmap.org/',
+                ),
+              ),
+            ),
+          ),
+        ),
       ],
       child: const AnalyticsPageForm(),
     );

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/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_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_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/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/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/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) {
@@ -165,21 +168,20 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
             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

@@ -40,17 +40,18 @@ class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
                 style: TextButton.styleFrom(
                   backgroundColor: null,
                 ),
-                onPressed: () {
-                  BlocProvider.of<CreateRoutineBloc>(context)
-                      .add(const ResetSelectedEvent());
+                onPressed: !state.routineTab
+                    ? null
+                    : () {
+                        BlocProvider.of<CreateRoutineBloc>(context)
+                            .add(const ResetSelectedEvent());
 
-                  context
-                      .read<RoutineBloc>()
-                      .add(const TriggerSwitchTabsEvent(isRoutineTab: false));
-                  context
-                      .read<DeviceManagementBloc>()
-                      .add(FetchDevices(context));
-                },
+                        context.read<RoutineBloc>().add(
+                            const TriggerSwitchTabsEvent(isRoutineTab: false));
+                        context
+                            .read<DeviceManagementBloc>()
+                            .add(FetchDevices(context));
+                      },
                 child: Text(
                   'Devices',
                   style: context.textTheme.titleMedium?.copyWith(
@@ -66,14 +67,15 @@ class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
                 style: TextButton.styleFrom(
                   backgroundColor: null,
                 ),
-                onPressed: () {
-                  BlocProvider.of<CreateRoutineBloc>(context)
-                      .add(const ResetSelectedEvent());
+                onPressed: state.routineTab
+                    ? null
+                    : () {
+                        BlocProvider.of<CreateRoutineBloc>(context)
+                            .add(const ResetSelectedEvent());
 
-                  context
-                      .read<RoutineBloc>()
-                      .add(const TriggerSwitchTabsEvent(isRoutineTab: true));
-                },
+                        context.read<RoutineBloc>().add(
+                            const TriggerSwitchTabsEvent(isRoutineTab: true));
+                      },
                 child: Text(
                   'Routines',
                   style: context.textTheme.titleMedium?.copyWith(
@@ -95,7 +97,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,127 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.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/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: 6.0),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              label,
+              style: context.theme.textTheme.bodyMedium!.copyWith(
+                fontSize: 14,
+                color: ColorsManager.grayColor,
+              ),
+            ),
+            Expanded(
+              child: Text(
+                value,
+                textAlign: TextAlign.end,
+                style: context.theme.textTheme.bodyMedium!
+                    .copyWith(fontSize: 14, color: valueColor),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+            const SizedBox(width: 8),
+            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.textGray,
+                trailing: const Icon(
+                  Icons.arrow_forward_ios,
+                  size: 16,
+                  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: 16,
+                  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,184 @@
+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.symmetric(
+                        horizontal: 20, vertical: 24),
+                    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.bold,
+                                color: ColorsManager.primaryColor,
+                              ),
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 24),
+                        DefaultContainer(
+                          child: Row(
+                            children: [
+                              CircleAvatar(
+                                radius: 40,
+                                backgroundColor:
+                                    const Color.fromARGB(177, 213, 213, 213),
+                                child: CircleAvatar(
+                                  backgroundColor: ColorsManager.whiteColors,
+                                  radius: 36,
+                                  child: SvgPicture.asset(
+                                    iconPath,
+                                    fit: BoxFit.cover,
+                                  ),
+                                ),
+                              ),
+                              const SizedBox(width: 12),
+                              Expanded(
+                                child: Column(
+                                  mainAxisAlignment: MainAxisAlignment.start,
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Text(
+                                      'Device Name:',
+                                      style: context.textTheme.bodyMedium!
+                                          .copyWith(
+                                        color: ColorsManager.grayColor,
+                                      ),
+                                    ),
+                                    TextFormField(
+                                      maxLength: 30,
+                                      style: const TextStyle(
+                                        color: ColorsManager.blackColor,
+                                      ),
+                                      textAlign: TextAlign.start,
+                                      focusNode: _bloc.focusNode,
+                                      controller: _bloc.nameController,
+                                      enabled: _bloc.editName,
+                                      onFieldSubmitted: (value) {
+                                        _bloc.add(const ChangeNameEvent(
+                                            value: false));
+                                      },
+                                      decoration: const InputDecoration(
+                                        border: InputBorder.none,
+                                        fillColor: Colors.white10,
+                                        counterText: '',
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                              const SizedBox(width: 8),
+                              Visibility(
+                                visible: _bloc.editName != true,
+                                replacement: const SizedBox(),
+                                child: GestureDetector(
+                                  onTap: () {
+                                    _bloc.add(
+                                        const ChangeNameEvent(value: true));
+                                  },
+                                  child: SvgPicture.asset(
+                                    Assets.editNameIconSettings,
+                                    color: ColorsManager.grayColor,
+                                    height: 20,
+                                    width: 20,
+                                  ),
+                                ),
+                              )
+                            ],
+                          ),
+                        ),
+                        const SizedBox(height: 32),
+                        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/home/bloc/home_bloc.dart

@@ -30,12 +30,13 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
 
   Future _fetchUserInfo(FetchUserInfo event, Emitter<HomeState> emit) async {
     try {
-      var uuid = await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
+      var uuid =
+          await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
       user = await HomeApi().fetchUserInfo(uuid);
 
       if (user != null && user!.project != null) {
         await ProjectManager.setProjectUUID(user!.project!.uuid);
-        NavigationService.navigatorKey.currentContext!.read<SpaceTreeBloc>().add(InitialEvent());
+        // NavigationService.navigatorKey.currentContext!.read<SpaceTreeBloc>().add(InitialEvent());
       }
       add(FetchTermEvent());
       add(FetchPolicyEvent());
@@ -67,10 +68,12 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
     }
   }
 
-  Future _confirmUserAgreement(ConfirmUserAgreementEvent event, Emitter<HomeState> emit) async {
+  Future _confirmUserAgreement(
+      ConfirmUserAgreementEvent event, Emitter<HomeState> emit) async {
     try {
       emit(LoadingHome());
-      var uuid = await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
+      var uuid =
+          await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
       policy = await HomeApi().confirmUserAgreements(uuid);
       emit(PolicyAgreement());
     } catch (e) {
@@ -123,5 +126,41 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
       },
       color: const Color(0xFF023DFE),
     ),
+
+    // HomeItemModel(
+    //   title: 'Move in',
+    //   icon: Assets.moveinIcon,
+    //   active: false,
+    //   onPress: (context) {},
+    //   color: ColorsManager.primaryColor,
+    // ),
+    // HomeItemModel(
+    //   title: 'Construction',
+    //   icon: Assets.constructionIcon,
+    //   active: false,
+    //   onPress: (context) {},
+    //   color: ColorsManager.primaryColor,
+    // ),
+    // HomeItemModel(
+    //   title: 'Energy',
+    //   icon: Assets.energyIcon,
+    //   active: false,
+    //   onPress: (context) {},
+    //   color: ColorsManager.slidingBlueColor.withOpacity(0.2),
+    // ),
+    // HomeItemModel(
+    //   title: 'Integrations',
+    //   icon: Assets.integrationsIcon,
+    //   active: false,
+    //   onPress: (context) {},
+    //   color: ColorsManager.slidingBlueColor.withOpacity(0.2),
+    // ),
+    // HomeItemModel(
+    //   title: 'Asset',
+    //   icon: Assets.assetIcon,
+    //   active: false,
+    //   onPress: (context) {},
+    //   color: ColorsManager.slidingBlueColor.withOpacity(0.2),
+    // ),
   ];
 }

lib/pages/home/view/home_page_web.dart

@@ -24,7 +24,7 @@ class _HomeWebPageState extends State<HomeWebPage> {
   void initState() {
     super.initState();
     final homeBloc = BlocProvider.of<HomeBloc>(context);
-    homeBloc.add(const FetchUserInfo());
+    // homeBloc.add(const FetchUserInfo());
   }
 
   @override
@@ -38,8 +38,10 @@ class _HomeWebPageState extends State<HomeWebPage> {
       child: BlocConsumer<HomeBloc, HomeState>(
         listener: (BuildContext context, state) {
           if (state is HomeInitial) {
-            if (homeBloc.user!.hasAcceptedWebAgreement == false && !_dialogShown) {
-              _dialogShown = true; // Set the flag to true to indicate the dialog is showing.
+            if (homeBloc.user!.hasAcceptedWebAgreement == false &&
+                !_dialogShown) {
+              _dialogShown =
+                  true; // Set the flag to true to indicate the dialog is showing.
               Future.delayed(const Duration(seconds: 1), () {
                 showDialog(
                   context: context,
@@ -54,7 +56,7 @@ class _HomeWebPageState extends State<HomeWebPage> {
                   _dialogShown = false;
                   if (v != null) {
                     homeBloc.add(ConfirmUserAgreementEvent());
-                    homeBloc.add(const FetchUserInfo());
+                    // homeBloc.add(const FetchUserInfo());
                   }
                 });
               });
@@ -98,7 +100,8 @@ class _HomeWebPageState extends State<HomeWebPage> {
                           width: size.width * 0.68,
                           child: GridView.builder(
                             itemCount: homeBloc.homeItems.length,
-                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                            gridDelegate:
+                                const SliverGridDelegateWithFixedCrossAxisCount(
                               crossAxisCount: 3, // Adjust as needed.
                               crossAxisSpacing: 20.0,
                               mainAxisSpacing: 20.0,
@@ -111,7 +114,8 @@ class _HomeWebPageState extends State<HomeWebPage> {
                                 active: homeBloc.homeItems[index].active!,
                                 name: homeBloc.homeItems[index].title!,
                                 img: homeBloc.homeItems[index].icon!,
-                                onTap: () => homeBloc.homeItems[index].onPress(context),
+                                onTap: () =>
+                                    homeBloc.homeItems[index].onPress(context),
                               );
                             },
                           ),

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/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/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart

@@ -21,7 +21,8 @@ import 'package:syncrow_web/services/space_mana_api.dart';
 import 'package:syncrow_web/services/space_model_mang_api.dart';
 import 'package:syncrow_web/utils/constants/action_enum.dart' as custom_action;
 
-class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementState> {
+class SpaceManagementBloc
+    extends Bloc<SpaceManagementEvent, SpaceManagementState> {
   final CommunitySpaceManagementApi _api;
   final ProductApi _productApi;
   final SpaceModelManagementApi _spaceModelApi;
@@ -62,7 +63,8 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     int page = 1;
 
     while (hasNext) {
-      final spaceModels = await _spaceModelApi.listSpaceModels(page: page, projectId: projectUuid);
+      final spaceModels = await _spaceModelApi.listSpaceModels(
+          page: page, projectId: projectUuid);
       if (spaceModels.isNotEmpty) {
         allSpaceModels.addAll(spaceModels);
         page++;
@@ -75,26 +77,29 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     await fetchTags();
 
     emit(SpaceModelLoaded(
-        communities:
-            state is SpaceManagementLoaded ? (state as SpaceManagementLoaded).communities : [],
+        communities: state is SpaceManagementLoaded
+            ? (state as SpaceManagementLoaded).communities
+            : [],
         products: _cachedProducts ?? [],
         spaceModels: List.from(_cachedSpaceModels ?? []),
         allTags: _cachedTags ?? []));
   }
 
-  void _deleteSpaceModelFromCache(
-      DeleteSpaceModelFromCache event, Emitter<SpaceManagementState> emit) async {
+  void _deleteSpaceModelFromCache(DeleteSpaceModelFromCache event,
+      Emitter<SpaceManagementState> emit) async {
     if (_cachedSpaceModels != null) {
-      _cachedSpaceModels =
-          _cachedSpaceModels!.where((model) => model.uuid != event.deletedUuid).toList();
+      _cachedSpaceModels = _cachedSpaceModels!
+          .where((model) => model.uuid != event.deletedUuid)
+          .toList();
     } else {
       _cachedSpaceModels = await fetchSpaceModels();
     }
     await fetchTags();
 
     emit(SpaceModelLoaded(
-        communities:
-            state is SpaceManagementLoaded ? (state as SpaceManagementLoaded).communities : [],
+        communities: state is SpaceManagementLoaded
+            ? (state as SpaceManagementLoaded).communities
+            : [],
         products: _cachedProducts ?? [],
         spaceModels: List.from(_cachedSpaceModels ?? []),
         allTags: _cachedTags ?? []));
@@ -122,8 +127,8 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
       int page = 1;
 
       while (hasNext) {
-        final spaceModels =
-            await _spaceModelApi.listSpaceModels(page: page, projectId: projectUuid);
+        final spaceModels = await _spaceModelApi.listSpaceModels(
+            page: page, projectId: projectUuid);
         if (spaceModels.isNotEmpty) {
           allSpaceModels.addAll(spaceModels);
           page++;
@@ -164,10 +169,12 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
       await fetchTags();
 
       emit(SpaceManagementLoading());
-      final success = await _api.updateCommunity(event.communityUuid, event.name, projectUuid);
+      final success = await _api.updateCommunity(
+          event.communityUuid, event.name, projectUuid);
       if (success) {
         if (previousState is SpaceManagementLoaded) {
-          final updatedCommunities = List<CommunityModel>.from(previousState.communities);
+          final updatedCommunities =
+              List<CommunityModel>.from(previousState.communities);
           for (var community in updatedCommunities) {
             if (community.uuid == event.communityUuid) {
               community.name = event.name;
@@ -212,7 +219,8 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     }
   }
 
-  Future<List<SpaceModel>> _fetchSpacesForCommunity(String communityUuid) async {
+  Future<List<SpaceModel>> _fetchSpacesForCommunity(
+      String communityUuid) async {
     final projectUuid = await ProjectManager.getProjectUUID() ?? '';
 
     return await _api.getSpaceHierarchy(communityUuid, projectUuid);
@@ -242,20 +250,23 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     }
   }
 
-  Future<void> _onBlankState(BlankStateEvent event, Emitter<SpaceManagementState> emit) async {
+  Future<void> _onBlankState(
+      BlankStateEvent event, Emitter<SpaceManagementState> emit) async {
     try {
       final previousState = state;
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
       var spaceBloc = event.context.read<SpaceTreeBloc>();
       var spaceTreeState = event.context.read<SpaceTreeBloc>().state;
 
-      List<CommunityModel> communities = await _waitForCommunityList(spaceBloc, spaceTreeState);
+      List<CommunityModel> communities =
+          await _waitForCommunityList(spaceBloc, spaceTreeState);
       await fetchSpaceModels();
-      await fetchTags();
+      // await fetchTags();
 
       var prevSpaceModels = await fetchSpaceModels();
 
-      if (previousState is SpaceManagementLoaded || previousState is BlankState) {
+      if (previousState is SpaceManagementLoaded ||
+          previousState is BlankState) {
         final prevCommunities = (previousState as dynamic).communities ?? [];
         emit(BlankState(
             communities: List<CommunityModel>.from(prevCommunities),
@@ -286,7 +297,8 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     _onloadProducts();
     await fetchTags();
     // Wait until `communityList` is loaded
-    List<CommunityModel> communities = await _waitForCommunityList(spaceBloc, spaceTreeState);
+    List<CommunityModel> communities =
+        await _waitForCommunityList(spaceBloc, spaceTreeState);
 
     // Fetch space models after communities are available
     final prevSpaceModels = await fetchSpaceModels();
@@ -310,8 +322,9 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     final completer = Completer<List<CommunityModel>>();
     final subscription = spaceBloc.stream.listen((state) {
       if (!completer.isCompleted && state.communityList.isNotEmpty) {
-        completer
-            .complete(state.searchQuery.isNotEmpty ? state.filteredCommunity : state.communityList);
+        completer.complete(state.searchQuery.isNotEmpty
+            ? state.filteredCommunity
+            : state.communityList);
       }
     });
     try {
@@ -339,7 +352,8 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
       emit(SpaceManagementLoading());
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
 
-      final success = await _api.deleteCommunity(event.communityUuid, projectUuid);
+      final success =
+          await _api.deleteCommunity(event.communityUuid, projectUuid);
       if (success) {
         //  add(LoadCommunityAndSpacesEvent());
       } else {
@@ -361,12 +375,13 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     try {
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
       await fetchTags();
-      CommunityModel? newCommunity =
-          await _api.createCommunity(event.name, event.description, projectUuid);
+      CommunityModel? newCommunity = await _api.createCommunity(
+          event.name, event.description, projectUuid);
       var prevSpaceModels = await fetchSpaceModels();
 
       if (newCommunity != null) {
-        if (previousState is SpaceManagementLoaded || previousState is BlankState) {
+        if (previousState is SpaceManagementLoaded ||
+            previousState is BlankState) {
           final prevCommunities = List<CommunityModel>.from(
             (previousState as dynamic).communities,
           );
@@ -459,12 +474,15 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     try {
       final spaceTreeState = event.context.read<SpaceTreeBloc>().state;
 
-      final updatedSpaces =
-          await saveSpacesHierarchically(event.context, event.spaces, event.communityUuid);
+      final updatedSpaces = await saveSpacesHierarchically(
+          event.context, event.spaces, event.communityUuid);
       final allSpaces = await _fetchSpacesForCommunity(event.communityUuid);
 
-      emit(SpaceCreationSuccess(spaces: updatedSpaces));
-
+      // emit(SpaceCreationSuccess(spaces: updatedSpaces));
+      // updatedSpaces.forEach(
+      //   (element) => element.uuid,
+      // );
+      // final lastUpdatedSpaced = updatedSpaces..addAll(allSpaces);
       if (previousState is SpaceManagementLoaded) {
         await _updateLoadedState(
           spaceTreeState,
@@ -475,7 +493,7 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
         );
       }
     } catch (e) {
-      emit(SpaceManagementError('Error saving spaces: $e'));
+      // emit(SpaceManagementError('Error saving spaces: $e'));
 
       if (previousState is SpaceManagementLoaded) {
         emit(previousState);
@@ -515,13 +533,15 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
           return;
         }
       }
+      emit(previousState);
     } catch (e, stackTrace) {
-      rethrow;
+      emit(previousState);
+      // rethrow;
     }
   }
 
-  Future<List<SpaceModel>> saveSpacesHierarchically(
-      BuildContext context, List<SpaceModel> spaces, String communityUuid) async {
+  Future<List<SpaceModel>> saveSpacesHierarchically(BuildContext context,
+      List<SpaceModel> spaces, String communityUuid) async {
     final orderedSpaces = flattenHierarchy(spaces);
 
     final projectUuid = await ProjectManager.getProjectUUID() ?? '';
@@ -534,6 +554,14 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
 
       selectedCommunity = filteredCommunities.firstWhere(
         (community) => community.uuid == communityUuid,
+        orElse: () => CommunityModel(
+          uuid: '',
+          createdAt: DateTime.now(),
+          updatedAt: DateTime.now(),
+          name: '',
+          description: '',
+          spaces: spaces,
+        ),
       );
     } catch (e) {
       return [];
@@ -548,9 +576,7 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
         if (parent.uuid != null) {
           await _api.deleteSpace(communityUuid, parent.uuid!, projectUuid);
         }
-      } catch (e) {
-        rethrow;
-      }
+      } catch (e) {}
     }
     orderedSpaces.removeWhere((space) => parentsToDelete.contains(space));
 
@@ -564,7 +590,7 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
 
           if (matchedSpaces.isEmpty) continue;
 
-          final prevSpace = matchedSpaces[0];
+          final prevSpace = matchedSpaces.elementAtOrNull(0);
 
           final List<UpdateSubspaceTemplateModel> subspaceUpdates = [];
           final List<SubspaceModel>? prevSubspaces = prevSpace?.subspaces;
@@ -575,17 +601,19 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
           if (prevSubspaces != null || newSubspaces != null) {
             if (prevSubspaces != null && newSubspaces != null) {
               for (var prevSubspace in prevSubspaces) {
-                final existsInNew =
-                    newSubspaces.any((subspace) => subspace.uuid == prevSubspace.uuid);
+                final existsInNew = newSubspaces
+                    .any((subspace) => subspace.uuid == prevSubspace.uuid);
                 if (!existsInNew) {
                   subspaceUpdates.add(UpdateSubspaceTemplateModel(
-                      action: custom_action.Action.delete, uuid: prevSubspace.uuid));
+                      action: custom_action.Action.delete,
+                      uuid: prevSubspace.uuid));
                 }
               }
             } else if (prevSubspaces != null && newSubspaces == null) {
               for (var prevSubspace in prevSubspaces) {
                 subspaceUpdates.add(UpdateSubspaceTemplateModel(
-                    action: custom_action.Action.delete, uuid: prevSubspace.uuid));
+                    action: custom_action.Action.delete,
+                    uuid: prevSubspace.uuid));
               }
             }
 
@@ -613,7 +641,9 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
             }
 
             if (prevSubspaces != null && newSubspaces != null) {
-              final newSubspaceMap = {for (var subspace in newSubspaces) subspace.uuid: subspace};
+              final newSubspaceMap = {
+                for (var subspace in newSubspaces) subspace.uuid: subspace
+              };
 
               for (var prevSubspace in prevSubspaces) {
                 final newSubspace = newSubspaceMap[prevSubspace.uuid];
@@ -639,9 +669,10 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
               isPrivate: space.isPrivate,
               position: space.position,
               icon: space.icon,
-              subspaces: subspaceUpdates,
-              tags: tagUpdates,
-              direction: space.incomingConnection?.direction,
+              subspaces: space.subspaces,
+              //  subspaceUpdates,
+              tags: space.tags,
+              //  tagUpdates,
               spaceModelUuid: space.spaceModel?.uuid,
               projectId: projectUuid);
         } else {
@@ -651,8 +682,10 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
               : [];
 
           var createSubspaceBodyModels = space.subspaces?.map((subspace) {
-                final tagBodyModels =
-                    subspace.tags?.map((tag) => tag.toCreateTagBodyModel()).toList() ?? [];
+                final tagBodyModels = subspace.tags
+                        ?.map((tag) => tag.toCreateTagBodyModel())
+                        .toList() ??
+                    [];
                 return CreateSubspaceModel()
                   ..subspaceName = subspace.subspaceName
                   ..tags = tagBodyModels;
@@ -671,7 +704,6 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
               isPrivate: space.isPrivate,
               position: space.position,
               icon: space.icon,
-              direction: space.incomingConnection?.direction,
               spaceModelUuid: space.spaceModel?.uuid,
               tags: tagBodyModels,
               subspaces: createSubspaceBodyModels,
@@ -679,7 +711,8 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
           space.uuid = response?.uuid;
         }
       } catch (e) {
-        rethrow; // Stop further execution on failure
+        return [];
+        // Stop further execution on failure
       }
     }
     return spaces;
@@ -710,7 +743,8 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     return result.toList(); // Convert back to a list
   }
 
-  void _onLoadSpaceModel(SpaceModelLoadEvent event, Emitter<SpaceManagementState> emit) async {
+  void _onLoadSpaceModel(
+      SpaceModelLoadEvent event, Emitter<SpaceManagementState> emit) async {
     emit(SpaceManagementLoading());
 
     try {
@@ -757,14 +791,17 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
       // Case 1: Tags deleted
       if (prevTags != null && newTags != null) {
         for (var prevTag in prevTags) {
-          final existsInNew = newTags.any((newTag) => newTag.uuid == prevTag.uuid);
+          final existsInNew =
+              newTags.any((newTag) => newTag.uuid == prevTag.uuid);
           if (!existsInNew) {
-            tagUpdates.add(TagModelUpdate(action: custom_action.Action.delete, uuid: prevTag.uuid));
+            tagUpdates.add(TagModelUpdate(
+                action: custom_action.Action.delete, uuid: prevTag.uuid));
           }
         }
       } else if (prevTags != null && newTags == null) {
         for (var prevTag in prevTags) {
-          tagUpdates.add(TagModelUpdate(action: custom_action.Action.delete, uuid: prevTag.uuid));
+          tagUpdates.add(TagModelUpdate(
+              action: custom_action.Action.delete, uuid: prevTag.uuid));
         }
       }
 
@@ -807,15 +844,16 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
     return tagUpdates;
   }
 
-  List<SpaceModel> findMatchingSpaces(List<SpaceModel> spaces, String targetUuid) {
+  List<SpaceModel> findMatchingSpaces(
+      List<SpaceModel> spaces, String targetUuid) {
     List<SpaceModel> matched = [];
 
     for (var space in spaces) {
       if (space.uuid == targetUuid) {
         matched.add(space);
       }
-      matched
-          .addAll(findMatchingSpaces(space.children, targetUuid)); // Recursively search in children
+      matched.addAll(findMatchingSpaces(
+          space.children, targetUuid)); // Recursively search in children
     }
 
     return matched;

lib/pages/spaces_management/all_spaces/model/connection_model.dart

@@ -3,23 +3,26 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model
 class Connection {
   final SpaceModel startSpace;
   final SpaceModel endSpace;
-  final String direction;
 
-  Connection({required this.startSpace, required this.endSpace, required this.direction});
+  Connection({
+    required this.startSpace,
+    required this.endSpace,
+  });
 
   Map<String, dynamic> toMap() {
     return {
-      'startUuid': startSpace.uuid ?? 'unsaved-start-space-${startSpace.name}', // Fallback for unsaved spaces
-      'endUuid': endSpace.uuid ?? 'unsaved-end-space-${endSpace.name}', // Fallback for unsaved spaces
-      'direction': direction,
+      'startUuid': startSpace.uuid ??
+          'unsaved-start-space-${startSpace.name}', // Fallback for unsaved spaces
+      'endUuid': endSpace.uuid ??
+          'unsaved-end-space-${endSpace.name}', // Fallback for unsaved spaces
     };
   }
 
-  static Connection fromMap(Map<String, dynamic> map, Map<String, SpaceModel> spaces) {
+  static Connection fromMap(
+      Map<String, dynamic> map, Map<String, SpaceModel> spaces) {
     return Connection(
       startSpace: spaces[map['startUuid']]!,
       endSpace: spaces[map['endUuid']]!,
-      direction: map['direction'],
     );
   }
 }

lib/pages/spaces_management/all_spaces/model/product_model.dart

@@ -1,5 +1,7 @@
 import 'package:syncrow_web/utils/constants/assets.dart';
 
+import 'selected_product_model.dart';
+
 class ProductModel {
   final String uuid;
   final String catName;
@@ -38,6 +40,15 @@ class ProductModel {
     };
   }
 
+  SelectedProduct toSelectedProduct(int count) {
+    return SelectedProduct(
+      productId: uuid,
+      count: count,
+      productName: name!,
+      product: this,
+    );
+  }
+
   static String _mapIconToProduct(String prodType) {
     const iconMapping = {
       '1G': Assets.Gang1SwitchIcon,

lib/pages/spaces_management/all_spaces/model/space_model.dart

@@ -101,7 +101,7 @@ class SpaceModel {
       spaceModel: json['spaceModel'] != null
           ? SpaceTemplateModel.fromJson(json['spaceModel'])
           : null,
-      tags: (json['tags'] as List<dynamic>?)
+      tags: (json['productAllocations'] as List<dynamic>?)
               ?.where((item) => item is Map<String, dynamic>) // Validate type
               .map((item) => Tag.fromJson(item as Map<String, dynamic>))
               .toList() ??
@@ -116,7 +116,6 @@ class SpaceModel {
       instance.incomingConnection = Connection(
         startSpace: instance.parent ?? instance, // Parent space
         endSpace: instance, // This space instance
-        direction: conn['direction'],
       );
     }
 

lib/pages/spaces_management/all_spaces/model/subspace_model.dart

@@ -27,7 +27,7 @@ class SubspaceModel {
       subspaceName: json['subspaceName'] ?? '',
       disabled: json['disabled'] ?? false,
       internalId: internalId,
-      tags: (json['tags'] as List<dynamic>?)
+      tags: (json['productAllocations'] as List<dynamic>?)
               ?.map((item) => Tag.fromJson(item))
               .toList() ??
           [],
@@ -36,7 +36,7 @@ class SubspaceModel {
 
   Map<String, dynamic> toJson() {
     return {
-      'uuid': uuid,
+      if (uuid != null) 'uuid': uuid,
       'subspaceName': subspaceName,
       'disabled': disabled,
       'tags': tags?.map((e) => e.toJson()).toList() ?? [],

lib/pages/spaces_management/all_spaces/model/tag.dart

@@ -23,10 +23,13 @@ class Tag extends BaseTag {
     final String internalId = json['internalId'] ?? const Uuid().v4();
 
     return Tag(
-      uuid: json['uuid'] ?? '',
+      //TODO:insure UUId for tag or prodAlloc
+      uuid: json['name'] != null ? json['uuid'] : json['tag']?['uuid'] ?? '',
       internalId: internalId,
-      tag: json['name'] ?? '',
-      product: json['product'] != null ? ProductModel.fromMap(json['product']) : null,
+      tag: json['name'] ?? json['tag']?['name'] ?? '',
+      product: json['product'] != null
+          ? ProductModel.fromMap(json['product'])
+          : null,
     );
   }
 
@@ -49,9 +52,10 @@ class Tag extends BaseTag {
 
   Map<String, dynamic> toJson() {
     return {
-      'uuid': uuid,
-      'tag': tag,
-      'product': product?.toMap(),
+      if (uuid != null) 'uuid': uuid,
+      'name': tag,
+      'productUuid': product?.uuid,
+      // .toMap(),
     };
   }
 }

lib/pages/spaces_management/all_spaces/widgets/community_structure_widget.dart

@@ -67,7 +67,8 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
   void initState() {
     super.initState();
     spaces = widget.spaces.isNotEmpty ? flattenSpaces(widget.spaces) : [];
-    connections = widget.spaces.isNotEmpty ? createConnections(widget.spaces) : [];
+    connections =
+        widget.spaces.isNotEmpty ? createConnections(widget.spaces) : [];
     _adjustCanvasSizeForSpaces();
     _nameController = TextEditingController(
       text: widget.selectedCommunity?.name ?? '',
@@ -96,13 +97,15 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
     if (oldWidget.spaces != widget.spaces) {
       setState(() {
         spaces = widget.spaces.isNotEmpty ? flattenSpaces(widget.spaces) : [];
-        connections = widget.spaces.isNotEmpty ? createConnections(widget.spaces) : [];
+        connections =
+            widget.spaces.isNotEmpty ? createConnections(widget.spaces) : [];
         _adjustCanvasSizeForSpaces();
         realignTree();
       });
     }
 
-    if (widget.selectedSpace != oldWidget.selectedSpace && widget.selectedSpace != null) {
+    if (widget.selectedSpace != oldWidget.selectedSpace &&
+        widget.selectedSpace != null) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         _moveToSpace(widget.selectedSpace!);
       });
@@ -185,7 +188,8 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
                                     connection, widget.selectedSpace)
                                 ? 1.0
                                 : 0.3, // Adjust opacity
-                            child: CustomPaint(painter: CurvedLinePainter([connection])),
+                            child: CustomPaint(
+                                painter: CurvedLinePainter([connection])),
                           ),
                         for (var entry in spaces.asMap().entries)
                           if (entry.value.status != SpaceStatus.deleted &&
@@ -195,11 +199,11 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
                               top: entry.value.position.dy,
                               child: SpaceCardWidget(
                                 index: entry.key,
-                                onButtonTap: (int index, Offset newPosition, String direction) {
+                                onButtonTap: (int index, Offset newPosition) {
                                   _showCreateSpaceDialog(screenSize,
-                                      position: spaces[index].position + newPosition,
+                                      position:
+                                          spaces[index].position + newPosition,
                                       parentIndex: index,
-                                      direction: direction,
                                       projectTags: widget.projectTags);
                                 },
                                 position: entry.value.position,
@@ -210,8 +214,9 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
                                   _updateNodePosition(entry.value, newPosition);
                                 },
                                 buildSpaceContainer: (int index) {
-                                  final bool isHighlighted = SpaceHelper.isHighlightedSpace(
-                                      spaces[index], widget.selectedSpace);
+                                  final bool isHighlighted =
+                                      SpaceHelper.isHighlightedSpace(
+                                          spaces[index], widget.selectedSpace);
 
                                   return Opacity(
                                       opacity: isHighlighted ? 1.0 : 0.3,
@@ -289,7 +294,6 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
   void _showCreateSpaceDialog(Size screenSize,
       {Offset? position,
       int? parentIndex,
-      String? direction,
       double? canvasWidth,
       double? canvasHeight,
       required List<Tag> projectTags}) {
@@ -299,19 +303,25 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
         return CreateSpaceDialog(
           products: widget.products,
           spaceModels: widget.spaceModels,
-          allTags: TagHelper.getAllTagValues(widget.communities, widget.spaceModels),
+          allTags:
+              TagHelper.getAllTagValues(widget.communities, widget.spaceModels),
           parentSpace: parentIndex != null ? spaces[parentIndex] : null,
           projectTags: projectTags,
-          onCreateSpace: (String name, String icon, List<SelectedProduct> selectedProducts,
-              SpaceTemplateModel? spaceModel, List<SubspaceModel>? subspaces, List<Tag>? tags) {
+          onCreateSpace: (String name,
+              String icon,
+              List<SelectedProduct> selectedProducts,
+              SpaceTemplateModel? spaceModel,
+              List<SubspaceModel>? subspaces,
+              List<Tag>? tags) {
             setState(() {
               // Set the first space in the center or use passed position
               Offset newPosition;
               if (parentIndex != null) {
-                newPosition =
-                    getBalancedChildPosition(spaces[parentIndex]); // Ensure balanced position
+                newPosition = getBalancedChildPosition(
+                    spaces[parentIndex]); // Ensure balanced position
               } else {
-                newPosition = position ?? ConnectionHelper.getCenterPosition(screenSize);
+                newPosition =
+                    position ?? ConnectionHelper.getCenterPosition(screenSize);
               }
 
               SpaceModel newSpace = SpaceModel(
@@ -325,14 +335,13 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
                   subspaces: subspaces,
                   tags: tags);
 
-              if (parentIndex != null && direction != null) {
+              if (parentIndex != null) {
                 SpaceModel parentSpace = spaces[parentIndex];
                 parentSpace.internalId = spaces[parentIndex].internalId;
                 newSpace.parent = parentSpace;
                 final newConnection = Connection(
                   startSpace: parentSpace,
                   endSpace: newSpace,
-                  direction: direction,
                 );
                 connections.add(newConnection);
                 newSpace.incomingConnection = newConnection;
@@ -360,16 +369,21 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
             name: widget.selectedSpace!.name,
             icon: widget.selectedSpace!.icon,
             projectTags: widget.projectTags,
-            parentSpace:
-                SpaceHelper.findSpaceByInternalId(widget.selectedSpace?.parent?.internalId, spaces),
+            parentSpace: SpaceHelper.findSpaceByInternalId(
+                widget.selectedSpace?.parent?.internalId, spaces),
             editSpace: widget.selectedSpace,
             currentSpaceModel: widget.selectedSpace?.spaceModel,
             tags: widget.selectedSpace?.tags,
             subspaces: widget.selectedSpace?.subspaces,
             isEdit: true,
-            allTags: TagHelper.getAllTagValues(widget.communities, widget.spaceModels),
-            onCreateSpace: (String name, String icon, List<SelectedProduct> selectedProducts,
-                SpaceTemplateModel? spaceModel, List<SubspaceModel>? subspaces, List<Tag>? tags) {
+            allTags: TagHelper.getAllTagValues(
+                widget.communities, widget.spaceModels),
+            onCreateSpace: (String name,
+                String icon,
+                List<SelectedProduct> selectedProducts,
+                SpaceTemplateModel? spaceModel,
+                List<SubspaceModel>? subspaces,
+                List<Tag>? tags) {
               setState(() {
                 // Update the space's properties
                 widget.selectedSpace!.name = name;
@@ -379,7 +393,8 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
                 widget.selectedSpace!.tags = tags;
 
                 if (widget.selectedSpace!.status != SpaceStatus.newSpace) {
-                  widget.selectedSpace!.status = SpaceStatus.modified; // Mark as modified
+                  widget.selectedSpace!.status =
+                      SpaceStatus.modified; // Mark as modified
                 }
 
                 for (var space in spaces) {
@@ -410,7 +425,8 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
     Map<String, SpaceModel> idToSpace = {};
 
     void flatten(SpaceModel space) {
-      if (space.status == SpaceStatus.deleted || space.status == SpaceStatus.parentDeleted) {
+      if (space.status == SpaceStatus.deleted ||
+          space.status == SpaceStatus.parentDeleted) {
         return;
       }
       result.add(space);
@@ -447,7 +463,6 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
           Connection(
             startSpace: parent,
             endSpace: child,
-            direction: "down",
           ),
         );
 
@@ -532,13 +547,16 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
 
   void _selectSpace(BuildContext context, SpaceModel space) {
     context.read<SpaceManagementBloc>().add(
-          SelectSpaceEvent(selectedCommunity: widget.selectedCommunity, selectedSpace: space),
+          SelectSpaceEvent(
+              selectedCommunity: widget.selectedCommunity,
+              selectedSpace: space),
         );
   }
 
   void _deselectSpace(BuildContext context) {
     context.read<SpaceManagementBloc>().add(
-          SelectSpaceEvent(selectedCommunity: widget.selectedCommunity, selectedSpace: null),
+          SelectSpaceEvent(
+              selectedCommunity: widget.selectedCommunity, selectedSpace: null),
         );
   }
 
@@ -708,7 +726,8 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
 
       SpaceModel duplicated = _deepCloneSpaceTree(space, parent: parent);
 
-      duplicated.position = Offset(space.position.dx + 300, space.position.dy + 100);
+      duplicated.position =
+          Offset(space.position.dx + 300, space.position.dy + 100);
       List<SpaceModel> duplicatedSubtree = [];
       void collectSubtree(SpaceModel node) {
         duplicatedSubtree.add(node);
@@ -726,7 +745,6 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
         final newConnection = Connection(
           startSpace: parent,
           endSpace: duplicated,
-          direction: "down",
         );
         connections.add(newConnection);
         duplicated.incomingConnection = newConnection;
@@ -739,7 +757,8 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
   }
 
   SpaceModel _deepCloneSpaceTree(SpaceModel original, {SpaceModel? parent}) {
-    final duplicatedName = SpaceHelper.generateUniqueSpaceName(original.name, spaces);
+    final duplicatedName =
+        SpaceHelper.generateUniqueSpaceName(original.name, spaces);
 
     final newSpace = SpaceModel(
       name: duplicatedName,
@@ -761,7 +780,6 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
       final newConnection = Connection(
         startSpace: newSpace,
         endSpace: duplicatedChild,
-        direction: "down",
       );
       connections.add(newConnection);
 

lib/pages/spaces_management/all_spaces/widgets/create_space_widgets/devices_part_widget.dart

@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../../../../common/edit_chip.dart';
+import '../../../../../utils/color_manager.dart';
+import '../../../helper/tag_helper.dart';
+import '../../../space_model/widgets/button_content_widget.dart';
+import '../../model/subspace_model.dart';
+import '../../model/tag.dart';
+
+class DevicesPartWidget extends StatelessWidget {
+  const DevicesPartWidget({
+    super.key,
+    required this.tags,
+    required this.subspaces,
+    required this.screenWidth,
+    required this.onEditChip,
+    required this.onTextButtonPressed,
+    required this.isTagsAndSubspaceModelDisabled,
+  });
+  final bool isTagsAndSubspaceModelDisabled;
+  final void Function() onEditChip;
+  final void Function() onTextButtonPressed;
+  final double screenWidth;
+  final List<Tag>? tags;
+  final List<SubspaceModel>? subspaces;
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        (tags?.isNotEmpty == true ||
+                subspaces?.any(
+                        (subspace) => subspace.tags?.isNotEmpty == true) ==
+                    true)
+            ? SizedBox(
+                width: screenWidth * 0.25,
+                child: Container(
+                  padding: const EdgeInsets.all(8.0),
+                  decoration: BoxDecoration(
+                    color: ColorsManager.textFieldGreyColor,
+                    borderRadius: BorderRadius.circular(15),
+                    border: Border.all(
+                      color: ColorsManager.textFieldGreyColor,
+                      width: 3.0, // Border width
+                    ),
+                  ),
+                  child: Wrap(
+                    spacing: 8.0,
+                    runSpacing: 8.0,
+                    children: [
+                      // Combine tags from spaceModel and subspaces
+                      ...TagHelper.groupTags([
+                        ...?tags,
+                        ...?subspaces?.expand((subspace) => subspace.tags ?? [])
+                      ]).entries.map(
+                            (entry) => Chip(
+                              avatar: SizedBox(
+                                width: 24,
+                                height: 24,
+                                child: SvgPicture.asset(
+                                  entry.key.icon ?? 'assets/icons/gateway.svg',
+                                  fit: BoxFit.contain,
+                                ),
+                              ),
+                              label: Text(
+                                'x${entry.value}', // Show count
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .bodySmall
+                                    ?.copyWith(color: ColorsManager.spaceColor),
+                              ),
+                              backgroundColor: ColorsManager.whiteColors,
+                              shape: RoundedRectangleBorder(
+                                borderRadius: BorderRadius.circular(16),
+                                side: const BorderSide(
+                                  color: ColorsManager.spaceColor,
+                                ),
+                              ),
+                            ),
+                          ),
+
+                      EditChip(onTap: onEditChip)
+                    ],
+                  ),
+                ),
+              )
+            : TextButton(
+                onPressed: onTextButtonPressed,
+                style: TextButton.styleFrom(
+                  padding: EdgeInsets.zero,
+                ),
+                child: ButtonContentWidget(
+                  icon: Icons.add,
+                  label: 'Add Devices',
+                  disabled: isTagsAndSubspaceModelDisabled,
+                ),
+              )
+      ],
+    );
+  }
+}

lib/pages/spaces_management/all_spaces/widgets/create_space_widgets/icon_choose_part_widget.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../../../../../utils/color_manager.dart';
+import '../../../../../utils/constants/assets.dart';
+
+class IconChoosePartWidget extends StatelessWidget {
+  const IconChoosePartWidget({
+    super.key,
+    required this.selectedIcon,
+    required this.showIconSelection,
+    required this.screenWidth,
+  });
+  final double screenWidth;
+  final String selectedIcon;
+  final void Function() showIconSelection;
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      //  crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        const SizedBox(height: 50),
+        Stack(
+          alignment: Alignment.center,
+          children: [
+            Container(
+              width: screenWidth * 0.1,
+              height: screenWidth * 0.1,
+              decoration: const BoxDecoration(
+                color: ColorsManager.boxColor,
+                shape: BoxShape.circle,
+              ),
+            ),
+            SvgPicture.asset(
+              selectedIcon,
+              width: screenWidth * 0.04,
+              height: screenWidth * 0.04,
+            ),
+            Positioned(
+              top: 20,
+              right: 20,
+              child: InkWell(
+                onTap: showIconSelection,
+                child: Container(
+                  width: 24,
+                  height: 24,
+                  decoration: const BoxDecoration(
+                    color: Colors.white,
+                    shape: BoxShape.circle,
+                  ),
+                  child: SvgPicture.asset(
+                    Assets.iconEdit,
+                    width: 16,
+                    height: 16,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

lib/pages/spaces_management/all_spaces/widgets/create_space_widgets/space_model_linking_widget.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+
+import '../../../../../utils/color_manager.dart';
+import '../../../../../utils/constants/assets.dart';
+import '../../../space_model/models/space_template_model.dart';
+import '../../../space_model/widgets/button_content_widget.dart';
+
+class SpaceModelLinkingWidget extends StatelessWidget {
+  const SpaceModelLinkingWidget({
+    super.key,
+    required this.onDeleted,
+    required this.onPressed,
+    required this.screenWidth,
+    required this.selectedSpaceModel,
+    required this.isSpaceModelDisabled,
+  });
+  final bool isSpaceModelDisabled;
+  final void Function()? onDeleted;
+  final void Function()? onPressed;
+  final double screenWidth;
+  final SpaceTemplateModel? selectedSpaceModel;
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        selectedSpaceModel == null
+            ? TextButton(
+                style: TextButton.styleFrom(
+                  padding: EdgeInsets.zero,
+                ),
+                onPressed: onPressed,
+                child: ButtonContentWidget(
+                  svgAssets: Assets.link,
+                  label: 'Link a space model',
+                  disabled: isSpaceModelDisabled,
+                ),
+              )
+            : Container(
+                width: screenWidth * 0.25,
+                padding: const EdgeInsets.symmetric(
+                    vertical: 10.0, horizontal: 16.0),
+                decoration: BoxDecoration(
+                  color: ColorsManager.boxColor,
+                  borderRadius: BorderRadius.circular(10),
+                ),
+                child: Wrap(
+                  spacing: 8.0,
+                  runSpacing: 8.0,
+                  children: [
+                    Chip(
+                        label: Text(
+                          selectedSpaceModel?.modelName ?? '',
+                          style: Theme.of(context)
+                              .textTheme
+                              .bodyMedium!
+                              .copyWith(color: ColorsManager.spaceColor),
+                        ),
+                        backgroundColor: ColorsManager.whiteColors,
+                        shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(8),
+                          side: const BorderSide(
+                            color: ColorsManager.transparentColor,
+                            width: 0,
+                          ),
+                        ),
+                        deleteIcon: Container(
+                          width: 24,
+                          height: 24,
+                          decoration: BoxDecoration(
+                            shape: BoxShape.circle,
+                            border: Border.all(
+                              color: ColorsManager.lightGrayColor,
+                              width: 1.5,
+                            ),
+                          ),
+                          child: const Icon(
+                            Icons.close,
+                            size: 16,
+                            color: ColorsManager.lightGrayColor,
+                          ),
+                        ),
+                        onDeleted: onDeleted),
+                  ],
+                ),
+              ),
+      ],
+    );
+  }
+}

lib/pages/spaces_management/all_spaces/widgets/create_space_widgets/space_name_textfield_widget.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+
+import '../../../../../utils/color_manager.dart';
+
+class SpaceNameTextfieldWidget extends StatelessWidget {
+  SpaceNameTextfieldWidget({
+    super.key,
+    required this.isNameFieldExist,
+    required this.isNameFieldInvalid,
+    required this.onChange,
+    required this.screenWidth,
+    required this.nameController,
+  });
+  TextEditingController nameController;
+  final void Function(String value) onChange;
+  final double screenWidth;
+  bool isNameFieldExist;
+  bool isNameFieldInvalid;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        SizedBox(
+          width: screenWidth * 0.25,
+          child: TextField(
+            controller: nameController,
+            onChanged: onChange,
+            style: Theme.of(context).textTheme.bodyMedium,
+            decoration: InputDecoration(
+              hintText: 'Please enter the name',
+              hintStyle: Theme.of(context)
+                  .textTheme
+                  .bodyMedium!
+                  .copyWith(color: ColorsManager.lightGrayColor),
+              filled: true,
+              fillColor: ColorsManager.boxColor,
+              enabledBorder: OutlineInputBorder(
+                borderRadius: BorderRadius.circular(10),
+                borderSide: BorderSide(
+                  color: isNameFieldInvalid || isNameFieldExist
+                      ? ColorsManager.red
+                      : ColorsManager.boxColor,
+                  width: 1.5,
+                ),
+              ),
+              focusedBorder: OutlineInputBorder(
+                borderRadius: BorderRadius.circular(10),
+                borderSide: const BorderSide(
+                  color: ColorsManager.boxColor,
+                  width: 1.5,
+                ),
+              ),
+            ),
+          ),
+        ),
+        if (isNameFieldInvalid)
+          Padding(
+            padding: const EdgeInsets.only(top: 8.0),
+            child: Text(
+              '*Space name should not be empty.',
+              style: Theme.of(context)
+                  .textTheme
+                  .bodySmall
+                  ?.copyWith(color: ColorsManager.red),
+            ),
+          ),
+        if (isNameFieldExist)
+          Padding(
+            padding: const EdgeInsets.only(top: 8.0),
+            child: Text(
+              '*Name already exist',
+              style: Theme.of(context)
+                  .textTheme
+                  .bodySmall
+                  ?.copyWith(color: ColorsManager.red),
+            ),
+          ),
+      ],
+    );
+  }
+}

lib/pages/spaces_management/all_spaces/widgets/create_space_widgets/sub_space_part_widget.dart

@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+
+import '../../../../../common/edit_chip.dart';
+import '../../../../../utils/color_manager.dart';
+import '../../../space_model/widgets/button_content_widget.dart';
+import '../../../space_model/widgets/subspace_name_label_widget.dart';
+import '../../model/subspace_model.dart';
+
+class SubSpacePartWidget extends StatefulWidget {
+  SubSpacePartWidget({
+    super.key,
+    required this.subspaces,
+    required this.onPressed,
+    required this.isTagsAndSubspaceModelDisabled,
+    required this.screenWidth,
+    required this.editChipOnTap,
+  });
+  double screenWidth;
+  bool isTagsAndSubspaceModelDisabled;
+  final void Function() editChipOnTap;
+  List<SubspaceModel>? subspaces;
+  final void Function() onPressed;
+
+  @override
+  State<SubSpacePartWidget> createState() => _SubSpacePartWidgetState();
+}
+
+class _SubSpacePartWidgetState extends State<SubSpacePartWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        widget.subspaces == null || widget.subspaces!.isEmpty
+            ? TextButton(
+                style: TextButton.styleFrom(
+                  padding: EdgeInsets.zero,
+                  overlayColor: ColorsManager.transparentColor,
+                ),
+                onPressed: widget.onPressed,
+                child: ButtonContentWidget(
+                  icon: Icons.add,
+                  label: 'Create Sub Spaces',
+                  disabled: widget.isTagsAndSubspaceModelDisabled,
+                ),
+              )
+            : SizedBox(
+                width: widget.screenWidth * 0.25,
+                child: Container(
+                  padding: const EdgeInsets.all(8.0),
+                  decoration: BoxDecoration(
+                    color: ColorsManager.textFieldGreyColor,
+                    borderRadius: BorderRadius.circular(15),
+                    border: Border.all(
+                      color: ColorsManager.textFieldGreyColor,
+                      width: 3.0, // Border width
+                    ),
+                  ),
+                  child: Wrap(
+                    spacing: 8.0,
+                    runSpacing: 8.0,
+                    children: [
+                      if (widget.subspaces != null)
+                        ...widget.subspaces!.map((subspace) {
+                          return Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              SubspaceNameDisplayWidget(
+                                text: subspace.subspaceName,
+                                validateName: (updatedName) {
+                                  bool nameExists = widget.subspaces!.any((s) {
+                                    bool isSameId =
+                                        s.internalId == subspace.internalId;
+                                    bool isSameName =
+                                        s.subspaceName.trim().toLowerCase() ==
+                                            updatedName.trim().toLowerCase();
+
+                                    return !isSameId && isSameName;
+                                  });
+
+                                  return !nameExists;
+                                },
+                                onNameChanged: (updatedName) {
+                                  setState(() {
+                                    subspace.subspaceName = updatedName;
+                                  });
+                                },
+                              ),
+                            ],
+                          );
+                        }),
+                      EditChip(
+                        onTap: widget.editChipOnTap,
+                      )
+                    ],
+                  ),
+                ),
+              )
+      ],
+    );
+  }
+}

lib/pages/spaces_management/all_spaces/widgets/curved_line_painter.dart

@@ -30,28 +30,13 @@ class CurvedLinePainter extends CustomPainter {
       Offset end = connection.endSpace.position +
           const Offset(75, 0); // Center top of end space
 
-      if (connection.direction == 'down') {
-        // Curved line for down connections
-        final controlPoint = Offset((start.dx + end.dx) / 2, start.dy + 50);
-        final path = Path()
-          ..moveTo(start.dx, start.dy)
-          ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy);
-        canvas.drawPath(path, paint);
-      } else if (connection.direction == 'right') {
-        start = connection.startSpace.position +
-            const Offset(150, 30); // Right center
-        end = connection.endSpace.position + const Offset(0, 30); // Left center
+      // Curved line for down connections
+      final controlPoint = Offset((start.dx + end.dx) / 2, start.dy + 50);
+      final path = Path()
+        ..moveTo(start.dx, start.dy)
+        ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy);
+      canvas.drawPath(path, paint);
 
-        canvas.drawLine(start, end, paint);
-      } else if (connection.direction == 'left') {
-        start =
-            connection.startSpace.position + const Offset(0, 30); // Left center
-        end = connection.endSpace.position +
-            const Offset(150, 30); // Right center
-
-        canvas.drawLine(start, end, paint);
-      }
-      
       final dotPaint = Paint()..color = ColorsManager.blackColor;
       canvas.drawCircle(start, 5, dotPaint); // Start dot
       canvas.drawCircle(end, 5, dotPaint); // End dot

lib/pages/spaces_management/all_spaces/widgets/dialogs/create_space_dialog.dart

@@ -1,6 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
-import 'package:syncrow_web/common/edit_chip.dart';
 import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
 import 'package:syncrow_web/pages/common/buttons/default_button.dart';
 import 'package:syncrow_web/pages/spaces_management/add_device_type/views/add_device_type_widget.dart';
@@ -9,6 +7,11 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/selected_pr
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/subspace_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/create_space_widgets/devices_part_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/create_space_widgets/icon_choose_part_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/create_space_widgets/space_model_linking_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/create_space_widgets/space_name_textfield_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/create_space_widgets/sub_space_part_widget.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/dialogs/icon_selection_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/assign_tag/views/assign_tag_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace/views/create_subspace_model_dialog.dart';
@@ -16,8 +19,6 @@ import 'package:syncrow_web/pages/spaces_management/helper/space_helper.dart';
 import 'package:syncrow_web/pages/spaces_management/helper/tag_helper.dart';
 import 'package:syncrow_web/pages/spaces_management/link_space_model/view/link_space_model_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/space_template_model.dart';
-import 'package:syncrow_web/pages/spaces_management/space_model/widgets/button_content_widget.dart';
-import 'package:syncrow_web/pages/spaces_management/space_model/widgets/subspace_name_label_widget.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/constants/space_icon_const.dart';
@@ -82,8 +83,10 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
     super.initState();
     selectedIcon = widget.icon ?? Assets.location;
     nameController = TextEditingController(text: widget.name ?? '');
-    selectedProducts = widget.selectedProducts.isNotEmpty ? widget.selectedProducts : [];
-    isOkButtonEnabled = enteredName.isNotEmpty || nameController.text.isNotEmpty;
+    selectedProducts =
+        widget.selectedProducts.isNotEmpty ? widget.selectedProducts : [];
+    isOkButtonEnabled =
+        enteredName.isNotEmpty || nameController.text.isNotEmpty;
     if (widget.currentSpaceModel != null) {
       subspaces = [];
       tags = [];
@@ -96,13 +99,15 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
 
   @override
   Widget build(BuildContext context) {
-    bool isSpaceModelDisabled =
-        (tags != null && tags!.isNotEmpty || subspaces != null && subspaces!.isNotEmpty);
+    bool isSpaceModelDisabled = (tags != null && tags!.isNotEmpty ||
+        subspaces != null && subspaces!.isNotEmpty);
     bool isTagsAndSubspaceModelDisabled = (selectedSpaceModel != null);
 
     final screenWidth = MediaQuery.of(context).size.width;
     return AlertDialog(
-      title: widget.isEdit ? const Text('Edit Space') : const Text('Create New Space'),
+      title: widget.isEdit
+          ? const Text('Edit Space')
+          : const Text('Create New Space'),
       backgroundColor: ColorsManager.whiteColors,
       content: SizedBox(
         width: screenWidth * 0.5,
@@ -112,50 +117,10 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
             children: [
               Expanded(
                 flex: 1,
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  //  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: [
-                    const SizedBox(height: 50),
-                    Stack(
-                      alignment: Alignment.center,
-                      children: [
-                        Container(
-                          width: screenWidth * 0.1,
-                          height: screenWidth * 0.1,
-                          decoration: const BoxDecoration(
-                            color: ColorsManager.boxColor,
-                            shape: BoxShape.circle,
-                          ),
-                        ),
-                        SvgPicture.asset(
-                          selectedIcon,
-                          width: screenWidth * 0.04,
-                          height: screenWidth * 0.04,
-                        ),
-                        Positioned(
-                          top: 20,
-                          right: 20,
-                          child: InkWell(
-                            onTap: _showIconSelectionDialog,
-                            child: Container(
-                              width: 24,
-                              height: 24,
-                              decoration: const BoxDecoration(
-                                color: Colors.white,
-                                shape: BoxShape.circle,
-                              ),
-                              child: SvgPicture.asset(
-                                Assets.iconEdit,
-                                width: 16,
-                                height: 16,
-                              ),
-                            ),
-                          ),
-                        ),
-                      ],
-                    ),
-                  ],
+                child: IconChoosePartWidget(
+                  selectedIcon: selectedIcon,
+                  showIconSelection: _showIconSelectionDialog,
+                  screenWidth: screenWidth,
                 ),
               ),
               const SizedBox(width: 20),
@@ -164,342 +129,146 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    SizedBox(
-                      width: screenWidth * 0.25,
-                      child: TextField(
-                        controller: nameController,
-                        onChanged: (value) {
-                          enteredName = value.trim();
-                          setState(() {
-                            isNameFieldExist = false;
-                            isOkButtonEnabled = false;
-                            isNameFieldInvalid = value.isEmpty;
+                    SpaceNameTextfieldWidget(
+                      isNameFieldExist: isNameFieldExist,
+                      isNameFieldInvalid: isNameFieldInvalid,
+                      nameController: nameController,
+                      screenWidth: screenWidth,
+                      onChange: (value) {
+                        enteredName = value.trim();
+                        setState(() {
+                          isNameFieldExist = false;
+                          isOkButtonEnabled = false;
+                          isNameFieldInvalid = value.isEmpty;
 
-                            if (!isNameFieldInvalid) {
-                              if (SpaceHelper.isNameConflict(
-                                  value, widget.parentSpace, widget.editSpace)) {
-                                isNameFieldExist = true;
-                                isOkButtonEnabled = false;
-                              } else {
-                                isNameFieldExist = false;
-                                isOkButtonEnabled = true;
-                              }
+                          if (!isNameFieldInvalid) {
+                            if (SpaceHelper.isNameConflict(
+                                value, widget.parentSpace, widget.editSpace)) {
+                              isNameFieldExist = true;
+                              isOkButtonEnabled = false;
+                            } else {
+                              isNameFieldExist = false;
+                              isOkButtonEnabled = true;
                             }
-                          });
-                        },
-                        style: Theme.of(context).textTheme.bodyMedium,
-                        decoration: InputDecoration(
-                          hintText: 'Please enter the name',
-                          hintStyle: Theme.of(context)
-                              .textTheme
-                              .bodyMedium!
-                              .copyWith(color: ColorsManager.lightGrayColor),
-                          filled: true,
-                          fillColor: ColorsManager.boxColor,
-                          enabledBorder: OutlineInputBorder(
-                            borderRadius: BorderRadius.circular(10),
-                            borderSide: BorderSide(
-                              color: isNameFieldInvalid || isNameFieldExist
-                                  ? ColorsManager.red
-                                  : ColorsManager.boxColor,
-                              width: 1.5,
-                            ),
-                          ),
-                          focusedBorder: OutlineInputBorder(
-                            borderRadius: BorderRadius.circular(10),
-                            borderSide: const BorderSide(
-                              color: ColorsManager.boxColor,
-                              width: 1.5,
-                            ),
-                          ),
-                        ),
-                      ),
+                          }
+                        });
+                      },
                     ),
-                    if (isNameFieldInvalid)
-                      Padding(
-                        padding: const EdgeInsets.only(top: 8.0),
-                        child: Text(
-                          '*Space name should not be empty.',
-                          style: Theme.of(context)
-                              .textTheme
-                              .bodySmall
-                              ?.copyWith(color: ColorsManager.red),
-                        ),
-                      ),
-                    if (isNameFieldExist)
-                      Padding(
-                        padding: const EdgeInsets.only(top: 8.0),
-                        child: Text(
-                          '*Name already exist',
-                          style: Theme.of(context)
-                              .textTheme
-                              .bodySmall
-                              ?.copyWith(color: ColorsManager.red),
-                        ),
-                      ),
                     const SizedBox(height: 10),
-                    selectedSpaceModel == null
-                        ? TextButton(
-                            style: TextButton.styleFrom(
-                              padding: EdgeInsets.zero,
-                            ),
-                            onPressed: () {
-                              isSpaceModelDisabled ? null : _showLinkSpaceModelDialog(context);
-                            },
-                            child: ButtonContentWidget(
-                              svgAssets: Assets.link,
-                              label: 'Link a space model',
-                              disabled: isSpaceModelDisabled,
-                            ),
-                          )
-                        : Container(
-                            width: screenWidth * 0.25,
-                            padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
-                            decoration: BoxDecoration(
-                              color: ColorsManager.boxColor,
-                              borderRadius: BorderRadius.circular(10),
-                            ),
-                            child: Wrap(
-                              spacing: 8.0,
-                              runSpacing: 8.0,
-                              children: [
-                                Chip(
-                                    label: Text(
-                                      selectedSpaceModel?.modelName ?? '',
-                                      style: Theme.of(context)
-                                          .textTheme
-                                          .bodyMedium!
-                                          .copyWith(color: ColorsManager.spaceColor),
-                                    ),
-                                    backgroundColor: ColorsManager.whiteColors,
-                                    shape: RoundedRectangleBorder(
-                                      borderRadius: BorderRadius.circular(8),
-                                      side: const BorderSide(
-                                        color: ColorsManager.transparentColor,
-                                        width: 0,
-                                      ),
-                                    ),
-                                    deleteIcon: Container(
-                                      width: 24,
-                                      height: 24,
-                                      decoration: BoxDecoration(
-                                        shape: BoxShape.circle,
-                                        border: Border.all(
-                                          color: ColorsManager.lightGrayColor,
-                                          width: 1.5,
-                                        ),
-                                      ),
-                                      child: const Icon(
-                                        Icons.close,
-                                        size: 16,
-                                        color: ColorsManager.lightGrayColor,
-                                      ),
-                                    ),
-                                    onDeleted: () => setState(() {
-                                          this.selectedSpaceModel = null;
-                                          subspaces = widget.subspaces ?? [];
-                                          tags = widget.tags ?? [];
-                                        })),
-                              ],
-                            ),
-                          ),
+                    // SpaceModelLinkingWidget(
+                    //   isSpaceModelDisabled: true,
+                    //   //  isSpaceModelDisabled,
+                    //   onPressed: () {
+                    //     isSpaceModelDisabled
+                    //         ? null
+                    //         : _showLinkSpaceModelDialog(context);
+                    //   },
+                    //   onDeleted: () => setState(() {
+                    //     selectedSpaceModel = null;
+                    //     subspaces = widget.subspaces ?? [];
+                    //     tags = widget.tags ?? [];
+                    //   }),
+                    //   screenWidth: screenWidth,
+                    //   selectedSpaceModel: selectedSpaceModel,
+                    // ),
                     const SizedBox(height: 25),
-                    Row(
-                      children: [
-                        const Expanded(
-                          child: Divider(
-                            color: ColorsManager.neutralGray,
-                            thickness: 1.0,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.symmetric(horizontal: 6.0),
-                          child: Text(
-                            'OR',
-                            style: Theme.of(context)
-                                .textTheme
-                                .bodyMedium
-                                ?.copyWith(fontWeight: FontWeight.bold),
-                          ),
-                        ),
-                        const Expanded(
-                          child: Divider(
-                            color: ColorsManager.neutralGray,
-                            thickness: 1.0,
-                          ),
-                        ),
-                      ],
+                    // Row(
+                    //   children: [
+                    //     const Expanded(
+                    //       child: Divider(
+                    //         color: ColorsManager.neutralGray,
+                    //         thickness: 1.0,
+                    //       ),
+                    //     ),
+                    //     Padding(
+                    //       padding: const EdgeInsets.symmetric(horizontal: 6.0),
+                    //       child: Text(
+                    //         'OR',
+                    //         style: Theme.of(context)
+                    //             .textTheme
+                    //             .bodyMedium
+                    //             ?.copyWith(fontWeight: FontWeight.bold),
+                    //       ),
+                    //     ),
+                    //     const Expanded(
+                    //       child: Divider(
+                    //         color: ColorsManager.neutralGray,
+                    //         thickness: 1.0,
+                    //       ),
+                    //     ),
+                    //   ],
+                    // ),
+                    const SizedBox(height: 25),
+                    SubSpacePartWidget(
+                      subspaces: subspaces,
+                      onPressed: () {
+                        isTagsAndSubspaceModelDisabled
+                            ? null
+                            : _showSubSpaceDialog(
+                                context,
+                                enteredName,
+                                [],
+                                false,
+                                widget.products,
+                                subspaces,
+                              );
+                      },
+                      isTagsAndSubspaceModelDisabled:
+                          isTagsAndSubspaceModelDisabled,
+                      screenWidth: screenWidth,
+                      editChipOnTap: () async {
+                        _showSubSpaceDialog(
+                          context,
+                          enteredName,
+                          [],
+                          true,
+                          widget.products,
+                          subspaces,
+                        );
+                      },
                     ),
-                    const SizedBox(height: 25),
-                    subspaces == null || subspaces!.isEmpty
-                        ? TextButton(
-                            style: TextButton.styleFrom(
-                              padding: EdgeInsets.zero,
-                              overlayColor: ColorsManager.transparentColor,
-                            ),
-                            onPressed: () async {
-                              isTagsAndSubspaceModelDisabled
-                                  ? null
-                                  : _showSubSpaceDialog(
-                                      context, enteredName, [], false, widget.products, subspaces);
-                            },
-                            child: ButtonContentWidget(
-                              icon: Icons.add,
-                              label: 'Create Sub Space',
-                              disabled: isTagsAndSubspaceModelDisabled,
-                            ),
-                          )
-                        : SizedBox(
-                            width: screenWidth * 0.25,
-                            child: Container(
-                              padding: const EdgeInsets.all(8.0),
-                              decoration: BoxDecoration(
-                                color: ColorsManager.textFieldGreyColor,
-                                borderRadius: BorderRadius.circular(15),
-                                border: Border.all(
-                                  color: ColorsManager.textFieldGreyColor,
-                                  width: 3.0, // Border width
-                                ),
-                              ),
-                              child: Wrap(
-                                spacing: 8.0,
-                                runSpacing: 8.0,
-                                children: [
-                                  if (subspaces != null)
-                                    ...subspaces!.map((subspace) {
-                                      return Column(
-                                        crossAxisAlignment: CrossAxisAlignment.start,
-                                        children: [
-                                          SubspaceNameDisplayWidget(
-                                            text: subspace.subspaceName,
-                                            validateName: (updatedName) {
-                                              bool nameExists = subspaces!.any((s) {
-                                                bool isSameId = s.internalId == subspace.internalId;
-                                                bool isSameName =
-                                                    s.subspaceName.trim().toLowerCase() ==
-                                                        updatedName.trim().toLowerCase();
-
-                                                return !isSameId && isSameName;
-                                              });
-
-                                              return !nameExists;
-                                            },
-                                            onNameChanged: (updatedName) {
-                                              setState(() {
-                                                subspace.subspaceName = updatedName;
-                                              });
-                                            },
-                                          ),
-                                        ],
-                                      );
-                                    }),
-                                  EditChip(
-                                    onTap: () async {
-                                      _showSubSpaceDialog(context, enteredName, [], true,
-                                          widget.products, subspaces);
-                                    },
-                                  )
-                                ],
-                              ),
-                            ),
-                          ),
                     const SizedBox(height: 10),
-                    (tags?.isNotEmpty == true ||
-                            subspaces?.any((subspace) => subspace.tags?.isNotEmpty == true) == true)
-                        ? SizedBox(
-                            width: screenWidth * 0.25,
-                            child: Container(
-                              padding: const EdgeInsets.all(8.0),
-                              decoration: BoxDecoration(
-                                color: ColorsManager.textFieldGreyColor,
-                                borderRadius: BorderRadius.circular(15),
-                                border: Border.all(
-                                  color: ColorsManager.textFieldGreyColor,
-                                  width: 3.0, // Border width
-                                ),
-                              ),
-                              child: Wrap(
-                                spacing: 8.0,
-                                runSpacing: 8.0,
-                                children: [
-                                  // Combine tags from spaceModel and subspaces
-                                  ...TagHelper.groupTags([
-                                    ...?tags,
-                                    ...?subspaces?.expand((subspace) => subspace.tags ?? [])
-                                  ]).entries.map(
-                                        (entry) => Chip(
-                                          avatar: SizedBox(
-                                            width: 24,
-                                            height: 24,
-                                            child: SvgPicture.asset(
-                                              entry.key.icon ?? 'assets/icons/gateway.svg',
-                                              fit: BoxFit.contain,
-                                            ),
-                                          ),
-                                          label: Text(
-                                            'x${entry.value}', // Show count
-                                            style: Theme.of(context)
-                                                .textTheme
-                                                .bodySmall
-                                                ?.copyWith(color: ColorsManager.spaceColor),
-                                          ),
-                                          backgroundColor: ColorsManager.whiteColors,
-                                          shape: RoundedRectangleBorder(
-                                            borderRadius: BorderRadius.circular(16),
-                                            side: const BorderSide(
-                                              color: ColorsManager.spaceColor,
-                                            ),
-                                          ),
-                                        ),
-                                      ),
-
-                                  EditChip(onTap: () async {
-                                    await showDialog(
-                                      context: context,
-                                      builder: (context) => AssignTagDialog(
-                                        products: widget.products,
-                                        subspaces: subspaces,
-                                        allTags: widget.allTags,
-                                        addedProducts:
-                                            TagHelper.createInitialSelectedProductsForTags(
-                                                tags ?? [], subspaces),
-                                        title: 'Edit Device',
-                                        initialTags: TagHelper.generateInitialForTags(
-                                            spaceTags: tags, subspaces: subspaces),
-                                        spaceName: widget.name ?? '',
-                                        projectTags: widget.projectTags,
-                                        onSave: (updatedTags, updatedSubspaces) {
-                                          setState(() {
-                                            tags = updatedTags;
-                                            subspaces = updatedSubspaces;
-                                          });
-                                        },
-                                      ),
-                                    );
-                                  })
-                                ],
-                              ),
-                            ),
-                          )
-                        : TextButton(
-                            onPressed: () {
-                              isTagsAndSubspaceModelDisabled
-                                  ? null
-                                  : _showTagCreateDialog(
-                                      context,
-                                      enteredName,
-                                      widget.isEdit,
-                                      widget.products,
-                                    );
+                    DevicesPartWidget(
+                      tags: tags,
+                      subspaces: subspaces,
+                      screenWidth: screenWidth,
+                      isTagsAndSubspaceModelDisabled:
+                          isTagsAndSubspaceModelDisabled,
+                      onEditChip: () async {
+                        await showDialog(
+                          context: context,
+                          builder: (context) => AssignTagDialog(
+                            products: widget.products,
+                            subspaces: subspaces,
+                            allTags: widget.allTags,
+                            addedProducts:
+                                TagHelper.createInitialSelectedProductsForTags(
+                                    tags ?? [], subspaces),
+                            title: 'Edit Device',
+                            initialTags: TagHelper.generateInitialForTags(
+                                spaceTags: tags, subspaces: subspaces),
+                            spaceName: widget.name ?? '',
+                            projectTags: widget.projectTags,
+                            onSave: (updatedTags, updatedSubspaces) {
+                              setState(() {
+                                tags = updatedTags;
+                                subspaces = updatedSubspaces;
+                              });
                             },
-                            style: TextButton.styleFrom(
-                              padding: EdgeInsets.zero,
-                            ),
-                            child: ButtonContentWidget(
-                              icon: Icons.add,
-                              label: 'Add Devices',
-                              disabled: isTagsAndSubspaceModelDisabled,
-                            ))
+                          ),
+                        );
+                      },
+                      onTextButtonPressed: () {
+                        isTagsAndSubspaceModelDisabled
+                            ? null
+                            : _showTagCreateDialog(
+                                context,
+                                enteredName,
+                                widget.isEdit,
+                                widget.products,
+                              );
+                      },
+                    )
                   ],
                 ),
               ),
@@ -529,17 +298,32 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                   } else if (isNameFieldExist) {
                     return;
                   } else {
-                    String newName = enteredName.isNotEmpty ? enteredName : (widget.name ?? '');
+                    String newName = enteredName.isNotEmpty
+                        ? enteredName
+                        : (widget.name ?? '');
                     if (newName.isNotEmpty) {
-                      widget.onCreateSpace(newName, selectedIcon, selectedProducts,
-                          selectedSpaceModel, subspaces, tags);
+                      if (tags != null && tags!.isNotEmpty) {
+                        if (tags!.any(
+                          (tag) => tag.uuid == null || tag.uuid!.isEmpty,
+                        )) {
+                          return;
+                        }
+                      }
+                      widget.onCreateSpace(
+                          newName,
+                          selectedIcon,
+                          selectedProducts,
+                          selectedSpaceModel,
+                          subspaces,
+                          tags);
                       Navigator.of(context).pop();
                     }
                   }
                 },
                 borderRadius: 10,
-                backgroundColor:
-                    isOkButtonEnabled ? ColorsManager.secondaryColor : ColorsManager.grayColor,
+                backgroundColor: isOkButtonEnabled
+                    ? ColorsManager.secondaryColor
+                    : ColorsManager.grayColor,
                 foregroundColor: ColorsManager.whiteColors,
                 child: const Text('OK'),
               ),
@@ -550,6 +334,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
     );
   }
 
+//dialooogggs
   void _showIconSelectionDialog() {
     showDialog(
       context: context,
@@ -586,26 +371,50 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
     );
   }
 
-  void _showSubSpaceDialog(BuildContext context, String name, final List<Tag>? spaceTags,
-      bool isEdit, List<ProductModel>? products, final List<SubspaceModel>? existingSubSpaces) {
+  void _showSubSpaceDialog(
+    BuildContext context,
+    String name,
+    final List<Tag>? spaceTags,
+    bool isEdit,
+    List<ProductModel>? products,
+    final List<SubspaceModel>? existingSubSpaces,
+  ) {
     showDialog(
       context: context,
       builder: (BuildContext context) {
         return CreateSubSpaceDialog(
             spaceName: name,
-            dialogTitle: isEdit ? 'Edit Sub-space' : 'Create Sub-space',
+            dialogTitle: isEdit ? 'Edit Sub-spaces' : 'Create Sub-spaces',
             products: products,
             existingSubSpaces: existingSubSpaces,
-            onSave: (slectedSubspaces) {
+            onSave: (slectedSubspaces, updatedSubSpaces) {
               final List<Tag> tagsToAppendToSpace = [];
 
-              if (slectedSubspaces != null) {
-                final updatedIds = slectedSubspaces.map((s) => s.internalId).toSet();
+              if (slectedSubspaces != null && slectedSubspaces.isNotEmpty) {
+                final updatedIds =
+                    slectedSubspaces.map((s) => s.internalId).toSet();
                 if (existingSubSpaces != null) {
-                  final deletedSubspaces =
-                      existingSubSpaces.where((s) => !updatedIds.contains(s.internalId)).toList();
+                  final deletedSubspaces = existingSubSpaces
+                      .where((s) => !updatedIds.contains(s.internalId))
+                      .toList();
                   for (var s in deletedSubspaces) {
                     if (s.tags != null) {
+                      s.tags!.forEach(
+                        (tag) => tag.location = null,
+                      );
+                      tagsToAppendToSpace.addAll(s.tags!);
+                    }
+                  }
+                }
+              } else {
+                if (existingSubSpaces != null) {
+                  final deletedSubspaces = existingSubSpaces;
+
+                  for (var s in deletedSubspaces) {
+                    if (s.tags != null) {
+                      s.tags!.forEach(
+                        (tag) => tag.location = null,
+                      );
                       tagsToAppendToSpace.addAll(s.tags!);
                     }
                   }
@@ -623,15 +432,16 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
     );
   }
 
-  void _showTagCreateDialog(
-      BuildContext context, String name, bool isEdit, List<ProductModel>? products) {
+  void _showTagCreateDialog(BuildContext context, String name, bool isEdit,
+      List<ProductModel>? products) {
     isEdit
         ? showDialog(
             context: context,
             builder: (BuildContext context) {
               return AssignTagDialog(
                 title: 'Edit Device',
-                addedProducts: TagHelper.createInitialSelectedProductsForTags(tags, subspaces),
+                addedProducts: TagHelper.createInitialSelectedProductsForTags(
+                    tags, subspaces),
                 spaceName: name,
                 products: products,
                 subspaces: subspaces,
@@ -646,7 +456,8 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                       if (subspaces != null) {
                         for (final subspace in subspaces!) {
                           for (final selectedSubspace in selectedSubspaces) {
-                            if (subspace.subspaceName == selectedSubspace.subspaceName) {
+                            if (subspace.subspaceName ==
+                                selectedSubspace.subspaceName) {
                               subspace.tags = selectedSubspace.tags;
                             }
                           }
@@ -670,7 +481,8 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                 allTags: widget.allTags,
                 projectTags: widget.projectTags,
                 initialSelectedProducts:
-                    TagHelper.createInitialSelectedProductsForTags(tags, subspaces),
+                    TagHelper.createInitialSelectedProductsForTags(
+                        tags, subspaces),
                 onSave: (selectedSpaceTags, selectedSubspaces) {
                   setState(() {
                     tags = selectedSpaceTags;
@@ -680,7 +492,8 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                       if (subspaces != null) {
                         for (final subspace in subspaces!) {
                           for (final selectedSubspace in selectedSubspaces) {
-                            if (subspace.subspaceName == selectedSubspace.subspaceName) {
+                            if (subspace.subspaceName ==
+                                selectedSubspace.subspaceName) {
                               subspace.tags = selectedSubspace.tags;
                             }
                           }

lib/pages/spaces_management/all_spaces/widgets/plus_button_widget.dart

@@ -5,7 +5,7 @@ class PlusButtonWidget extends StatelessWidget {
   final int index;
   final String direction;
   final Offset offset;
-  final Function(int index, Offset newPosition, String direction) onButtonTap;
+  final Function(int index, Offset newPosition) onButtonTap;
 
   const PlusButtonWidget({
     super.key,
@@ -17,35 +17,21 @@ class PlusButtonWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Positioned(
-      left: offset.dx,
-      top: offset.dy,
-      child: GestureDetector(
-        onTap: () {
-          Offset newPosition;
-          switch (direction) {
-            case 'left':
-              newPosition = const Offset(-200, 0);
-              break;
-            case 'right':
-              newPosition = const Offset(200, 0);
-              break;
-            case 'down':
-              newPosition = const Offset(0, 150);
-              break;
-            default:
-              newPosition = Offset.zero;
-          }
-          onButtonTap(index, newPosition, direction);
-        },
-        child: Container(
-          width: 30,
-          height: 30,
-          decoration: const BoxDecoration(
-            color: ColorsManager.spaceColor,
-            shape: BoxShape.circle,
-          ),
-          child: const Icon(Icons.add, color: ColorsManager.whiteColors, size: 20),
+    return GestureDetector(
+      onTap: () {
+        onButtonTap(index, const Offset(0, 150));
+      },
+      child: Container(
+        width: 30,
+        height: 30,
+        decoration: const BoxDecoration(
+          color: ColorsManager.spaceColor,
+          shape: BoxShape.circle,
+        ),
+        child: const Icon(
+          Icons.add,
+          color: ColorsManager.whiteColors,
+          size: 20,
         ),
       ),
     );

lib/pages/spaces_management/all_spaces/widgets/space_card_widget.dart

@@ -7,7 +7,7 @@ class SpaceCardWidget extends StatelessWidget {
   final Offset position;
   final bool isHovered;
   final Function(int index, bool isHovered) onHoverChanged;
-  final Function(int index, Offset newPosition, String direction) onButtonTap;
+  final Function(int index, Offset newPosition) onButtonTap;
   final Widget Function(int index) buildSpaceContainer;
   final ValueChanged<Offset> onPositionChanged;
 
@@ -25,35 +25,34 @@ class SpaceCardWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      behavior: HitTestBehavior.opaque,
-      onPanUpdate: (details) {
-        // Call the provided callback to update the position
-        final newPosition = position + details.delta;
-        onPositionChanged(newPosition);
-      },
-      child: MouseRegion(
-        onEnter: (_) {
-          // Call the provided callback to handle hover state
-          onHoverChanged(index, true);
-        },
-        onExit: (_) {
-          // Call the provided callback to handle hover state
-          onHoverChanged(index, false);
-        },
+    return MouseRegion(
+      onEnter: (_) => onHoverChanged(index, true),
+      onExit: (_) => onHoverChanged(index, false),
+      child: SizedBox(
+        width: 140, // Make sure this covers both card and plus button
+        height: 90,
         child: Stack(
-          clipBehavior: Clip
-              .none, // Allow hovering elements to be displayed outside the boundary
+          clipBehavior: Clip.none,
           children: [
-            buildSpaceContainer(index), // Build the space container
-            if (isHovered) ...[
-              PlusButtonWidget(
-                index: index,
-                direction: 'down',
-                offset: const Offset(63, 50),
-                onButtonTap: onButtonTap,
+            // Main card
+            Container(
+              width: 140,
+              height: 80,
+              alignment: Alignment.center,
+              color: Colors.transparent,
+              child: buildSpaceContainer(index),
+            ),
+            // Plus button (NO inner Positioned!)
+            if (isHovered)
+              Align(
+                alignment: Alignment.bottomCenter,
+                child: PlusButtonWidget(
+                  index: index,
+                  direction: 'down',
+                  offset: Offset.zero,
+                  onButtonTap: onButtonTap,
+                ),
               ),
-            ],
           ],
         ),
       ),

lib/pages/spaces_management/assign_tag/bloc/assign_tag_bloc.dart

@@ -13,7 +13,8 @@ class AssignTagBloc extends Bloc<AssignTagEvent, AssignTagState> {
       final existingTagCounts = <String, int>{};
       for (var tag in initialTags) {
         if (tag.product != null) {
-          existingTagCounts[tag.product!.uuid] = (existingTagCounts[tag.product!.uuid] ?? 0) + 1;
+          existingTagCounts[tag.product!.uuid] =
+              (existingTagCounts[tag.product!.uuid] ?? 0) + 1;
         }
       }
 
@@ -22,14 +23,17 @@ class AssignTagBloc extends Bloc<AssignTagEvent, AssignTagState> {
       for (var selectedProduct in event.addedProducts) {
         final existingCount = existingTagCounts[selectedProduct.productId] ?? 0;
 
-        if (selectedProduct.count == 0 || selectedProduct.count <= existingCount) {
-          tags.addAll(initialTags.where((tag) => tag.product?.uuid == selectedProduct.productId));
+        if (selectedProduct.count == 0 ||
+            selectedProduct.count <= existingCount) {
+          tags.addAll(initialTags
+              .where((tag) => tag.product?.uuid == selectedProduct.productId));
           continue;
         }
 
         final missingCount = selectedProduct.count - existingCount;
 
-        tags.addAll(initialTags.where((tag) => tag.product?.uuid == selectedProduct.productId));
+        tags.addAll(initialTags
+            .where((tag) => tag.product?.uuid == selectedProduct.productId));
 
         if (missingCount > 0) {
           tags.addAll(List.generate(
@@ -85,7 +89,8 @@ class AssignTagBloc extends Bloc<AssignTagEvent, AssignTagState> {
         final tags = List<Tag>.from(currentState.tags);
 
         // Update the location
-        tags[event.index] = tags[event.index].copyWith(location: event.location);
+        tags[event.index] =
+            tags[event.index].copyWith(location: event.location);
 
         final updatedTags = _calculateAvailableTags(projectTags, tags);
 
@@ -117,7 +122,8 @@ class AssignTagBloc extends Bloc<AssignTagEvent, AssignTagState> {
       final currentState = state;
 
       if (currentState is AssignTagLoaded && currentState.tags.isNotEmpty) {
-        final tags = List<Tag>.from(currentState.tags)..remove(event.tagToDelete);
+        final tags = List<Tag>.from(currentState.tags)
+          ..remove(event.tagToDelete);
 
         // Recalculate available tags
         final updatedTags = _calculateAvailableTags(projectTags, tags);
@@ -141,8 +147,10 @@ class AssignTagBloc extends Bloc<AssignTagEvent, AssignTagState> {
 
   // Get validation error for duplicate tags
   String? _getValidationError(List<Tag> tags) {
-    final nonEmptyTags =
-        tags.map((tag) => tag.tag?.trim() ?? '').where((tag) => tag.isNotEmpty).toList();
+    final nonEmptyTags = tags
+        .map((tag) => tag.tag?.trim() ?? '')
+        .where((tag) => tag.isNotEmpty)
+        .toList();
 
     final duplicateTags = nonEmptyTags
         .fold<Map<String, int>>({}, (map, tag) {
@@ -168,9 +176,11 @@ class AssignTagBloc extends Bloc<AssignTagEvent, AssignTagState> {
         .toSet();
 
     final availableTags = allTags
-        .where((tag) => tag.tag != null && !selectedTagSet.contains(tag.tag!.trim()))
+        .where((tag) =>
+            tag.tag != null && !selectedTagSet.contains(tag.tag!.trim()))
         .toList();
 
-    return availableTags;
+    return projectTags;
+    // availableTags;
   }
 }

lib/pages/spaces_management/assign_tag/views/assign_tag_dialog.dart

@@ -1,10 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/common/dialog_dropdown.dart';
-import 'package:syncrow_web/common/tag_dialog_textfield_dropdown.dart';
-import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
-import 'package:syncrow_web/pages/common/buttons/default_button.dart';
-import 'package:syncrow_web/pages/spaces_management/add_device_type/views/add_device_type_widget.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/selected_product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/subspace_model.dart';
@@ -12,9 +7,10 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
 import 'package:syncrow_web/pages/spaces_management/assign_tag/bloc/assign_tag_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/assign_tag/bloc/assign_tag_event.dart';
 import 'package:syncrow_web/pages/spaces_management/assign_tag/bloc/assign_tag_state.dart';
-import 'package:syncrow_web/pages/spaces_management/helper/tag_helper.dart';
+import 'package:syncrow_web/pages/spaces_management/assign_tag_models/views/widgets/assign_tags_tables_widget.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:uuid/uuid.dart';
+
+import 'widgets/save_add_device_row_widget.dart';
 
 class AssignTagDialog extends StatelessWidget {
   final List<ProductModel>? products;
@@ -29,7 +25,7 @@ class AssignTagDialog extends StatelessWidget {
   final List<Tag> projectTags;
 
   const AssignTagDialog(
-      {Key? key,
+      {super.key,
       required this.products,
       required this.subspaces,
       required this.addedProducts,
@@ -39,13 +35,14 @@ class AssignTagDialog extends StatelessWidget {
       required this.spaceName,
       required this.title,
       this.onSave,
-      required this.projectTags})
-      : super(key: key);
+      required this.projectTags});
 
   @override
   Widget build(BuildContext context) {
-    final List<String> locations =
-        (subspaces ?? []).map((subspace) => subspace.subspaceName).toList()..add('Main Space');
+    final List<String> locations = (subspaces ?? [])
+        .map((subspace) => subspace.subspaceName)
+        .toList()
+      ..add('Main Space');
 
     return BlocProvider(
       create: (_) => AssignTagBloc(projectTags)
@@ -67,131 +64,31 @@ class AssignTagDialog extends StatelessWidget {
               content: SingleChildScrollView(
                 child: Column(
                   children: [
-                    ClipRRect(
-                      borderRadius: BorderRadius.circular(20),
-                      child: DataTable(
-                        headingRowColor: WidgetStateProperty.all(ColorsManager.dataHeaderGrey),
-                        key: ValueKey(state.tags.length),
-                        border: TableBorder.all(
-                          color: ColorsManager.dataHeaderGrey,
-                          width: 1,
-                          borderRadius: BorderRadius.circular(20),
-                        ),
-                        columns: [
-                          DataColumn(
-                              label: Text('#', style: Theme.of(context).textTheme.bodyMedium)),
-                          DataColumn(
-                              label: Text('Device', style: Theme.of(context).textTheme.bodyMedium)),
-                          DataColumn(
-                              numeric: false,
-                              label: Text('Tag', style: Theme.of(context).textTheme.bodyMedium)),
-                          DataColumn(
-                              label:
-                                  Text('Location', style: Theme.of(context).textTheme.bodyMedium)),
-                        ],
-                        rows: state.tags.isEmpty
-                            ? [
-                                DataRow(cells: [
-                                  DataCell(
-                                    Center(
-                                      child: Text('No Data Available',
-                                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                                                color: ColorsManager.lightGrayColor,
-                                              )),
-                                    ),
-                                  ),
-                                  const DataCell(SizedBox()),
-                                  const DataCell(SizedBox()),
-                                  const DataCell(SizedBox()),
-                                ])
-                              ]
-                            : List.generate(state.tags.length, (index) {
-                                final tag = state.tags[index];
-                                final controller = controllers[index];
+                    AssignTagsTable(
+                      controllers: controllers,
+                      locations: locations,
+                      tags: state.tags,
+                      updatedTags: state.updatedTags,
+                      onDeleteDevice: ({required index, required tag}) {
+                        context
+                            .read<AssignTagBloc>()
+                            .add(DeleteTag(tagToDelete: tag, tags: state.tags));
 
-                                return DataRow(
-                                  cells: [
-                                    DataCell(Text((index + 1).toString())),
-                                    DataCell(
-                                      Row(
-                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                                        children: [
-                                          Expanded(
-                                              child: Text(
-                                            tag.product?.name ?? 'Unknown',
-                                            overflow: TextOverflow.ellipsis,
-                                          )),
-                                          const SizedBox(width: 10),
-                                          Container(
-                                            width: 20.0,
-                                            height: 20.0,
-                                            decoration: BoxDecoration(
-                                              shape: BoxShape.circle,
-                                              border: Border.all(
-                                                color: ColorsManager.lightGrayColor,
-                                                width: 1.0,
-                                              ),
-                                            ),
-                                            child: IconButton(
-                                              icon: const Icon(
-                                                Icons.close,
-                                                color: ColorsManager.lightGreyColor,
-                                                size: 16,
-                                              ),
-                                              onPressed: () {
-                                                context.read<AssignTagBloc>().add(
-                                                    DeleteTag(tagToDelete: tag, tags: state.tags));
-
-                                                controllers.removeAt(index);
-                                              },
-                                              tooltip: 'Delete Tag',
-                                              padding: EdgeInsets.zero,
-                                              constraints: const BoxConstraints(),
-                                            ),
-                                          ),
-                                        ],
-                                      ),
-                                    ),
-                                    DataCell(
-                                      Container(
-                                        alignment:
-                                            Alignment.centerLeft, // Align cell content to the left
-                                        child: SizedBox(
-                                          width: double.infinity,
-                                          child: TagDialogTextfieldDropdown(
-                                            key: ValueKey('dropdown_${const Uuid().v4()}_$index'),
-                                            items: state.updatedTags,
-                                            product: tag.product?.uuid ?? 'Unknown',
-                                            initialValue: tag,
-                                            onSelected: (value) {
-                                              controller.text = value.tag ?? '';
-                                              context.read<AssignTagBloc>().add(UpdateTagEvent(
-                                                    index: index,
-                                                    tag: value,
-                                                  ));
-                                            },
-                                          ),
-                                        ),
-                                      ),
-                                    ),
-                                    DataCell(
-                                      SizedBox(
-                                          width: double.infinity,
-                                          child: DialogDropdown(
-                                            items: locations,
-                                            selectedValue: tag.location ?? 'Main Space',
-                                            onSelected: (value) {
-                                              context.read<AssignTagBloc>().add(UpdateLocation(
-                                                    index: index,
-                                                    location: value,
-                                                  ));
-                                            },
-                                          )),
-                                    ),
-                                  ],
-                                );
-                              }),
-                      ),
+                        controllers.removeAt(index);
+                      },
+                      onTagDropDownSelected: ({required index, required tag}) {
+                        context.read<AssignTagBloc>().add(UpdateTagEvent(
+                              index: index,
+                              tag: tag,
+                            ));
+                      },
+                      onLocationDropDownSelected: (
+                          {required index, required location}) {
+                        context.read<AssignTagBloc>().add(UpdateLocation(
+                              index: index,
+                              location: location,
+                            ));
+                      },
                     ),
                     if (state.errorMessage != null)
                       Text(state.errorMessage!,
@@ -203,69 +100,15 @@ class AssignTagDialog extends StatelessWidget {
                 ),
               ),
               actions: [
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceAround,
-                  children: [
-                    const SizedBox(width: 10),
-                    Expanded(
-                      child: Builder(
-                        builder: (buttonContext) => CancelButton(
-                          label: 'Add New Device',
-                          onPressed: () async {
-                            final updatedTags = List<Tag>.from(state.tags);
-                            final result = TagHelper.processTags(updatedTags, subspaces);
-
-                            final processedTags = result['updatedTags'] as List<Tag>;
-                            final processedSubspaces =
-                                List<SubspaceModel>.from(result['subspaces'] as List<dynamic>);
-
-                            Navigator.of(context).pop();
-
-                            await showDialog(
-                              context: context,
-                              builder: (context) => AddDeviceTypeWidget(
-                                products: products,
-                                subspaces: processedSubspaces,
-                                projectTags: projectTags,
-                                initialSelectedProducts:
-                                    TagHelper.createInitialSelectedProductsForTags(
-                                        processedTags, processedSubspaces),
-                                spaceName: spaceName,
-                                spaceTags: processedTags,
-                                isCreate: false,
-                                onSave: onSave,
-                                allTags: allTags,
-                              ),
-                            );
-                          },
-                        ),
-                      ),
-                    ),
-                    const SizedBox(width: 10),
-                    Expanded(
-                      child: DefaultButton(
-                        borderRadius: 10,
-                        backgroundColor: ColorsManager.secondaryColor,
-                        foregroundColor: state.isSaveEnabled
-                            ? ColorsManager.whiteColors
-                            : ColorsManager.whiteColorsWithOpacity,
-                        onPressed: state.isSaveEnabled
-                            ? () async {
-                                final updatedTags = List<Tag>.from(state.tags);
-                                final result = TagHelper.processTags(updatedTags, subspaces);
-
-                                final processedTags = result['updatedTags'] as List<Tag>;
-                                final processedSubspaces =
-                                    List<SubspaceModel>.from(result['subspaces'] as List<dynamic>);
-                                onSave?.call(processedTags, processedSubspaces);
-                                Navigator.of(context).pop();
-                              }
-                            : null,
-                        child: const Text('Save'),
-                      ),
-                    ),
-                    const SizedBox(width: 10),
-                  ],
+                SaveAddDeviceRowWidget(
+                  subspaces: subspaces,
+                  products: products,
+                  projectTags: projectTags,
+                  spaceName: spaceName,
+                  onSave: onSave,
+                  allTags: allTags,
+                  tags: state.tags,
+                  isSaveEnabled: state.isSaveEnabled,
                 ),
               ],
             );

lib/pages/spaces_management/assign_tag/views/widgets/save_add_device_row_widget.dart

@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/subspace_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
+import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+import '../../../add_device_type/views/add_device_type_widget.dart';
+import '../../../helper/tag_helper.dart';
+
+class SaveAddDeviceRowWidget extends StatelessWidget {
+  const SaveAddDeviceRowWidget({
+    super.key,
+    required this.subspaces,
+    required this.products,
+    required this.projectTags,
+    required this.spaceName,
+    required this.onSave,
+    required this.allTags,
+    required this.tags,
+    required this.isSaveEnabled,
+  });
+  final List<Tag> tags;
+  final List<SubspaceModel>? subspaces;
+  final List<ProductModel>? products;
+  final List<Tag> projectTags;
+  final String spaceName;
+  final Function(List<Tag> p1, List<SubspaceModel>? p2)? onSave;
+  final List<String>? allTags;
+  final bool isSaveEnabled;
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceAround,
+      children: [
+        const SizedBox(width: 10),
+        Expanded(
+          child: Builder(
+            builder: (buttonContext) => CancelButton(
+              label: 'Add New Device',
+              onPressed: () async {
+                final updatedTags = List<Tag>.from(tags);
+                final result = TagHelper.processTags(updatedTags, subspaces);
+
+                final processedTags = result['updatedTags'] as List<Tag>;
+                final processedSubspaces = List<SubspaceModel>.from(
+                    result['subspaces'] as List<dynamic>);
+
+                Navigator.of(context).pop();
+
+                await showDialog(
+                  context: context,
+                  builder: (context) => AddDeviceTypeWidget(
+                    products: products,
+                    subspaces: processedSubspaces,
+                    projectTags: projectTags,
+                    initialSelectedProducts:
+                        TagHelper.createInitialSelectedProductsForTags(
+                            processedTags, processedSubspaces),
+                    spaceName: spaceName,
+                    spaceTags: processedTags,
+                    isCreate: false,
+                    onSave: onSave,
+                    allTags: allTags,
+                  ),
+                );
+              },
+            ),
+          ),
+        ),
+        const SizedBox(width: 10),
+        Expanded(
+          child: DefaultButton(
+            borderRadius: 10,
+            backgroundColor: ColorsManager.secondaryColor,
+            foregroundColor: isSaveEnabled
+                ? ColorsManager.whiteColors
+                : ColorsManager.whiteColorsWithOpacity,
+            onPressed: isSaveEnabled
+                ? () async {
+                    final updatedTags = List<Tag>.from(tags);
+                    final result =
+                        TagHelper.processTags(updatedTags, subspaces);
+
+                    final processedTags = result['updatedTags'] as List<Tag>;
+                    final processedSubspaces = List<SubspaceModel>.from(
+                        result['subspaces'] as List<dynamic>);
+                    onSave?.call(processedTags, processedSubspaces);
+                    Navigator.of(context).pop();
+                  }
+                : null,
+            child: const Text('Save'),
+          ),
+        ),
+        const SizedBox(width: 10),
+      ],
+    );
+  }
+}

lib/pages/spaces_management/assign_tag_models/views/assign_tag_models_dialog.dart

@@ -1,9 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/common/dialog_dropdown.dart';
-import 'package:syncrow_web/common/tag_dialog_textfield_dropdown.dart';
-import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
-import 'package:syncrow_web/pages/common/buttons/default_button.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/selected_product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
@@ -12,11 +8,10 @@ import 'package:syncrow_web/pages/spaces_management/assign_tag_models/bloc/assig
 import 'package:syncrow_web/pages/spaces_management/assign_tag_models/bloc/assign_tag_model_state.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/space_template_model.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
-import 'package:syncrow_web/pages/spaces_management/space_model/widgets/dialog/create_space_model_dialog.dart';
-import 'package:syncrow_web/pages/spaces_management/tag_model/views/add_device_type_model_widget.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/pages/spaces_management/helper/tag_helper.dart';
-import 'package:uuid/uuid.dart';
+
+import 'widgets/RowOfCancelSaveWidget.dart';
+import 'widgets/assign_tags_tables_widget.dart';
 
 class AssignTagModelsDialog extends StatelessWidget {
   final List<ProductModel>? products;
@@ -53,8 +48,10 @@ class AssignTagModelsDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final List<String> locations =
-        (subspaces ?? []).map((subspace) => subspace.subspaceName).toList()..add('Main Space');
+    final List<String> locations = (subspaces ?? [])
+        .map((subspace) => subspace.subspaceName)
+        .toList()
+      ..add('Main Space');
 
     return BlocProvider(
         create: (_) => AssignTagModelBloc(projectTags)
@@ -78,137 +75,38 @@ class AssignTagModelsDialog extends StatelessWidget {
                   content: SingleChildScrollView(
                     child: Column(
                       children: [
-                        ClipRRect(
-                          borderRadius: BorderRadius.circular(20),
-                          child: DataTable(
-                            headingRowColor: WidgetStateProperty.all(ColorsManager.dataHeaderGrey),
-                            key: ValueKey(state.tags.length),
-                            border: TableBorder.all(
-                              color: ColorsManager.dataHeaderGrey,
-                              width: 1,
-                              borderRadius: BorderRadius.circular(20),
-                            ),
-                            columns: [
-                              DataColumn(
-                                  label: Text('#', style: Theme.of(context).textTheme.bodyMedium)),
-                              DataColumn(
-                                  label: Text('Device',
-                                      style: Theme.of(context).textTheme.bodyMedium)),
-                              DataColumn(
-                                  numeric: false,
-                                  label:
-                                      Text('Tag', style: Theme.of(context).textTheme.bodyMedium)),
-                              DataColumn(
-                                  label: Text('Location',
-                                      style: Theme.of(context).textTheme.bodyMedium)),
-                            ],
-                            rows: state.tags.isEmpty
-                                ? [
-                                    DataRow(cells: [
-                                      DataCell(
-                                        Center(
-                                          child: Text('No Devices Available',
-                                              style:
-                                                  Theme.of(context).textTheme.bodyMedium?.copyWith(
-                                                        color: ColorsManager.lightGrayColor,
-                                                      )),
-                                        ),
-                                      ),
-                                      const DataCell(SizedBox()),
-                                      const DataCell(SizedBox()),
-                                      const DataCell(SizedBox()),
-                                    ])
-                                  ]
-                                : List.generate(state.tags.length, (index) {
-                                    final tag = state.tags[index];
-                                    final controller = controllers[index];
-
-                                    return DataRow(
-                                      cells: [
-                                        DataCell(Text((index + 1).toString())),
-                                        DataCell(
-                                          Row(
-                                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                                            children: [
-                                              Expanded(
-                                                  child: Text(
-                                                tag.product?.name ?? 'Unknown',
-                                                overflow: TextOverflow.ellipsis,
-                                              )),
-                                              const SizedBox(width: 10),
-                                              Container(
-                                                width: 20.0,
-                                                height: 20.0,
-                                                decoration: BoxDecoration(
-                                                  shape: BoxShape.circle,
-                                                  border: Border.all(
-                                                    color: ColorsManager.lightGrayColor,
-                                                    width: 1.0,
-                                                  ),
-                                                ),
-                                                child: IconButton(
-                                                  icon: const Icon(
-                                                    Icons.close,
-                                                    color: ColorsManager.lightGreyColor,
-                                                    size: 16,
-                                                  ),
-                                                  onPressed: () {
-                                                    context.read<AssignTagModelBloc>().add(
-                                                        DeleteTagModel(
-                                                            tagToDelete: tag, tags: state.tags));
-                                                    controllers.removeAt(index);
-                                                  },
-                                                  tooltip: 'Delete Tag',
-                                                  padding: EdgeInsets.zero,
-                                                  constraints: const BoxConstraints(),
-                                                ),
-                                              ),
-                                            ],
-                                          ),
-                                        ),
-                                        DataCell(
-                                          Container(
-                                            alignment: Alignment
-                                                .centerLeft, // Align cell content to the left
-                                            child: SizedBox(
-                                              width: double.infinity,
-                                              child: TagDialogTextfieldDropdown(
-                                                key: ValueKey(
-                                                    'dropdown_${const Uuid().v4()}_$index'),
-                                                product: tag.product?.uuid ?? 'Unknown',
-                                                items: state.updatedTags,
-                                                initialValue: tag,
-                                                onSelected: (value) {
-                                                  controller.text = value.tag ?? '';
-                                                  context.read<AssignTagModelBloc>().add(UpdateTag(
-                                                        index: index,
-                                                        tag: value,
-                                                      ));
-                                                },
-                                              ),
-                                            ),
-                                          ),
-                                        ),
-                                        DataCell(
-                                          SizedBox(
-                                              width: double.infinity,
-                                              child: DialogDropdown(
-                                                items: locations,
-                                                selectedValue: tag.location ?? 'Main Space',
-                                                onSelected: (value) {
-                                                  context
-                                                      .read<AssignTagModelBloc>()
-                                                      .add(UpdateLocation(
-                                                        index: index,
-                                                        location: value,
-                                                      ));
-                                                },
-                                              )),
-                                        ),
-                                      ],
-                                    );
-                                  }),
-                          ),
+                        AssignTagsTable(
+                          controllers: controllers,
+                          locations: locations,
+                          tags: state.tags,
+                          updatedTags: state.updatedTags,
+                          onDeleteDevice: ({required index, required tag}) {
+                            context
+                                .read<AssignTagModelBloc>()
+                                .add(DeleteTagModel(
+                                  tagToDelete: tag,
+                                  tags: state.tags,
+                                ));
+                            controllers.removeAt(index);
+                          },
+                          onTagDropDownSelected: (
+                              {required index, required tag}) {
+                            context.read<AssignTagModelBloc>().add(
+                                  UpdateTag(
+                                    index: index,
+                                    tag: tag,
+                                  ),
+                                );
+                          },
+                          onLocationDropDownSelected: (
+                              {required index, required location}) {
+                            context.read<AssignTagModelBloc>().add(
+                                  UpdateLocation(
+                                    index: index,
+                                    location: location,
+                                  ),
+                                );
+                          },
                         ),
                         if (state.errorMessage != null)
                           Text(state.errorMessage!,
@@ -220,101 +118,16 @@ class AssignTagModelsDialog extends StatelessWidget {
                     ),
                   ),
                   actions: [
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceAround,
-                      children: [
-                        const SizedBox(width: 10),
-                        Expanded(
-                          child: Builder(
-                            builder: (buttonContext) => CancelButton(
-                              label: 'Add New Device',
-                              onPressed: () async {
-                                final updatedTags = List<Tag>.from(state.tags);
-                                final result =
-                                    TagHelper.updateSubspaceTagModels(updatedTags, subspaces);
-
-                                final processedTags = result['updatedTags'] as List<Tag>;
-                                final processedSubspaces = List<SubspaceTemplateModel>.from(
-                                    result['subspaces'] as List<dynamic>);
-
-                                if (context.mounted) {
-                                  Navigator.of(context).pop();
-
-                                  await showDialog<bool>(
-                                    barrierDismissible: false,
-                                    context: context,
-                                    builder: (dialogContext) => AddDeviceTypeModelWidget(
-                                        products: products,
-                                        subspaces: processedSubspaces,
-                                        isCreate: false,
-                                        initialSelectedProducts:
-                                            TagHelper.createInitialSelectedProducts(
-                                                processedTags, processedSubspaces),
-                                        allTags: allTags,
-                                        spaceName: spaceName,
-                                        otherSpaceModels: otherSpaceModels,
-                                        spaceTagModels: processedTags,
-                                        pageContext: pageContext,
-                                        projectTags: projectTags,
-                                        spaceModel: SpaceTemplateModel(
-                                            modelName: spaceName,
-                                            tags: updatedTags,
-                                            uuid: spaceModel?.uuid,
-                                            internalId: spaceModel?.internalId,
-                                            subspaceModels: processedSubspaces)),
-                                  );
-                                }
-                              },
-                            ),
-                          ),
-                        ),
-                        const SizedBox(width: 10),
-                        Expanded(
-                          child: DefaultButton(
-                            borderRadius: 10,
-                            backgroundColor: ColorsManager.secondaryColor,
-                            foregroundColor: state.isSaveEnabled
-                                ? ColorsManager.whiteColors
-                                : ColorsManager.whiteColorsWithOpacity,
-                            onPressed: state.isSaveEnabled
-                                ? () async {
-                                    final updatedTags = List<Tag>.from(state.tags);
-
-                                    final result =
-                                        TagHelper.updateSubspaceTagModels(updatedTags, subspaces);
-
-                                    final processedTags = result['updatedTags'] as List<Tag>;
-                                    final processedSubspaces = List<SubspaceTemplateModel>.from(
-                                        result['subspaces'] as List<dynamic>);
-
-                                    Navigator.of(context).popUntil((route) => route.isFirst);
-
-                                    await showDialog(
-                                      context: context,
-                                      builder: (BuildContext dialogContext) {
-                                        return CreateSpaceModelDialog(
-                                          products: products,
-                                          allSpaceModels: allSpaceModels,
-                                          allTags: allTags,
-                                          projectTags: projectTags,
-                                          pageContext: pageContext,
-                                          otherSpaceModels: otherSpaceModels,
-                                          spaceModel: SpaceTemplateModel(
-                                              modelName: spaceName,
-                                              tags: processedTags,
-                                              uuid: spaceModel?.uuid,
-                                              internalId: spaceModel?.internalId,
-                                              subspaceModels: processedSubspaces),
-                                        );
-                                      },
-                                    );
-                                  }
-                                : null,
-                            child: const Text('Save'),
-                          ),
-                        ),
-                        const SizedBox(width: 10),
-                      ],
+                    RowOfSaveCancelWidget(
+                      subspaces: subspaces,
+                      products: products,
+                      allTags: allTags,
+                      spaceName: spaceName,
+                      otherSpaceModels: otherSpaceModels,
+                      pageContext: pageContext,
+                      projectTags: projectTags,
+                      spaceModel: spaceModel,
+                      allSpaceModels: allSpaceModels,
                     ),
                   ],
                 );

lib/pages/spaces_management/assign_tag_models/views/widgets/RowOfCancelSaveWidget.dart

@@ -0,0 +1,152 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../../../../utils/color_manager.dart';
+import '../../../../common/buttons/cancel_button.dart';
+import '../../../../common/buttons/default_button.dart';
+import '../../../all_spaces/model/product_model.dart';
+import '../../../all_spaces/model/tag.dart';
+import '../../../helper/tag_helper.dart';
+import '../../../space_model/models/space_template_model.dart';
+import '../../../space_model/models/subspace_template_model.dart';
+import '../../../space_model/widgets/dialog/create_space_model_dialog.dart';
+import '../../../tag_model/views/add_device_type_model_widget.dart';
+import '../../bloc/assign_tag_model_bloc.dart';
+import '../../bloc/assign_tag_model_state.dart';
+
+class RowOfSaveCancelWidget extends StatelessWidget {
+  const RowOfSaveCancelWidget({
+    super.key,
+    required this.subspaces,
+    required this.products,
+    required this.allTags,
+    required this.spaceName,
+    required this.otherSpaceModels,
+    required this.pageContext,
+    required this.projectTags,
+    required this.spaceModel,
+    required this.allSpaceModels,
+  });
+
+  final List<SubspaceTemplateModel>? subspaces;
+  final List<ProductModel>? products;
+  final List<String>? allTags;
+  final String spaceName;
+  final List<String>? otherSpaceModels;
+  final BuildContext? pageContext;
+  final List<Tag> projectTags;
+  final SpaceTemplateModel? spaceModel;
+  final List<SpaceTemplateModel>? allSpaceModels;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<AssignTagModelBloc, AssignTagModelState>(
+      builder: (context, state) {
+        if (state is AssignTagModelLoaded) {
+          return Row(
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
+            children: [
+              const SizedBox(width: 10),
+              Expanded(
+                child: Builder(
+                  builder: (buttonContext) => CancelButton(
+                    label: 'Add New Device',
+                    onPressed: () async {
+                      final updatedTags = List<Tag>.from(state.tags);
+                      final result = TagHelper.updateSubspaceTagModels(
+                          updatedTags, subspaces);
+
+                      final processedTags = result['updatedTags'] as List<Tag>;
+                      final processedSubspaces =
+                          List<SubspaceTemplateModel>.from(
+                              result['subspaces'] as List<dynamic>);
+
+                      if (context.mounted) {
+                        Navigator.of(context).pop();
+
+                        await showDialog<bool>(
+                          barrierDismissible: false,
+                          context: context,
+                          builder: (dialogContext) => AddDeviceTypeModelWidget(
+                              products: products,
+                              subspaces: processedSubspaces,
+                              isCreate: false,
+                              initialSelectedProducts:
+                                  TagHelper.createInitialSelectedProducts(
+                                      processedTags, processedSubspaces),
+                              allTags: allTags,
+                              spaceName: spaceName,
+                              otherSpaceModels: otherSpaceModels,
+                              spaceTagModels: processedTags,
+                              pageContext: pageContext,
+                              projectTags: projectTags,
+                              spaceModel: SpaceTemplateModel(
+                                  modelName: spaceName,
+                                  tags: updatedTags,
+                                  uuid: spaceModel?.uuid,
+                                  internalId: spaceModel?.internalId,
+                                  subspaceModels: processedSubspaces)),
+                        );
+                      }
+                    },
+                  ),
+                ),
+              ),
+              const SizedBox(width: 10),
+              Expanded(
+                child: DefaultButton(
+                  borderRadius: 10,
+                  backgroundColor: ColorsManager.secondaryColor,
+                  foregroundColor: state.isSaveEnabled
+                      ? ColorsManager.whiteColors
+                      : ColorsManager.whiteColorsWithOpacity,
+                  onPressed: state.isSaveEnabled
+                      ? () async {
+                          final updatedTags = List<Tag>.from(state.tags);
+
+                          final result = TagHelper.updateSubspaceTagModels(
+                              updatedTags, subspaces);
+
+                          final processedTags =
+                              result['updatedTags'] as List<Tag>;
+                          final processedSubspaces =
+                              List<SubspaceTemplateModel>.from(
+                                  result['subspaces'] as List<dynamic>);
+
+                          Navigator.of(context)
+                              .popUntil((route) => route.isFirst);
+
+                          await showDialog(
+                            context: context,
+                            builder: (BuildContext dialogContext) {
+                              return CreateSpaceModelDialog(
+                                products: products,
+                                allSpaceModels: allSpaceModels,
+                                allTags: allTags,
+                                projectTags: projectTags,
+                                pageContext: pageContext,
+                                otherSpaceModels: otherSpaceModels,
+                                spaceModel: SpaceTemplateModel(
+                                    modelName: spaceName,
+                                    tags: processedTags,
+                                    uuid: spaceModel?.uuid,
+                                    internalId: spaceModel?.internalId,
+                                    subspaceModels: processedSubspaces),
+                              );
+                            },
+                          );
+                        }
+                      : null,
+                  child: const Text('Save'),
+                ),
+              ),
+              const SizedBox(width: 10),
+            ],
+          );
+        } else {
+          return const SizedBox();
+        }
+      },
+    );
+  }
+}

lib/pages/spaces_management/assign_tag_models/views/widgets/assign_tags_tables_widget.dart

@@ -0,0 +1,155 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
+import 'package:uuid/uuid.dart';
+
+import '../../../../../common/dialog_dropdown.dart';
+import '../../../../../common/tag_dialog_textfield_dropdown.dart';
+import '../../../../../utils/color_manager.dart';
+
+class AssignTagsTable extends StatelessWidget {
+  const AssignTagsTable({
+    super.key,
+    required this.controllers,
+    required this.locations,
+    required this.tags,
+    required this.updatedTags,
+    required this.onDeleteDevice,
+    required this.onLocationDropDownSelected,
+    required this.onTagDropDownSelected,
+  });
+  final void Function({required Tag tag, required int index})
+      onTagDropDownSelected;
+  final void Function({required String location, required int index})
+      onLocationDropDownSelected;
+  final void Function({required Tag tag, required int index}) onDeleteDevice;
+  final List<Tag> tags;
+  final List<Tag> updatedTags;
+  final List<TextEditingController> controllers;
+  final List<String> locations;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(20),
+      child: DataTable(
+        headingRowColor: WidgetStateProperty.all(ColorsManager.dataHeaderGrey),
+        key: ValueKey(tags.length),
+        border: TableBorder.all(
+          color: ColorsManager.dataHeaderGrey,
+          width: 1,
+          borderRadius: BorderRadius.circular(20),
+        ),
+        columns: [
+          DataColumn(
+              label: Text('#', style: Theme.of(context).textTheme.bodyMedium)),
+          DataColumn(
+              label: Text('Device',
+                  style: Theme.of(context).textTheme.bodyMedium)),
+          DataColumn(
+              numeric: false,
+              label:
+                  Text('Tag', style: Theme.of(context).textTheme.bodyMedium)),
+          DataColumn(
+              label: Text('Location',
+                  style: Theme.of(context).textTheme.bodyMedium)),
+        ],
+        rows: tags.isEmpty
+            ? [
+                DataRow(cells: [
+                  DataCell(
+                    Center(
+                      child: Text('No Devices Available',
+                          style:
+                              Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                    color: ColorsManager.lightGrayColor,
+                                  )),
+                    ),
+                  ),
+                  const DataCell(SizedBox()),
+                  const DataCell(SizedBox()),
+                  const DataCell(SizedBox()),
+                ])
+              ]
+            : List.generate(tags.length, (index) {
+                final tag = tags[index];
+                final controller = controllers[index];
+
+                return DataRow(
+                  cells: [
+                    DataCell(Text((index + 1).toString())),
+                    DataCell(
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Expanded(
+                              child: Text(
+                            tag.product?.name ?? 'Unknown',
+                            overflow: TextOverflow.ellipsis,
+                          )),
+                          const SizedBox(width: 10),
+                          Container(
+                            width: 20.0,
+                            height: 20.0,
+                            decoration: BoxDecoration(
+                              shape: BoxShape.circle,
+                              border: Border.all(
+                                color: ColorsManager.lightGrayColor,
+                                width: 1.0,
+                              ),
+                            ),
+                            child: IconButton(
+                              icon: const Icon(
+                                Icons.close,
+                                color: ColorsManager.lightGreyColor,
+                                size: 16,
+                              ),
+                              onPressed: () {
+                                onDeleteDevice(tag: tag, index: index);
+                              },
+                              tooltip: 'Delete Tag',
+                              padding: EdgeInsets.zero,
+                              constraints: const BoxConstraints(),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    DataCell(
+                      Container(
+                        alignment: Alignment
+                            .centerLeft, // Align cell content to the left
+                        child: SizedBox(
+                          width: double.infinity,
+                          child: TagDialogTextfieldDropdown(
+                            key: ValueKey(
+                                'dropdown_${const Uuid().v4()}_$index'),
+                            product: tag.product?.uuid ?? 'Unknown',
+                            items: updatedTags,
+                            initialValue: tag,
+                            onSelected: (value) {
+                              controller.text = value.tag ?? '';
+                              onTagDropDownSelected(tag: value, index: index);
+                            },
+                          ),
+                        ),
+                      ),
+                    ),
+                    DataCell(
+                      SizedBox(
+                          width: double.infinity,
+                          child: DialogDropdown(
+                            items: locations,
+                            selectedValue: tag.location ?? 'Main Space',
+                            onSelected: (value) {
+                              onLocationDropDownSelected(
+                                  location: value, index: index);
+                            },
+                          )),
+                    ),
+                  ],
+                );
+              }),
+      ),
+    );
+  }
+}

lib/pages/spaces_management/create_subspace/bloc/subspace_bloc.dart

@@ -77,7 +77,7 @@ class SubSpaceBloc extends Bloc<SubSpaceEvent, SubSpaceState> {
       emit(SubSpaceState(
         updatedSubSpaces,
         updatedSubspaceModels,
-        errorMessage,
+        errorMessage ,
         updatedDuplicates,
       ));
     });

lib/pages/spaces_management/create_subspace/views/create_subspace_model_dialog.dart

@@ -1,23 +1,23 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
-import 'package:syncrow_web/pages/common/buttons/default_button.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/subspace_model.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_event.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_state.dart';
-import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart';
-import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
+import 'widgets/ok_cancel_sub_space_widget.dart';
+import 'widgets/textfield_sub_space_dialog_widget.dart';
+
 class CreateSubSpaceDialog extends StatefulWidget {
   final String dialogTitle;
   final List<SubspaceModel>? existingSubSpaces;
   final String? spaceName;
   final List<ProductModel>? products;
-  final void Function(List<SubspaceModel>?)? onSave;
+  final void Function(
+      List<SubspaceModel>?, List<UpdateSubspaceModel> updatedSubSpaces)? onSave;
 
   const CreateSubSpaceDialog({
     required this.dialogTitle,
@@ -33,14 +33,7 @@ class CreateSubSpaceDialog extends StatefulWidget {
 }
 
 class _CreateSubSpaceDialogState extends State<CreateSubSpaceDialog> {
-  late final TextEditingController _subspaceNameController;
-
-  @override
-  void initState() {
-    _subspaceNameController = TextEditingController();
-    super.initState();
-  }
-
+  final TextEditingController _subspaceNameController = TextEditingController();
   @override
   void dispose() {
     _subspaceNameController.dispose();
@@ -79,83 +72,26 @@ class _CreateSubSpaceDialogState extends State<CreateSubSpaceDialog> {
                       color: ColorsManager.blackColor,
                     ),
                   ),
+                  Row(
+                    children: [
+                      Text(
+                        'press Enter to Save',
+                        style: context.textTheme.headlineLarge?.copyWith(
+                          fontWeight: FontWeight.w500,
+                          fontSize: 10,
+                          color: ColorsManager.grayColor,
+                        ),
+                      ),
+                      const SizedBox(
+                        width: 5,
+                      ),
+                      const Icon(Icons.save_as_sharp, size: 10),
+                    ],
+                  ),
                   const SizedBox(height: 16),
-                  Container(
-                    width: context.screenWidth * 0.35,
-                    padding: const EdgeInsets.symmetric(
-                      vertical: 10,
-                      horizontal: 16,
-                    ),
-                    decoration: BoxDecoration(
-                      color: ColorsManager.boxColor,
-                      borderRadius: BorderRadius.circular(10),
-                    ),
-                    child: Wrap(
-                      spacing: 8,
-                      runSpacing: 8,
-                      alignment: WrapAlignment.start,
-                      crossAxisAlignment: WrapCrossAlignment.center,
-                      children: [
-                        ...state.subSpaces.asMap().entries.map(
-                          (entry) {
-                            final index = entry.key;
-                            final subSpace = entry.value;
-
-                            final lowerName = subSpace.subspaceName.toLowerCase();
-
-                            final duplicateIndices = state.subSpaces
-                                .asMap()
-                                .entries
-                                .where((e) =>
-                                    e.value.subspaceName.toLowerCase() == lowerName)
-                                .map((e) => e.key)
-                                .toList();
-                            final isDuplicate = duplicateIndices.length > 1 &&
-                                duplicateIndices.indexOf(index) != 0;
-                            return SubspaceChip(
-                              subSpace: SubspaceTemplateModel(
-                                subspaceName: entry.value.subspaceName,
-                                disabled: entry.value.disabled,
-                              ),
-                              isDuplicate: isDuplicate,
-                              onDeleted: () => context.read<SubSpaceBloc>().add(
-                                    RemoveSubSpace(subSpace),
-                                  ),
-                            );
-                          },
-                        ),
-                        SizedBox(
-                          width: 200,
-                          child: TextField(
-                            controller: _subspaceNameController,
-                            decoration: InputDecoration(
-                              border: InputBorder.none,
-                              hintText: state.subSpaces.isEmpty
-                                  ? 'Please enter the name'
-                                  : null,
-                              hintStyle: context.textTheme.bodySmall?.copyWith(
-                                color: ColorsManager.lightGrayColor,
-                              ),
-                            ),
-                            onSubmitted: (value) {
-                              final trimmedValue = value.trim();
-                              if (trimmedValue.isNotEmpty) {
-                                context.read<SubSpaceBloc>().add(
-                                      AddSubSpace(
-                                        SubspaceModel(
-                                          subspaceName: trimmedValue,
-                                          disabled: false,
-                                        ),
-                                      ),
-                                    );
-                                _subspaceNameController.clear();
-                              }
-                            },
-                            style: context.textTheme.bodyMedium,
-                          ),
-                        ),
-                      ],
-                    ),
+                  TextFieldSubSpaceDialogWidget(
+                    subspaceNameController: _subspaceNameController,
+                    subSpaces: state.subSpaces,
                   ),
                   if (state.errorMessage.isNotEmpty)
                     Padding(
@@ -168,36 +104,10 @@ class _CreateSubSpaceDialogState extends State<CreateSubSpaceDialog> {
                       ),
                     ),
                   const SizedBox(height: 16),
-                  Row(
-                    children: [
-                      Expanded(
-                        child: CancelButton(
-                          label: 'Cancel',
-                          onPressed: () async {
-                            Navigator.of(context).pop();
-                          },
-                        ),
-                      ),
-                      const SizedBox(width: 10),
-                      Expanded(
-                        child: DefaultButton(
-                          onPressed: state.errorMessage.isEmpty
-                              ? () {
-                                  final subSpacesBloc = context.read<SubSpaceBloc>();
-                                  final subSpaces = subSpacesBloc.state.subSpaces;
-                                  widget.onSave?.call(subSpaces);
-                                  Navigator.of(context).pop();
-                                }
-                              : null,
-                          backgroundColor: ColorsManager.secondaryColor,
-                          borderRadius: 10,
-                          foregroundColor: state.errorMessage.isNotEmpty
-                              ? ColorsManager.whiteColorsWithOpacity
-                              : ColorsManager.whiteColors,
-                          child: const Text('OK'),
-                        ),
-                      ),
-                    ],
+                  OkCancelSubSpaceWidget(
+                    subspaceNameController: _subspaceNameController,
+                    errorMessage: state.errorMessage,
+                    onSave: widget.onSave,
                   ),
                 ],
               ),

lib/pages/spaces_management/create_subspace/views/widgets/ok_cancel_sub_space_widget.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/subspace_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+
+import '../../bloc/subspace_bloc.dart';
+import '../../bloc/subspace_event.dart';
+
+class OkCancelSubSpaceWidget extends StatelessWidget {
+  const OkCancelSubSpaceWidget({
+    super.key,
+    required this.subspaceNameController,
+    required this.onSave,
+    required this.errorMessage,
+  });
+
+  final TextEditingController subspaceNameController;
+  final void Function(
+      List<SubspaceModel>?, List<UpdateSubspaceModel> updatedSubSpaces)? onSave;
+  final String errorMessage;
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: CancelButton(
+            label: 'Cancel',
+            onPressed: () async {
+              Navigator.of(context).pop();
+            },
+          ),
+        ),
+        const SizedBox(width: 10),
+        Expanded(
+          child: DefaultButton(
+            onPressed: errorMessage.isEmpty
+                ? () async {
+                    final trimmedValue = subspaceNameController.text.trim();
+
+                    final subSpacesBloc = context.read<SubSpaceBloc>();
+                    if (trimmedValue.isNotEmpty) {
+                      subSpacesBloc.add(
+                        AddSubSpace(
+                          SubspaceModel(
+                            subspaceName: trimmedValue,
+                            disabled: false,
+                          ),
+                        ),
+                      );
+                      subspaceNameController.clear();
+                    }
+
+                    await Future.delayed(const Duration(milliseconds: 10));
+                    final subSpaces = subSpacesBloc.state.subSpaces;
+
+                    onSave?.call(
+                        subSpaces, subSpacesBloc.state.updatedSubSpaceModels);
+
+                    Navigator.of(context).pop();
+                  }
+                : null,
+            backgroundColor: ColorsManager.secondaryColor,
+            borderRadius: 10,
+            foregroundColor: errorMessage.isNotEmpty
+                ? ColorsManager.whiteColorsWithOpacity
+                : ColorsManager.whiteColors,
+            child: const Text('OK'),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/spaces_management/create_subspace/views/widgets/textfield_sub_space_dialog_widget.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+import '../../../../../utils/color_manager.dart';
+import '../../../all_spaces/model/subspace_model.dart';
+import '../../../create_subspace_model/widgets/subspace_chip.dart';
+import '../../../space_model/models/subspace_template_model.dart';
+import '../../bloc/subspace_bloc.dart';
+import '../../bloc/subspace_event.dart';
+
+class TextFieldSubSpaceDialogWidget extends StatelessWidget {
+  const TextFieldSubSpaceDialogWidget({
+    super.key,
+    required TextEditingController subspaceNameController,
+    required this.subSpaces,
+  }) : _subspaceNameController = subspaceNameController;
+
+  final TextEditingController _subspaceNameController;
+  final List<SubspaceModel> subSpaces;
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: context.screenWidth * 0.35,
+      padding: const EdgeInsets.symmetric(
+        vertical: 10,
+        horizontal: 16,
+      ),
+      decoration: BoxDecoration(
+        color: ColorsManager.boxColor,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: Wrap(
+        spacing: 8,
+        runSpacing: 8,
+        alignment: WrapAlignment.start,
+        crossAxisAlignment: WrapCrossAlignment.center,
+        children: [
+          ...subSpaces.asMap().entries.map(
+            (entry) {
+              final index = entry.key;
+              final subSpace = entry.value;
+
+              final lowerName = subSpace.subspaceName.toLowerCase();
+
+              final duplicateIndices = subSpaces
+                  .asMap()
+                  .entries
+                  .where((e) => e.value.subspaceName.toLowerCase() == lowerName)
+                  .map((e) => e.key)
+                  .toList();
+              final isDuplicate = duplicateIndices.length > 1 &&
+                  duplicateIndices.indexOf(index) != 0;
+              return SubspaceChip(
+                subSpace: SubspaceTemplateModel(
+                  subspaceName: entry.value.subspaceName,
+                  disabled: entry.value.disabled,
+                ),
+                isDuplicate: isDuplicate,
+                onDeleted: () => context.read<SubSpaceBloc>().add(
+                      RemoveSubSpace(subSpace),
+                    ),
+              );
+            },
+          ),
+          SizedBox(
+            width: 200,
+            child: TextField(
+              controller: _subspaceNameController,
+              decoration: InputDecoration(
+                border: InputBorder.none,
+                hintText: subSpaces.isEmpty ? 'Please enter the name' : null,
+                hintStyle: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.lightGrayColor,
+                ),
+              ),
+              onSubmitted: (value) {
+                final trimmedValue = value.trim();
+                if (trimmedValue.isNotEmpty) {
+                  context.read<SubSpaceBloc>().add(
+                        AddSubSpace(
+                          SubspaceModel(
+                            subspaceName: trimmedValue,
+                            disabled: false,
+                          ),
+                        ),
+                      );
+                  _subspaceNameController.clear();
+                }
+              },
+              style: context.textTheme.bodyMedium,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/spaces_management/structure_selector/view/center_body_widget.dart

@@ -14,11 +14,11 @@ class CenterBodyWidget extends StatelessWidget {
         if (state is InitialState) {
           context.read<CenterBodyBloc>().add(CommunityStructureSelectedEvent());
         }
-         if (state is CommunityStructureState) {
+        if (state is CommunityStructureState) {
           context.read<SpaceManagementBloc>().add(BlankStateEvent(context));
         }
 
-         if (state is SpaceModelState) {
+        if (state is SpaceModelState) {
           context.read<SpaceManagementBloc>().add(SpaceModelLoadEvent(context));
         }
 
@@ -31,15 +31,19 @@ class CenterBodyWidget extends StatelessWidget {
                 children: [
                   GestureDetector(
                     onTap: () {
-                      context.read<CenterBodyBloc>().add(CommunityStructureSelectedEvent());
+                      context
+                          .read<CenterBodyBloc>()
+                          .add(CommunityStructureSelectedEvent());
                     },
                     child: Text(
                       'Community Structure',
                       style: Theme.of(context).textTheme.bodyLarge!.copyWith(
-                            fontWeight: state is CommunityStructureState || state is CommunitySelectedState
+                            fontWeight: state is CommunityStructureState ||
+                                    state is CommunitySelectedState
                                 ? FontWeight.bold
                                 : FontWeight.normal,
-                            color: state is CommunityStructureState || state is CommunitySelectedState
+                            color: state is CommunityStructureState ||
+                                    state is CommunitySelectedState
                                 ? Theme.of(context).textTheme.bodyLarge!.color
                                 : Theme.of(context)
                                     .textTheme
@@ -50,26 +54,26 @@ class CenterBodyWidget extends StatelessWidget {
                     ),
                   ),
                   const SizedBox(width: 20),
-                  GestureDetector(
-                    onTap: () {
-                      context.read<CenterBodyBloc>().add(SpaceModelSelectedEvent());
-                    },
-                    child: Text(
-                      'Space Model',
-                      style: Theme.of(context).textTheme.bodyLarge!.copyWith(
-                            fontWeight: state is SpaceModelState
-                                ? FontWeight.bold
-                                : FontWeight.normal,
-                            color: state is SpaceModelState
-                                ? Theme.of(context).textTheme.bodyLarge!.color
-                                : Theme.of(context)
-                                    .textTheme
-                                    .bodyLarge!
-                                    .color!
-                                    .withOpacity(0.5),
-                          ),
-                    ),
-                  ),
+                  // GestureDetector(
+                  //   onTap: () {
+                  //     context.read<CenterBodyBloc>().add(SpaceModelSelectedEvent());
+                  //   },
+                  //   child: Text(
+                  //     'Space Model',
+                  //     style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                  //           fontWeight: state is SpaceModelState
+                  //               ? FontWeight.bold
+                  //               : FontWeight.normal,
+                  //           color: state is SpaceModelState
+                  //               ? Theme.of(context).textTheme.bodyLarge!.color
+                  //               : Theme.of(context)
+                  //                   .textTheme
+                  //                   .bodyLarge!
+                  //                   .color!
+                  //                   .withOpacity(0.5),
+                  //         ),
+                  //   ),
+                  // ),
                 ],
               ),
             ],

lib/pages/spaces_management/tag_model/bloc/add_device_model_bloc.dart

@@ -24,37 +24,22 @@ class AddDeviceTypeModelBloc
 
     if (currentState is AddDeviceModelLoaded) {
       final existingProduct = currentState.selectedProducts.firstWhere(
-        (p) => p.productId == event.productId,
-        orElse: () => SelectedProduct(
-          productId: event.productId,
-          count: 0,
-          productName: event.productName,
-          product: event.product,
-        ),
+        (p) => p.productId == event.selectedProduct.productId,
+        orElse: () => event.selectedProduct,
       );
 
       List<SelectedProduct> updatedProducts;
 
-      if (event.count > 0) {
+      if (event.selectedProduct.count > 0) {
         if (!currentState.selectedProducts.contains(existingProduct)) {
           updatedProducts = [
             ...currentState.selectedProducts,
-            SelectedProduct(
-              productId: event.productId,
-              count: event.count,
-              productName: event.productName,
-              product: event.product,
-            ),
+            event.selectedProduct,
           ];
         } else {
           updatedProducts = currentState.selectedProducts.map((p) {
-            if (p.productId == event.productId) {
-              return SelectedProduct(
-                productId: p.productId,
-                count: event.count,
-                productName: p.productName,
-                product: p.product,
-              );
+            if (p.productId == event.selectedProduct.productId) {
+              return event.selectedProduct;
             }
             return p;
           }).toList();
@@ -62,7 +47,7 @@ class AddDeviceTypeModelBloc
       } else {
         // Remove the product if the count is 0
         updatedProducts = currentState.selectedProducts
-            .where((p) => p.productId != event.productId)
+            .where((p) => p.productId != event.selectedProduct.productId)
             .toList();
       }
 

lib/pages/spaces_management/tag_model/bloc/add_device_type_model_event.dart

@@ -10,20 +10,15 @@ abstract class AddDeviceTypeModelEvent extends Equatable {
   List<Object> get props => [];
 }
 
-
 class UpdateProductCountEvent extends AddDeviceTypeModelEvent {
-  final String productId;
-  final int count;
-  final String productName;
-  final ProductModel product;
+  final SelectedProduct selectedProduct;
 
-  UpdateProductCountEvent({required this.productId, required this.count, required this.productName, required this.product});
+  UpdateProductCountEvent({required this.selectedProduct});
 
   @override
-  List<Object> get props => [productId, count];
+  List<Object> get props => [selectedProduct];
 }
 
-
 class InitializeDeviceTypeModel extends AddDeviceTypeModelEvent {
   final List<Tag> initialTags;
   final List<SelectedProduct> addedProducts;

lib/pages/spaces_management/tag_model/widgets/device_type_tile_widget.dart

@@ -54,10 +54,10 @@ class DeviceTypeTileWidget extends StatelessWidget {
               onCountChanged: (newCount) {
                 context.read<AddDeviceTypeModelBloc>().add(
                       UpdateProductCountEvent(
-                          productId: product.uuid,
-                          count: newCount,
-                          productName: product.catName,
-                          product: product),
+                        selectedProduct: product.toSelectedProduct(
+                          newCount,
+                        ),
+                      ),
                     );
               },
             ),

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;
+  }
+}

lib/services/api/http_service.dart

@@ -22,6 +22,18 @@ class HTTPService {
     );
 
     client.interceptors.add(serviceLocator.get<HTTPInterceptor>());
+    // Add this interceptor for logging requests and responses
+    // client.interceptors.add(
+    //   LogInterceptor(
+    //     request: true,
+    //     requestHeader: true,
+    //     requestBody: true,
+    //     responseHeader: false,
+    //     responseBody: true,
+    //     error: true,
+    //     logPrint: (object) => print(object),
+    //   ),
+    // );
     return client;
   }