stop fetching tags onBlank Event

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

.gitignore

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

analysis_options.yaml

@@ -10,6 +10,7 @@
 analyzer:
   errors:
     constant_identifier_names: ignore
+    overridden_fields: ignore
 include: package:flutter_lints/flutter.yaml
 
 linter:

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/core/network/custom_exceptions.dart

@@ -0,0 +1,16 @@
+
+import 'enums.dart';
+
+class GenericException  implements Exception {
+  final ExceptionType type;
+  final String errorMessage;
+  const GenericException(
+      {required this.type, this.errorMessage = "Unknown Error"});
+
+  @override
+  String toString() {
+    return errorMessage;
+  }
+
+  List<Object?> get props => [type, errorMessage];
+}

lib/core/network/dio.dart

@@ -0,0 +1,36 @@
+import 'package:dio/dio.dart';
+
+import '../../utils/constants/api_const.dart';
+
+class DioInstance {
+  Dio? _dio;
+
+  Dio get dio => _dio ?? _instantiate();
+
+  String? baseUrl;
+
+  DioInstance({this.baseUrl});
+
+  Dio _instantiate() {
+    Dio dio = Dio(
+      BaseOptions(
+        baseUrl: baseUrl ?? '${ApiEndpoints.baseUrl}/',
+        receiveDataWhenStatusError: true,
+        headers: {
+          'content_Type': 'application/json',
+        },
+      ),
+    );
+
+    dio.interceptors.add(
+      LogInterceptor(
+        responseHeader: false,
+        requestHeader: false,
+        requestBody: true,
+        responseBody: true,
+      ),
+    );
+
+    return dio;
+  }
+}

lib/core/network/end_points.dart

@@ -0,0 +1,3 @@
+class EndPoints {
+  static const String fetchCommunities = 'projects/{projectUuid}/communities';
+}

lib/core/network/enums.dart

@@ -0,0 +1,50 @@
+enum RequestType {
+  get,
+  post,
+  delete,
+  put,
+}
+
+enum ExceptionType {
+  notAuthenticated,
+  connectionError,
+  // related to http status code exceptions
+  notAuthorized,
+  notFound,
+  internalServerException,
+  serviceUnavailableException,
+  pageGone,
+
+  // related to bad request status code
+  // related to auth requests
+  invalidCredentials,
+  solutionAlreadySunmitted,
+  invalidValidation,
+  // other
+  other,
+}
+
+enum ExceptionMessage {
+  NOT_AUTHENTICATED,
+  INVALID_CREDENTIALS,
+  The_password_field_must_be_at_least_8_characters,
+  SOLUTION_ALREADY_SUBMITTED,
+  you_are_not_authorized,
+  page_not_found,
+  page_gone,
+  INTERNAL_SERVER_ERROR,
+  service_unavailable,
+}
+
+enum NotificationsType {
+  payment,
+  transporation,
+  product,
+  zero,
+}
+
+enum ImagesType {
+  assets,
+  svg,
+  network,
+}

lib/core/network/request.dart

@@ -0,0 +1,121 @@
+import 'dart:convert';
+
+import 'package:dio/dio.dart';
+import 'package:flutter_secure_storage/flutter_secure_storage.dart';
+
+import '../../pages/auth/model/token.dart';
+import 'custom_exceptions.dart';
+import 'dio.dart';
+import 'enums.dart';
+
+class Request {
+  String endPoint;
+  bool? autherized;
+  bool? isFormData;
+  RequestType? method;
+  Map<String, dynamic>? headers;
+  final Map<String, dynamic>? queryParams;
+  Map<String, dynamic>? body;
+  Duration? receiveTimeout;
+  Request(
+    this.endPoint, {
+    this.autherized,
+    this.isFormData,
+    this.method,
+    this.headers,
+    this.queryParams,
+    this.body,
+    this.receiveTimeout,
+  }) {
+    headers = {
+      'content_Type': 'application/json',
+      'Accept': 'application/json',
+    };
+  }
+  Future<Map<String, dynamic>> sendRequest() async {
+    Response? response;
+    if (autherized != null && autherized!) {
+      final storage = const FlutterSecureStorage();
+      final token = await storage.read(key: Token.loginAccessTokenKey);
+      if (token != null) {
+        headers!["authorization"] = "Bearer $token";
+      }
+    }
+    try {
+      response = await DioInstance().dio.request(
+            endPoint,
+            queryParameters: queryParams,
+            data: isFormData != null && isFormData == true
+                ? FormData.fromMap(body!)
+                : body,
+            options: Options(
+              method: method!.name.toUpperCase(),
+              headers: headers,
+              contentType: 'application/json',
+              receiveTimeout: receiveTimeout,
+            ),
+          );
+      if (response.statusCode! >= 200 && response.statusCode! < 300) {
+        return response.data;
+      }
+    } on DioException catch (error) {
+      if (error.type == DioExceptionType.badResponse) {
+        throw badRequestException[error.response!.data["error"]] ??
+            const GenericException(
+              type: ExceptionType.other,
+            );
+      }
+      if (error.type == DioExceptionType.connectionError ||
+          error.type == DioExceptionType.connectionTimeout ||
+          error.type == DioExceptionType.receiveTimeout ||
+          error.type == DioExceptionType.sendTimeout ||
+          error.type == DioExceptionType.unknown) {
+        throw const GenericException(
+          type: ExceptionType.connectionError,
+          errorMessage: 'no_internet_connection',
+        );
+      }
+    }
+    return {};
+  }
+
+  Map<String, dynamic> toJson() => {
+        'endPoint': endPoint,
+        'method': method!.name.toUpperCase(),
+        'body': json.encode(body),
+        'headers': headers,
+        'queryParams': queryParams,
+        'autherized': autherized,
+        'isFormData': isFormData,
+      };
+  @override
+  String toString() {
+    return jsonEncode(toJson());
+  }
+
+  List<Object?> get props => [
+        endPoint,
+        autherized,
+        isFormData,
+        method,
+        headers,
+        queryParams,
+        body,
+        receiveTimeout,
+      ];
+}
+
+Map<String, GenericException> badRequestException = {
+  ExceptionMessage.INVALID_CREDENTIALS.name: const GenericException(
+    type: ExceptionType.invalidCredentials,
+    errorMessage: "Invalid credentials ...",
+  ),
+  "The password field must be at least 8 characters.": const GenericException(
+    type: ExceptionType.invalidValidation,
+    errorMessage: 'password must be 8 or more characters',
+  ),
+  ExceptionMessage.NOT_AUTHENTICATED.name: const GenericException(
+    type: ExceptionType.notAuthenticated,
+    errorMessage: "not authenticated",
+  ),
+};

lib/pages/analytics/models/analytics_device.dart

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

lib/pages/analytics/models/occupacy.dart

@@ -1,18 +1,32 @@
 import 'package:equatable/equatable.dart';
 
 class Occupacy extends Equatable {
-  final String date;
+  final DateTime date;
   final String occupancy;
+  final String spaceUuid;
+  final int occupiedSeconds;
 
-  const Occupacy({required this.date, required this.occupancy});
+  const Occupacy({
+    required this.date,
+    required this.occupancy,
+    required this.spaceUuid,
+    required this.occupiedSeconds,
+  });
 
   factory Occupacy.fromJson(Map<String, dynamic> json) {
     return Occupacy(
-      date: json['date'] as String,
-      occupancy: json['occupancy'] as String,
+      date: DateTime.parse(json['event_date'] as String? ?? '${DateTime.now()}'),
+      occupancy: (json['occupancy_percentage'] ?? 0).toString(),
+      spaceUuid: json['space_uuid'] as String? ?? '',
+      occupiedSeconds: json['occupied_seconds'] as int? ?? 0,
     );
   }
 
   @override
-  List<Object?> get props => [date, occupancy];
+  List<Object?> get props => [
+        date,
+        occupancy,
+        spaceUuid,
+        occupiedSeconds,
+      ];
 }

lib/pages/analytics/models/phases_energy_consumption.dart

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

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

@@ -14,7 +14,6 @@ class EnergyManagementDataLoadingStrategy implements AnalyticsDataLoadingStrateg
     CommunityModel community,
     List<SpaceModel> spaces,
   ) {
-    // Add to space tree bloc first
     context.read<SpaceTreeBloc>().add(
           OnCommunitySelected(
             community.uuid,
@@ -69,7 +68,9 @@ class EnergyManagementDataLoadingStrategy implements AnalyticsDataLoadingStrateg
     CommunityModel community,
     SpaceModel child,
   ) {
-    // Do nothing else as per original implementation
+    if (child.children.isNotEmpty) {
+      return onSpaceSelected(context, community, child);
+    }
   }
 
   @override

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

@@ -14,23 +14,7 @@ class OccupancyDataLoadingStrategy implements AnalyticsDataLoadingStrategy {
     CommunityModel community,
     List<SpaceModel> spaces,
   ) {
-    context.read<SpaceTreeBloc>().add(
-          OnCommunitySelected(
-            community.uuid,
-            spaces.isNotEmpty ? [spaces.first] : [],
-          ),
-        );
-
-    final spaceTreeState = context.read<SpaceTreeBloc>().state;
-    if (spaceTreeState.selectedCommunities.contains(community.uuid)) {
-      clearData(context);
-      return;
-    }
-    FetchOccupancyDataHelper.loadOccupancyData(
-      context,
-      communityId: community.uuid,
-      spaceId: spaces.isNotEmpty ? spaces.first.uuid ?? '' : '',
-    );
+    // Do Nothing
   }
 
   @override
@@ -40,26 +24,17 @@ class OccupancyDataLoadingStrategy implements AnalyticsDataLoadingStrategy {
     SpaceModel space,
   ) {
     final spaceTreeBloc = context.read<SpaceTreeBloc>();
-    final selectedSpacesIds = spaceTreeBloc.state.selectedSpaces;
-    final isSpaceSelected = selectedSpacesIds.contains(space.uuid);
+    final isSpaceSelected = spaceTreeBloc.state.selectedSpaces.contains(space.uuid);
 
-    if (selectedSpacesIds.isEmpty) {
-      spaceTreeBloc.add(OnCommunitySelected(community.uuid, [space]));
-    } else if (isSpaceSelected) {
-      spaceTreeBloc.add(const SpaceTreeClearSelectionEvent());
-    } else {
-      spaceTreeBloc
-        ..add(const SpaceTreeClearSelectionEvent())
-        ..add(OnSpaceSelected(community, space.uuid ?? '', []));
-    }
-
-    final spaceTreeState = context.read<SpaceTreeBloc>().state;
-    if (spaceTreeState.selectedCommunities.contains(community.uuid) ||
-        spaceTreeState.selectedSpaces.contains(space.uuid)) {
+    if (isSpaceSelected) {
       clearData(context);
       return;
     }
 
+    spaceTreeBloc
+      ..add(const SpaceTreeClearSelectionEvent())
+      ..add(OnSpaceSelected(community, space.uuid ?? '', []));
+
     FetchOccupancyDataHelper.loadOccupancyData(
       context,
       communityId: community.uuid,
@@ -73,7 +48,7 @@ class OccupancyDataLoadingStrategy implements AnalyticsDataLoadingStrategy {
     CommunityModel community,
     SpaceModel child,
   ) {
-    // Do nothing
+    onSpaceSelected(context, community, child);
   }
 
   @override

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

@@ -15,9 +15,9 @@ import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_he
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics_devices_service_delagate.dart';
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/remote_energy_management_analytics_devices_service.dart';
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/remote_occupancy_analytics_devices_service.dart';
-import 'package:syncrow_web/pages/analytics/services/energy_consumption_by_phases/fake_energy_consumption_by_phases_service.dart';
+import 'package:syncrow_web/pages/analytics/services/energy_consumption_by_phases/remote_energy_consumption_by_phases_service.dart';
 import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/remote_energy_consumption_per_device_service.dart';
-import 'package:syncrow_web/pages/analytics/services/occupacy/fake_occupacy_service.dart';
+import 'package:syncrow_web/pages/analytics/services/occupacy/remote_occupancy_service.dart';
 import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/remote_occupancy_heat_map_service.dart';
 import 'package:syncrow_web/pages/analytics/services/power_clamp_info/remote_power_clamp_info_service.dart';
 import 'package:syncrow_web/pages/analytics/services/realtime_device_service/firebase_realtime_device_service.dart';
@@ -57,7 +57,7 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
         ),
         BlocProvider(
           create: (context) => EnergyConsumptionByPhasesBloc(
-            FakeEnergyConsumptionByPhasesService(),
+            RemoteEnergyConsumptionByPhasesService(_httpService),
           ),
         ),
         BlocProvider(
@@ -75,7 +75,11 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
             FirebaseRealtimeDeviceService(),
           ),
         ),
-        BlocProvider(create: (context) => OccupancyBloc(FakeOccupacyService())),
+        BlocProvider(
+          create: (context) => OccupancyBloc(
+            RemoteOccupancyService(_httpService),
+          ),
+        ),
         BlocProvider(
           create: (context) => OccupancyHeatMapBloc(
             RemoteOccupancyHeatMapService(_httpService),

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

@@ -74,6 +74,7 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
                               FetchEnergyManagementDataHelper
                                   .loadEnergyManagementData(
                                 context,
+                                shouldFetchAnalyticsDevices: false,
                                 selectedDate: value,
                                 communityId:
                                     spaceTreeState.selectedCommunities.firstOrNull ??

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

@@ -45,7 +45,7 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
   @override
   Widget build(BuildContext context) {
     return Dialog(
-      backgroundColor: Theme.of(context).colorScheme.surface,
+      backgroundColor: ColorsManager.whiteColors,
       child: Container(
         padding: const EdgeInsetsDirectional.all(20),
         width: 320,
@@ -121,6 +121,7 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
   }
 
   Row _buildYearSelector() {
+    final currentYear = DateTime.now().year;
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
@@ -134,17 +135,35 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
         ),
         const Spacer(),
         IconButton(
-          onPressed: () => setState(() => _currentYear = _currentYear - 1),
+          onPressed: () {
+            setState(() {
+              _currentYear = _currentYear - 1;
+            });
+          },
           icon: const Icon(
             Icons.chevron_left,
             color: ColorsManager.grey700,
           ),
         ),
         IconButton(
-          onPressed: () => setState(() => _currentYear = _currentYear + 1),
-          icon: const Icon(
+          onPressed: _currentYear < currentYear
+              ? () {
+                  setState(() {
+                    _currentYear = _currentYear + 1;
+                    // Clear selected month if it becomes invalid in the new year
+                    if (_currentYear == currentYear &&
+                        _selectedMonth != null &&
+                        _selectedMonth! > DateTime.now().month - 1) {
+                      _selectedMonth = null;
+                    }
+                  });
+                }
+              : null,
+          icon: Icon(
             Icons.chevron_right,
-            color: ColorsManager.grey700,
+            color: _currentYear < currentYear
+                ? ColorsManager.grey700
+                : ColorsManager.grey700.withValues(alpha: 0.3),
           ),
         ),
       ],
@@ -152,11 +171,13 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
   }
 
   Widget _buildMonthsGrid() {
+    final currentDate = DateTime.now();
+    final isCurrentYear = _currentYear == currentDate.year;
+
     return GridView.builder(
       shrinkWrap: true,
       itemCount: 12,
       physics: const NeverScrollableScrollPhysics(),
-      padding: const EdgeInsets.all(8),
       gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: 3,
         childAspectRatio: 2.5,
@@ -165,25 +186,43 @@ class _MonthPickerWidgetState extends State<MonthPickerWidget> {
       ),
       itemBuilder: (context, index) {
         final isSelected = _selectedMonth == index;
+        final isFutureMonth = isCurrentYear && index > currentDate.month - 1;
+
         return InkWell(
-          onTap: () => setState(() => _selectedMonth = index),
-          child: Container(
-            alignment: Alignment.center,
+          onTap: isFutureMonth ? null : () => setState(() => _selectedMonth = index),
+          child: DecoratedBox(
             decoration: BoxDecoration(
-              color: isSelected
-                  ? ColorsManager.vividBlue.withValues(alpha: 0.7)
-                  : const Color(0xFFEDF2F7),
-              borderRadius:
-                  isSelected ? BorderRadius.circular(15) : BorderRadius.zero,
+              color: const Color(0xFFEDF2F7),
+              borderRadius: BorderRadius.only(
+                topLeft: index % 3 == 0 ? const Radius.circular(16) : Radius.zero,
+                bottomLeft: index % 3 == 0 ? const Radius.circular(16) : Radius.zero,
+                topRight: index % 3 == 2 ? const Radius.circular(16) : Radius.zero,
+                bottomRight:
+                    index % 3 == 2 ? const Radius.circular(16) : Radius.zero,
+              ),
             ),
-            child: Text(
-              _monthNames[index],
-              style: context.textTheme.titleSmall?.copyWith(
-                fontSize: 12,
+            child: Container(
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
                 color: isSelected
-                    ? ColorsManager.whiteColors
-                    : ColorsManager.blackColor.withValues(alpha: 0.8),
-                fontWeight: FontWeight.w500,
+                    ? ColorsManager.vividBlue.withValues(alpha: 0.7)
+                    : isFutureMonth
+                        ? ColorsManager.grey700.withValues(alpha: 0.1)
+                        : const Color(0xFFEDF2F7),
+                borderRadius:
+                    isSelected ? BorderRadius.circular(15) : BorderRadius.zero,
+              ),
+              child: Text(
+                _monthNames[index],
+                style: context.textTheme.titleSmall?.copyWith(
+                  fontSize: 12,
+                  color: isSelected
+                      ? ColorsManager.whiteColors
+                      : isFutureMonth
+                          ? ColorsManager.blackColor.withValues(alpha: 0.3)
+                          : ColorsManager.blackColor.withValues(alpha: 0.8),
+                  fontWeight: FontWeight.w500,
+                ),
               ),
             ),
           ),

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

@@ -20,9 +20,9 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
   late int _currentYear;
 
   static final years = List.generate(
-    DateTime.now().year - 2020 + 1,
+    DateTime.now().year - (DateTime.now().year - 5) + 1,
     (index) => (2020 + index),
-  );
+  ).where((year) => year <= DateTime.now().year).toList();
 
   @override
   void initState() {
@@ -33,7 +33,7 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
   @override
   Widget build(BuildContext context) {
     return Dialog(
-      backgroundColor: Theme.of(context).colorScheme.surface,
+      backgroundColor: ColorsManager.whiteColors,
       child: Container(
         padding: const EdgeInsetsDirectional.all(20),
         width: 320,
@@ -109,7 +109,6 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
       shrinkWrap: true,
       itemCount: years.length,
       physics: const NeverScrollableScrollPhysics(),
-      padding: const EdgeInsets.all(8),
       gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: 3,
         childAspectRatio: 2.5,
@@ -120,23 +119,35 @@ class _YearPickerWidgetState extends State<YearPickerWidget> {
         final isSelected = _currentYear == years[index];
         return InkWell(
           onTap: () => setState(() => _currentYear = years[index]),
-          child: Container(
-            alignment: Alignment.center,
+          child: DecoratedBox(
             decoration: BoxDecoration(
-              color: isSelected
-                  ? ColorsManager.vividBlue.withValues(alpha: 0.7)
-                  : const Color(0xFFEDF2F7),
-              borderRadius:
-                  isSelected ? BorderRadius.circular(15) : BorderRadius.zero,
+              color: const Color(0xFFEDF2F7),
+              borderRadius: BorderRadius.only(
+                topLeft: index % 3 == 0 ? const Radius.circular(16) : Radius.zero,
+                bottomLeft: index % 3 == 0 ? const Radius.circular(16) : Radius.zero,
+                topRight: index % 3 == 2 ? const Radius.circular(16) : Radius.zero,
+                bottomRight:
+                    index % 3 == 2 ? const Radius.circular(16) : Radius.zero,
+              ),
             ),
-            child: Text(
-              years[index].toString(),
-              style: context.textTheme.titleSmall?.copyWith(
-                fontSize: 12,
+            child: Container(
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
                 color: isSelected
-                    ? ColorsManager.whiteColors
-                    : ColorsManager.blackColor.withValues(alpha: 0.8),
-                fontWeight: FontWeight.w500,
+                    ? ColorsManager.vividBlue.withValues(alpha: 0.7)
+                    : const Color(0xFFEDF2F7),
+                borderRadius:
+                    isSelected ? BorderRadius.circular(15) : BorderRadius.zero,
+              ),
+              child: Text(
+                years[index].toString(),
+                style: context.textTheme.titleSmall?.copyWith(
+                  fontSize: 12,
+                  color: isSelected
+                      ? ColorsManager.whiteColors
+                      : ColorsManager.blackColor.withValues(alpha: 0.8),
+                  fontWeight: FontWeight.w500,
+                ),
               ),
             ),
           ),

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

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

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

@@ -21,12 +21,13 @@ abstract final class EnergyManagementChartsHelper {
           reservedSize: 32,
           showTitles: true,
           maxIncluded: true,
+          minIncluded: true,
           getTitlesWidget: (value, meta) => Padding(
             padding: const EdgeInsetsDirectional.only(top: 20.0),
             child: Text(
-              (value + 1).toString(),
+              value.toString(),
               style: context.textTheme.bodySmall?.copyWith(
-                color: ColorsManager.greyColor,
+                color: ColorsManager.lightGreyColor,
                 fontSize: 12,
               ),
             ),
@@ -36,7 +37,8 @@ abstract final class EnergyManagementChartsHelper {
       leftTitles: AxisTitles(
         sideTitles: SideTitles(
           showTitles: true,
-          maxIncluded: true,
+          maxIncluded: false,
+          minIncluded: true,
           interval: leftTitlesInterval,
           reservedSize: 110,
           getTitlesWidget: (value, meta) => Padding(
@@ -70,7 +72,7 @@ abstract final class EnergyManagementChartsHelper {
   static List<LineTooltipItem?> getTooltipItems(List<LineBarSpot> touchedSpots) {
     return touchedSpots.map((spot) {
       return LineTooltipItem(
-        getToolTipLabel(spot.x + 1, spot.y),
+        getToolTipLabel(spot.x, spot.y),
         const TextStyle(
           color: ColorsManager.textPrimaryColor,
           fontWeight: FontWeight.w600,
@@ -91,31 +93,38 @@ abstract final class EnergyManagementChartsHelper {
     );
   }
 
-  static FlBorderData borderData() {
-    return FlBorderData(
-      show: true,
-      border: const Border.symmetric(
-        horizontal: BorderSide(
-          color: ColorsManager.greyColor,
-          style: BorderStyle.solid,
-          width: 1,
-        ),
-      ),
-    );
-  }
-
   static FlGridData gridData() {
-    return const FlGridData(
+    return FlGridData(
       show: true,
       drawVerticalLine: false,
       drawHorizontalLine: true,
+      horizontalInterval: 250,
+      getDrawingHorizontalLine: (value) {
+        return FlLine(
+          color: ColorsManager.greyColor,
+          strokeWidth: 1,
+          dashArray: value == 0 ? null : [5, 5],
+        );
+      },
+    );
+  }
+
+  static FlBorderData borderData() {
+    return FlBorderData(
+      border: const Border(
+        bottom: BorderSide(
+          color: ColorsManager.greyColor,
+          style: BorderStyle.solid,
+        ),
+      ),
+      show: true,
     );
   }
 
   static LineTouchData lineTouchData() {
     return LineTouchData(
       handleBuiltInTouches: true,
-      touchSpotThreshold: 2,
+      touchSpotThreshold: 16,
       touchTooltipData: EnergyManagementChartsHelper.lineTouchTooltipData(),
     );
   }

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

@@ -26,6 +26,7 @@ abstract final class FetchEnergyManagementDataHelper {
     required String communityId,
     required String spaceId,
     DateTime? selectedDate,
+    bool shouldFetchAnalyticsDevices = true,
   }) {
     if (communityId.isEmpty && spaceId.isEmpty) {
       clearAllData(context);
@@ -34,31 +35,46 @@ abstract final class FetchEnergyManagementDataHelper {
 
     final datePickerState = context.read<AnalyticsDatePickerBloc>().state;
     final selectedDate0 = selectedDate ?? datePickerState.monthlyDate;
-    loadAnalyticsDevices(context, communityUuid: communityId, spaceUuid: spaceId);
+    if (shouldFetchAnalyticsDevices) {
+      loadAnalyticsDevices(
+        context,
+        communityUuid: communityId,
+        spaceUuid: spaceId,
+        selectedDate: selectedDate0,
+      );
+      loadRealtimeDeviceChanges(context);
+      loadPowerClampInfo(context);
+    }
     loadTotalEnergyConsumption(
       context,
       selectedDate: selectedDate0,
       communityId: communityId,
       spaceId: spaceId,
     );
-    loadEnergyConsumptionByPhases(context, selectedDate: selectedDate);
+    final selectedDevice = getSelectedDevice(context);
+    if (selectedDevice case final AnalyticsDevice device) {
+      loadEnergyConsumptionByPhases(
+        context,
+        powerClampUuid: device.uuid,
+        selectedDate: selectedDate0,
+      );
+    }
     loadEnergyConsumptionPerDevice(
       context,
       communityId: communityId,
       spaceId: spaceId,
       selectedDate: selectedDate0,
     );
-    loadRealtimeDeviceChanges(context);
-    loadPowerClampInfo(context);
   }
 
   static void loadEnergyConsumptionByPhases(
     BuildContext context, {
+    required String powerClampUuid,
     DateTime? selectedDate,
   }) {
     final param = GetEnergyConsumptionByPhasesParam(
-      startDate: selectedDate,
-      spaceId: '',
+      date: selectedDate,
+      powerClampUuid: powerClampUuid,
     );
     context.read<EnergyConsumptionByPhasesBloc>().add(
           LoadEnergyConsumptionByPhasesEvent(param: param),
@@ -121,6 +137,7 @@ abstract final class FetchEnergyManagementDataHelper {
     BuildContext context, {
     required String communityUuid,
     required String spaceUuid,
+    required DateTime selectedDate,
   }) {
     context.read<AnalyticsDevicesBloc>().add(
           LoadAnalyticsDevicesEvent(
@@ -128,6 +145,11 @@ abstract final class FetchEnergyManagementDataHelper {
               context.read<PowerClampInfoBloc>().add(
                     LoadPowerClampInfoEvent(device.uuid),
                   );
+              loadEnergyConsumptionByPhases(
+                context,
+                powerClampUuid: device.uuid,
+                selectedDate: selectedDate,
+              );
               context.read<RealtimeDeviceChangesBloc>().add(
                     RealtimeDeviceChangesStarted(device.uuid),
                   );

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

@@ -48,6 +48,7 @@ class AnalyticsDeviceDropdown extends StatelessWidget {
   }
 
   Widget _buildDevicesDropdown(BuildContext context, AnalyticsDevicesState state) {
+    final spaceUuid = state.selectedDevice?.spaceUuid;
     return DropdownButton<AnalyticsDevice?>(
       value: state.selectedDevice,
       isDense: true,
@@ -60,10 +61,30 @@ class AnalyticsDeviceDropdown extends StatelessWidget {
       ),
       style: _getTextStyle(context),
       padding: _defaultPadding,
+      selectedItemBuilder: (context) {
+        return state.devices.map((e) => Text(e.name)).toList();
+      },
       items: state.devices.map((e) {
         return DropdownMenuItem(
           value: e,
-          child: Text(e.name),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(e.name),
+              if (spaceUuid != null)
+                FittedBox(
+                  fit: BoxFit.scaleDown,
+                  alignment: AlignmentDirectional.centerStart,
+                  child: Text(
+                    spaceUuid,
+                    style: _getTextStyle(context)?.copyWith(
+                      fontSize: 10,
+                    ),
+                  ),
+                ),
+            ],
+          ),
         );
       }).toList(),
       onChanged: (value) {

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

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

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

@@ -16,7 +16,11 @@ class EnergyConsumptionPerDeviceChart extends StatelessWidget {
           context,
           leftTitlesInterval: 250,
         ),
-        gridData: EnergyManagementChartsHelper.gridData(),
+        
+        gridData: EnergyManagementChartsHelper.gridData().copyWith(
+          checkToShowHorizontalLine: (value) => true,
+          horizontalInterval: 250,
+        ),
         borderData: EnergyManagementChartsHelper.borderData(),
         lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
         lineBarsData: chartData.map((e) {
@@ -33,7 +37,7 @@ class EnergyConsumptionPerDeviceChart extends StatelessWidget {
           );
         }).toList(),
       ),
-      duration: Durations.extralong1,
+      duration: Duration.zero,
       curve: Curves.easeIn,
     );
   }

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/energy_consumption_per_device/energy_consumption_per_device_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
@@ -46,6 +47,7 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
                     flex: 2,
                     child: EnergyConsumptionPerDeviceDevicesList(
                       chartData: state.chartData,
+                      devices: context.watch<AnalyticsDevicesBloc>().state.devices,
                     ),
                   ),
                 ],

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

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

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

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

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

@@ -48,6 +48,9 @@ class PowerClampEnergyStatusWidget extends StatelessWidget {
             fontWeight: FontWeight.w400,
             fontSize: 16,
           ),
+          softWrap: true,
+          maxLines: 2,
+          overflow: TextOverflow.ellipsis,
         ),
         trailing: Text.rich(
           TextSpan(

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

@@ -4,15 +4,6 @@ import 'package:syncrow_web/pages/analytics/models/energy_data_model.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
-// energy_consumption_chart will return id, name and consumption
-const phasesJson = {
-  "1": {
-    "phaseOne": 1000,
-    "phaseTwo": 2000,
-    "phaseThree": 3000,
-  }
-};
-
 class TotalEnergyConsumptionChart extends StatelessWidget {
   const TotalEnergyConsumptionChart({required this.chartData, super.key});
 
@@ -23,13 +14,19 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
     return Expanded(
       child: LineChart(
         LineChartData(
-          titlesData: EnergyManagementChartsHelper.titlesData(context),
-          gridData: EnergyManagementChartsHelper.gridData(),
+          titlesData: EnergyManagementChartsHelper.titlesData(
+            context,
+            leftTitlesInterval: 250,
+          ),
+          gridData: EnergyManagementChartsHelper.gridData().copyWith(
+            checkToShowHorizontalLine: (value) => true,
+            horizontalInterval: 250,
+          ),
           borderData: EnergyManagementChartsHelper.borderData(),
           lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
           lineBarsData: _lineBarsData,
         ),
-        duration: Durations.extralong1,
+        duration: Duration.zero,
         curve: Curves.easeIn,
       ),
     );
@@ -46,7 +43,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
             .entries
             .map(
               (entry) => FlSpot(
-                entry.key.toDouble(),
+                entry.value.date.day.toDouble(),
                 entry.value.value,
               ),
             )

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

@@ -30,7 +30,6 @@ abstract final class FetchOccupancyDataHelper {
 
     loadOccupancyChartData(
       context,
-      communityUuid: communityId,
       spaceUuid: spaceId,
       date: datePickerState.monthlyDate,
     );
@@ -59,16 +58,14 @@ abstract final class FetchOccupancyDataHelper {
 
   static void loadOccupancyChartData(
     BuildContext context, {
-    required String communityUuid,
     required String spaceUuid,
     required DateTime date,
   }) {
     context.read<OccupancyBloc>().add(
           LoadOccupancyEvent(
             GetOccupancyParam(
-              monthDate: '${date.year}-${date.month}',
+              monthDate: '${date.year}-${date.month.toString().padLeft(2, '0')}',
               spaceUuid: spaceUuid,
-              communityUuid: communityUuid,
             ),
           ),
         );

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

@@ -20,9 +20,9 @@ class AnalyticsOccupancyView extends StatelessWidget {
             child: Column(
               spacing: 32,
               children: [
-                SizedBox(height: height * 0.45, child: const OccupancyEndSideBar()),
+                SizedBox(height: height * 0.46, child: const OccupancyEndSideBar()),
                 SizedBox(height: height * 0.5, child: const OccupancyChartBox()),
-                SizedBox(height: height * 0.5, child: const Placeholder()),
+                SizedBox(height: height * 0.5, child: const OccupancyHeatMapBox()),
               ],
             ),
           );

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

@@ -16,30 +16,38 @@ class OccupancyChart extends StatelessWidget {
   Widget build(BuildContext context) {
     return BarChart(
       BarChartData(
-        maxY: 1.0,
+        maxY: 100.0,
         gridData: EnergyManagementChartsHelper.gridData().copyWith(
           checkToShowHorizontalLine: (value) => true,
-          horizontalInterval: 0.25,
+          horizontalInterval: 20,
         ),
         borderData: EnergyManagementChartsHelper.borderData(),
         barTouchData: _barTouchData(context),
-        titlesData: _titlesData(context),
+        titlesData: _titlesData(context).copyWith(
+          leftTitles: _titlesData(context).leftTitles.copyWith(
+                sideTitles: _titlesData(context).leftTitles.sideTitles.copyWith(
+                      maxIncluded: true,
+                      minIncluded: true,
+                    ),
+              ),
+        ),
         barGroups: List.generate(chartData.length, (index) {
           final actual = chartData[index];
+          final occupancyValue = double.parse(actual.occupancy);
           return BarChartGroupData(
             x: index,
             barsSpace: 0,
             groupVertically: true,
             barRods: [
               BarChartRodData(
-                toY: 1.0,
-                fromY: double.parse(actual.occupancy) + 0.025,
+                toY: 100.0,
+                fromY: occupancyValue == 0 ? occupancyValue : occupancyValue + 2.5,
                 color: ColorsManager.graysColor,
                 width: _chartWidth,
                 borderRadius: BorderRadius.circular(10),
               ),
               BarChartRodData(
-                toY: double.parse(actual.occupancy),
+                toY: occupancyValue,
                 color: ColorsManager.vividBlue.withValues(alpha: 0.8),
                 width: _chartWidth,
                 borderRadius: BorderRadius.circular(10),
@@ -81,7 +89,7 @@ class OccupancyChart extends StatelessWidget {
     final data = chartData;
 
     final occupancyValue = double.parse(data[group.x.toInt()].occupancy);
-    final percentage = '${(occupancyValue * 100).toStringAsFixed(0)}%';
+    final percentage = '${(occupancyValue).toStringAsFixed(0)}%';
 
     return BarTooltipItem(
       percentage,
@@ -101,14 +109,14 @@ class OccupancyChart extends StatelessWidget {
     final leftTitles = titlesData.leftTitles.copyWith(
       sideTitles: titlesData.leftTitles.sideTitles.copyWith(
         reservedSize: 70,
-        interval: 0.25,
+        interval: 20,
         getTitlesWidget: (value, meta) => Padding(
           padding: const EdgeInsetsDirectional.only(end: 12),
           child: FittedBox(
             alignment: AlignmentDirectional.centerStart,
             fit: BoxFit.scaleDown,
             child: Text(
-              '${(value * 100).toStringAsFixed(0)}%',
+              '${(value).toStringAsFixed(0)}%',
               style: context.textTheme.bodySmall?.copyWith(
                 fontSize: 12,
                 color: ColorsManager.greyColor,

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

@@ -50,9 +50,6 @@ class OccupancyChartBox extends StatelessWidget {
                           if (spaceTreeState.selectedSpaces.isNotEmpty) {
                             FetchOccupancyDataHelper.loadOccupancyChartData(
                               context,
-                              communityUuid:
-                                  spaceTreeState.selectedCommunities.firstOrNull ??
-                                      '',
                               spaceUuid:
                                   spaceTreeState.selectedSpaces.firstOrNull ?? '',
                               date: value,

lib/pages/analytics/params/get_energy_consumption_by_phases_param.dart

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

lib/pages/analytics/params/get_occupancy_param.dart

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

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

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

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

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

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

@@ -1,39 +0,0 @@
-import 'dart:math' as math show Random;
-
-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';
-
-class FakeEnergyConsumptionPerDeviceService
-    implements EnergyConsumptionPerDeviceService {
-  @override
-  Future<List<DeviceEnergyDataModel>> load(
-    GetEnergyConsumptionPerDeviceParam param,
-  ) {
-    final random = math.Random();
-    return Future.delayed(const Duration(milliseconds: 500), () {
-      return [
-        (Colors.redAccent, 1),
-        (Colors.lightBlueAccent, 2),
-        (Colors.purpleAccent, 3),
-      ].map((e) {
-        final (color, index) = e;
-        return DeviceEnergyDataModel(
-          color: color,
-          energy: List.generate(30, (i) => i)
-              .map(
-                (index) => EnergyDataModel(
-                  date: DateTime(2025, 1, index + 1),
-                  value: random.nextInt(100) + (index * 100),
-                ),
-              )
-              .toList(),
-          deviceName: 'Device $index',
-          deviceId: 'device_$index',
-        );
-      }).toList();
-    });
-  }
-}

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

@@ -34,10 +34,7 @@ abstract final class _EnergyConsumptionPerDeviceMapper {
   static List<DeviceEnergyDataModel> map(dynamic data) {
     final json = data as Map<String, dynamic>? ?? {};
     final mappedData = json['data'] as List<dynamic>? ?? [];
-    return mappedData.where((e) {
-      final deviceData = (e as Map<String, dynamic>)['data'] as List<dynamic>? ?? [];
-      return deviceData.isNotEmpty;
-    }).map((e) {
+    return mappedData.map((e) {
       final deviceData = e as Map<String, dynamic>;
       final energyData = deviceData['data'] as List<dynamic>;
 

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

@@ -1,19 +0,0 @@
-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';
-
-class FakeOccupacyService implements OccupacyService {
-  @override
-  Future<List<Occupacy>> load(GetOccupancyParam param) async {
-    return await Future.delayed(
-      const Duration(seconds: 1),
-      () => List.generate(
-        30,
-        (index) => Occupacy(
-          date: DateTime.now().subtract(Duration(days: index)).toString(),
-          occupancy: ((index / 100)).toString(),
-        ),
-      ),
-    );
-  }
-}

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

@@ -0,0 +1,32 @@
+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/http_service.dart';
+
+final class RemoteOccupancyService implements OccupacyService {
+  const RemoteOccupancyService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<Occupacy>> load(GetOccupancyParam param) async {
+    try {
+      final response = await _httpService.get(
+        path: '/occupancy/duration/space/${param.spaceUuid}',
+        showServerMessage: true,
+        queryParameters: param.toJson(),
+        expectedResponseModel: (data) {
+          final json = data as Map<String, dynamic>? ?? {};
+          final mappedData = json['data'] as List<dynamic>? ?? [];
+          return mappedData.map((e) {
+            final jsonData = e as Map<String, dynamic>;
+            return Occupacy.fromJson(jsonData);
+          }).toList();
+        },
+      );
+      return response;
+    } catch (e) {
+      throw Exception('Failed to load energy consumption per phase: $e');
+    }
+  }
+}

lib/pages/common/custom_table.dart

@@ -63,7 +63,8 @@ class _DynamicTableState extends State<DynamicTable> {
     }
   }
 
-  bool _compareListOfLists(List<List<dynamic>> oldList, List<List<dynamic>> newList) {
+  bool _compareListOfLists(
+      List<List<dynamic>> oldList, List<List<dynamic>> newList) {
     // Check if the old and new lists are the same
     if (oldList.length != newList.length) return false;
 
@@ -111,8 +112,8 @@ class _DynamicTableState extends State<DynamicTable> {
         trackVisibility: true,
         child: Scrollbar(
           controller: _horizontalScrollController,
-          thumbVisibility: false,
-          trackVisibility: false,
+          thumbVisibility: true,
+          trackVisibility: true,
           notificationPredicate: (notif) => notif.depth == 1,
           child: SingleChildScrollView(
             controller: _verticalScrollController,
@@ -132,46 +133,60 @@ class _DynamicTableState extends State<DynamicTable> {
                         children: [
                           if (widget.withCheckBox) _buildSelectAllCheckbox(),
                           ...List.generate(widget.headers.length, (index) {
-                            return _buildTableHeaderCell(widget.headers[index], index);
+                            return _buildTableHeaderCell(
+                                widget.headers[index], index);
                           })
                           //...widget.headers.map((header) => _buildTableHeaderCell(header)),
                         ],
                       ),
                     ),
                     widget.isEmpty
-                        ? Column(
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            children: [
-                              Row(
-                                crossAxisAlignment: CrossAxisAlignment.center,
-                                mainAxisAlignment: MainAxisAlignment.center,
-                                children: [
-                                  Column(
-                                    children: [
-                                      SvgPicture.asset(Assets.emptyTable),
-                                      const SizedBox(
-                                        height: 15,
-                                      ),
-                                      Text(
-                                        widget.tableName == 'AccessManagement' ? 'No Password ' : 'No Devices',
-                                        style: Theme.of(context)
-                                            .textTheme
-                                            .bodySmall!
-                                            .copyWith(color: ColorsManager.grayColor),
-                                      )
-                                    ],
-                                  ),
-                                ],
-                              ),
-                            ],
+                        ? SizedBox(
+                            height: widget.size.height * 0.5,
+                            width: widget.size.width,
+                            child: Column(
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                Row(
+                                  crossAxisAlignment: CrossAxisAlignment.center,
+                                  mainAxisAlignment: MainAxisAlignment.center,
+                                  children: [
+                                    Column(
+                                      children: [
+                                        SvgPicture.asset(Assets.emptyTable),
+                                        const SizedBox(
+                                          height: 15,
+                                        ),
+                                        Text(
+                                          widget.tableName == 'AccessManagement'
+                                              ? 'No Password '
+                                              : 'No Devices',
+                                          style: Theme.of(context)
+                                              .textTheme
+                                              .bodySmall!
+                                              .copyWith(
+                                                  color:
+                                                      ColorsManager.grayColor),
+                                        )
+                                      ],
+                                    ),
+                                  ],
+                                ),
+                              ],
+                            ),
                           )
                         : Column(
-                            children: List.generate(widget.data.length, (index) {
+                            children:
+                                List.generate(widget.data.length, (index) {
                               final row = widget.data[index];
                               return Row(
                                 children: [
-                                  if (widget.withCheckBox) _buildRowCheckbox(index, widget.size.height * 0.08),
-                                  ...row.map((cell) => _buildTableCell(cell.toString(), widget.size.height * 0.08)),
+                                  if (widget.withCheckBox)
+                                    _buildRowCheckbox(
+                                        index, widget.size.height * 0.08),
+                                  ...row.map((cell) => _buildTableCell(
+                                      cell.toString(),
+                                      widget.size.height * 0.08)),
                                 ],
                               );
                             }),
@@ -196,7 +211,9 @@ class _DynamicTableState extends State<DynamicTable> {
       ),
       child: Checkbox(
         value: _selectAll,
-        onChanged: widget.withSelectAll && widget.data.isNotEmpty ? _toggleSelectAll : null,
+        onChanged: widget.withSelectAll && widget.data.isNotEmpty
+            ? _toggleSelectAll
+            : null,
       ),
     );
   }
@@ -238,7 +255,9 @@ class _DynamicTableState extends State<DynamicTable> {
         constraints: const BoxConstraints.expand(height: 40),
         alignment: Alignment.centerLeft,
         child: Padding(
-          padding: EdgeInsets.symmetric(horizontal: index == widget.headers.length - 1 ? 12 : 8.0, vertical: 4),
+          padding: EdgeInsets.symmetric(
+              horizontal: index == widget.headers.length - 1 ? 12 : 8.0,
+              vertical: 4),
           child: Text(
             title,
             style: context.textTheme.titleSmall!.copyWith(

lib/pages/device_managment/shared/device_control_dialog.dart

@@ -97,7 +97,8 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
             children: [
               _buildInfoRow('Space Name:',
                   device.spaces?.firstOrNull?.spaceName ?? 'N/A'),
-              _buildInfoRow('Room:', device.subspace?.subspaceName ?? 'N/A'),
+              _buildInfoRow(
+                  'Sub space:', device.subspace?.subspaceName ?? 'N/A'),
             ],
           ),
           TableRow(

lib/pages/home/bloc/home_bloc.dart

@@ -51,12 +51,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());
@@ -88,10 +89,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) {
@@ -155,7 +158,7 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
       },
       color: ColorsManager.primaryColor,
     ),
-    
+
     // HomeItemModel(
     //   title: 'Move in',
     //   icon: Assets.moveinIcon,

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,
@@ -110,7 +113,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/functions_bloc/functions_bloc_bloc.dart

@@ -26,8 +26,10 @@ class FunctionBloc extends Bloc<FunctionBlocEvent, FunctionBlocState> {
         functionCode: event.functionData.functionCode,
         operationName: event.functionData.operationName,
         value: event.functionData.value ?? existingData.value,
-        valueDescription: event.functionData.valueDescription ?? existingData.valueDescription,
+        valueDescription: event.functionData.valueDescription ??
+            existingData.valueDescription,
         condition: event.functionData.condition ?? existingData.condition,
+        step: event.functionData.step ?? existingData.step,
       );
     } else {
       functions.clear();
@@ -59,8 +61,10 @@ class FunctionBloc extends Bloc<FunctionBlocEvent, FunctionBlocState> {
     );
   }
 
-  FutureOr<void> _onSelectFunction(SelectFunction event, Emitter<FunctionBlocState> emit) {
+  FutureOr<void> _onSelectFunction(
+      SelectFunction event, Emitter<FunctionBlocState> emit) {
     emit(state.copyWith(
-        selectedFunction: event.functionCode, selectedOperationName: event.operationName));
+        selectedFunction: event.functionCode,
+        selectedOperationName: event.operationName));
   }
 }

lib/pages/routines/models/ac/ac_function.dart

@@ -14,6 +14,10 @@ abstract class ACFunction extends DeviceFunction<AcStatusModel> {
     required super.operationName,
     required super.icon,
     required this.type,
+    super.step,
+    super.unit,
+    super.max,
+    super.min,
   });
 
   List<ACOperationalValue> getOperationalValues();
@@ -75,26 +79,24 @@ class ModeFunction extends ACFunction {
 }
 
 class TempSetFunction extends ACFunction {
-  final int min;
-  final int max;
-  final int step;
-
-  TempSetFunction(
-      {required super.deviceId, required super.deviceName, required type})
-      : min = 160,
-        max = 300,
-        step = 1,
-        super(
+  TempSetFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
           code: 'temp_set',
           operationName: 'Set Temperature',
           icon: Assets.assetsTempreture,
-          type: type,
+          min: 200,
+          max: 300,
+          step: 1,
+          unit: "°C",
         );
 
   @override
   List<ACOperationalValue> getOperationalValues() {
     List<ACOperationalValue> values = [];
-    for (int temp = min; temp <= max; temp += step) {
+    for (int temp = min!.toInt(); temp <= max!; temp += step!.toInt()) {
       values.add(ACOperationalValue(
         icon: Assets.assetsTempreture,
         description: "${temp / 10}°C",
@@ -104,7 +106,6 @@ class TempSetFunction extends ACFunction {
     return values;
   }
 }
-
 class LevelFunction extends ACFunction {
   LevelFunction(
       {required super.deviceId, required super.deviceName, required type})
@@ -166,9 +167,10 @@ class ChildLockFunction extends ACFunction {
 }
 
 class CurrentTempFunction extends ACFunction {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
+  final String unit = "°C";
 
   CurrentTempFunction(
       {required super.deviceId, required super.deviceName, required type})
@@ -185,7 +187,7 @@ class CurrentTempFunction extends ACFunction {
   @override
   List<ACOperationalValue> getOperationalValues() {
     List<ACOperationalValue> values = [];
-    for (int temp = min; temp <= max; temp += step) {
+    for (int temp = min.toInt(); temp <= max; temp += step.toInt()) {
       values.add(ACOperationalValue(
         icon: Assets.currentTemp,
         description: "${temp / 10}°C",

lib/pages/routines/models/ceiling_presence_sensor_functions.dart

@@ -6,10 +6,12 @@ class CpsOperationalValue {
   final String description;
   final dynamic value;
 
+
   CpsOperationalValue({
     required this.icon,
     required this.description,
     required this.value,
+
   });
 }
 
@@ -94,9 +96,9 @@ final class CpsSensitivityFunction extends CpsFunctions {
           icon: Assets.sensitivity,
         );
 
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   static const _images = <String>[
     Assets.sensitivityFeature1,
@@ -115,10 +117,10 @@ final class CpsSensitivityFunction extends CpsFunctions {
   @override
   List<CpsOperationalValue> getOperationalValues() {
     final values = <CpsOperationalValue>[];
-    for (var value = min; value <= max; value += step) {
+    for (var value = min; value <= max; value += step.toInt()) {
       values.add(
         CpsOperationalValue(
-          icon: _images[value],
+          icon: _images[value.toInt()],
           description: '$value',
           value: value,
         ),
@@ -142,9 +144,9 @@ final class CpsMovingSpeedFunction extends CpsFunctions {
           icon: Assets.speedoMeter,
         );
 
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   @override
   List<CpsOperationalValue> getOperationalValues() {
@@ -173,9 +175,9 @@ final class CpsSpatialStaticValueFunction extends CpsFunctions {
           icon: Assets.spatialStaticValue,
         );
 
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   @override
   List<CpsOperationalValue> getOperationalValues() {
@@ -204,9 +206,9 @@ final class CpsSpatialMotionValueFunction extends CpsFunctions {
           icon: Assets.spatialMotionValue,
         );
 
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   @override
   List<CpsOperationalValue> getOperationalValues() {
@@ -375,9 +377,9 @@ final class CpsPresenceJudgementThrsholdFunction extends CpsFunctions {
           icon: Assets.presenceJudgementThrshold,
         );
 
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   @override
   List<CpsOperationalValue> getOperationalValues() {
@@ -406,9 +408,9 @@ final class CpsMotionAmplitudeTriggerThresholdFunction extends CpsFunctions {
           icon: Assets.presenceJudgementThrshold,
         );
 
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   @override
   List<CpsOperationalValue> getOperationalValues() {

lib/pages/routines/models/device_functions.dart

@@ -4,6 +4,11 @@ abstract class DeviceFunction<T> {
   final String code;
   final String operationName;
   final String icon;
+  final double? step;
+  final String? unit;
+  final double? max;
+  final double? min;
+
 
   DeviceFunction({
     required this.deviceId,
@@ -11,6 +16,10 @@ abstract class DeviceFunction<T> {
     required this.code,
     required this.operationName,
     required this.icon,
+    this.step,
+    this.unit,
+    this.max,
+    this.min,
   });
 }
 
@@ -22,6 +31,10 @@ class DeviceFunctionData {
   final dynamic value;
   final String? condition;
   final String? valueDescription;
+  final double? step;
+  final String? unit;
+  final double? max;
+  final double? min;
 
   DeviceFunctionData({
     required this.entityId,
@@ -31,6 +44,10 @@ class DeviceFunctionData {
     required this.value,
     this.condition,
     this.valueDescription,
+    this.step,
+    this.unit,
+    this.max,
+    this.min,
   });
 
   Map<String, dynamic> toJson() {
@@ -42,6 +59,10 @@ class DeviceFunctionData {
       'value': value,
       if (condition != null) 'condition': condition,
       if (valueDescription != null) 'valueDescription': valueDescription,
+      if (step != null) 'step': step,
+      if (unit != null) 'unit': unit,
+      if (max != null) 'max': max,
+      if (min != null) 'min': min,
     };
   }
 
@@ -54,6 +75,10 @@ class DeviceFunctionData {
       value: json['value'],
       condition: json['condition'],
       valueDescription: json['valueDescription'],
+      step: json['step']?.toDouble(),
+      unit: json['unit'],
+      max: json['max']?.toDouble(),
+      min: json['min']?.toDouble(),
     );
   }
 
@@ -68,7 +93,11 @@ class DeviceFunctionData {
         other.operationName == operationName &&
         other.value == value &&
         other.condition == condition &&
-        other.valueDescription == valueDescription;
+        other.valueDescription == valueDescription &&
+        other.step == step &&
+        other.unit == unit &&
+        other.max == max &&
+        other.min == min;
   }
 
   @override
@@ -79,6 +108,10 @@ class DeviceFunctionData {
         operationName.hashCode ^
         value.hashCode ^
         condition.hashCode ^
-        valueDescription.hashCode;
+        valueDescription.hashCode ^
+        step.hashCode ^
+        unit.hashCode ^
+        max.hashCode ^
+        min.hashCode;
   }
 }

lib/pages/routines/models/flush/flush_functions.dart

@@ -20,12 +20,11 @@ abstract class FlushFunctions
 }
 
 class FlushPresenceDelayFunction extends FlushFunctions {
-  final int min;
   FlushPresenceDelayFunction({
     required super.deviceId,
     required super.deviceName,
     required super.type,
-  })  : min = 0,
+  })  :
         super(
           code: FlushMountedPresenceSensorModel.codePresenceState,
           operationName: 'Presence State',
@@ -50,9 +49,9 @@ class FlushPresenceDelayFunction extends FlushFunctions {
 }
 
 class FlushSensiReduceFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   FlushSensiReduceFunction({
     required super.deviceId,
@@ -80,8 +79,8 @@ class FlushSensiReduceFunction extends FlushFunctions {
 }
 
 class FlushNoneDelayFunction extends FlushFunctions {
-  final int min;
-  final int max;
+  final double min;
+  final double max;
   final String unit;
 
   FlushNoneDelayFunction({
@@ -110,9 +109,9 @@ class FlushNoneDelayFunction extends FlushFunctions {
 }
 
 class FlushIlluminanceFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   FlushIlluminanceFunction({
     required super.deviceId,
@@ -130,7 +129,7 @@ class FlushIlluminanceFunction extends FlushFunctions {
   @override
   List<FlushOperationalValue> getOperationalValues() {
     List<FlushOperationalValue> values = [];
-    for (int lux = min; lux <= max; lux += step) {
+    for (int lux = min.toInt(); lux <= max; lux += step.toInt()) {
       values.add(FlushOperationalValue(
         icon: Assets.IlluminanceIcon,
         description: "$lux Lux",
@@ -142,9 +141,9 @@ class FlushIlluminanceFunction extends FlushFunctions {
 }
 
 class FlushOccurDistReduceFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   FlushOccurDistReduceFunction({
     required super.deviceId,
@@ -173,9 +172,9 @@ class FlushOccurDistReduceFunction extends FlushFunctions {
 
 // ==== then functions ====
 class FlushSensitivityFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   FlushSensitivityFunction({
     required super.deviceId,
@@ -203,9 +202,9 @@ class FlushSensitivityFunction extends FlushFunctions {
 }
 
 class FlushNearDetectionFunction extends FlushFunctions {
-  final int min;
+  final double min;
   final double max;
-  final int step;
+  final double step;
   final String unit;
 
   FlushNearDetectionFunction({
@@ -225,7 +224,7 @@ class FlushNearDetectionFunction extends FlushFunctions {
   @override
   List<FlushOperationalValue> getOperationalValues() {
     final values = <FlushOperationalValue>[];
-    for (var value = min; value <= max; value += step) {
+    for (var value = min.toDouble(); value <= max; value += step) {
       values.add(FlushOperationalValue(
         icon: Assets.nobodyTime,
         description: '$value $unit',
@@ -237,9 +236,9 @@ class FlushNearDetectionFunction extends FlushFunctions {
 }
 
 class FlushMaxDetectDistFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
   final String unit;
 
   FlushMaxDetectDistFunction({
@@ -259,7 +258,7 @@ class FlushMaxDetectDistFunction extends FlushFunctions {
   @override
   List<FlushOperationalValue> getOperationalValues() {
     final values = <FlushOperationalValue>[];
-    for (var value = min; value <= max; value += step) {
+    for (var value = min; value <= max; value += step.toInt()) {
       values.add(FlushOperationalValue(
         icon: Assets.nobodyTime,
         description: '$value $unit',
@@ -271,9 +270,9 @@ class FlushMaxDetectDistFunction extends FlushFunctions {
 }
 
 class FlushTargetConfirmTimeFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
   final String unit;
 
   FlushTargetConfirmTimeFunction({
@@ -293,7 +292,7 @@ class FlushTargetConfirmTimeFunction extends FlushFunctions {
   @override
   List<FlushOperationalValue> getOperationalValues() {
     final values = <FlushOperationalValue>[];
-    for (var value = min; value <= max; value += step) {
+    for (var value = min.toDouble(); value <= max; value += step) {
       values.add(FlushOperationalValue(
         icon: Assets.nobodyTime,
         description: '$value $unit',
@@ -305,9 +304,9 @@ class FlushTargetConfirmTimeFunction extends FlushFunctions {
 }
 
 class FlushDisappeDelayFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
   final String unit;
 
   FlushDisappeDelayFunction({
@@ -327,7 +326,7 @@ class FlushDisappeDelayFunction extends FlushFunctions {
   @override
   List<FlushOperationalValue> getOperationalValues() {
     final values = <FlushOperationalValue>[];
-    for (var value = min; value <= max; value += step) {
+    for (var value = min.toDouble(); value <= max; value += step) {
       values.add(FlushOperationalValue(
         icon: Assets.nobodyTime,
         description: '$value $unit',
@@ -339,9 +338,9 @@ class FlushDisappeDelayFunction extends FlushFunctions {
 }
 
 class FlushIndentLevelFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
   final String unit;
 
   FlushIndentLevelFunction({
@@ -361,7 +360,7 @@ class FlushIndentLevelFunction extends FlushFunctions {
   @override
   List<FlushOperationalValue> getOperationalValues() {
     final values = <FlushOperationalValue>[];
-    for (var value = min; value <= max; value += step) {
+    for (var value = min.toDouble(); value <= max; value += step) {
       values.add(FlushOperationalValue(
         icon: Assets.nobodyTime,
         description: '$value $unit',
@@ -373,9 +372,9 @@ class FlushIndentLevelFunction extends FlushFunctions {
 }
 
 class FlushTriggerLevelFunction extends FlushFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
   final String unit;
 
   FlushTriggerLevelFunction({
@@ -395,7 +394,7 @@ class FlushTriggerLevelFunction extends FlushFunctions {
   @override
   List<FlushOperationalValue> getOperationalValues() {
     final values = <FlushOperationalValue>[];
-    for (var value = min; value <= max; value += step) {
+    for (var value = min.toDouble(); value <= max; value += step) {
       values.add(FlushOperationalValue(
         icon: Assets.nobodyTime,
         description: '$value $unit',

lib/pages/routines/models/water_heater/water_heater_functions.dart

@@ -20,17 +20,16 @@ abstract class WaterHeaterFunctions
 }
 
 class WHRestartStatusFunction extends WaterHeaterFunctions {
-  final int min;
   WHRestartStatusFunction({
     required super.deviceId,
     required super.deviceName,
     required super.type,
-  })  : min = 0,
-        super(
+  }) : super(
           code: 'relay_status',
           operationName: 'Restart Status',
           icon: Assets.refreshStatusIcon,
         );
+       
 
   @override
   List<WaterHeaterOperationalValue> getOperationalValues() {
@@ -55,13 +54,11 @@ class WHRestartStatusFunction extends WaterHeaterFunctions {
 }
 
 class WHSwitchFunction extends WaterHeaterFunctions {
-  final int min;
   WHSwitchFunction({
     required super.deviceId,
     required super.deviceName,
     required super.type,
-  })  : min = 0,
-        super(
+  }) : super(
           code: 'switch_1',
           operationName: 'Switch',
           icon: Assets.assetsAcPower,
@@ -104,12 +101,11 @@ class TimerConfirmTimeFunction extends WaterHeaterFunctions {
 }
 
 class BacklightFunction extends WaterHeaterFunctions {
-  final int min;
   BacklightFunction({
     required super.deviceId,
     required super.deviceName,
     required super.type,
-  })  : min = 0,
+  })  : 
         super(
           code: 'switch_backlight',
           operationName: 'Backlight',

lib/pages/routines/models/wps/wps_functions.dart

@@ -4,7 +4,7 @@ import 'package:syncrow_web/pages/routines/models/wps/wps_operational_value.dart
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 abstract class WpsFunctions extends DeviceFunction<WallSensorModel> {
-  final String type; 
+  final String type;
 
   WpsFunctions({
     required super.deviceId,
@@ -13,6 +13,10 @@ abstract class WpsFunctions extends DeviceFunction<WallSensorModel> {
     required super.operationName,
     required super.icon,
     required this.type,
+    super.step,
+    super.unit,
+    super.max,
+    super.min,
   });
 
   List<WpsOperationalValue> getOperationalValues();
@@ -20,9 +24,13 @@ abstract class WpsFunctions extends DeviceFunction<WallSensorModel> {
 
 // For far_detection (75-600cm in 75cm steps)
 class FarDetectionFunction extends WpsFunctions {
-  final int min;
-  final int max;
-  final int step;
+  
+  final double min;
+    @override
+  final double max;
+    @override
+  final double step;
+  @override
   final String unit;
 
   FarDetectionFunction(
@@ -41,7 +49,7 @@ class FarDetectionFunction extends WpsFunctions {
   @override
   List<WpsOperationalValue> getOperationalValues() {
     final values = <WpsOperationalValue>[];
-    for (var value = min; value <= max; value += step) {
+    for (var value = min; value <= max; value += step.toInt()) {
       values.add(WpsOperationalValue(
         icon: Assets.currentDistanceIcon,
         description: '$value $unit',
@@ -54,9 +62,9 @@ class FarDetectionFunction extends WpsFunctions {
 
 // For presence_time (0-65535 minutes)
 class PresenceTimeFunction extends WpsFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
   final String unit;
 
   PresenceTimeFunction(
@@ -86,9 +94,9 @@ class PresenceTimeFunction extends WpsFunctions {
 
 // For motion_sensitivity_value (1-5 levels)
 class MotionSensitivityFunction extends WpsFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   MotionSensitivityFunction(
       {required super.deviceId, required super.deviceName, required type})
@@ -116,9 +124,9 @@ class MotionSensitivityFunction extends WpsFunctions {
 }
 
 class MotionLessSensitivityFunction extends WpsFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   MotionLessSensitivityFunction(
       {required super.deviceId, required super.deviceName, required type})
@@ -171,8 +179,8 @@ class IndicatorFunction extends WpsFunctions {
 }
 
 class NoOneTimeFunction extends WpsFunctions {
-  final int min;
-  final int max;
+  final double min;
+  final double max;
   final String unit;
 
   NoOneTimeFunction(
@@ -225,9 +233,9 @@ class PresenceStateFunction extends WpsFunctions {
 }
 
 class CurrentDistanceFunction extends WpsFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   CurrentDistanceFunction(
       {required super.deviceId, required super.deviceName, required type})
@@ -244,11 +252,10 @@ class CurrentDistanceFunction extends WpsFunctions {
   @override
   List<WpsOperationalValue> getOperationalValues() {
     List<WpsOperationalValue> values = [];
-    for (int cm = min; cm <= max; cm += step) {
+    for (int cm = min.toInt(); cm <= max; cm += step.toInt()) {
       values.add(WpsOperationalValue(
         icon: Assets.assetsTempreture,
         description: "${cm}CM",
-
         value: cm,
       ));
     }
@@ -257,9 +264,9 @@ class CurrentDistanceFunction extends WpsFunctions {
 }
 
 class IlluminanceValueFunction extends WpsFunctions {
-  final int min;
-  final int max;
-  final int step;
+  final double min;
+  final double max;
+  final double step;
 
   IlluminanceValueFunction({
     required super.deviceId,
@@ -277,7 +284,7 @@ class IlluminanceValueFunction extends WpsFunctions {
   @override
   List<WpsOperationalValue> getOperationalValues() {
     List<WpsOperationalValue> values = [];
-    for (int lux = min; lux <= max; lux += step) {
+    for (int lux = min.toInt(); lux <= max; lux += step.toInt()) {
       values.add(WpsOperationalValue(
         icon: Assets.IlluminanceIcon,
         description: "$lux Lux",

lib/pages/routines/widgets/custom_routines_textbox.dart

@@ -0,0 +1,297 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:syncrow_web/pages/routines/widgets/condition_toggle.dart';
+import 'package:syncrow_web/pages/routines/widgets/slider_value_selector.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class CustomRoutinesTextbox extends StatefulWidget {
+  final String? currentCondition;
+  final String dialogType;
+  final (double, double) sliderRange;
+  final dynamic displayedValue;
+  final dynamic initialValue;
+  final void Function(String condition) onConditionChanged;
+  final void Function(double value) onTextChanged;
+  final String unit;
+  final double dividendOfRange;
+  final double stepIncreaseAmount;
+  final bool withSpecialChar;
+
+  const CustomRoutinesTextbox({
+    required this.dialogType,
+    required this.sliderRange,
+    required this.displayedValue,
+    required this.initialValue,
+    required this.onConditionChanged,
+    required this.onTextChanged,
+    required this.currentCondition,
+    required this.unit,
+    required this.dividendOfRange,
+    required this.stepIncreaseAmount,
+    required this.withSpecialChar,
+    super.key,
+  });
+
+  @override
+  State<CustomRoutinesTextbox> createState() => _CustomRoutinesTextboxState();
+}
+
+class _CustomRoutinesTextboxState extends State<CustomRoutinesTextbox> {
+  late final TextEditingController _controller;
+  bool hasError = false;
+  String? errorMessage;
+
+  int getDecimalPlaces(double step) {
+    String stepStr = step.toString();
+    if (stepStr.contains('.')) {
+      List<String> parts = stepStr.split('.');
+      String decimalPart = parts[1];
+      decimalPart = decimalPart.replaceAll(RegExp(r'0+$'), '');
+      return decimalPart.isEmpty ? 0 : decimalPart.length;
+    } else {
+      return 0;
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    int decimalPlaces = getDecimalPlaces(widget.stepIncreaseAmount);
+    double initialValue;
+    if (widget.initialValue != null &&
+        widget.initialValue is num &&
+        (widget.initialValue as num) == 0) {
+      initialValue = 0.0;
+    } else {
+      initialValue = double.tryParse(widget.displayedValue) ?? 0.0;
+    }
+    _controller = TextEditingController(
+      text: initialValue.toStringAsFixed(decimalPlaces),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _validateInput(String value) {
+    final doubleValue = double.tryParse(value);
+    if (doubleValue == null) {
+      setState(() {
+        errorMessage = "Invalid number";
+        hasError = true;
+      });
+      return;
+    }
+
+    final min = widget.sliderRange.$1;
+    final max = widget.sliderRange.$2;
+
+    if (doubleValue < min) {
+      setState(() {
+        errorMessage = "Value must be at least $min";
+        hasError = true;
+      });
+    } else if (doubleValue > max) {
+      setState(() {
+        errorMessage = "Value must be at most $max";
+        hasError = true;
+      });
+    } else {
+      int decimalPlaces = getDecimalPlaces(widget.stepIncreaseAmount);
+      int factor = pow(10, decimalPlaces).toInt();
+      int scaledStep = (widget.stepIncreaseAmount * factor).round();
+      int scaledValue = (doubleValue * factor).round();
+
+      if (scaledValue % scaledStep != 0) {
+        setState(() {
+          errorMessage = "must be a multiple of ${widget.stepIncreaseAmount}";
+          hasError = true;
+        });
+      } else {
+        setState(() {
+          errorMessage = null;
+          hasError = false;
+        });
+      }
+    }
+  }
+
+  @override
+  void didUpdateWidget(CustomRoutinesTextbox oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.initialValue != oldWidget.initialValue) {
+      if (widget.initialValue != null &&
+          widget.initialValue is num &&
+          (widget.initialValue as num) == 0) {
+        int decimalPlaces = getDecimalPlaces(widget.stepIncreaseAmount);
+        _controller.text = 0.0.toStringAsFixed(decimalPlaces);
+      }
+    }
+  }
+
+  void _correctAndUpdateValue(String value) {
+    final doubleValue = double.tryParse(value) ?? 0.0;
+    int decimalPlaces = getDecimalPlaces(widget.stepIncreaseAmount);
+    double rounded = (doubleValue / widget.stepIncreaseAmount).round() *
+        widget.stepIncreaseAmount;
+    rounded = rounded.clamp(widget.sliderRange.$1, widget.sliderRange.$2);
+    rounded = double.parse(rounded.toStringAsFixed(decimalPlaces));
+
+    setState(() {
+      hasError = false;
+      errorMessage = null;
+    });
+
+    _controller.text = rounded.toStringAsFixed(decimalPlaces);
+    _controller.selection = TextSelection.fromPosition(
+      TextPosition(offset: _controller.text.length),
+    );
+    widget.onTextChanged(rounded);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    int decimalPlaces = getDecimalPlaces(widget.stepIncreaseAmount);
+
+    List<TextInputFormatter> formatters = [];
+    if (decimalPlaces == 0) {
+      formatters.add(FilteringTextInputFormatter.digitsOnly);
+    } else {
+      formatters.add(FilteringTextInputFormatter.allow(
+        RegExp(r'^\d*\.?\d{0,' + decimalPlaces.toString() + r'}$'),
+      ));
+    }
+    formatters.add(RangeInputFormatter(
+      min: widget.sliderRange.$1,
+      max: widget.sliderRange.$2,
+    ));
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        if (widget.dialogType == 'IF')
+          ConditionToggle(
+            currentCondition: widget.currentCondition,
+            onChanged: widget.onConditionChanged,
+          ),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 35, vertical: 2),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.end,
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              Text(
+                'Step: ${widget.stepIncreaseAmount}',
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.grayColor,
+                  fontSize: 10,
+                  fontWeight: FontWeight.w400,
+                ),
+              ),
+            ],
+          ),
+        ),
+        Center(
+          child: Container(
+            width: 170,
+            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
+            decoration: BoxDecoration(
+              color: const Color(0xFFF8F8F8),
+              borderRadius: BorderRadius.circular(20),
+              border: hasError
+                  ? Border.all(color: Colors.red, width: 1)
+                  : Border.all(
+                      color: ColorsManager.lightGrayBorderColor, width: 1),
+              boxShadow: [
+                BoxShadow(
+                  color: ColorsManager.blackColor.withOpacity(0.05),
+                  blurRadius: 8,
+                  offset: const Offset(0, 4),
+                ),
+              ],
+            ),
+            child: Row(
+              children: [
+                Expanded(
+                  child: TextFormField(
+                    controller: _controller,
+                    style: context.textTheme.bodyLarge?.copyWith(
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                      color: ColorsManager.blackColor,
+                    ),
+                    keyboardType: TextInputType.number,
+                    inputFormatters: widget.withSpecialChar == true
+                        ? [FilteringTextInputFormatter.digitsOnly]
+                        : null,
+                    decoration: const InputDecoration(
+                      border: InputBorder.none,
+                      isDense: true,
+                      contentPadding: EdgeInsets.zero,
+                    ),
+                    onChanged: _validateInput,
+                    onFieldSubmitted: _correctAndUpdateValue,
+                    onTapOutside: (_) =>
+                        _correctAndUpdateValue(_controller.text),
+                  ),
+                ),
+                const SizedBox(width: 12),
+                Text(
+                  widget.unit,
+                  style: context.textTheme.bodyMedium?.copyWith(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color: ColorsManager.vividBlue,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        if (errorMessage != null)
+          Padding(
+            padding: const EdgeInsets.only(top: 2.0),
+            child: Text(
+              errorMessage!,
+              style: context.textTheme.bodySmall?.copyWith(
+                color: Colors.red,
+                fontSize: 10,
+              ),
+            ),
+          ),
+        const SizedBox(height: 16),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 32),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                'Min. ${widget.sliderRange.$1.toInt()}${widget.unit}',
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.grayColor,
+                  fontSize: 10,
+                  fontWeight: FontWeight.w400,
+                ),
+              ),
+              Text(
+                'Max. ${widget.sliderRange.$2.toInt()}${widget.unit}',
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.grayColor,
+                  fontSize: 10,
+                  fontWeight: FontWeight.w400,
+                ),
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: 16),
+      ],
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/ac_dialog.dart

@@ -7,6 +7,7 @@ import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/models/ac/ac_function.dart';
 import 'package:syncrow_web/pages/routines/models/ac/ac_operational_value.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/custom_routines_textbox.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
@@ -76,24 +77,20 @@ class ACHelper {
                                 context: context,
                                 acFunctions: acFunctions,
                                 device: device,
-                                onFunctionSelected: (functionCode, operationName) {
+                                onFunctionSelected:
+                                    (functionCode, operationName) {
                                   RoutineTapFunctionHelper.onTapFunction(
-                                    context,
-                                    functionCode: functionCode,
-                                    functionOperationName: operationName,
-                                    functionValueDescription:
-                                        selectedFunctionData.valueDescription,
-                                    deviceUuid: device?.uuid,
-                                    codesToAddIntoFunctionsWithDefaultValue: [
-                                      'temp_set',
-                                      'temp_current',
-                                    ],
-                                    defaultValue: functionCode == 'temp_set'
-                                        ? 200
-                                        : functionCode == 'temp_current'
-                                            ? -100
-                                            : 0,
-                                  );
+                                      context,
+                                      functionCode: functionCode,
+                                      functionOperationName: operationName,
+                                      functionValueDescription:
+                                          selectedFunctionData.valueDescription,
+                                      deviceUuid: device?.uuid,
+                                      codesToAddIntoFunctionsWithDefaultValue: [
+                                        'temp_set',
+                                        'temp_current',
+                                      ],
+                                      defaultValue: 0);
                                 },
                               ),
                             ),
@@ -206,27 +203,61 @@ class ACHelper {
     required String operationName,
     bool? removeComparators,
   }) {
-    final initialVal = selectedFunction == 'temp_set' ? 200 : -100;
+    final selectedFn =
+        acFunctions.firstWhere((f) => f.code == selectedFunction);
+
     if (selectedFunction == 'temp_set' || selectedFunction == 'temp_current') {
-      final initialValue = selectedFunctionData?.value ?? initialVal;
-      return _buildTemperatureSelector(
-        context: context,
-        initialValue: initialValue,
-        selectCode: selectedFunction,
+      // Convert stored integer value to display value
+      final displayValue =
+          (selectedFunctionData?.value ?? selectedFn.min ?? 0) / 10;
+      final minValue = selectedFn.min! / 10;
+      final maxValue = selectedFn.max! / 10;
+      return CustomRoutinesTextbox(
+        withSpecialChar: true,
+        dividendOfRange: maxValue,
         currentCondition: selectedFunctionData?.condition,
-        device: device,
-        operationName: operationName,
-        selectedFunctionData: selectedFunctionData,
-        removeComparators: removeComparators,
+        dialogType: selectedFn.type,
+        sliderRange: (minValue, maxValue),
+        displayedValue: displayValue.toStringAsFixed(1),
+        initialValue: displayValue.toDouble(),
+        unit: selectedFn.unit!,
+        onConditionChanged: (condition) => context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectedFunction,
+                  operationName: selectedFn.operationName,
+                  condition: condition,
+                  value: 0,
+                  step: selectedFn.step,
+                  unit: selectedFn.unit,
+                  max: selectedFn.max,
+                  min: selectedFn.min,
+                ),
+              ),
+            ),
+        onTextChanged: (value) => context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectedFunction,
+                  operationName: selectedFn.operationName,
+                  value: (value * 10).round(), // Store as integer
+                  condition: selectedFunctionData?.condition,
+                  step: selectedFn.step,
+                  unit: selectedFn.unit,
+                  max: selectedFn.max,
+                  min: selectedFn.min,
+                ),
+              ),
+            ),
+        stepIncreaseAmount: selectedFn.step! / 10, // Convert step for display
       );
     }
 
-    final selectedFn = acFunctions.firstWhere((f) => f.code == selectedFunction);
-    final values = selectedFn.getOperationalValues();
-
     return _buildOperationalValuesList(
       context: context,
-      values: values,
+      values: selectedFn.getOperationalValues(),
       selectedValue: selectedFunctionData?.value,
       device: device,
       operationName: operationName,
@@ -235,150 +266,151 @@ class ACHelper {
     );
   }
 
-  /// Build temperature selector for AC functions dialog
-  static Widget _buildTemperatureSelector({
-    required BuildContext context,
-    required dynamic initialValue,
-    required String? currentCondition,
-    required String selectCode,
-    AllDevicesModel? device,
-    required String operationName,
-    DeviceFunctionData? selectedFunctionData,
-    bool? removeComparators,
-  }) {
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        if (removeComparators != true)
-          _buildConditionToggle(
-            context,
-            currentCondition,
-            selectCode,
-            device,
-            operationName,
-            selectedFunctionData,
-          ),
-        const SizedBox(height: 20),
-        _buildTemperatureDisplay(
-          context,
-          initialValue,
-          device,
-          operationName,
-          selectedFunctionData,
-          selectCode,
-        ),
-        const SizedBox(height: 20),
-        _buildTemperatureSlider(
-          context,
-          initialValue,
-          device,
-          operationName,
-          selectedFunctionData,
-          selectCode,
-        ),
-      ],
-    );
-  }
+  // /// Build temperature selector for AC functions dialog
+  // static Widget _buildTemperatureSelector({
+  //   required BuildContext context,
+  //   required dynamic initialValue,
+  //   required String? currentCondition,
+  //   required String selectCode,
+  //   AllDevicesModel? device,
+  //   required String operationName,
+  //   DeviceFunctionData? selectedFunctionData,
+  //   bool? removeComparators,
+  // }) {
+  //   return Column(
+  //     mainAxisAlignment: MainAxisAlignment.center,
+  //     children: [
+  //       if (removeComparators != true)
+  //         _buildConditionToggle(
+  //           context,
+  //           currentCondition,
+  //           selectCode,
+  //           device,
+  //           operationName,
+  //           selectedFunctionData,
+  //         ),
+  //       const SizedBox(height: 20),
+  //       _buildTemperatureDisplay(
+  //         context,
+  //         initialValue,
+  //         device,
+  //         operationName,
+  //         selectedFunctionData,
+  //         selectCode,
+  //       ),
+  //       const SizedBox(height: 20),
+  //       _buildTemperatureSlider(
+  //         context,
+  //         initialValue,
+  //         device,
+  //         operationName,
+  //         selectedFunctionData,
+  //         selectCode,
+  //       ),
+  //     ],
+  //   );
+  // }
 
-  /// Build condition toggle for AC functions dialog
-  static Widget _buildConditionToggle(
-    BuildContext context,
-    String? currentCondition,
-    String selectCode,
-    AllDevicesModel? device,
-    String operationName,
-    DeviceFunctionData? selectedFunctionData,
+  // /// Build condition toggle for AC functions dialog
+  // static Widget _buildConditionToggle(
+  //   BuildContext context,
+  //   String? currentCondition,
+  //   String selectCode,
+  //   AllDevicesModel? device,
+  //   String operationName,
+  //   DeviceFunctionData? selectedFunctionData,
 
-    // Function(String) onConditionChanged,
-  ) {
-    final conditions = ["<", "==", ">"];
+  //   // Function(String) onConditionChanged,
+  // ) {
+  //   final conditions = ["<", "==", ">"];
 
-    return ToggleButtons(
-      onPressed: (int index) {
-        context.read<FunctionBloc>().add(
-              AddFunction(
-                functionData: DeviceFunctionData(
-                  entityId: device?.uuid ?? '',
-                  functionCode: selectCode,
-                  operationName: operationName,
-                  condition: conditions[index],
-                  value: selectedFunctionData?.value ?? selectCode == 'temp_set'
-                      ? 200
-                      : -100,
-                  valueDescription: selectedFunctionData?.valueDescription,
-                ),
-              ),
-            );
-      },
-      borderRadius: const BorderRadius.all(Radius.circular(8)),
-      selectedBorderColor: ColorsManager.primaryColorWithOpacity,
-      selectedColor: Colors.white,
-      fillColor: ColorsManager.primaryColorWithOpacity,
-      color: ColorsManager.primaryColorWithOpacity,
-      constraints: const BoxConstraints(
-        minHeight: 40.0,
-        minWidth: 40.0,
-      ),
-      isSelected: conditions.map((c) => c == (currentCondition ?? "==")).toList(),
-      children: conditions.map((c) => Text(c)).toList(),
-    );
-  }
+  //   return ToggleButtons(
+  //     onPressed: (int index) {
+  //       context.read<FunctionBloc>().add(
+  //             AddFunction(
+  //               functionData: DeviceFunctionData(
+  //                 entityId: device?.uuid ?? '',
+  //                 functionCode: selectCode,
+  //                 operationName: operationName,
+  //                 condition: conditions[index],
+  //                 value: selectedFunctionData?.value ?? selectCode == 'temp_set'
+  //                     ? 200
+  //                     : -100,
+  //                 valueDescription: selectedFunctionData?.valueDescription,
+  //               ),
+  //             ),
+  //           );
+  //     },
+  //     borderRadius: const BorderRadius.all(Radius.circular(8)),
+  //     selectedBorderColor: ColorsManager.primaryColorWithOpacity,
+  //     selectedColor: Colors.white,
+  //     fillColor: ColorsManager.primaryColorWithOpacity,
+  //     color: ColorsManager.primaryColorWithOpacity,
+  //     constraints: const BoxConstraints(
+  //       minHeight: 40.0,
+  //       minWidth: 40.0,
+  //     ),
+  //     isSelected:
+  //         conditions.map((c) => c == (currentCondition ?? "==")).toList(),
+  //     children: conditions.map((c) => Text(c)).toList(),
+  //   );
+  // }
 
-  /// Build temperature display for AC functions dialog
-  static Widget _buildTemperatureDisplay(
-    BuildContext context,
-    dynamic initialValue,
-    AllDevicesModel? device,
-    String operationName,
-    DeviceFunctionData? selectedFunctionData,
-    String selectCode,
-  ) {
-    final initialVal = selectCode == 'temp_set' ? 200 : -100;
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
-      decoration: BoxDecoration(
-        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
-        borderRadius: BorderRadius.circular(10),
-      ),
-      child: Text(
-        '${(initialValue ?? initialVal) / 10}°C',
-        style: context.textTheme.headlineMedium!.copyWith(
-          color: ColorsManager.primaryColorWithOpacity,
-        ),
-      ),
-    );
-  }
+  // /// Build temperature display for AC functions dialog
+  // static Widget _buildTemperatureDisplay(
+  //   BuildContext context,
+  //   dynamic initialValue,
+  //   AllDevicesModel? device,
+  //   String operationName,
+  //   DeviceFunctionData? selectedFunctionData,
+  //   String selectCode,
+  // ) {
+  //   final initialVal = selectCode == 'temp_set' ? 200 : -100;
+  //   return Container(
+  //     padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+  //     decoration: BoxDecoration(
+  //       color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
+  //       borderRadius: BorderRadius.circular(10),
+  //     ),
+  //     child: Text(
+  //       '${(initialValue ?? initialVal) / 10}°C',
+  //       style: context.textTheme.headlineMedium!.copyWith(
+  //         color: ColorsManager.primaryColorWithOpacity,
+  //       ),
+  //     ),
+  //   );
+  // }
 
-  static Widget _buildTemperatureSlider(
-    BuildContext context,
-    dynamic initialValue,
-    AllDevicesModel? device,
-    String operationName,
-    DeviceFunctionData? selectedFunctionData,
-    String selectCode,
-  ) {
-    return Slider(
-      value: initialValue is int ? initialValue.toDouble() : 200.0,
-      min: selectCode == 'temp_current' ? -100 : 200,
-      max: selectCode == 'temp_current' ? 900 : 300,
-      divisions: 10,
-      label: '${((initialValue ?? 160) / 10).toInt()}°C',
-      onChanged: (value) {
-        context.read<FunctionBloc>().add(
-              AddFunction(
-                functionData: DeviceFunctionData(
-                  entityId: device?.uuid ?? '',
-                  functionCode: selectCode,
-                  operationName: operationName,
-                  value: value,
-                  condition: selectedFunctionData?.condition,
-                  valueDescription: selectedFunctionData?.valueDescription,
-                ),
-              ),
-            );
-      },
-    );
-  }
+  // static Widget _buildTemperatureSlider(
+  //   BuildContext context,
+  //   dynamic initialValue,
+  //   AllDevicesModel? device,
+  //   String operationName,
+  //   DeviceFunctionData? selectedFunctionData,
+  //   String selectCode,
+  // ) {
+  //   return Slider(
+  //     value: initialValue is int ? initialValue.toDouble() : 200.0,
+  //     min: selectCode == 'temp_current' ? -100 : 200,
+  //     max: selectCode == 'temp_current' ? 900 : 300,
+  //     divisions: 10,
+  //     label: '${((initialValue ?? 160) / 10).toInt()}°C',
+  //     onChanged: (value) {
+  //       context.read<FunctionBloc>().add(
+  //             AddFunction(
+  //               functionData: DeviceFunctionData(
+  //                 entityId: device?.uuid ?? '',
+  //                 functionCode: selectCode,
+  //                 operationName: operationName,
+  //                 value: value,
+  //                 condition: selectedFunctionData?.condition,
+  //                 valueDescription: selectedFunctionData?.valueDescription,
+  //               ),
+  //             ),
+  //           );
+  //     },
+  //   );
+  // }
 
   static Widget _buildOperationalValuesList({
     required BuildContext context,
@@ -414,7 +446,9 @@ class ACHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
+            isSelected
+                ? Icons.radio_button_checked
+                : Icons.radio_button_unchecked,
             size: 24,
             color: isSelected
                 ? ColorsManager.primaryColorWithOpacity
@@ -430,7 +464,8 @@ class ACHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription: selectedFunctionData?.valueDescription,
+                        valueDescription:
+                            selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/ceiling_sensor_dialog.dart

@@ -41,7 +41,8 @@ class _CeilingSensorDialogState extends State<CeilingSensorDialog> {
   void initState() {
     super.initState();
 
-    _cpsFunctions = widget.functions.whereType<CpsFunctions>().where((function) {
+    _cpsFunctions =
+        widget.functions.whereType<CpsFunctions>().where((function) {
       if (widget.dialogType == 'THEN') {
         return function.type == 'THEN' || function.type == 'BOTH';
       }
@@ -149,6 +150,7 @@ class _CeilingSensorDialogState extends State<CeilingSensorDialog> {
                     device: widget.device,
                   )
                 : CpsDialogSliderSelector(
+                    step: selectedCpsFunctions.step!,
                     operations: operations,
                     selectedFunction: selectedFunction ?? '',
                     selectedFunctionData: selectedFunctionData,

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_dialog_slider_selector.dart

@@ -4,6 +4,7 @@ import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_mo
 import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
 import 'package:syncrow_web/pages/routines/models/ceiling_presence_sensor_functions.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/custom_routines_textbox.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_slider_helpers.dart';
 import 'package:syncrow_web/pages/routines/widgets/slider_value_selector.dart';
 
@@ -16,6 +17,7 @@ class CpsDialogSliderSelector extends StatelessWidget {
     required this.device,
     required this.operationName,
     required this.dialogType,
+    required this.step,
     super.key,
   });
 
@@ -26,13 +28,16 @@ class CpsDialogSliderSelector extends StatelessWidget {
   final AllDevicesModel? device;
   final String operationName;
   final String dialogType;
+  final double step;
 
   @override
   Widget build(BuildContext context) {
-    return SliderValueSelector(
+    return CustomRoutinesTextbox(
+      withSpecialChar: false,
       currentCondition: selectedFunctionData.condition,
       dialogType: dialogType,
-      sliderRange: CpsSliderHelpers.sliderRange(selectedFunctionData.functionCode),
+      sliderRange:
+          CpsSliderHelpers.sliderRange(selectedFunctionData.functionCode),
       displayedValue: CpsSliderHelpers.displayText(
         value: selectedFunctionData.value,
         functionCode: selectedFunctionData.functionCode,
@@ -50,7 +55,7 @@ class CpsDialogSliderSelector extends StatelessWidget {
               ),
             ),
           ),
-      onSliderChanged: (value) => context.read<FunctionBloc>().add(
+      onTextChanged: (value) => context.read<FunctionBloc>().add(
             AddFunction(
               functionData: DeviceFunctionData(
                 entityId: device?.uuid ?? '',
@@ -64,6 +69,7 @@ class CpsDialogSliderSelector extends StatelessWidget {
       dividendOfRange: CpsSliderHelpers.dividendOfRange(
         selectedFunctionData.functionCode,
       ),
+      stepIncreaseAmount: step,
     );
   }
 }

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_functions_list.dart

@@ -34,30 +34,33 @@ class CpsFunctionsList extends StatelessWidget {
         itemBuilder: (context, index) {
           final function = cpsFunctions[index];
           return RoutineDialogFunctionListTile(
-            iconPath: function.icon,
-            operationName: function.operationName,
-            onTap: () => RoutineTapFunctionHelper.onTapFunction(
-              context,
-              functionCode: function.code,
-              functionOperationName: function.operationName,
-              functionValueDescription: selectedFunctionData?.valueDescription,
-              deviceUuid: device?.uuid,
-              codesToAddIntoFunctionsWithDefaultValue: [
-                'static_max_dis',
-                'presence_reference',
-                'moving_reference',
-                'perceptual_boundary',
-                'moving_boundary',
-                'moving_rigger_time',
-                'moving_static_time',
-                'none_body_time',
-                'moving_max_dis',
-                'moving_range',
-                'presence_range',
-                if (dialogType == "IF") 'sensitivity',
-              ],
-            ),
-          );
+              iconPath: function.icon,
+              operationName: function.operationName,
+              onTap: () {
+                RoutineTapFunctionHelper.onTapFunction(
+                  context,
+                  step: function.step,
+                  functionCode: function.code,
+                  functionOperationName: function.operationName,
+                  functionValueDescription:
+                      selectedFunctionData?.valueDescription,
+                  deviceUuid: device?.uuid,
+                  codesToAddIntoFunctionsWithDefaultValue: [
+                    'static_max_dis',
+                    'presence_reference',
+                    'moving_reference',
+                    'perceptual_boundary',
+                    'moving_boundary',
+                    'moving_rigger_time',
+                    'moving_static_time',
+                    'none_body_time',
+                    'moving_max_dis',
+                    'moving_range',
+                    'presence_range',
+                    if (dialogType == "IF") 'sensitivity',
+                  ],
+                );
+              });
         },
       ),
     );

lib/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_operational_values_list.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
 import 'package:syncrow_web/pages/routines/models/flush/flush_operational_value.dart';
 
@@ -21,22 +22,20 @@ class FlushOperationalValuesList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return  ListView.builder(
-            padding: const EdgeInsets.all(20),
-            itemCount: values.length,
-            itemBuilder: (context, index) =>
-                _buildValueItem(context, values[index]),
-          );
+    return ListView.builder(
+      padding: const EdgeInsets.all(20),
+      itemCount: values.length,
+      itemBuilder: (context, index) => _buildValueItem(context, values[index]),
+    );
   }
 
-
-
   Widget _buildValueItem(BuildContext context, FlushOperationalValue value) {
     return Padding(
       padding: const EdgeInsets.all(8.0),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
+          SvgPicture.asset(value.icon, width: 25, height: 25),
           Expanded(child: _buildValueDescription(value)),
           _buildValueRadio(context, value),
         ],
@@ -44,9 +43,6 @@ class FlushOperationalValuesList extends StatelessWidget {
     );
   }
 
-
-
-
   Widget _buildValueDescription(FlushOperationalValue value) {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 8.0),
@@ -60,6 +56,4 @@ class FlushOperationalValuesList extends StatelessWidget {
         groupValue: selectedValue,
         onChanged: (_) => onSelect(value));
   }
-
-
 }

lib/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_value_selector_widget.dart

@@ -5,6 +5,7 @@ import 'package:syncrow_web/pages/device_managment/flush_mounted_presence_sensor
 import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/models/flush/flush_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/custom_routines_textbox.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_operational_values_list.dart';
 import 'package:syncrow_web/pages/routines/widgets/slider_value_selector.dart';
 
@@ -66,7 +67,8 @@ class FlushValueSelectorWidget extends StatelessWidget {
       if (isDistanceDetection) {
         initialValue = initialValue / 100;
       }
-      return SliderValueSelector(
+      return CustomRoutinesTextbox(
+        withSpecialChar: true,
         currentCondition: functionData.condition,
         dialogType: dialogType,
         sliderRange: sliderRange,
@@ -83,7 +85,7 @@ class FlushValueSelectorWidget extends StatelessWidget {
                 ),
               ),
             ),
-        onSliderChanged: (value) {
+        onTextChanged: (value) {
           final roundedValue = _roundToStep(value, stepSize);
           final finalValue =
               isDistanceDetection ? (roundedValue * 100).toInt() : roundedValue;
@@ -102,6 +104,7 @@ class FlushValueSelectorWidget extends StatelessWidget {
         },
         unit: _unit,
         dividendOfRange: stepSize,
+        stepIncreaseAmount: stepSize,
       );
     }
 

lib/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart

@@ -8,6 +8,7 @@ abstract final class RoutineTapFunctionHelper {
 
   static void onTapFunction(
     BuildContext context, {
+    double? step,
     required String functionCode,
     required String functionOperationName,
     required String? functionValueDescription,

lib/pages/routines/widgets/routine_dialogs/one_gang_switch_dialog.dart

@@ -4,11 +4,11 @@ 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/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routines/helper/duration_format_helper.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_function.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/one_gang_switch/one_gang_switch.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
+import 'package:syncrow_web/pages/routines/widgets/custom_routines_textbox.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
@@ -87,14 +87,15 @@ class OneGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () =>
-                                          RoutineTapFunctionHelper.onTapFunction(
+                                      onTap: () => RoutineTapFunctionHelper
+                                          .onTapFunction(
                                         context,
                                         functionCode: function.code,
                                         functionOperationName:
                                             function.operationName,
                                         functionValueDescription:
-                                            selectedFunctionData.valueDescription,
+                                            selectedFunctionData
+                                                .valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue: [
                                           'countdown_1',
@@ -108,14 +109,16 @@ class OneGangSwitchHelper {
                               if (selectedFunction != null)
                                 Expanded(
                                   child: _buildValueSelector(
-                                    context: context,
-                                    selectedFunction: selectedFunction,
-                                    selectedFunctionData: selectedFunctionData,
-                                    acFunctions: oneGangFunctions,
-                                    device: device,
-                                    operationName: selectedOperationName ?? '',
-                                    removeComparetors: removeComparetors,
-                                  ),
+                                      context: context,
+                                      selectedFunction: selectedFunction,
+                                      selectedFunctionData:
+                                          selectedFunctionData,
+                                      acFunctions: oneGangFunctions,
+                                      device: device,
+                                      operationName:
+                                          selectedOperationName ?? '',
+                                      removeComparetors: removeComparetors,
+                                      dialogType: dialogType),
                                 ),
                             ],
                           ),
@@ -172,6 +175,7 @@ class OneGangSwitchHelper {
     AllDevicesModel? device,
     required String operationName,
     required bool removeComparetors,
+    required String dialogType,
   }) {
     if (selectedFunction == 'countdown_1') {
       final initialValue = selectedFunctionData?.value ?? 0;
@@ -184,6 +188,7 @@ class OneGangSwitchHelper {
         operationName: operationName,
         selectedFunctionData: selectedFunctionData,
         removeComparetors: removeComparetors,
+        dialogType: dialogType,
       );
     }
     final selectedFn = acFunctions.firstWhere(
@@ -216,93 +221,18 @@ class OneGangSwitchHelper {
     required String operationName,
     DeviceFunctionData? selectedFunctionData,
     required bool removeComparetors,
+    String? dialogType,
   }) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        if (removeComparetors != true)
-          _buildConditionToggle(
-            context,
-            currentCondition,
-            selectCode,
-            device,
-            operationName,
-            selectedFunctionData,
-          ),
-        const SizedBox(height: 20),
-        _buildCountDownDisplay(context, initialValue, device, operationName,
-            selectedFunctionData, selectCode),
         const SizedBox(height: 20),
         _buildCountDownSlider(context, initialValue, device, operationName,
-            selectedFunctionData, selectCode),
+            selectedFunctionData, selectCode, dialogType!),
       ],
     );
   }
 
-  /// Build condition toggle for AC functions dialog
-  static Widget _buildConditionToggle(
-    BuildContext context,
-    String? currentCondition,
-    String selectCode,
-    AllDevicesModel? device,
-    String operationName,
-    DeviceFunctionData? selectedFunctionData,
-    // Function(String) onConditionChanged,
-  ) {
-    final conditions = ["<", "==", ">"];
-
-    return ToggleButtons(
-      onPressed: (int index) {
-        context.read<FunctionBloc>().add(
-              AddFunction(
-                functionData: DeviceFunctionData(
-                  entityId: device?.uuid ?? '',
-                  functionCode: selectCode,
-                  operationName: operationName,
-                  condition: conditions[index],
-                  value: selectedFunctionData?.value ?? 0,
-                  valueDescription: selectedFunctionData?.valueDescription,
-                ),
-              ),
-            );
-      },
-      borderRadius: const BorderRadius.all(Radius.circular(8)),
-      selectedBorderColor: ColorsManager.primaryColorWithOpacity,
-      selectedColor: Colors.white,
-      fillColor: ColorsManager.primaryColorWithOpacity,
-      color: ColorsManager.primaryColorWithOpacity,
-      constraints: const BoxConstraints(
-        minHeight: 40.0,
-        minWidth: 40.0,
-      ),
-      isSelected: conditions.map((c) => c == (currentCondition ?? "==")).toList(),
-      children: conditions.map((c) => Text(c)).toList(),
-    );
-  }
-
-  /// Build temperature display for AC functions dialog
-  static Widget _buildCountDownDisplay(
-      BuildContext context,
-      dynamic initialValue,
-      AllDevicesModel? device,
-      String operationName,
-      DeviceFunctionData? selectedFunctionData,
-      String selectCode) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
-      decoration: BoxDecoration(
-        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
-        borderRadius: BorderRadius.circular(10),
-      ),
-      child: Text(
-        DurationFormatMixin.formatDuration(initialValue?.toInt() ?? 0),
-        style: context.textTheme.headlineMedium!.copyWith(
-          color: ColorsManager.primaryColorWithOpacity,
-        ),
-      ),
-    );
-  }
-
   static Widget _buildCountDownSlider(
     BuildContext context,
     dynamic initialValue,
@@ -310,38 +240,47 @@ class OneGangSwitchHelper {
     String operationName,
     DeviceFunctionData? selectedFunctionData,
     String selectCode,
+    String dialogType,
   ) {
-    const twelveHoursInSeconds = 43200.0;
-    final operationalValues = SwitchOperationalValue(
-      icon: '',
-      description: "sec",
-      value: 0.0,
-      minValue: 0,
-      maxValue: twelveHoursInSeconds,
-      stepValue: 1,
-    );
-    return Slider(
-      value: (initialValue ?? 0).toDouble(),
-      min: operationalValues.minValue?.toDouble() ?? 0.0,
-      max: operationalValues.maxValue?.toDouble() ?? 0.0,
-      divisions:
-          (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
-                  (operationalValues.stepValue ?? 1))
-              .round(),
-      onChanged: (value) {
+    return CustomRoutinesTextbox(
+      withSpecialChar: false,
+      currentCondition: selectedFunctionData?.condition,
+      dialogType: dialogType,
+      sliderRange: (0, 43200), 
+      displayedValue: (initialValue ?? 0).toString(),
+      initialValue: (initialValue ?? 0).toString(), 
+      onConditionChanged: (condition) {
         context.read<FunctionBloc>().add(
               AddFunction(
                 functionData: DeviceFunctionData(
                   entityId: device?.uuid ?? '',
                   functionCode: selectCode,
                   operationName: operationName,
-                  value: value,
+                  condition: condition,
+                  value: selectedFunctionData?.value ?? 0,
+                  valueDescription: selectedFunctionData?.valueDescription,
+                ),
+              ),
+            );
+      },
+      onTextChanged: (value) {
+        final roundedValue = value.round();
+        context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectCode,
+                  operationName: operationName,
+                  value: roundedValue,
                   condition: selectedFunctionData?.condition,
                   valueDescription: selectedFunctionData?.valueDescription,
                 ),
               ),
             );
       },
+      unit: 'sec',
+      dividendOfRange: 1,
+      stepIncreaseAmount: 1,
     );
   }
 
@@ -377,7 +316,9 @@ class OneGangSwitchHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
+            isSelected
+                ? Icons.radio_button_checked
+                : Icons.radio_button_unchecked,
             size: 24,
             color: isSelected
                 ? ColorsManager.primaryColorWithOpacity
@@ -393,7 +334,8 @@ class OneGangSwitchHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription: selectedFunctionData?.valueDescription,
+                        valueDescription:
+                            selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_dialogs/three_gang_switch_dialog.dart

@@ -4,10 +4,10 @@ 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/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routines/helper/duration_format_helper.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_function.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
+import 'package:syncrow_web/pages/routines/widgets/custom_routines_textbox.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
@@ -86,20 +86,21 @@ class ThreeGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () =>
-                                          RoutineTapFunctionHelper.onTapFunction(
+                                      onTap: () => RoutineTapFunctionHelper
+                                          .onTapFunction(
                                         context,
                                         functionCode: function.code,
                                         functionOperationName:
                                             function.operationName,
                                         functionValueDescription:
-                                            selectedFunctionData.valueDescription,
+                                            selectedFunctionData
+                                                .valueDescription,
                                         deviceUuid: device?.uuid,
-                                        codesToAddIntoFunctionsWithDefaultValue: [
-                                          'countdown_1',
-                                          'countdown_2',
-                                          'countdown_3',
-                                        ],
+                                        codesToAddIntoFunctionsWithDefaultValue:
+                                            function.code
+                                                    .startsWith('countdown')
+                                                ? [function.code]
+                                                : [],
                                       ),
                                     );
                                   },
@@ -109,14 +110,16 @@ class ThreeGangSwitchHelper {
                               if (selectedFunction != null)
                                 Expanded(
                                   child: _buildValueSelector(
-                                    context: context,
-                                    selectedFunction: selectedFunction,
-                                    selectedFunctionData: selectedFunctionData,
-                                    switchFunctions: switchFunctions,
-                                    device: device,
-                                    operationName: selectedOperationName ?? '',
-                                    removeComparetors: removeComparetors,
-                                  ),
+                                      context: context,
+                                      selectedFunction: selectedFunction,
+                                      selectedFunctionData:
+                                          selectedFunctionData,
+                                      switchFunctions: switchFunctions,
+                                      device: device,
+                                      operationName:
+                                          selectedOperationName ?? '',
+                                      removeComparetors: removeComparetors,
+                                      dialogType: dialogType),
                                 ),
                             ],
                           ),
@@ -133,14 +136,6 @@ class ThreeGangSwitchHelper {
                           onConfirm: state.addedFunctions.isNotEmpty
                               ? () {
                                   /// add the functions to the routine bloc
-                                  // for (var function in state.addedFunctions) {
-                                  //   context.read<RoutineBloc>().add(
-                                  //         AddFunctionToRoutine(
-                                  //           function,
-                                  //           uniqueCustomId,
-                                  //         ),
-                                  //       );
-                                  // }
                                   context.read<RoutineBloc>().add(
                                         AddFunctionToRoutine(
                                           state.addedFunctions,
@@ -173,24 +168,26 @@ class ThreeGangSwitchHelper {
     AllDevicesModel? device,
     required String operationName,
     required bool removeComparetors,
+    required String dialogType,
   }) {
     if (selectedFunction == 'countdown_1' ||
         selectedFunction == 'countdown_2' ||
         selectedFunction == 'countdown_3') {
       final initialValue = selectedFunctionData?.value ?? 0;
       return _buildTemperatureSelector(
-        context: context,
-        initialValue: initialValue,
-        selectCode: selectedFunction,
-        currentCondition: selectedFunctionData?.condition,
-        device: device,
-        operationName: operationName,
-        selectedFunctionData: selectedFunctionData,
-        removeComparetors: removeComparetors,
-      );
+          context: context,
+          initialValue: initialValue,
+          selectCode: selectedFunction,
+          currentCondition: selectedFunctionData?.condition,
+          device: device,
+          operationName: operationName,
+          selectedFunctionData: selectedFunctionData,
+          removeComparetors: removeComparetors,
+          dialogType: dialogType);
     }
 
-    final selectedFn = switchFunctions.firstWhere((f) => f.code == selectedFunction);
+    final selectedFn =
+        switchFunctions.firstWhere((f) => f.code == selectedFunction);
     final values = selectedFn.getOperationalValues();
 
     return _buildOperationalValuesList(
@@ -213,93 +210,18 @@ class ThreeGangSwitchHelper {
     required String operationName,
     DeviceFunctionData? selectedFunctionData,
     bool? removeComparetors,
+    required String dialogType,
   }) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        if (removeComparetors != true)
-          _buildConditionToggle(
-            context,
-            currentCondition,
-            selectCode,
-            device,
-            operationName,
-            selectedFunctionData,
-          ),
-        const SizedBox(height: 20),
-        _buildCountDownDisplay(context, initialValue, device, operationName,
-            selectedFunctionData, selectCode),
         const SizedBox(height: 20),
         _buildCountDownSlider(context, initialValue, device, operationName,
-            selectedFunctionData, selectCode),
+            selectedFunctionData, selectCode, dialogType),
       ],
     );
   }
 
-  /// Build condition toggle for AC functions dialog
-  static Widget _buildConditionToggle(
-    BuildContext context,
-    String? currentCondition,
-    String selectCode,
-    AllDevicesModel? device,
-    String operationName,
-    DeviceFunctionData? selectedFunctionData,
-    // Function(String) onConditionChanged,
-  ) {
-    final conditions = ["<", "==", ">"];
-
-    return ToggleButtons(
-      onPressed: (int index) {
-        context.read<FunctionBloc>().add(
-              AddFunction(
-                functionData: DeviceFunctionData(
-                  entityId: device?.uuid ?? '',
-                  functionCode: selectCode,
-                  operationName: operationName,
-                  condition: conditions[index],
-                  value: selectedFunctionData?.value ?? 0,
-                  valueDescription: selectedFunctionData?.valueDescription,
-                ),
-              ),
-            );
-      },
-      borderRadius: const BorderRadius.all(Radius.circular(8)),
-      selectedBorderColor: ColorsManager.primaryColorWithOpacity,
-      selectedColor: Colors.white,
-      fillColor: ColorsManager.primaryColorWithOpacity,
-      color: ColorsManager.primaryColorWithOpacity,
-      constraints: const BoxConstraints(
-        minHeight: 40.0,
-        minWidth: 40.0,
-      ),
-      isSelected: conditions.map((c) => c == (currentCondition ?? "==")).toList(),
-      children: conditions.map((c) => Text(c)).toList(),
-    );
-  }
-
-  /// Build temperature display for AC functions dialog
-  static Widget _buildCountDownDisplay(
-      BuildContext context,
-      dynamic initialValue,
-      AllDevicesModel? device,
-      String operationName,
-      DeviceFunctionData? selectedFunctionData,
-      String selectCode) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
-      decoration: BoxDecoration(
-        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
-        borderRadius: BorderRadius.circular(10),
-      ),
-      child: Text(
-        DurationFormatMixin.formatDuration(initialValue?.toInt() ?? 0),
-        style: context.textTheme.headlineMedium!.copyWith(
-          color: ColorsManager.primaryColorWithOpacity,
-        ),
-      ),
-    );
-  }
-
   static Widget _buildCountDownSlider(
     BuildContext context,
     dynamic initialValue,
@@ -307,38 +229,47 @@ class ThreeGangSwitchHelper {
     String operationName,
     DeviceFunctionData? selectedFunctionData,
     String selectCode,
+    String dialogType,
   ) {
-    const twelveHoursInSeconds = 43200.0;
-    final operationalValues = SwitchOperationalValue(
-      icon: '',
-      description: "sec",
-      value: 0.0,
-      minValue: 0,
-      maxValue: twelveHoursInSeconds,
-      stepValue: 1,
-    );
-    return Slider(
-      value: (initialValue ?? 0).toDouble(),
-      min: operationalValues.minValue?.toDouble() ?? 0.0,
-      max: operationalValues.maxValue?.toDouble() ?? 0.0,
-      divisions:
-          (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
-                  (operationalValues.stepValue ?? 1))
-              .round(),
-      onChanged: (value) {
+    return CustomRoutinesTextbox(
+      withSpecialChar: true,
+      currentCondition: selectedFunctionData?.condition,
+      dialogType: dialogType,
+      sliderRange: (0, 43200),
+      displayedValue: (initialValue ?? 0).toString(),
+      initialValue: (initialValue ?? 0).toString(),
+      onConditionChanged: (condition) {
         context.read<FunctionBloc>().add(
               AddFunction(
                 functionData: DeviceFunctionData(
                   entityId: device?.uuid ?? '',
                   functionCode: selectCode,
                   operationName: operationName,
-                  value: value,
+                  condition: condition,
+                  value: selectedFunctionData?.value ?? 0,
+                  valueDescription: selectedFunctionData?.valueDescription,
+                ),
+              ),
+            );
+      },
+      onTextChanged: (value) {
+        final roundedValue = value.round();
+        context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectCode,
+                  operationName: operationName,
+                  value: roundedValue,
                   condition: selectedFunctionData?.condition,
                   valueDescription: selectedFunctionData?.valueDescription,
                 ),
               ),
             );
       },
+      unit: 'sec',
+      dividendOfRange: 1,
+      stepIncreaseAmount: 1,
     );
   }
 
@@ -374,7 +305,9 @@ class ThreeGangSwitchHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
+            isSelected
+                ? Icons.radio_button_checked
+                : Icons.radio_button_unchecked,
             size: 24,
             color: isSelected
                 ? ColorsManager.primaryColorWithOpacity
@@ -390,7 +323,8 @@ class ThreeGangSwitchHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription: selectedFunctionData?.valueDescription,
+                        valueDescription:
+                            selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_dialogs/two_gang_switch_dialog.dart

@@ -8,6 +8,7 @@ import 'package:syncrow_web/pages/routines/helper/duration_format_helper.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_function.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
+import 'package:syncrow_web/pages/routines/widgets/custom_routines_textbox.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
@@ -86,14 +87,15 @@ class TwoGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () =>
-                                          RoutineTapFunctionHelper.onTapFunction(
+                                      onTap: () => RoutineTapFunctionHelper
+                                          .onTapFunction(
                                         context,
                                         functionCode: function.code,
                                         functionOperationName:
                                             function.operationName,
                                         functionValueDescription:
-                                            selectedFunctionData.valueDescription,
+                                            selectedFunctionData
+                                                .valueDescription,
                                         deviceUuid: device?.uuid,
                                         codesToAddIntoFunctionsWithDefaultValue: [
                                           'countdown_1',
@@ -115,6 +117,7 @@ class TwoGangSwitchHelper {
                                     device: device,
                                     operationName: selectedOperationName ?? '',
                                     removeComparetors: removeComparetors,
+                                    dialogType: dialogType,
                                   ),
                                 ),
                             ],
@@ -172,22 +175,25 @@ class TwoGangSwitchHelper {
     AllDevicesModel? device,
     required String operationName,
     required bool removeComparetors,
+    required String dialogType,
   }) {
-    if (selectedFunction == 'countdown_1' || selectedFunction == 'countdown_2') {
+    if (selectedFunction == 'countdown_1' ||
+        selectedFunction == 'countdown_2') {
       final initialValue = selectedFunctionData?.value ?? 0;
       return _buildTemperatureSelector(
-        context: context,
-        initialValue: initialValue,
-        selectCode: selectedFunction,
-        currentCondition: selectedFunctionData?.condition,
-        device: device,
-        operationName: operationName,
-        selectedFunctionData: selectedFunctionData,
-        removeComparetors: removeComparetors,
-      );
+          context: context,
+          initialValue: initialValue,
+          selectCode: selectedFunction,
+          currentCondition: selectedFunctionData?.condition,
+          device: device,
+          operationName: operationName,
+          selectedFunctionData: selectedFunctionData,
+          removeComparetors: removeComparetors,
+          dialogType: dialogType);
     }
 
-    final selectedFn = switchFunctions.firstWhere((f) => f.code == selectedFunction);
+    final selectedFn =
+        switchFunctions.firstWhere((f) => f.code == selectedFunction);
     final values = selectedFn.getOperationalValues();
 
     return _buildOperationalValuesList(
@@ -210,25 +216,13 @@ class TwoGangSwitchHelper {
     required String operationName,
     DeviceFunctionData? selectedFunctionData,
     bool? removeComparetors,
+    String? dialogType,
   }) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        if (removeComparetors != true)
-          _buildConditionToggle(
-            context,
-            currentCondition,
-            selectCode,
-            device,
-            operationName,
-            selectedFunctionData,
-          ),
-        const SizedBox(height: 20),
-        _buildCountDownDisplay(context, initialValue, device, operationName,
-            selectedFunctionData, selectCode),
-        const SizedBox(height: 20),
         _buildCountDownSlider(context, initialValue, device, operationName,
-            selectedFunctionData, selectCode),
+            selectedFunctionData, selectCode, dialogType!),
       ],
     );
   }
@@ -269,7 +263,8 @@ class TwoGangSwitchHelper {
         minHeight: 40.0,
         minWidth: 40.0,
       ),
-      isSelected: conditions.map((c) => c == (currentCondition ?? "==")).toList(),
+      isSelected:
+          conditions.map((c) => c == (currentCondition ?? "==")).toList(),
       children: conditions.map((c) => Text(c)).toList(),
     );
   }
@@ -304,38 +299,48 @@ class TwoGangSwitchHelper {
     String operationName,
     DeviceFunctionData? selectedFunctionData,
     String selectCode,
+    String dialogType,
   ) {
-    const twelveHoursInSeconds = 43200.0;
-    final operationalValues = SwitchOperationalValue(
-      icon: '',
-      description: "sec",
-      value: 0.0,
-      minValue: 0,
-      maxValue: twelveHoursInSeconds,
-      stepValue: 1,
-    );
-    return Slider(
-      value: (initialValue ?? 0).toDouble(),
-      min: operationalValues.minValue?.toDouble() ?? 0.0,
-      max: operationalValues.maxValue?.toDouble() ?? 0.0,
-      divisions:
-          (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
-                  (operationalValues.stepValue ?? 1))
-              .round(),
-      onChanged: (value) {
+    return CustomRoutinesTextbox(
+      withSpecialChar: true,
+      currentCondition: selectedFunctionData?.condition,
+      dialogType: dialogType,
+      sliderRange: (0, 43200),
+      displayedValue: (initialValue ?? 0).toString(),
+      initialValue: (initialValue ?? 0).toString(),
+      onConditionChanged: (condition) {
         context.read<FunctionBloc>().add(
               AddFunction(
                 functionData: DeviceFunctionData(
                   entityId: device?.uuid ?? '',
                   functionCode: selectCode,
                   operationName: operationName,
-                  value: value,
+                  condition: condition,
+                  value: selectedFunctionData?.value ?? 0,
+                  valueDescription: selectedFunctionData?.valueDescription,
+                ),
+              ),
+            );
+      },
+      onTextChanged: (value) {
+        final roundedValue =
+            value.round(); // Round to nearest integer (stepSize 1)
+        context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectCode,
+                  operationName: operationName,
+                  value: roundedValue,
                   condition: selectedFunctionData?.condition,
                   valueDescription: selectedFunctionData?.valueDescription,
                 ),
               ),
             );
       },
+      unit: 'sec',
+      dividendOfRange: 1,
+      stepIncreaseAmount: 1,
     );
   }
 
@@ -371,7 +376,9 @@ class TwoGangSwitchHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
+            isSelected
+                ? Icons.radio_button_checked
+                : Icons.radio_button_unchecked,
             size: 24,
             color: isSelected
                 ? ColorsManager.primaryColorWithOpacity
@@ -387,7 +394,8 @@ class TwoGangSwitchHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription: selectedFunctionData?.valueDescription,
+                        valueDescription:
+                            selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );

lib/pages/routines/widgets/routine_dialogs/wall_sensor/wps_value_selector_widget.dart

@@ -4,8 +4,8 @@ import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_mo
 import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/models/wps/wps_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/custom_routines_textbox.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/wall_sensor/wps_operational_values_list.dart';
-import 'package:syncrow_web/pages/routines/widgets/slider_value_selector.dart';
 
 class WpsValueSelectorWidget extends StatelessWidget {
   final String selectedFunction;
@@ -27,11 +27,13 @@ class WpsValueSelectorWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final selectedFn = wpsFunctions.firstWhere((f) => f.code == selectedFunction);
+    final selectedFn =
+        wpsFunctions.firstWhere((f) => f.code == selectedFunction);
     final values = selectedFn.getOperationalValues();
 
     if (_isSliderFunction(selectedFunction)) {
-      return SliderValueSelector(
+      return CustomRoutinesTextbox(
+        withSpecialChar: false,
         currentCondition: functionData.condition,
         dialogType: dialogType,
         sliderRange: sliderRange,
@@ -48,7 +50,7 @@ class WpsValueSelectorWidget extends StatelessWidget {
                 ),
               ),
             ),
-        onSliderChanged: (value) => context.read<FunctionBloc>().add(
+        onTextChanged: (value) => context.read<FunctionBloc>().add(
               AddFunction(
                 functionData: DeviceFunctionData(
                   entityId: device?.uuid ?? '',
@@ -61,6 +63,7 @@ class WpsValueSelectorWidget extends StatelessWidget {
             ),
         unit: _unit,
         dividendOfRange: 1,
+        stepIncreaseAmount: _steps,
       );
     }
 
@@ -99,4 +102,10 @@ class WpsValueSelectorWidget extends StatelessWidget {
         'illuminance_value' => 'Lux',
         _ => '',
       };
+  double get _steps => switch (functionData.functionCode) {
+        'presence_time' => 1,
+        'dis_current' => 1,
+        'illuminance_value' => 1,
+        _ => 1,
+      };
 }

lib/pages/routines/widgets/routine_dialogs/water_heater/water_heater_presence_sensor.dart

@@ -176,6 +176,7 @@ class _WaterHeaterDialogRoutinesState extends State<WaterHeaterDialogRoutines> {
         functionData: functionData,
         whFunctions: _waterHeaterFunctions,
         device: widget.device,
+        dialogType: widget.dialogType,
       ),
     );
   }

lib/pages/routines/widgets/routine_dialogs/water_heater/water_heater_value_selector_widget.dart

@@ -2,25 +2,24 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
 import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
-import 'package:syncrow_web/pages/routines/helper/duration_format_helper.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
-import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 import 'package:syncrow_web/pages/routines/models/water_heater/water_heater_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/custom_routines_textbox.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/water_heater/water_heater_operational_values_list.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class WaterHeaterValueSelectorWidget extends StatelessWidget {
   final String selectedFunction;
   final DeviceFunctionData functionData;
   final List<WaterHeaterFunctions> whFunctions;
   final AllDevicesModel? device;
+  final String dialogType;  
 
   const WaterHeaterValueSelectorWidget({
     required this.selectedFunction,
     required this.functionData,
     required this.whFunctions,
     required this.device,
+    required this.dialogType,
     super.key,
   });
 
@@ -39,22 +38,6 @@ class WaterHeaterValueSelectorWidget extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.center,
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          _buildConditionToggle(
-            context,
-            functionData.condition,
-            selectedFunction,
-            device,
-            selectedFn.operationName,
-            functionData,
-          ),
-          _buildCountDownDisplay(
-            context,
-            functionData.value,
-            device,
-            selectedFn.operationName,
-            functionData,
-            selectedFunction,
-          ),
           _buildCountDownSlider(
             context,
             functionData.value,
@@ -62,6 +45,7 @@ class WaterHeaterValueSelectorWidget extends StatelessWidget {
             selectedFn.operationName,
             functionData,
             selectedFunction,
+            dialogType
           ),
           const SizedBox(height: 10),
         ],
@@ -90,28 +74,6 @@ class WaterHeaterValueSelectorWidget extends StatelessWidget {
     );
   }
 
-  static Widget _buildCountDownDisplay(
-      BuildContext context,
-      dynamic initialValue,
-      AllDevicesModel? device,
-      String operationName,
-      DeviceFunctionData? selectedFunctionData,
-      String selectCode) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
-      decoration: BoxDecoration(
-        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
-        borderRadius: BorderRadius.circular(10),
-      ),
-      child: Text(
-        DurationFormatMixin.formatDuration(initialValue?.toInt() ?? 0),
-        style: context.textTheme.headlineMedium!.copyWith(
-          color: ColorsManager.primaryColorWithOpacity,
-        ),
-      ),
-    );
-  }
-
   static Widget _buildCountDownSlider(
     BuildContext context,
     dynamic initialValue,
@@ -119,78 +81,47 @@ class WaterHeaterValueSelectorWidget extends StatelessWidget {
     String operationName,
     DeviceFunctionData? selectedFunctionData,
     String selectCode,
+    String dialogType,
   ) {
-    const twelveHoursInSeconds = 43200.0;
-    final operationalValues = SwitchOperationalValue(
-      icon: '',
-      description: "sec",
-      value: 0.0,
-      minValue: 0,
-      maxValue: twelveHoursInSeconds,
-      stepValue: 1,
-    );
-    return Slider(
-      value: (initialValue ?? 0).toDouble(),
-      min: operationalValues.minValue?.toDouble() ?? 0.0,
-      max: operationalValues.maxValue?.toDouble() ?? 0.0,
-      divisions: (((operationalValues.maxValue ?? 0) -
-                  (operationalValues.minValue ?? 0)) /
-              (operationalValues.stepValue ?? 1))
-          .round(),
-      onChanged: (value) {
+    return CustomRoutinesTextbox(
+      withSpecialChar: false,
+      currentCondition: selectedFunctionData?.condition,
+      dialogType: dialogType,
+      sliderRange: (0, 43200),
+      displayedValue: (initialValue ?? 0).toString(),
+      initialValue: (initialValue ?? 0).toString(),
+      onConditionChanged: (condition) {
         context.read<FunctionBloc>().add(
               AddFunction(
                 functionData: DeviceFunctionData(
                   entityId: device?.uuid ?? '',
                   functionCode: selectCode,
                   operationName: operationName,
-                  value: value,
+                  value: condition,
+                  condition: condition,
+                  valueDescription: selectedFunctionData?.valueDescription,
+                ),
+              ),
+            );
+      },
+      onTextChanged: (value) {
+        final roundedValue = value.round();
+        context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectCode,
+                  operationName: operationName,
+                  value: roundedValue,
                   condition: selectedFunctionData?.condition,
                   valueDescription: selectedFunctionData?.valueDescription,
                 ),
               ),
             );
       },
-    );
-  }
-
-  static Widget _buildConditionToggle(
-    BuildContext context,
-    String? currentCondition,
-    String selectCode,
-    AllDevicesModel? device,
-    String operationName,
-    DeviceFunctionData? selectedFunctionData,
-  ) {
-    final conditions = ["<", "==", ">"];
-
-    return ToggleButtons(
-      onPressed: (int index) {
-        context.read<FunctionBloc>().add(
-              AddFunction(
-                functionData: DeviceFunctionData(
-                  entityId: device?.uuid ?? '',
-                  functionCode: selectCode,
-                  operationName: operationName,
-                  condition: conditions[index],
-                  value: selectedFunctionData?.value ?? 0,
-                  valueDescription: selectedFunctionData?.valueDescription,
-                ),
-              ),
-            );
-      },
-      borderRadius: const BorderRadius.all(Radius.circular(8)),
-      selectedBorderColor: ColorsManager.primaryColorWithOpacity,
-      selectedColor: Colors.white,
-      fillColor: ColorsManager.primaryColorWithOpacity,
-      color: ColorsManager.primaryColorWithOpacity,
-      constraints: const BoxConstraints(
-        minHeight: 40.0,
-        minWidth: 40.0,
-      ),
-      isSelected:
-          conditions.map((c) => c == (currentCondition ?? "==")).toList(),
-      children: conditions.map((c) => Text(c)).toList(),
+      unit: 'sec',
+      dividendOfRange: 1,
+      stepIncreaseAmount: 1,
     );
   }
 }

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

lib/services/space_mana_api.dart

@@ -4,22 +4,27 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_m
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/create_subspace_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_response_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.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/tag_body_model.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/tag_update_model.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 import 'package:syncrow_web/utils/constants/api_const.dart';
 
+import '../pages/spaces_management/all_spaces/model/subspace_model.dart';
+
 class CommunitySpaceManagementApi {
   // Community Management APIs
-  Future<List<CommunityModel>> fetchCommunities(String projectId, {int page = 1}) async {
+  Future<List<CommunityModel>> fetchCommunities(String projectId,
+      {int page = 1}) async {
     try {
       List<CommunityModel> allCommunities = [];
       bool hasNext = true;
 
       while (hasNext) {
         await HTTPService().get(
-          path: ApiEndpoints.getCommunityList.replaceAll('{projectId}', projectId),
+          path: ApiEndpoints.getCommunityList
+              .replaceAll('{projectId}', projectId),
           queryParameters: {
             'page': page,
           },
@@ -55,8 +60,14 @@ class CommunitySpaceManagementApi {
     try {
       bool hasNext = false;
       await HTTPService().get(
-        path: ApiEndpoints.getCommunityList.replaceAll('{projectId}', projectId),
-        queryParameters: {'page': page, 'includeSpaces': true, 'size': 25, 'search': search},
+        path:
+            ApiEndpoints.getCommunityList.replaceAll('{projectId}', projectId),
+        queryParameters: {
+          'page': page,
+          'includeSpaces': true,
+          'size': 25,
+          'search': search
+        },
         expectedResponseModel: (json) {
           try {
             List<dynamic> jsonData = json['data'] ?? [];
@@ -68,7 +79,10 @@ class CommunitySpaceManagementApi {
 
             page = currentPage + 1;
             paginationModel = PaginationModel(
-                pageNum: page, hasNext: hasNext, size: 25, communities: communityList);
+                pageNum: page,
+                hasNext: hasNext,
+                size: 25,
+                communities: communityList);
             return paginationModel;
           } catch (_) {
             hasNext = false;
@@ -83,7 +97,8 @@ class CommunitySpaceManagementApi {
   Future<CommunityModel?> getCommunityById(String communityId) async {
     try {
       final response = await HTTPService().get(
-        path: ApiEndpoints.getCommunityById.replaceAll('{communityId}', communityId),
+        path: ApiEndpoints.getCommunityById
+            .replaceAll('{communityId}', communityId),
         expectedResponseModel: (json) {
           return CommunityModel.fromJson(json['data']);
         },
@@ -95,7 +110,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<CommunityModel?> createCommunity(String name, String description, String projectId) async {
+  Future<CommunityModel?> createCommunity(
+      String name, String description, String projectId) async {
     try {
       final response = await HTTPService().post(
         path: ApiEndpoints.createCommunity.replaceAll('{projectId}', projectId),
@@ -114,7 +130,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<bool> updateCommunity(String communityId, String name, String projectId) async {
+  Future<bool> updateCommunity(
+      String communityId, String name, String projectId) async {
     try {
       final response = await HTTPService().put(
         path: ApiEndpoints.updateCommunity
@@ -151,7 +168,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<SpacesResponse> fetchSpaces(String communityId, String projectId) async {
+  Future<SpacesResponse> fetchSpaces(
+      String communityId, String projectId) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.listSpaces
@@ -177,7 +195,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<SpaceModel?> getSpace(String communityId, String spaceId, String projectId) async {
+  Future<SpaceModel?> getSpace(
+      String communityId, String spaceId, String projectId) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.getSpace
@@ -199,7 +218,6 @@ class CommunitySpaceManagementApi {
       {required String communityId,
       required String name,
       String? parentId,
-      String? direction,
       bool isPrivate = false,
       required Offset position,
       String? spaceModelUuid,
@@ -213,7 +231,6 @@ class CommunitySpaceManagementApi {
         'isPrivate': isPrivate,
         'x': position.dx,
         'y': position.dy,
-        'direction': direction,
         'icon': icon,
       };
       if (parentId != null) {
@@ -248,11 +265,10 @@ class CommunitySpaceManagementApi {
       required String name,
       String? parentId,
       String? icon,
-      String? direction,
       bool isPrivate = false,
       required Offset position,
-      List<TagModelUpdate>? tags,
-      List<UpdateSubspaceTemplateModel>? subspaces,
+      List<Tag>? tags,
+      List<SubspaceModel>? subspaces,
       String? spaceModelUuid,
       required String projectId}) async {
     try {
@@ -261,9 +277,8 @@ class CommunitySpaceManagementApi {
         'isPrivate': isPrivate,
         'x': position.dx,
         'y': position.dy,
-        'direction': direction,
         'icon': icon,
-        'subspace': subspaces,
+        'subspaces': subspaces,
         'tags': tags,
         'spaceModelUuid': spaceModelUuid,
       };
@@ -289,7 +304,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<bool> deleteSpace(String communityId, String spaceId, String projectId) async {
+  Future<bool> deleteSpace(
+      String communityId, String spaceId, String projectId) async {
     try {
       final response = await HTTPService().delete(
         path: ApiEndpoints.deleteSpace
@@ -307,15 +323,17 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<List<SpaceModel>> getSpaceHierarchy(String communityId, String projectId) async {
+  Future<List<SpaceModel>> getSpaceHierarchy(
+      String communityId, String projectId) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.getSpaceHierarchy
             .replaceAll('{communityId}', communityId)
             .replaceAll('{projectId}', projectId),
         expectedResponseModel: (json) {
-          final spaceModels =
-              (json['data'] as List).map((spaceJson) => SpaceModel.fromJson(spaceJson)).toList();
+          final spaceModels = (json['data'] as List)
+              .map((spaceJson) => SpaceModel.fromJson(spaceJson))
+              .toList();
 
           return spaceModels;
         },
@@ -327,15 +345,17 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<List<SpaceModel>> getSpaceOnlyWithDevices({String? communityId, String? projectId}) async {
+  Future<List<SpaceModel>> getSpaceOnlyWithDevices(
+      {String? communityId, String? projectId}) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.spaceOnlyWithDevices
             .replaceAll('{communityId}', communityId!)
             .replaceAll('{projectId}', projectId!),
         expectedResponseModel: (json) {
-          final spaceModels =
-              (json['data'] as List).map((spaceJson) => SpaceModel.fromJson(spaceJson)).toList();
+          final spaceModels = (json['data'] as List)
+              .map((spaceJson) => SpaceModel.fromJson(spaceJson))
+              .toList();
           return spaceModels;
         },
       );

lib/services/space_model_mang_api.dart

@@ -1,3 +1,5 @@
+import 'dart:developer';
+
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/create_space_template_body_model.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/space_template_model.dart';
@@ -7,17 +9,23 @@ import 'package:syncrow_web/utils/constants/api_const.dart';
 class SpaceModelManagementApi {
   Future<List<SpaceTemplateModel>> listSpaceModels(
       {required String projectId, int page = 1}) async {
-    final response = await HTTPService().get(
-      path: ApiEndpoints.listSpaceModels.replaceAll('{projectId}', projectId),
-      queryParameters: {'page': page},
-      expectedResponseModel: (json) {
-        List<dynamic> jsonData = json['data'];
-        return jsonData.map((jsonItem) {
-          return SpaceTemplateModel.fromJson(jsonItem);
-        }).toList();
-      },
-    );
-    return response;
+    try {
+      // final response = await HTTPService().get(
+      //   path: ApiEndpoints.listSpaceModels.replaceAll('{projectId}', projectId),
+      //   queryParameters: {'page': page},
+      //   expectedResponseModel: (json) {
+      //     List<dynamic> jsonData = json['data'];
+      //     return jsonData.map((jsonItem) {
+      //       return SpaceTemplateModel.fromJson(jsonItem);
+      //     }).toList();
+      //   },
+      // );
+      return [];
+      // response;
+    } catch (e) {
+      log(e.toString());
+      return [];
+    }
   }
 
   Future<SpaceTemplateModel?> createSpaceModel(
@@ -33,8 +41,8 @@ class SpaceModelManagementApi {
     return response;
   }
 
-  Future<String?> updateSpaceModel(
-      CreateSpaceTemplateBodyModel spaceModel, String spaceModelUuid, String projectId) async {
+  Future<String?> updateSpaceModel(CreateSpaceTemplateBodyModel spaceModel,
+      String spaceModelUuid, String projectId) async {
     final response = await HTTPService().put(
       path: ApiEndpoints.updateSpaceModel
           .replaceAll('{projectId}', projectId)
@@ -47,7 +55,8 @@ class SpaceModelManagementApi {
     return response;
   }
 
-  Future<SpaceTemplateModel?> getSpaceModel(String spaceModelUuid, String projectId) async {
+  Future<SpaceTemplateModel?> getSpaceModel(
+      String spaceModelUuid, String projectId) async {
     final response = await HTTPService().get(
       path: ApiEndpoints.getSpaceModel
           .replaceAll('{projectId}', projectId)

lib/utils/constants/assets.dart

@@ -2,6 +2,7 @@ class Assets {
   Assets._();
   static const String background = "assets/images/Background.png";
   static const String webBackground = "assets/images/web_Background.svg";
+  static const String webBackgroundPng = "assets/images/web_Background.png";
   static const String blackLogo = "assets/images/black-logo.png";
   static const String logo = "assets/images/Logo.svg";
   static const String logoHorizontal = "assets/images/logo_horizontal.png";