modified divider color to match figma design.

Sp 1330 fe side tree text breaks incorrectly causing layout issues

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

@@ -25,7 +25,7 @@ jobs:
       - name: Set up Flutter
         uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.22.2' # Specify the Flutter version you want to use
+          flutter-version: '3.27.3' # Specify the Flutter version you want to use
 
       - name: Install dependencies
         run: flutter pub get

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

@@ -25,7 +25,7 @@ jobs:
       - name: Set up Flutter
         uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.22.2' # Specify the Flutter version you want to use
+          flutter-version: '3.27.3' # Specify the Flutter version you want to use
 
       - name: Install dependencies
         run: flutter pub get

lib/common/widgets/empty_search_result_widget.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class EmptySearchResultWidget extends StatelessWidget {
+  const EmptySearchResultWidget({
+    this.message = 'No results found',
+    super.key,
+  });
+
+  final String message;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text(
+        message,
+        textAlign: TextAlign.center,
+        style: context.textTheme.bodySmall?.copyWith(
+          color: ColorsManager.lightGreyColor,
+          fontWeight: FontWeight.w400,
+        ),
+      ),
+    );
+  }
+}

lib/common/widgets/sidebar_communities_list.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SidebarCommunitiesList extends StatelessWidget {
+  const SidebarCommunitiesList({
+    required this.communities,
+    required this.itemBuilder,
+    required this.scrollController,
+    required this.onScrollToEnd,
+    super.key,
+  });
+
+  final List<CommunityModel> communities;
+  final Widget Function(BuildContext context, int index) itemBuilder;
+  final ScrollController scrollController;
+  final void Function() onScrollToEnd;
+
+  bool _onNotification(ScrollEndNotification notification) {
+    final hasReachedEnd = notification.metrics.extentAfter == 0;
+    if (hasReachedEnd) {
+      onScrollToEnd.call();
+      return true;
+    }
+
+    return false;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: SizedBox(
+        width: context.screenWidth * 0.5,
+        child: Scrollbar(
+          scrollbarOrientation: ScrollbarOrientation.left,
+          thumbVisibility: true,
+          controller: scrollController,
+          child: NotificationListener<ScrollEndNotification>(
+            onNotification: _onNotification,
+            child: ListView.builder(
+              shrinkWrap: true,
+              padding: const EdgeInsetsDirectional.only(start: 16),
+              itemCount: communities.length,
+              controller: scrollController,
+              itemBuilder: itemBuilder,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/auth/view/login_web_page.dart

@@ -55,12 +55,12 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
     final isSmallScreen = isSmallScreenSize(context);
     final isMediumScreen = isMediumScreenSize(context);
     Size size = MediaQuery.of(context).size;
-    late ScrollController _scrollController;
+    late ScrollController scrollController;
-    _scrollController = ScrollController();
+    scrollController = ScrollController();
 
-    void _scrollToCenter() {
+    void scrollToCenter() {
-      final double middlePosition = _scrollController.position.maxScrollExtent / 2;
+      final double middlePosition = scrollController.position.maxScrollExtent / 2;
-      _scrollController.animateTo(
+      scrollController.animateTo(
         middlePosition,
         duration: const Duration(seconds: 1),
         curve: Curves.easeInOut,
@@ -68,7 +68,7 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
     }
 
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      _scrollToCenter();
+      scrollToCenter();
     });
 
     return Stack(
@@ -76,7 +76,7 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
         FirstLayer(
           second: Center(
             child: ListView(
-              controller: _scrollController,
+              controller: scrollController,
               shrinkWrap: true,
               children: [
                 Container(
@@ -199,7 +199,7 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
           width: size.width * 0.9,
           child: DropdownButtonHideUnderline(
             child: DropdownButton2<String>(
-              style: TextStyle(color: Colors.black),
+              style: const TextStyle(color: Colors.black),
               isExpanded: true,
               hint: Text(
                 'Select your region/country',
@@ -336,6 +336,16 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
             obscureText: loginBloc.obscureText,
             keyboardType: TextInputType.visiblePassword,
             controller: loginBloc.loginPasswordController,
+            onFieldSubmitted: (value) {
+              if (loginBloc.loginFormKey.currentState!.validate()) {
+                loginBloc.add(LoginButtonPressed(    
+                  username: loginBloc.loginEmailController.text,
+                  password: value,
+                ));
+              } else {
+                loginBloc.add(ChangeValidateEvent());
+              }
+            },
             decoration: textBoxDecoration()!.copyWith(
               hintText: 'At least 8 characters',
               hintStyle: Theme.of(context)
@@ -393,7 +403,7 @@ class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout
         Transform.scale(
           scale: 1.2,
           child: Checkbox(
-            fillColor: MaterialStateProperty.all<Color>(Colors.white),
+            fillColor: WidgetStateProperty.all<Color>(Colors.white),
             activeColor: Colors.white,
             value: loginBloc.isChecked,
             checkColor: Colors.black,

lib/pages/device_managment/all_devices/models/devices_model.dart

@@ -239,8 +239,6 @@ SOS
       //  tempIcon = Assets.gang3touch;
     } else if (type == DeviceType.WaterLeak) {
       tempIcon = Assets.waterLeakNormal;
-    } else if (type == DeviceType.WaterLeak) {
-      tempIcon = Assets.waterLeakNormal;
     } else {
       tempIcon = Assets.logoHorizontal;
     }

lib/pages/device_managment/all_devices/models/factory_reset_model.dart

@@ -19,6 +19,7 @@ class FactoryResetModel {
   Map<String, dynamic> toJson() {
     return {
       'devicesUuid': devicesUuid,
+      'operationType': operationType,
     };
   }
 
@@ -33,6 +34,7 @@ class FactoryResetModel {
   Map<String, dynamic> toMap() {
     return {
       'devicesUuid': devicesUuid,
+      'operationType': operationType,
     };
   }
 
@@ -56,3 +58,4 @@ class FactoryResetModel {
   @override
   int get hashCode => devicesUuid.hashCode;
 }
+

lib/pages/device_managment/main_door_sensor/view/main_door_sensor_batch_view.dart

@@ -4,7 +4,6 @@ import 'package:syncrow_web/pages/device_managment/all_devices/models/factory_re
 import 'package:syncrow_web/pages/device_managment/main_door_sensor/bloc/main_door_sensor_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/main_door_sensor/bloc/main_door_sensor_event.dart';
 import 'package:syncrow_web/pages/device_managment/shared/batch_control/factory_reset.dart';
-// import 'package:syncrow_web/pages/device_managment/shared/batch_control/firmware_update.dart';
 
 class MainDoorSensorBatchView extends StatelessWidget {
   const MainDoorSensorBatchView({super.key, required this.devicesIds});
@@ -13,35 +12,31 @@ class MainDoorSensorBatchView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return BlocProvider(
-      mainAxisAlignment: MainAxisAlignment.center,
+      create: (context) => MainDoorSensorBloc(),
-      children: [
+      child: Builder(
-        // SizedBox(
+        builder: (innerContext) {
-        //   width: 170,
+          return Row(
-        //   height: 140,
+            mainAxisAlignment: MainAxisAlignment.center,
-        //   child: FirmwareUpdateWidget(
+            children: [
-        //     deviceId: devicesIds.first,
+              SizedBox(
-        //     version: 12,
+                width: 170,
-        //   ),
+                height: 140,
-        // ),
+                child: FactoryResetWidget(
-        // const SizedBox(
+                  callFactoryReset: () {
-        //   width: 12,
+                    BlocProvider.of<MainDoorSensorBloc>(innerContext).add(
-        // ),
+                      MainDoorSensorFactoryReset(
-        SizedBox(
+                        deviceId: devicesIds.first,
-          width: 170,
+                        factoryReset: FactoryResetModel(devicesUuid: devicesIds),
-          height: 140,
+                      ),
-          child: FactoryResetWidget(
+                    );
-            callFactoryReset: () {
+                  },
-              BlocProvider.of<MainDoorSensorBloc>(context).add(
-                MainDoorSensorFactoryReset(
-                  deviceId: devicesIds.first,
-                  factoryReset: FactoryResetModel(devicesUuid: devicesIds),
                 ),
-              );
+              ),
-            },
+            ],
-          ),
+          );
-        ),
+        },
-      ],
+      ),
     );
   }
 }

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

@@ -684,40 +684,45 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
             ? '${action.entityId}_automation'
             : action.actionExecutor == 'delay'
                 ? '${action.entityId}_delay'
-                : action.entityId;
+                : const Uuid().v4();
 
-        if (!deviceCards.containsKey(deviceId)) {
+        // if (!deviceCards.containsKey(deviceId)) {
-          deviceCards[deviceId] = {
+        deviceCards[deviceId] = {
-            'entityId': action.entityId,
+          'entityId': action.entityId,
-            'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
+          'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
-            'uniqueCustomId': action.type == 'automation' || action.actionExecutor == 'delay'
+          'uniqueCustomId': action.type == 'automation' || action.actionExecutor == 'delay'
-                ? const Uuid().v4()
+              ? action.entityId
-                : action.entityId,
+              : const Uuid().v4(),
-            'title': action.actionExecutor == 'delay'
+          'title': action.actionExecutor == 'delay'
-                ? 'Delay'
+              ? 'Delay'
-                : action.type == 'automation'
+              : action.type == 'automation'
-                    ? action.name ?? 'Automation'
+                  ? action.name ?? 'Automation'
-                    : (matchingDevice?.name ?? 'Device'),
+                  : (matchingDevice?.name ?? 'Device'),
-            'productType': action.productType,
+          'productType': action.productType,
-            'functions': matchingDevice?.functions,
+          'functions': matchingDevice?.functions,
-            'imagePath': action.type == 'automation'
+          'imagePath': action.type == 'automation'
-                ? Assets.automation
+              ? Assets.automation
-                : action.actionExecutor == 'delay'
+              : action.actionExecutor == 'delay'
-                    ? Assets.delay
+                  ? Assets.delay
-                    : matchingDevice?.getDefaultIcon(action.productType),
+                  : matchingDevice?.getDefaultIcon(action.productType),
-            'device': matchingDevice,
+          'device': matchingDevice,
-            'name': action.name,
+          'name': action.name,
-            'type': action.type,
+          'type': action.type,
-          };
+          'tag': matchingDevice?.deviceTags?.isNotEmpty ?? false
-        }
+              ? matchingDevice?.deviceTags![0].name ?? ''
+              : '',
+          'subSpace': matchingDevice?.deviceSubSpace?.subspaceName ?? '',
+        };
+        // }
 
         final cardData = deviceCards[deviceId]!;
         final uniqueCustomId = cardData['uniqueCustomId'].toString();
 
+        if (!updatedFunctions.containsKey(uniqueCustomId)) {
+          updatedFunctions[uniqueCustomId] = [];
+        }
+
         if (action.type == 'automation') {
-          if (!updatedFunctions.containsKey(uniqueCustomId)) {
-            updatedFunctions[uniqueCustomId] = [];
-          }
           updatedFunctions[uniqueCustomId]!.add(
             DeviceFunctionData(
               entityId: action.entityId,
@@ -728,14 +733,11 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           );
           // emit(state.copyWith(automationActionExecutor: action.actionExecutor));
         } else if (action.executorProperty != null && action.actionExecutor != 'delay') {
-          // if (!updatedFunctions.containsKey(uniqueCustomId)) {
+          final functions = matchingDevice?.functions ?? [];
-          //   updatedFunctions[uniqueCustomId] = [];
-          // }
-          final functions = matchingDevice?.functions;
           final functionCode = action.executorProperty?.functionCode;
-          for (DeviceFunction function in functions ?? []) {
+          for (DeviceFunction function in functions) {
             if (function.code == functionCode) {
-              updatedFunctions[const Uuid().v4()]!.add(
+              updatedFunctions[uniqueCustomId]!.add(
                 DeviceFunctionData(
                   entityId: action.entityId,
                   functionCode: functionCode ?? '',
@@ -747,9 +749,6 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
             }
           }
         } else if (action.actionExecutor == 'delay') {
-          if (!updatedFunctions.containsKey(uniqueCustomId)) {
-            updatedFunctions[uniqueCustomId] = [];
-          }
           final delayFunction = DelayFunction(
             deviceId: action.entityId,
             deviceName: 'Delay',
@@ -1156,21 +1155,25 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           ),
         );
 
-        final deviceId = condition.entityId;
+        final deviceId = const Uuid().v4();
 
-        if (!deviceIfCards.containsKey(deviceId)) {
+        // if (!deviceIfCards.containsKey(deviceId)) {
-          deviceIfCards[deviceId] = {
+        deviceIfCards[deviceId] = {
-            'entityId': condition.entityId,
+          'entityId': condition.entityId,
-            'deviceId': condition.entityId,
+          'deviceId': condition.entityId,
-            'uniqueCustomId': const Uuid().v4(),
+          'uniqueCustomId': const Uuid().v4(),
-            'title': matchingDevice.name ?? 'Device',
+          'title': matchingDevice.name ?? 'Device',
-            'productType': condition.productType,
+          'productType': condition.productType,
-            'functions': matchingDevice.functions,
+          'functions': matchingDevice.functions,
-            'imagePath': matchingDevice.getDefaultIcon(condition.productType),
+          'imagePath': matchingDevice.getDefaultIcon(condition.productType),
-            'device': matchingDevice,
+          'device': matchingDevice,
-            'type': 'condition',
+          'type': 'condition',
-          };
+          'tag': matchingDevice.deviceTags?.isNotEmpty ?? false
-        }
+              ? matchingDevice.deviceTags![0].name
+              : '',
+          'subSpace': matchingDevice.deviceSubSpace?.subspaceName ?? '',
+        };
+        // }
 
         final cardData = deviceIfCards[deviceId]!;
         final uniqueCustomId = cardData['uniqueCustomId'].toString();
@@ -1206,35 +1209,38 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           ),
         );
 
-        final deviceId =
+        final deviceId = const Uuid().v4();
-            action.actionExecutor == 'delay' ? '${action.entityId}_delay' : action.entityId;
 
-        if (!deviceThenCards.containsKey(deviceId)) {
+        // if (!deviceThenCards.containsKey(deviceId)) {
-          deviceThenCards[deviceId] = {
+        deviceThenCards[deviceId] = {
-            'entityId': action.entityId,
+          'entityId': action.entityId,
-            'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
+          'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
-            'uniqueCustomId': const Uuid().v4(),
+          'uniqueCustomId': const Uuid().v4(),
-            'title': action.actionExecutor == 'delay'
+          'title': action.actionExecutor == 'delay'
-                ? 'Delay'
+              ? 'Delay'
-                : (action.type == 'scene' || action.type == 'automation')
+              : (action.type == 'scene' || action.type == 'automation')
-                    ? action.name
+                  ? action.name
-                    : (matchingDevice.name ?? 'Device'),
+                  : (matchingDevice.name ?? 'Device'),
-            'productType': action.productType,
+          'productType': action.productType,
-            'functions': matchingDevice.functions,
+          'functions': matchingDevice.functions,
-            'imagePath': action.actionExecutor == 'delay'
+          'imagePath': action.actionExecutor == 'delay'
-                ? Assets.delay
+              ? Assets.delay
-                : action.type == 'automation'
+              : action.type == 'automation'
-                    ? Assets.automation
+                  ? Assets.automation
-                    : matchingDevice.getDefaultIcon(action.productType),
+                  : matchingDevice.getDefaultIcon(action.productType),
-            'device': matchingDevice,
+          'device': matchingDevice,
-            'type': action.type == 'scene'
+          'type': action.type == 'scene'
-                ? 'scene'
+              ? 'scene'
-                : action.type == 'automation'
+              : action.type == 'automation'
-                    ? 'automation'
+                  ? 'automation'
-                    : 'action',
+                  : 'action',
-            'icon': action.icon ?? '',
+          'icon': action.icon ?? '',
-          };
+          'tag': matchingDevice.deviceTags?.isNotEmpty ?? false
-        }
+              ? matchingDevice.deviceTags![0].name
+              : '',
+          'subSpace': matchingDevice.deviceSubSpace?.subspaceName ?? '',
+        };
+        // }
 
         final cardData = deviceThenCards[deviceId]!;
         final uniqueCustomId = cardData['uniqueCustomId'].toString();

lib/pages/routines/helper/save_routine_helper.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
@@ -14,13 +14,18 @@ class SaveRoutineHelper {
   static Future<void> showSaveRoutineDialog(BuildContext context) async {
     return showDialog<void>(
       context: context,
-      builder: (BuildContext context) {
+      builder: (context) {
         return BlocBuilder<RoutineBloc, RoutineState>(
           builder: (context, state) {
+            final selectedConditionLabel = state.selectedAutomationOperator == 'and'
+                ? 'All Conditions are met'
+                : 'Any Condition is met';
+
             return AlertDialog(
               contentPadding: EdgeInsets.zero,
               content: Container(
-                width: 600,
+                width: context.screenWidth * 0.5,
+                height: 500,
                 decoration: BoxDecoration(
                   color: Colors.white,
                   borderRadius: BorderRadius.circular(20),
@@ -28,146 +33,42 @@ class SaveRoutineHelper {
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
                   children: [
-                    DialogHeader('Create a scene: ${state.routineName ?? ""}'),
+                    const SizedBox(height: 18),
-                    Padding(
+                    Text(
-                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                      'Create a scene: ${state.routineName ?? ""}',
-                      child: Row(
+                      textAlign: TextAlign.center,
-                        crossAxisAlignment: CrossAxisAlignment.start,
+                      style: Theme.of(context).textTheme.headlineMedium!.copyWith(
-                        children: [
+                            color: ColorsManager.primaryColorWithOpacity,
-                          // Left side - IF
+                            fontWeight: FontWeight.bold,
-                          Expanded(
-                            child: Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: [
-                                const Text(
-                                  'IF:',
-                                  style: TextStyle(
-                                    fontSize: 16,
-                                  ),
-                                ),
-                                const SizedBox(height: 8),
-                                if (state.isTabToRun)
-                                  ListTile(
-                                    leading: SvgPicture.asset(
-                                      Assets.tabToRun,
-                                      width: 24,
-                                      height: 24,
-                                    ),
-                                    title: const Text('Tab to run'),
-                                  ),
-                                if (state.isAutomation)
-                                  ...state.ifItems.map((item) {
-                                    final functions =
-                                        state.selectedFunctions[item['uniqueCustomId']] ?? [];
-                                    return ListTile(
-                                      leading: SvgPicture.asset(
-                                        item['imagePath'],
-                                        width: 22,
-                                        height: 22,
-                                      ),
-                                      title:
-                                          Text(item['title'], style: const TextStyle(fontSize: 14)),
-                                      subtitle: Wrap(
-                                        children: functions
-                                            .map((f) => Text(
-                                                  '${f.operationName}: ${f.value}, ',
-                                                  style: const TextStyle(
-                                                      color: ColorsManager.grayColor, fontSize: 8),
-                                                  overflow: TextOverflow.ellipsis,
-                                                  maxLines: 3,
-                                                ))
-                                            .toList(),
-                                      ),
-                                    );
-                                  }),
-                              ],
-                            ),
                           ),
-                          const SizedBox(width: 16),
+                    ),
-                          // Right side - THEN items
+                    const SizedBox(height: 18),
-
+                    _buildDivider(),
-                          Expanded(
+                    _buildListsLabelRow(selectedConditionLabel),
-                            child: Column(
+                    Expanded(
-                              crossAxisAlignment: CrossAxisAlignment.start,
+                      child: Padding(
-                              children: [
+                        padding: const EdgeInsetsDirectional.symmetric(
-                                const Text(
+                          horizontal: 16,
-                                  'THEN:',
+                        ),
-                                  style: TextStyle(
+                        child: Row(
-                                    fontSize: 16,
+                          crossAxisAlignment: CrossAxisAlignment.start,
-                                  ),
+                          mainAxisSize: MainAxisSize.min,
-                                ),
+                          spacing: 24,
-                                const SizedBox(height: 8),
+                          children: [
-                                ...state.thenItems.map((item) {
+                            _buildIfConditions(state, context),
-                                  final functions =
+                            Container(
-                                      state.selectedFunctions[item['uniqueCustomId']] ?? [];
+                              width: 1,
-                                  return ListTile(
+                              color: ColorsManager.greyColor.withValues(alpha: 0.8),
-                                    leading: item['type'] == 'tap_to_run' || item['type'] == 'scene'
-                                        ? Image.memory(
-                                            base64Decode(item['icon']),
-                                            width: 22,
-                                            height: 22,
-                                          )
-                                        : SvgPicture.asset(
-                                            item['imagePath'],
-                                            width: 22,
-                                            height: 22,
-                                          ),
-                                    title: Text(
-                                      item['title'],
-                                      style: context.textTheme.bodySmall?.copyWith(
-                                        fontSize: 14,
-                                        color: ColorsManager.grayColor,
-                                      ),
-                                    ),
-                                    subtitle: Wrap(
-                                      children: functions
-                                          .map((f) => Text(
-                                                '${f.operationName}: ${f.value}, ',
-                                                style: context.textTheme.bodySmall?.copyWith(
-                                                    color: ColorsManager.grayColor, fontSize: 8),
-                                                overflow: TextOverflow.ellipsis,
-                                                maxLines: 3,
-                                              ))
-                                          .toList(),
-                                    ),
-                                  );
-                                }),
-                              ],
                             ),
-                          ),
+                            _buildThenActions(state, context),
-                        ],
+                          ],
+                        ),
                       ),
                     ),
-                    // if (state.errorMessage != null || state.errorMessage!.isNotEmpty)
+                    _buildDivider(),
-                    //   Padding(
+                    const SizedBox(height: 8),
-                    //     padding: const EdgeInsets.all(8.0),
+                    _buildDialogFooter(context, state),
-                    //     child: Text(
+                    const SizedBox(height: 8),
-                    //       state.errorMessage!,
-                    //       style: const TextStyle(color: Colors.red),
-                    //     ),
-                    //   ),
-                    DialogFooter(
-                      onCancel: () => Navigator.pop(context),
-                      onConfirm: () async {
-                        if (state.isAutomation) {
-                          if (state.isUpdate ?? false) {
-                            context.read<RoutineBloc>().add(const UpdateAutomation());
-                          } else {
-                            context.read<RoutineBloc>().add(const CreateAutomationEvent());
-                          }
-                        } else {
-                          if (state.isUpdate ?? false) {
-                            context.read<RoutineBloc>().add(const UpdateScene());
-                          } else {
-                            context.read<RoutineBloc>().add(const CreateSceneEvent());
-                          }
-                        }
-                        // if (state.errorMessage == null || state.errorMessage!.isEmpty) {
-                        Navigator.pop(context);
-                        // }
-                      },
-                      isConfirmEnabled: true,
-                    ),
                   ],
                 ),
               ),
@@ -177,4 +78,245 @@ class SaveRoutineHelper {
       },
     );
   }
+
+  static Container _buildDivider() {
+    return Container(
+      height: 1,
+      width: double.infinity,
+      color: ColorsManager.greyColor,
+    );
+  }
+
+  static Widget _buildListsLabelRow(String selectedConditionLabel) {
+    const textStyle = TextStyle(
+      fontSize: 16,
+    );
+    return Container(
+      color: ColorsManager.backgroundColor.withValues(alpha: 0.5),
+      padding: const EdgeInsetsDirectional.all(20),
+      child: Row(
+        spacing: 16,
+        children: [
+          Expanded(child: Text('IF: $selectedConditionLabel', style: textStyle)),
+          const Expanded(child: Text('THEN:', style: textStyle)),
+        ],
+      ),
+    );
+  }
+
+  static Widget _buildDialogFooter(BuildContext context, RoutineState state) {
+    return Row(
+      spacing: 16,
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: [
+        DialogFooterButton(
+          text: 'Cancel',
+          onTap: () => Navigator.pop(context),
+        ),
+        DialogFooterButton(
+          text: 'Confirm',
+          onTap: () {
+            if (state.isAutomation) {
+              if (state.isUpdate ?? false) {
+                context.read<RoutineBloc>().add(const UpdateAutomation());
+              } else {
+                context.read<RoutineBloc>().add(const CreateAutomationEvent());
+              }
+            } else {
+              if (state.isUpdate ?? false) {
+                context.read<RoutineBloc>().add(const UpdateScene());
+              } else {
+                context.read<RoutineBloc>().add(const CreateSceneEvent());
+              }
+            }
+
+            Navigator.pop(context);
+          },
+          textColor: ColorsManager.primaryColorWithOpacity,
+        ),
+      ],
+    );
+  }
+
+  static Widget _buildThenActions(RoutineState state, BuildContext context) {
+    return Expanded(
+      child: ListView(
+        // shrinkWrap: true,
+        children: state.thenItems.map((item) {
+          final functions = state.selectedFunctions[item['uniqueCustomId']] ?? [];
+          return functionRow(item, context, functions);
+        }).toList(),
+      ),
+    );
+  }
+
+  static Widget _buildIfConditions(RoutineState state, BuildContext context) {
+    return Expanded(
+      child: ListView(
+        // shrinkWrap: true,
+        children: [
+          if (state.isTabToRun)
+            ListTile(
+              leading: SvgPicture.asset(
+                Assets.tabToRun,
+                width: 24,
+                height: 24,
+              ),
+              title: const Text('Tab to run'),
+            ),
+          if (state.isAutomation)
+            ...state.ifItems.map((item) {
+              final functions =
+                  state.selectedFunctions[item['uniqueCustomId']] ?? [];
+              return functionRow(item, context, functions);
+            }),
+        ],
+      ),
+    );
+  }
+
+  static Widget functionRow(
+    dynamic item,
+    BuildContext context,
+    List<DeviceFunctionData> functions,
+  ) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 6),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Expanded(
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.start,
+              spacing: 17,
+              children: [
+                Container(
+                  width: 22,
+                  height: 22,
+                  padding: const EdgeInsetsDirectional.all(4),
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: ColorsManager.textFieldGreyColor,
+                    border: Border.all(
+                      color: ColorsManager.neutralGray,
+                      width: 1.5,
+                    ),
+                  ),
+                  child: Center(
+                    child: item['type'] == 'tap_to_run' || item['type'] == 'scene'
+                        ? Image.memory(
+                            base64Decode(item['icon']),
+                            width: 12,
+                            height: 22,
+                            fit: BoxFit.scaleDown,
+                          )
+                        : SvgPicture.asset(
+                            item['imagePath'],
+                            width: 12,
+                            height: 12,
+                            fit: BoxFit.scaleDown,
+                          ),
+                  ),
+                ),
+                Flexible(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    spacing: 2,
+                    children: [
+                      Text(
+                        item['title'],
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: context.textTheme.bodySmall?.copyWith(
+                          fontSize: 15,
+                          color: ColorsManager.textPrimaryColor,
+                        ),
+                      ),
+                      Wrap(
+                        runSpacing: 16,
+                        spacing: 4,
+                        children: functions
+                            .map(
+                              (function) => Text(
+                                '${function.operationName}: ${function.value}',
+                                style: context.textTheme.bodySmall?.copyWith(
+                                  color: ColorsManager.grayColor,
+                                  fontSize: 8,
+                                ),
+                                overflow: TextOverflow.ellipsis,
+                                maxLines: 3,
+                              ),
+                            )
+                            .toList(),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            spacing: 2,
+            children: [
+              Visibility(
+                visible: item['tag'] != null && item['tag'] != '',
+                child: Row(
+                  spacing: 2,
+                  children: [
+                    SizedBox(
+                      width: 8,
+                      height: 8,
+                      child: SvgPicture.asset(
+                        Assets.deviceTagIcon,
+                      ),
+                    ),
+                    Text(
+                      item['tag'] ?? '',
+                      textAlign: TextAlign.center,
+                      overflow: TextOverflow.ellipsis,
+                      maxLines: 1,
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: ColorsManager.lightGreyColor,
+                        fontSize: 9,
+                        fontWeight: FontWeight.w400,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              Visibility(
+                visible: item['subSpace'] != null && item['subSpace'] != '',
+                child: Row(
+                  spacing: 2,
+                  children: [
+                    SizedBox(
+                      width: 8,
+                      height: 8,
+                      child: SvgPicture.asset(
+                        Assets.spaceLocationIcon,
+                      ),
+                    ),
+                    Text(
+                      item['subSpace'] ?? '',
+                      textAlign: TextAlign.center,
+                      overflow: TextOverflow.ellipsis,
+                      maxLines: 1,
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: ColorsManager.lightGreyColor,
+                        fontSize: 9,
+                        fontWeight: FontWeight.w400,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
 }

lib/pages/routines/view/routines_view.dart

@@ -29,8 +29,7 @@ class _RoutinesViewState extends State<RoutinesView> {
     final spaceId = result['space'];
     final _bloc = BlocProvider.of<CreateRoutineBloc>(context);
     final routineBloc = context.read<RoutineBloc>();
-    _bloc.add(SaveCommunityIdAndSpaceIdEvent(
+    _bloc.add(SaveCommunityIdAndSpaceIdEvent(communityID: communityId, spaceID: spaceId));
-        communityID: communityId, spaceID: spaceId));
     await Future.delayed(const Duration(seconds: 1));
     routineBloc.add(const CreateNewRoutineViewEvent(createRoutineView: true));
   }
@@ -49,7 +48,8 @@ class _RoutinesViewState extends State<RoutinesView> {
               child: SpaceTreeView(
                 onSelect: () => context.read<RoutineBloc>()
                   ..add(const LoadScenes())
-                  ..add(const LoadAutomation()),
+                  ..add(const LoadAutomation())
+                  ..add(FetchDevicesInRoutine()),
               ),
             ),
             Expanded(
@@ -64,11 +64,10 @@ class _RoutinesViewState extends State<RoutinesView> {
                       children: [
                         Text(
                           "Create New Routines",
-                          style:
+                          style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                              Theme.of(context).textTheme.titleLarge?.copyWith(
+                                color: ColorsManager.grayColor,
-                                    color: ColorsManager.grayColor,
+                                fontWeight: FontWeight.bold,
-                                    fontWeight: FontWeight.bold,
+                              ),
-                                  ),
                         ),
                         const SizedBox(height: 10),
                         RoutineViewCard(

lib/pages/routines/widgets/dialog_footer.dart

@@ -8,12 +8,12 @@ class DialogFooter extends StatelessWidget {
   final int? dialogWidth;
 
   const DialogFooter({
-    Key? key,
+    super.key,
     required this.onCancel,
     required this.onConfirm,
     required this.isConfirmEnabled,
     this.dialogWidth,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -28,46 +28,52 @@ class DialogFooter extends StatelessWidget {
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
-          Expanded(
+          DialogFooterButton(
-            child: _buildFooterButton(
+            text: 'Cancel',
-              context,
+            onTap: onCancel,
-              'Cancel',
-              onCancel,
-            ),
           ),
           if (isConfirmEnabled) ...[
             Container(width: 1, height: 50, color: ColorsManager.greyColor),
-            Expanded(
+            DialogFooterButton(
-              child: _buildFooterButton(
+              text: 'Confirm',
-                context,
+              onTap: onConfirm,
-                'Confirm',
+              textColor: isConfirmEnabled
-                onConfirm,
+                  ? ColorsManager.primaryColorWithOpacity
-              ),
+                  : Colors.red,
             ),
           ],
         ],
       ),
     );
   }
+}
 
-  Widget _buildFooterButton(
+class DialogFooterButton extends StatelessWidget {
-    BuildContext context,
+  const DialogFooterButton({
-    String text,
+    required this.text,
-    VoidCallback? onTap,
+    required this.onTap,
-  ) {
+    this.textColor,
-    return GestureDetector(
+    super.key,
-      onTap: onTap,
+  });
-      child: SizedBox(
+
-        height: 50,
+  final String text;
-        child: Center(
+  final VoidCallback? onTap;
-          child: Text(
+  final Color? textColor;
-            text,
+
-            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+  @override
-                  color: text == 'Confirm'
+  Widget build(BuildContext context) {
-                      ? ColorsManager.primaryColorWithOpacity
+    return Expanded(
-                      : ColorsManager.textGray,
+      child: TextButton(
-                ),
+        style: TextButton.styleFrom(
-          ),
+          foregroundColor: ColorsManager.primaryColorWithOpacity,
+          disabledForegroundColor: ColorsManager.primaryColor,
+        ),
+        onPressed: onTap,
+        child: Text(
+          text,
+          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                color: textColor ?? ColorsManager.textGray,
+              ),
         ),
       ),
     );

lib/pages/routines/widgets/dialog_header.dart

@@ -16,6 +16,7 @@ class DialogHeader extends StatelessWidget {
         ),
         Text(
           title,
+          textAlign: TextAlign.center,
           style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                 color: ColorsManager.primaryColorWithOpacity,
                 fontWeight: FontWeight.bold,

lib/pages/routines/widgets/dragable_card.dart

@@ -69,9 +69,9 @@ class DraggableCard extends StatelessWidget {
         Card(
           color: ColorsManager.whiteColors,
           child: Container(
-            padding: padding ?? const EdgeInsets.all(16),
+            padding: const EdgeInsets.all(16),
             width: 110,
-            height: deviceFunctions.isEmpty ? 160 : 170,
+            height: deviceFunctions.isEmpty ? 160 : 180,
             child: Column(
               mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
@@ -103,16 +103,14 @@ class DraggableCard extends StatelessWidget {
                     const SizedBox(height: 8),
                     Padding(
                       padding: const EdgeInsets.symmetric(horizontal: 3),
-                      child: Flexible(
+                      child: Text(
-                        child: Text(
+                        deviceData['title'] ?? deviceData['name'] ?? title,
-                          deviceData['title'] ?? deviceData['name'] ?? title,
+                        textAlign: TextAlign.center,
-                          textAlign: TextAlign.center,
+                        overflow: TextOverflow.ellipsis,
-                          overflow: TextOverflow.ellipsis,
+                        maxLines: 2,
-                          maxLines: 2,
+                        style: context.textTheme.bodySmall?.copyWith(
-                          style: context.textTheme.bodySmall?.copyWith(
+                          color: ColorsManager.blackColor,
-                            color: ColorsManager.blackColor,
+                          fontSize: 12,
-                            fontSize: 12,
-                          ),
                         ),
                       ),
                     ),
@@ -131,7 +129,7 @@ class DraggableCard extends StatelessWidget {
                               deviceData['tag'] ?? '',
                               textAlign: TextAlign.center,
                               overflow: TextOverflow.ellipsis,
-                              maxLines: 2,
+                              maxLines: 1,
                               style: context.textTheme.bodySmall?.copyWith(
                                 color: ColorsManager.lightGreyColor,
                                 fontSize: 9,
@@ -162,7 +160,7 @@ class DraggableCard extends StatelessWidget {
                               deviceData['subSpace'] ?? '',
                               textAlign: TextAlign.center,
                               overflow: TextOverflow.ellipsis,
-                              maxLines: 2,
+                              maxLines: 1,
                               style: context.textTheme.bodySmall?.copyWith(
                                 color: ColorsManager.lightGreyColor,
                                 fontSize: 9,

lib/pages/routines/widgets/if_container.dart

@@ -17,90 +17,87 @@ class IfContainer extends StatelessWidget {
       builder: (context, state) {
         return DragTarget<Map<String, dynamic>>(
           builder: (context, candidateData, rejectedData) {
-            return Container(
+            return SingleChildScrollView(
-              width: double.infinity,
+              child: Container(
-              padding: const EdgeInsets.all(16),
+                width: double.infinity,
-              child: Column(
+                padding: const EdgeInsets.all(16),
-                crossAxisAlignment: CrossAxisAlignment.start,
+                child: Column(
-                children: [
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                  Row(
+                  children: [
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    Row(
-                    children: [
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      const Text('IF',
-                          style:
-                              TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
-                      if (state.isAutomation && state.ifItems.isNotEmpty)
-                        AutomationOperatorSelector(
-                            selectedOperator: state.selectedAutomationOperator),
-                    ],
-                  ),
-                  const SizedBox(height: 16),
-                  if (state.isTabToRun)
-                    const Row(
-                      mainAxisAlignment: MainAxisAlignment.center,
                       children: [
-                        DraggableCard(
+                        const Text('IF',
-                          imagePath: Assets.tabToRun,
+                            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
-                          title: 'Tab to run',
+                        if (state.isAutomation && state.ifItems.isNotEmpty)
-                          deviceData: {},
+                          AutomationOperatorSelector(
-                        ),
+                              selectedOperator: state.selectedAutomationOperator),
                       ],
                     ),
-                  if (!state.isTabToRun)
+                    const SizedBox(height: 16),
-                    Wrap(
+                    if (state.isTabToRun)
-                      spacing: 8,
+                      const Row(
-                      runSpacing: 8,
+                        mainAxisAlignment: MainAxisAlignment.center,
-                      children: List.generate(
+                        children: [
-                          state.ifItems.length,
+                          DraggableCard(
-                          (index) => GestureDetector(
+                            imagePath: Assets.tabToRun,
-                                onTap: () async {
+                            title: 'Tab to run',
-                                  if (!state.isTabToRun) {
+                            deviceData: {},
-                                    final result =
+                          ),
-                                        await DeviceDialogHelper.showDeviceDialog(
+                        ],
-                                            context: context,
+                      ),
-                                            data: state.ifItems[index],
+                    if (!state.isTabToRun)
-                                            removeComparetors: false,
+                      Wrap(
-                                            dialogType: "IF");
+                        spacing: 8,
+                        runSpacing: 8,
+                        children: List.generate(
+                            state.ifItems.length,
+                            (index) => GestureDetector(
+                                  onTap: () async {
+                                    if (!state.isTabToRun) {
+                                      final result = await DeviceDialogHelper.showDeviceDialog(
+                                          context: context,
+                                          data: state.ifItems[index],
+                                          removeComparetors: false,
+                                          dialogType: "IF");
 
-                                    if (result != null) {
+                                      if (result != null) {
-                                      context.read<RoutineBloc>().add(
+                                        context
-                                          AddToIfContainer(
+                                            .read<RoutineBloc>()
-                                              state.ifItems[index], false));
+                                            .add(AddToIfContainer(state.ifItems[index], false));
-                                    } else if (![
+                                      } else if (![
-                                      'AC',
+                                        'AC',
-                                      '1G',
+                                        '1G',
-                                      '2G',
+                                        '2G',
-                                      '3G',
+                                        '3G',
-                                      'WPS',
+                                        'WPS',
-                                      'GW',
+                                        'GW',
-                                      'CPS',
+                                        'CPS',
-                                    ].contains(
+                                      ].contains(state.ifItems[index]['productType'])) {
-                                        state.ifItems[index]['productType'])) {
+                                        context
-                                      context.read<RoutineBloc>().add(
+                                            .read<RoutineBloc>()
-                                          AddToIfContainer(
+                                            .add(AddToIfContainer(state.ifItems[index], false));
-                                              state.ifItems[index], false));
+                                      }
                                     }
-                                  }
-                                },
-                                child: DraggableCard(
-                                  imagePath: state.ifItems[index]['imagePath'] ?? '',
-                                  title: state.ifItems[index]['title'] ?? '',
-                                  deviceData: state.ifItems[index],
-                                  padding: const EdgeInsets.symmetric(
-                                      horizontal: 4, vertical: 8),
-                                  isFromThen: false,
-                                  isFromIf: true,
-                                  onRemove: () {
-                                    context.read<RoutineBloc>().add(RemoveDragCard(
-                                        index: index,
-                                        isFromThen: false,
-                                        key: state.ifItems[index]
-                                            ['uniqueCustomId']));
                                   },
-                                ),
+                                  child: DraggableCard(
-                              )),
+                                    imagePath: state.ifItems[index]['imagePath'] ?? '',
-                    ),
+                                    title: state.ifItems[index]['title'] ?? '',
-                ],
+                                    deviceData: state.ifItems[index],
+                                    padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+                                    isFromThen: false,
+                                    isFromIf: true,
+                                    onRemove: () {
+                                      context.read<RoutineBloc>().add(RemoveDragCard(
+                                          index: index,
+                                          isFromThen: false,
+                                          key: state.ifItems[index]['uniqueCustomId']));
+                                    },
+                                  ),
+                                )),
+                      ),
+                  ],
+                ),
               ),
             );
           },
@@ -124,14 +121,10 @@ class IfContainer extends StatelessWidget {
                     removeComparetors: false);
 
                 if (result != null) {
-                  context
+                  context.read<RoutineBloc>().add(AddToIfContainer(mutableData, false));
-                      .read<RoutineBloc>()
-                      .add(AddToIfContainer(mutableData, false));
                 } else if (!['AC', '1G', '2G', '3G', 'WPS', 'GW', 'CPS']
                     .contains(mutableData['productType'])) {
-                  context
+                  context.read<RoutineBloc>().add(AddToIfContainer(mutableData, false));
-                      .read<RoutineBloc>()
-                      .add(AddToIfContainer(mutableData, false));
                 }
               }
             }
@@ -177,9 +170,7 @@ class AutomationOperatorSelector extends StatelessWidget {
               ),
             ),
             onPressed: () {
-              context
+              context.read<RoutineBloc>().add(const ChangeAutomationOperator(operator: 'or'));
-                  .read<RoutineBloc>()
-                  .add(const ChangeAutomationOperator(operator: 'or'));
             },
           ),
           Container(
@@ -205,9 +196,7 @@ class AutomationOperatorSelector extends StatelessWidget {
               ),
             ),
             onPressed: () {
-              context
+              context.read<RoutineBloc>().add(const ChangeAutomationOperator(operator: 'and'));
-                  .read<RoutineBloc>()
-                  .add(const ChangeAutomationOperator(operator: 'and'));
             },
           ),
         ],

lib/pages/routines/widgets/main_routine_view/routine_view_card.dart

@@ -121,8 +121,7 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                 child: SizedBox(
                                   width: 16,
                                   height: 16,
-                                  child:
+                                  child: CircularProgressIndicator(strokeWidth: 2),
-                                      CircularProgressIndicator(strokeWidth: 2),
                                 ),
                               ),
                             )
@@ -159,9 +158,7 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                       height: iconSize,
                                       width: iconSize,
                                       fit: BoxFit.contain,
-                                      errorBuilder:
+                                      errorBuilder: (context, error, stackTrace) => Image.asset(
-                                          (context, error, stackTrace) =>
-                                              Image.asset(
                                         Assets.logo,
                                         height: iconSize,
                                         width: iconSize,
@@ -174,8 +171,7 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                       width: iconSize,
                                       fit: BoxFit.contain,
                                     )
-                              : (widget.icon is String &&
+                              : (widget.icon is String && widget.icon.endsWith('.svg'))
-                                      widget.icon.endsWith('.svg'))
                                   ? SvgPicture.asset(
                                       height: iconSize,
                                       width: iconSize,
@@ -185,9 +181,7 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                   : Icon(
                                       widget.icon,
                                       color: ColorsManager.dialogBlueTitle,
-                                      size: widget.isSmallScreenSize(context)
+                                      size: widget.isSmallScreenSize(context) ? 30 : 40,
-                                          ? 30
-                                          : 40,
                                     ),
                         ),
                       ),
@@ -200,11 +194,10 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                               widget.textString,
                               textAlign: TextAlign.center,
                               overflow: TextOverflow.ellipsis,
-                              maxLines: 2,
+                              maxLines: 1,
                               style: context.textTheme.bodySmall?.copyWith(
                                 color: ColorsManager.blackColor,
-                                fontSize:
+                                fontSize: widget.isSmallScreenSize(context) ? 10 : 12,
-                                    widget.isSmallScreenSize(context) ? 10 : 12,
                               ),
                             ),
                             if (widget.spaceName != '')
@@ -220,14 +213,10 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                     widget.spaceName,
                                     textAlign: TextAlign.center,
                                     overflow: TextOverflow.ellipsis,
-                                    maxLines: 2,
+                                    maxLines: 1,
-                                    style:
+                                    style: context.textTheme.bodySmall?.copyWith(
-                                        context.textTheme.bodySmall?.copyWith(
                                       color: ColorsManager.blackColor,
-                                      fontSize:
+                                      fontSize: widget.isSmallScreenSize(context) ? 10 : 12,
-                                          widget.isSmallScreenSize(context)
-                                              ? 10
-                                              : 12,
                                     ),
                                   ),
                                 ],

lib/pages/space_tree/view/custom_expansion.dart

@@ -8,19 +8,20 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
   final bool isSelected;
   final bool isSoldCheck;
   final bool isExpanded;
-  final Function? onExpansionChanged;
+  final void Function()? onExpansionChanged;
-  final Function? onItemSelected;
+  final void Function()? onItemSelected;
 
-  const CustomExpansionTileSpaceTree(
+  const CustomExpansionTileSpaceTree({
-      {super.key,
+    required this.isSelected,
-      this.spaceId,
+    required this.title,
-      required this.title,
+    this.spaceId,
-      this.children,
+    this.children,
-      this.isExpanded = false,
+    this.onExpansionChanged,
-      this.onExpansionChanged,
+    this.onItemSelected,
-      this.onItemSelected,
+    this.isExpanded = false,
-      required this.isSelected,
+    this.isSoldCheck = false,
-      this.isSoldCheck = false});
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -30,50 +31,30 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
           children: [
             Checkbox(
               value: isSoldCheck ? null : isSelected,
-              onChanged: (bool? value) {
+              onChanged: (value) => onItemSelected?.call(),
-                if (onItemSelected != null) {
-                  onItemSelected!();
-                }
-              },
               tristate: true,
-              side: WidgetStateBorderSide.resolveWith((states) {
+              side: WidgetStateBorderSide.resolveWith(
-                return const BorderSide(color: ColorsManager.grayBorder);
+                (states) => const BorderSide(color: ColorsManager.grayBorder),
-              }),
+              ),
               fillColor: WidgetStateProperty.resolveWith((states) {
                 if (states.contains(WidgetState.selected)) {
                   return ColorsManager.blue1;
-                } else {
-                  return ColorsManager.checkBoxFillColor;
                 }
+
+                return ColorsManager.checkBoxFillColor;
               }),
               checkColor: ColorsManager.whiteColors,
             ),
-            if (children != null && children!.isNotEmpty)
+            _buildExpansionIcon(),
-              InkWell(
-                onTap: () {
-                  if (onExpansionChanged != null) {
-                    onExpansionChanged!();
-                  }
-                },
-                child: Icon(
-                  isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
-                  color: ColorsManager.lightGrayColor,
-                  size: 16.0,
-                ),
-              ),
             Expanded(
               child: GestureDetector(
-                onTap: () {
+                onTap: onItemSelected,
-                  if (onItemSelected != null) {
-                    onItemSelected!();
-                  }
-                },
                 child: Text(
                   _capitalizeFirstLetter(title),
                   style: Theme.of(context).textTheme.bodySmall!.copyWith(
                         color: isSelected
-                            ? ColorsManager.blackColor // Change color to black when selected
+                            ? ColorsManager.blackColor
-                            : ColorsManager.lightGrayColor, // Gray when not selected
+                            : ColorsManager.lightGrayColor,
                         fontWeight: FontWeight.w400,
                       ),
                 ),
@@ -92,6 +73,20 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
     );
   }
 
+  Widget _buildExpansionIcon() {
+    return Visibility(
+      visible: children != null && children!.isNotEmpty,
+      child: InkWell(
+        onTap: onExpansionChanged,
+        child: Icon(
+          isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
+          color: ColorsManager.lightGrayColor,
+          size: 16.0,
+        ),
+      ),
+    );
+  }
+
   String _capitalizeFirstLetter(String text) {
     if (text.isEmpty) return text;
     return text[0].toUpperCase() + text.substring(1);

lib/pages/space_tree/view/space_tree_view.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/common/widgets/search_bar.dart';
+import 'package:syncrow_web/common/widgets/sidebar_communities_list.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
@@ -23,7 +24,13 @@ class SpaceTreeView extends StatefulWidget {
 }
 
 class _SpaceTreeViewState extends State<SpaceTreeView> {
-  final ScrollController _scrollController = ScrollController();
+  late final ScrollController _scrollController;
+
+  @override
+  void initState() {
+    _scrollController = ScrollController();
+    super.initState();
+  }
 
   @override
   void dispose() {
@@ -34,225 +41,161 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
-      List<CommunityModel> list =
+      final communities = state.searchQuery.isNotEmpty
-          state.searchQuery.isNotEmpty ? state.filteredCommunity : state.communityList;
+          ? state.filteredCommunity
+          : state.communityList;
       return Container(
         height: MediaQuery.sizeOf(context).height,
         decoration: widget.isSide == true
-            ? subSectionContainerDecoration.copyWith(color: ColorsManager.whiteColors)
+            ? subSectionContainerDecoration.copyWith(
+                color: ColorsManager.whiteColors)
             : const BoxDecoration(color: ColorsManager.whiteColors),
         child: state is SpaceTreeLoadingState
             ? const Center(child: CircularProgressIndicator())
             : Column(
                 children: [
-                  widget.isSide == true
+                  if (widget.isSide == true)
-                      ? Container(
+                    Container(
-                          decoration: const BoxDecoration(
+                      decoration: const BoxDecoration(
-                            color: ColorsManager.circleRolesBackground,
+                        color: ColorsManager.circleRolesBackground,
-                            borderRadius: BorderRadius.only(
+                        borderRadius: BorderRadius.only(
-                                topRight: Radius.circular(20), topLeft: Radius.circular(20)),
+                          topRight: Radius.circular(20),
-                          ),
+                          topLeft: Radius.circular(20),
-                          child: Padding(
+                        ),
-                            padding: const EdgeInsets.all(8.0),
+                      ),
-                            child: Row(
+                      child: Padding(
-                              children: [
+                        padding: const EdgeInsets.all(8.0),
-                                Expanded(
+                        child: Row(
-                                  child: Container(
+                          children: [
-                                    decoration: BoxDecoration(
+                            Expanded(
-                                        borderRadius: const BorderRadius.all(Radius.circular(20)),
+                              child: Container(
-                                        border: Border.all(color: ColorsManager.grayBorder)),
+                                decoration: BoxDecoration(
-                                    child: TextFormField(
+                                  borderRadius: const BorderRadius.all(
-                                      style: context.textTheme.bodyMedium
+                                    Radius.circular(20),
-                                          ?.copyWith(color: ColorsManager.blackColor),
+                                  ),
-                                      onChanged: (value) {
+                                  border: Border.all(
-                                        context.read<SpaceTreeBloc>().add(SearchQueryEvent(value));
+                                    color: ColorsManager.grayBorder,
-                                      },
+                                  ),
-                                      decoration: textBoxDecoration(radios: 20)!.copyWith(
+                                ),
-                                        fillColor: Colors.white,
+                                child: TextFormField(
-                                        suffixIcon: Padding(
+                                  style: context.textTheme.bodyMedium?.copyWith(
-                                          padding: const EdgeInsets.only(right: 16),
+                                    color: ColorsManager.blackColor,
-                                          child: SvgPicture.asset(
+                                  ),
-                                            Assets.textFieldSearch,
+                                  onChanged: (value) =>
-                                            width: 24,
+                                      context.read<SpaceTreeBloc>().add(
-                                            height: 24,
+                                            SearchQueryEvent(value),
                                           ),
-                                        ),
+                                  decoration:
-                                        hintStyle: context.textTheme.bodyMedium?.copyWith(
+                                      textBoxDecoration(radios: 20)?.copyWith(
-                                            fontWeight: FontWeight.w400,
+                                    fillColor: Colors.white,
-                                            fontSize: 12,
+                                    suffixIcon: Padding(
-                                            color: ColorsManager.textGray),
+                                      padding: const EdgeInsets.only(right: 16),
+                                      child: SvgPicture.asset(
+                                        Assets.textFieldSearch,
+                                        width: 24,
+                                        height: 24,
                                       ),
                                     ),
+                                    hintStyle:
+                                        context.textTheme.bodyMedium?.copyWith(
+                                      fontWeight: FontWeight.w400,
+                                      fontSize: 12,
+                                      color: ColorsManager.textGray,
+                                    ),
                                   ),
                                 ),
-                              ],
+                              ),
                             ),
-                          ),
+                          ],
-                        )
-                      : CustomSearchBar(
-                          onSearchChanged: (query) {
-                            context.read<SpaceTreeBloc>().add(SearchQueryEvent(query));
-                          },
                         ),
+                      ),
+                    )
+                  else
+                    CustomSearchBar(
+                      onSearchChanged: (query) => context.read<SpaceTreeBloc>().add(
+                            SearchQueryEvent(query),
+                          ),
+                    ),
                   const SizedBox(height: 16),
                   Expanded(
                     child: state.isSearching
                         ? const Center(child: CircularProgressIndicator())
-                        : ListView(
+                        : SidebarCommunitiesList(
-                            shrinkWrap: true,
+                            onScrollToEnd: () => context.read<SpaceTreeBloc>().add(
-                            scrollDirection: Axis.horizontal,
+                                  PaginationEvent(
-                            children: [
+                                    state.paginationModel,
-                              Container(
+                                    state.communityList,
-                                width: MediaQuery.sizeOf(context).width * 0.5,
+                                  ),
-                                padding: const EdgeInsets.all(8.0),
+                                ),
-                                child: list.isEmpty
+                            scrollController: _scrollController,
-                                    ? Center(
+                            communities: communities,
-                                        child: Text(
+                            itemBuilder: (context, index) {
-                                          'No results found',
+                              return CustomExpansionTileSpaceTree(
-                                          style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                                title: communities[index].name,
-                                                color: ColorsManager.lightGrayColor,
+                                isSelected: state.selectedCommunities
-                                                fontWeight: FontWeight.w400,
+                                    .contains(communities[index].uuid),
-                                              ),
+                                isSoldCheck: state.selectedCommunities
-                                        ),
+                                    .contains(communities[index].uuid),
-                                      )
+                                onExpansionChanged: () =>
-                                    : Scrollbar(
+                                    context.read<SpaceTreeBloc>().add(
-                                        scrollbarOrientation: ScrollbarOrientation.left,
+                                          OnCommunityExpanded(
-                                        thumbVisibility: true,
+                                            communities[index].uuid,
-                                        controller: _scrollController,
-                                        child: NotificationListener(
-                                          onNotification: (notification) {
-                                            if (notification is ScrollEndNotification &&
-                                                notification.metrics.extentAfter == 0) {
-                                              // If the user has reached the end of the list Load more data
-                                              context.read<SpaceTreeBloc>().add(PaginationEvent(
-                                                  state.paginationModel, state.communityList));
-                                            }
-                                            return false;
-                                          },
-                                          child: Padding(
-                                            padding: const EdgeInsets.only(left: 16),
-                                            child: ListView.builder(
-                                                shrinkWrap: true,
-                                                itemCount: list.length,
-                                                controller: _scrollController,
-                                                itemBuilder: (context, index) {
-                                                  return CustomExpansionTileSpaceTree(
-                                                    title: list[index].name,
-                                                    isSelected: state.selectedCommunities
-                                                        .contains(list[index].uuid),
-                                                    isSoldCheck: state.selectedCommunities
-                                                        .contains(list[index].uuid),
-                                                    onExpansionChanged: () {
-                                                      context.read<SpaceTreeBloc>().add(
-                                                          OnCommunityExpanded(list[index].uuid));
-                                                    },
-                                                    isExpanded: state.expandedCommunities
-                                                        .contains(list[index].uuid),
-                                                    onItemSelected: () {
-                                                      context.read<SpaceTreeBloc>().add(
-                                                          OnCommunitySelected(list[index].uuid,
-                                                              list[index].spaces));
-                                                      widget.onSelect();
-                                                    },
-                                                    children: list[index].spaces.map((space) {
-                                                      return CustomExpansionTileSpaceTree(
-                                                        title: space.name,
-                                                        isExpanded: state.expandedSpaces
-                                                            .contains(space.uuid),
-                                                        onItemSelected: () {
-                                                          context.read<SpaceTreeBloc>().add(
-                                                              OnSpaceSelected(
-                                                                  list[index],
-                                                                  space.uuid ?? '',
-                                                                  space.children));
-                                                          widget.onSelect();
-                                                        },
-                                                        onExpansionChanged: () {
-                                                          context.read<SpaceTreeBloc>().add(
-                                                              OnSpaceExpanded(list[index].uuid,
-                                                                  space.uuid ?? ''));
-                                                        },
-                                                        isSelected: state.selectedSpaces
-                                                                .contains(space.uuid) ||
-                                                            state.soldCheck.contains(space.uuid),
-                                                        isSoldCheck:
-                                                            state.soldCheck.contains(space.uuid),
-                                                        children: _buildNestedSpaces(
-                                                            context, state, space, list[index]),
-                                                      );
-                                                    }).toList(),
-                                                  );
-                                                }),
                                           ),
                                         ),
+                                isExpanded: state.expandedCommunities.contains(
+                                  communities[index].uuid,
+                                ),
+                                onItemSelected: () {
+                                  context.read<SpaceTreeBloc>().add(
+                                        OnCommunitySelected(
+                                          communities[index].uuid,
+                                          communities[index].spaces,
+                                        ),
+                                      );
+                                  widget.onSelect();
+                                },
+                                children: communities[index].spaces.map(
+                                  (space) {
+                                    return CustomExpansionTileSpaceTree(
+                                      title: space.name,
+                                      isExpanded:
+                                          state.expandedSpaces.contains(space.uuid),
+                                      onItemSelected: () {
+                                        context.read<SpaceTreeBloc>().add(
+                                              OnSpaceSelected(
+                                                communities[index],
+                                                space.uuid ?? '',
+                                                space.children,
+                                              ),
+                                            );
+                                        widget.onSelect();
+                                      },
+                                      onExpansionChanged: () =>
+                                          context.read<SpaceTreeBloc>().add(
+                                                OnSpaceExpanded(
+                                                  communities[index].uuid,
+                                                  space.uuid ?? '',
+                                                ),
+                                              ),
+                                      isSelected: state.selectedSpaces
+                                              .contains(space.uuid) ||
+                                          state.soldCheck.contains(space.uuid),
+                                      isSoldCheck:
+                                          state.soldCheck.contains(space.uuid),
+                                      children: _buildNestedSpaces(
+                                        context,
+                                        state,
+                                        space,
+                                        communities[index],
                                       ),
-                              ),
+                                    );
-                            ],
+                                  },
+                                ).toList(),
+                              );
+                            },
                           ),
                   ),
                   if (state.paginationIsLoading) const CircularProgressIndicator(),
-                  // Expanded(
-                  //   child: Padding(
-                  //     padding: const EdgeInsets.all(8.0),
-                  //     child: list.isEmpty
-                  //         ? Center(
-                  //             child: Text(
-                  //               'No results found',
-                  //               style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                  //                     color: ColorsManager.lightGrayColor, // Gray when not selected
-                  //                     fontWeight: FontWeight.w400,
-                  //                   ),
-                  //             ),
-                  //           )
-                  //         : ListView(
-                  //             shrinkWrap: true,
-                  //             children: list
-                  //                 .map(
-                  //                   (community) => CustomExpansionTileSpaceTree(
-                  //                     title: community.name,
-                  //                     isSelected:
-                  //                         state.selectedCommunities.contains(community.uuid),
-                  //                     isSoldCheck:
-                  //                         state.selectedCommunities.contains(community.uuid),
-                  //                     onExpansionChanged: () {
-                  //                       context
-                  //                           .read<SpaceTreeBloc>()
-                  //                           .add(OnCommunityExpanded(community.uuid));
-                  //                     },
-                  //                     isExpanded:
-                  //                         state.expandedCommunities.contains(community.uuid),
-                  //                     onItemSelected: () {
-                  //                       context.read<SpaceTreeBloc>().add(
-                  //                           OnCommunitySelected(community.uuid, community.spaces));
-
-                  //                       onSelect();
-                  //                     },
-                  //                     children: community.spaces.map((space) {
-                  //                       return CustomExpansionTileSpaceTree(
-                  //                         title: space.name,
-                  //                         isExpanded: state.expandedSpaces.contains(space.uuid),
-                  //                         onItemSelected: () {
-                  //                           context.read<SpaceTreeBloc>().add(OnSpaceSelected(
-                  //                               community.uuid, space.uuid ?? '', space.children));
-                  //                           onSelect();
-                  //                         },
-                  //                         onExpansionChanged: () {
-                  //                           context.read<SpaceTreeBloc>().add(
-                  //                               OnSpaceExpanded(community.uuid, space.uuid ?? ''));
-                  //                         },
-                  //                         isSelected: state.selectedSpaces.contains(space.uuid) ||
-                  //                             state.soldCheck.contains(space.uuid),
-                  //                         isSoldCheck: state.soldCheck.contains(space.uuid),
-                  //                         children: _buildNestedSpaces(
-                  //                             context, state, space, community.uuid),
-                  //                       );
-                  //                     }).toList(),
-                  //                   ),
-                  //                 )
-                  //                 .toList(),
-                  //           ),
-                  //   ),
-                  // ),
                 ],
               ),
       );
@@ -260,22 +203,28 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
   }
 
   List<Widget> _buildNestedSpaces(
-      BuildContext context, SpaceTreeState state, SpaceModel space, CommunityModel community) {
+    BuildContext context,
+    SpaceTreeState state,
+    SpaceModel space,
+    CommunityModel community,
+  ) {
     return space.children.map((child) {
       return CustomExpansionTileSpaceTree(
-        isSelected:
+        isSelected: state.selectedSpaces.contains(child.uuid) ||
-            state.selectedSpaces.contains(child.uuid) || state.soldCheck.contains(child.uuid),
+            state.soldCheck.contains(child.uuid),
         isSoldCheck: state.soldCheck.contains(child.uuid),
         title: child.name,
         isExpanded: state.expandedSpaces.contains(child.uuid),
         onItemSelected: () {
-          context
+          context.read<SpaceTreeBloc>().add(
-              .read<SpaceTreeBloc>()
+                OnSpaceSelected(community, child.uuid ?? '', child.children),
-              .add(OnSpaceSelected(community, child.uuid ?? '', child.children));
+              );
           widget.onSelect();
         },
         onExpansionChanged: () {
-          context.read<SpaceTreeBloc>().add(OnSpaceExpanded(community.uuid, child.uuid ?? ''));
+          context.read<SpaceTreeBloc>().add(
+                OnSpaceExpanded(community.uuid, child.uuid ?? ''),
+              );
         },
         children: _buildNestedSpaces(context, state, child, community),
       );

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

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
@@ -107,6 +109,11 @@ class _LoadedSpaceViewState extends State<LoadedSpaceView> {
                     selectedSpaceUuid: widget.selectedSpace?.uuid ??
                         widget.selectedCommunity?.uuid ??
                         '',
+                    onCreateCommunity: (name, description) {
+                      context.read<SpaceManagementBloc>().add(
+                            CreateCommunityEvent(name, description, context),
+                          );
+                    },
                   ),
                   CommunityStructureArea(
                     selectedCommunity: widget.selectedCommunity,

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

@@ -1,19 +1,15 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
-import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart';
-import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart';
-import 'package:syncrow_web/pages/spaces_management/create_community/view/create_community_dialog.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class SidebarAddCommunityButton extends StatelessWidget {
   const SidebarAddCommunityButton({
-    required this.existingCommunityNames,
+    required this.onTap,
     super.key,
   });
 
-  final List<String> existingCommunityNames;
+  final void Function() onTap;
 
   @override
   Widget build(BuildContext context) {
@@ -30,22 +26,9 @@ class SidebarAddCommunityButton extends StatelessWidget {
             ),
           ),
         ),
-        onPressed: () => _showCreateCommunityDialog(context),
+        onPressed: onTap,
         icon: SvgPicture.asset(Assets.addIcon),
       ),
     );
   }
-
-  void _showCreateCommunityDialog(BuildContext context) => showDialog<void>(
-        context: context,
-        builder: (context) => CreateCommunityDialog(
-          isEditMode: false,
-          existingCommunityNames: existingCommunityNames,
-          onCreateCommunity: (name, description) {
-            context.read<SpaceManagementBloc>().add(
-                  CreateCommunityEvent(name, description, context),
-                );
-          },
-        ),
-      );
 }

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

@@ -5,9 +5,12 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class SidebarHeader extends StatelessWidget {
-  const SidebarHeader({required this.existingCommunityNames, super.key});
+  const SidebarHeader({
+    required this.onAddCommunity,
+    super.key,
+  });
 
-  final List<String> existingCommunityNames;
+  final void Function() onAddCommunity;
 
   @override
   Widget build(BuildContext context) {
@@ -23,7 +26,9 @@ class SidebarHeader extends StatelessWidget {
               color: ColorsManager.blackColor,
             ),
           ),
-          SidebarAddCommunityButton(existingCommunityNames: existingCommunityNames),
+          SidebarAddCommunityButton(
+            onTap: onAddCommunity,
+          ),
         ],
       ),
     );

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

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/common/widgets/empty_search_result_widget.dart';
 import 'package:syncrow_web/common/widgets/search_bar.dart';
+import 'package:syncrow_web/common/widgets/sidebar_communities_list.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
@@ -8,6 +10,7 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/community_tile.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/sidebar_header.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/space_tile_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/create_community/view/create_community_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/structure_selector/bloc/center_body_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/structure_selector/bloc/center_body_event.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -15,9 +18,11 @@ import 'package:syncrow_web/utils/style.dart';
 class SidebarWidget extends StatefulWidget {
   final List<CommunityModel> communities;
   final String? selectedSpaceUuid;
+  final void Function(String name, String description) onCreateCommunity;
 
   const SidebarWidget({
     required this.communities,
+    required this.onCreateCommunity,
     this.selectedSpaceUuid,
     super.key,
   });
@@ -27,6 +32,8 @@ class SidebarWidget extends StatefulWidget {
 }
 
 class _SidebarWidgetState extends State<SidebarWidget> {
+  late final ScrollController _scrollController;
+
   String _searchQuery = '';
   String? _selectedSpaceUuid;
   String? _selectedId;
@@ -34,9 +41,16 @@ class _SidebarWidgetState extends State<SidebarWidget> {
   @override
   void initState() {
     _selectedId = widget.selectedSpaceUuid;
+    _scrollController = ScrollController();
     super.initState();
   }
 
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
   @override
   void didUpdateWidget(covariant SidebarWidget oldWidget) {
     if (widget.selectedSpaceUuid != oldWidget.selectedSpaceUuid) {
@@ -83,30 +97,37 @@ class _SidebarWidgetState extends State<SidebarWidget> {
     return isSpaceSelected || anySubSpaceIsSelected;
   }
 
+  static const _width = 300.0;
+
   @override
   Widget build(BuildContext context) {
     final filteredCommunities = _filteredCommunities();
 
     return Container(
-      width: 300,
+      width: _width,
       decoration: subSectionContainerDecoration,
       child: Column(
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          SidebarHeader(
+          SidebarHeader(onAddCommunity: _onAddCommunity),
-            existingCommunityNames:
-                widget.communities.map((community) => community.name).toList(),
-          ),
           CustomSearchBar(
             onSearchChanged: (query) => setState(() => _searchQuery = query),
           ),
           const SizedBox(height: 16),
           Expanded(
-            child: ListView(
+            child: Visibility(
-              children: filteredCommunities
+              visible: filteredCommunities.isNotEmpty,
-                  .map((community) => _buildCommunityTile(context, community))
+              replacement: const EmptySearchResultWidget(),
-                  .toList(),
+              child: SidebarCommunitiesList(
+                scrollController: _scrollController,
+                onScrollToEnd: () {},
+                communities: filteredCommunities,
+                itemBuilder: (context, index) => _buildCommunityTile(
+                  context,
+                  filteredCommunities[index],
+                ),
+              ),
             ),
           ),
         ],
@@ -134,11 +155,12 @@ class _SidebarWidgetState extends State<SidebarWidget> {
       },
       onExpansionChanged: (title, expanded) {},
       children: community.spaces
-          .where((space) {
+          .where(
-            final isDeleted = space.status != SpaceStatus.deleted;
+            (space) => {
-            final isParentDeleted = space.status != SpaceStatus.parentDeleted;
+              SpaceStatus.deleted,
-            return (isDeleted || isParentDeleted);
+              SpaceStatus.parentDeleted,
-          })
+            }.contains(space.status),
+          )
           .map((space) => _buildSpaceTile(space: space, community: community))
           .toList(),
     );
@@ -179,4 +201,26 @@ class _SidebarWidgetState extends State<SidebarWidget> {
       ),
     );
   }
+
+  void _onAddCommunity() => _selectedId?.isNotEmpty ?? true
+      ? _clearSelection()
+      : _showCreateCommunityDialog();
+
+  void _clearSelection() {
+    setState(() => _selectedId = '');
+    context.read<SpaceManagementBloc>().add(
+          NewCommunityEvent(communities: widget.communities),
+        );
+  }
+
+  void _showCreateCommunityDialog() {
+    showDialog<void>(
+      context: context,
+      builder: (context) => CreateCommunityDialog(
+        isEditMode: false,
+        existingCommunityNames: widget.communities.map((e) => e.name).toList(),
+        onCreateCommunity: widget.onCreateCommunity,
+      ),
+    );
+  }
 }

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

@@ -1,12 +1,13 @@
 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/create_subspace_model/bloc/subspace_model_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.dart';
 import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_state.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_chips_box.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_footer_buttons.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';
 
 class CreateSubSpaceModelDialog extends StatelessWidget {
   final bool isEdit;
@@ -14,211 +15,67 @@ class CreateSubSpaceModelDialog extends StatelessWidget {
   final List<SubspaceTemplateModel>? existingSubSpaces;
   final void Function(List<SubspaceTemplateModel> newSubspaces)? onUpdate;
 
-  const CreateSubSpaceModelDialog(
+  const CreateSubSpaceModelDialog({
-      {Key? key,
+    required this.isEdit,
-      required this.isEdit,
+    required this.dialogTitle,
-      required this.dialogTitle,
+    this.existingSubSpaces,
-      this.existingSubSpaces,
+    this.onUpdate,
-      this.onUpdate})
+    super.key,
-      : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
     final screenWidth = MediaQuery.of(context).size.width;
-    final textController = TextEditingController();
 
     return Dialog(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(20),
       ),
       child: BlocProvider(
-        create: (_) {
+        create: (context) {
           final bloc = SubSpaceModelBloc();
           if (existingSubSpaces != null) {
-            for (var subSpace in existingSubSpaces!) {
+            for (final subSpace in existingSubSpaces ?? []) {
               bloc.add(AddSubSpaceModel(subSpace));
             }
           }
           return bloc;
         },
         child: BlocBuilder<SubSpaceModelBloc, SubSpaceModelState>(
-          builder: (context, state) {
+          builder: (context, state) => Container(
-            return Container(
+            color: ColorsManager.whiteColors,
-                color: ColorsManager.whiteColors,
+            width: screenWidth * 0.3,
-                child: SizedBox(
+            padding: const EdgeInsets.all(16),
-                  width: screenWidth * 0.3,
+            child: Column(
-                  child: Padding(
+              crossAxisAlignment: CrossAxisAlignment.start,
-                    padding: const EdgeInsets.all(16.0),
+              mainAxisSize: MainAxisSize.min,
-                    child: Column(
+              children: [
-                      crossAxisAlignment: CrossAxisAlignment.start,
+                Text(
-                      mainAxisSize: MainAxisSize.min,
+                  dialogTitle,
-                      children: [
+                  style: context.textTheme.headlineLarge?.copyWith(
-                        Text(
+                    color: ColorsManager.blackColor,
-                          dialogTitle,
+                  ),
-                          style: Theme.of(context)
+                ),
-                              .textTheme
+                const SizedBox(height: 16),
-                              .headlineLarge
+                CreateSubspaceModelChipsBox(subSpaces: state.subSpaces),
-                              ?.copyWith(color: ColorsManager.blackColor),
+                if (state.errorMessage.isNotEmpty)
-                        ),
+                  Padding(
-                        const SizedBox(height: 16),
+                    padding: const EdgeInsets.only(bottom: 16),
-                        Container(
+                    child: Text(
-                          width: screenWidth * 0.35,
+                      state.errorMessage,
-                          padding: const EdgeInsets.symmetric(
+                      style: context.textTheme.bodySmall?.copyWith(
-                              vertical: 10.0, horizontal: 16.0),
+                        color: ColorsManager.red,
-                          decoration: BoxDecoration(
+                      ),
-                            color: ColorsManager.boxColor,
-                            borderRadius: BorderRadius.circular(10),
-                          ),
-                          child: Wrap(
-                            spacing: 8.0,
-                            runSpacing: 8.0,
-                            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 Chip(
-                                    label: Text(subSpace.subspaceName,
-                                        style: Theme.of(context)
-                                            .textTheme
-                                            .bodySmall
-                                            ?.copyWith(
-                                              color: ColorsManager.spaceColor,
-                                            )),
-                                    backgroundColor: ColorsManager.whiteColors,
-                                    shape: RoundedRectangleBorder(
-                                      borderRadius: BorderRadius.circular(10),
-                                      side: BorderSide(
-                                        color: isDuplicate
-                                            ? ColorsManager.red
-                                            : 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: () => context
-                                        .read<SubSpaceModelBloc>()
-                                        .add(RemoveSubSpaceModel(subSpace)),
-                                  );
-                                },
-                              ),
-                              SizedBox(
-                                width: 200,
-                                child: TextField(
-                                    controller: textController,
-                                    decoration: InputDecoration(
-                                        border: InputBorder.none,
-                                        hintText: state.subSpaces.isEmpty
-                                            ? 'Please enter the name'
-                                            : null,
-                                        hintStyle: Theme.of(context)
-                                            .textTheme
-                                            .bodySmall!
-                                            .copyWith(
-                                                color: ColorsManager
-                                                    .lightGrayColor)),
-                                    onSubmitted: (value) {
-                                      if (value.trim().isNotEmpty) {
-                                        context.read<SubSpaceModelBloc>().add(
-                                            AddSubSpaceModel(
-                                                SubspaceTemplateModel(
-                                                    subspaceName: value.trim(),
-                                                    disabled: false)));
-                                        textController.clear();
-                                      }
-                                    },
-                                    style: Theme.of(context)
-                                        .textTheme
-                                        .bodyMedium
-                                        ?.copyWith(
-                                            color: ColorsManager.blackColor)),
-                              ),
-                            ],
-                          ),
-                        ),
-                        if (state.errorMessage.isNotEmpty)
-                          Padding(
-                            padding: const EdgeInsets.only(bottom: 16.0),
-                            child: Text(state.errorMessage,
-                                style: Theme.of(context)
-                                    .textTheme
-                                    .bodySmall
-                                    ?.copyWith(
-                                      color: ColorsManager.red,
-                                    )),
-                          ),
-                        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.isNotEmpty)
-                                    ? null
-                                    : () async {
-                                        final subSpaces = context
-                                            .read<SubSpaceModelBloc>()
-                                            .state
-                                            .subSpaces;
-                                        Navigator.of(context).pop();
-                                        if (onUpdate != null) {
-                                          onUpdate!(subSpaces);
-                                        }
-                                      },
-                                backgroundColor: ColorsManager.secondaryColor,
-                                borderRadius: 10,
-                                foregroundColor: state.errorMessage.isNotEmpty
-                                    ? ColorsManager.whiteColorsWithOpacity
-                                    : ColorsManager.whiteColors,
-                                child: const Text('OK'),
-                              ),
-                            ),
-                          ],
-                        ),
-                      ],
                     ),
                   ),
-                ));
+                const SizedBox(height: 16),
-          },
+                CreateSubspaceModelFooterButtons(
+                  onUpdate: onUpdate,
+                  errorMessage: state.errorMessage,
+                ),
+              ],
+            ),
+          ),
         ),
       ),
     );

lib/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_chips_box.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspaces_textfield.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CreateSubspaceModelChipsBox extends StatelessWidget {
+  const CreateSubspaceModelChipsBox({
+    required this.subSpaces,
+    super.key,
+  });
+
+  final List<SubspaceTemplateModel> subSpaces;
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    return Container(
+      width: 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: subSpace,
+                isDuplicate: isDuplicate,
+              );
+            },
+          ),
+          SubspacesTextfield(
+            hintText: subSpaces.isEmpty ? 'Please enter the name' : null,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/spaces_management/create_subspace_model/widgets/create_subspace_model_footer_buttons.dart

@@ -0,0 +1,53 @@
+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/create_subspace_model/bloc/subspace_model_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CreateSubspaceModelFooterButtons extends StatelessWidget {
+  const CreateSubspaceModelFooterButtons({
+    required this.onUpdate,
+    required this.errorMessage,
+    super.key,
+  });
+
+  final void Function(List<SubspaceTemplateModel> newSubspaces)? onUpdate;
+  final String errorMessage;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: CancelButton(
+            label: 'Cancel',
+            onPressed: () => Navigator.of(context).pop(),
+          ),
+        ),
+        const SizedBox(width: 10),
+        Expanded(
+          child: DefaultButton(
+            onPressed: errorMessage.isEmpty
+                ? () {
+                    Navigator.of(context).pop();
+                    if (onUpdate != null) {
+                      final subSpaces =
+                          context.read<SubSpaceModelBloc>().state.subSpaces;
+                      onUpdate!(subSpaces);
+                    }
+                  }
+                : null,
+            backgroundColor: ColorsManager.secondaryColor,
+            borderRadius: 10,
+            foregroundColor: errorMessage.isNotEmpty
+                ? ColorsManager.whiteColorsWithOpacity
+                : ColorsManager.whiteColors,
+            child: const Text('OK'),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.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';
+
+class SubspaceChip extends StatelessWidget {
+  const SubspaceChip({
+    required this.subSpace,
+    required this.isDuplicate,
+    super.key,
+  });
+
+  final SubspaceTemplateModel subSpace;
+  final bool isDuplicate;
+
+  @override
+  Widget build(BuildContext context) {
+    return Chip(
+      label: Text(
+        subSpace.subspaceName,
+        style: context.textTheme.bodySmall?.copyWith(
+          color: isDuplicate ? ColorsManager.red : ColorsManager.spaceColor,
+        ),
+      ),
+      backgroundColor: ColorsManager.whiteColors,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(10),
+        side: BorderSide(
+          color: isDuplicate ? ColorsManager.red : ColorsManager.transparentColor,
+          width: 0,
+        ),
+      ),
+      deleteIcon: Container(
+        padding: const EdgeInsetsDirectional.all(1),
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: Border.all(
+            color: ColorsManager.lightGrayColor,
+            width: 1.5,
+          ),
+        ),
+        child: const FittedBox(
+          fit: BoxFit.scaleDown,
+          child: Icon(
+            Icons.close,
+            color: ColorsManager.lightGrayColor,
+          ),
+        ),
+      ),
+      onDeleted: () => context.read<SubSpaceModelBloc>().add(
+            RemoveSubSpaceModel(subSpace),
+          ),
+    );
+  }
+}

lib/pages/spaces_management/create_subspace_model/widgets/subspaces_textfield.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
+import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.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';
+
+class SubspacesTextfield extends StatefulWidget {
+  const SubspacesTextfield({
+    required this.hintText,
+    super.key,
+  });
+
+  final String? hintText;
+
+  @override
+  State<SubspacesTextfield> createState() => _SubspacesTextfieldState();
+}
+
+class _SubspacesTextfieldState extends State<SubspacesTextfield> {
+  late final TextEditingController _controller;
+  @override
+  void initState() {
+    _controller = TextEditingController();
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 100,
+      child: TextField(
+        controller: _controller,
+        decoration: InputDecoration(
+          border: InputBorder.none,
+          hintText: widget.hintText,
+          hintStyle: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.lightGrayColor,
+          ),
+        ),
+        onSubmitted: (value) {
+          final trimmedValue = value.trim();
+          if (trimmedValue.isNotEmpty) {
+            context.read<SubSpaceModelBloc>().add(
+                  AddSubSpaceModel(
+                    SubspaceTemplateModel(
+                      subspaceName: trimmedValue,
+                      disabled: false,
+                    ),
+                  ),
+                );
+            _controller.clear();
+          }
+        },
+        style: context.textTheme.bodyMedium?.copyWith(
+          color: ColorsManager.blackColor,
+        ),
+      ),
+    );
+  }
+}

lib/pages/spaces_management/space_model/widgets/dialog/create_space_model_dialog.dart

@@ -145,13 +145,11 @@ class CreateSpaceModelDialog extends StatelessWidget {
                     ),
                     const SizedBox(height: 10),
                     TagChipDisplay(
-                      context,
-                      screenWidth: screenWidth,
                       spaceModel: updatedSpaceModel,
                       products: products,
                       subspaces: subspaces,
                       allTags: allTags,
-                      spaceNameController: spaceNameController,
+                      spaceName: spaceNameController.text,
                       pageContext: pageContext,
                       otherSpaceModels: otherSpaceModels,
                       allSpaceModels: allSpaceModels,

lib/pages/spaces_management/space_model/widgets/tag_chips_display_widget.dart

@@ -10,139 +10,152 @@ import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_
 import 'package:syncrow_web/pages/spaces_management/space_model/widgets/button_content_widget.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/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class TagChipDisplay extends StatelessWidget {
-  final double screenWidth;
+  const TagChipDisplay({
+    required this.spaceModel,
+    required this.products,
+    required this.subspaces,
+    required this.allTags,
+    required this.spaceName,
+    required this.projectTags,
+    this.pageContext,
+    this.otherSpaceModels,
+    this.allSpaceModels,
+    super.key,
+  });
+
   final SpaceTemplateModel? spaceModel;
   final List<ProductModel>? products;
   final List<SubspaceTemplateModel>? subspaces;
   final List<String>? allTags;
-  final TextEditingController spaceNameController;
+  final String spaceName;
   final BuildContext? pageContext;
   final List<String>? otherSpaceModels;
   final List<SpaceTemplateModel>? allSpaceModels;
   final List<Tag> projectTags;
 
-  const TagChipDisplay(BuildContext context,
+  Map<ProductModel, int> get _groupedTags {
-      {Key? key,
+    final spaceTags = spaceModel?.tags ?? <Tag>[];
-      required this.screenWidth,
+
-      required this.spaceModel,
+    final subspaces = spaceModel?.subspaceModels ?? [];
-      required this.products,
+    final subspaceTags = subspaces.expand((e) => e.tags ?? <Tag>[]).toList();
-      required this.subspaces,
+
-      required this.allTags,
+    return TagHelper.groupTags([...spaceTags, ...subspaceTags]);
-      required this.spaceNameController,
+  }
-      this.pageContext,
-      this.otherSpaceModels,
-      this.allSpaceModels,
-      required this.projectTags})
-      : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return (spaceModel?.tags?.isNotEmpty == true ||
+    final hasTags = spaceModel?.tags?.isNotEmpty ?? false;
-            spaceModel?.subspaceModels?.any((subspace) => subspace.tags?.isNotEmpty == true) ==
+    final hasSubspaceTags =
-                true)
+        spaceModel?.subspaceModels?.any((e) => e.tags?.isNotEmpty ?? false) ?? false;
-        ? 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([
-                    ...?spaceModel?.tags,
-                    ...?spaceModel?.subspaceModels?.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 {
-                    // Use the Navigator's context for showDialog
-                    Navigator.of(context).pop();
 
-                    await showDialog<bool>(
+    if (hasTags || hasSubspaceTags) {
-                        barrierDismissible: false,
+      return Container(
-                        context: context,
+        width: context.screenWidth * 0.25,
-                        builder: (context) => AssignTagModelsDialog(
+        padding: const EdgeInsets.all(8),
-                              products: products,
+        decoration: BoxDecoration(
-                              allSpaceModels: allSpaceModels,
+          color: ColorsManager.textFieldGreyColor,
-                              subspaces: subspaces,
+          borderRadius: BorderRadius.circular(15),
-                              pageContext: pageContext,
+          border: Border.all(
-                              allTags: allTags,
+            color: ColorsManager.textFieldGreyColor,
-                              spaceModel: spaceModel,
+            width: 3,
-                              otherSpaceModels: otherSpaceModels,
+          ),
-                              initialTags: TagHelper.generateInitialTags(
+        ),
-                                  subspaces: subspaces, spaceTagModels: spaceModel?.tags ?? []),
+        child: Wrap(
-                              title: 'Edit Device',
+          spacing: 8,
-                              addedProducts: TagHelper.createInitialSelectedProducts(
+          runSpacing: 8,
-                                  spaceModel?.tags ?? [], subspaces),
+          children: [
-                              spaceName: spaceModel?.modelName ?? '',
+            ..._groupedTags.entries.map((entry) => _buildChip(context, entry)),
-                              projectTags: projectTags,
+            _buildEditChip(context),
-                            ));
+          ],
-                  })
+        ),
-                ],
+      );
-              ),
+    }
-            ),
-          )
-        : TextButton(
-            onPressed: () async {
-              Navigator.of(context).pop();
 
-              await showDialog<bool>(
+    return _buildAddDevicesButton(context);
-                barrierDismissible: false,
+  }
-                context: context,
+
-                builder: (context) => AddDeviceTypeModelWidget(
+  Widget _buildEditChip(BuildContext context) {
-                  products: products,
+    return EditChip(
-                  subspaces: subspaces,
+      onTap: () => showDialog<void>(
-                  allTags: allTags,
+        context: context,
-                  spaceName: spaceNameController.text,
+        builder: (context) => AssignTagModelsDialog(
-                  pageContext: pageContext,
+          products: products,
-                  isCreate: true,
+          allSpaceModels: allSpaceModels,
-                  spaceModel: spaceModel,
+          subspaces: subspaces,
-                  otherSpaceModels: otherSpaceModels,
+          pageContext: pageContext,
-                  projectTags: projectTags,
+          allTags: allTags,
-                ),
+          spaceModel: spaceModel,
-              );
+          otherSpaceModels: otherSpaceModels,
-            },
+          initialTags: TagHelper.generateInitialTags(
-            style: TextButton.styleFrom(
+            subspaces: subspaces,
-              padding: EdgeInsets.zero,
+            spaceTagModels: spaceModel?.tags ?? [],
-            ),
+          ),
-            child: const ButtonContentWidget(
+          title: 'Edit Device',
-              icon: Icons.add,
+          addedProducts: TagHelper.createInitialSelectedProducts(
-              label: 'Add Devices',
+            spaceModel?.tags ?? [],
-            ),
+            subspaces,
-          );
+          ),
+          spaceName: spaceModel?.modelName ?? '',
+          projectTags: projectTags,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildChip(
+    BuildContext context,
+    MapEntry<ProductModel, int> entry,
+  ) {
+    return Chip(
+      backgroundColor: ColorsManager.whiteColors,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(16),
+        side: const BorderSide(
+          color: ColorsManager.spaceColor,
+        ),
+      ),
+      avatar: SvgPicture.asset(
+        entry.key.icon ?? Assets.gateway,
+        fit: BoxFit.contain,
+        height: 24,
+        width: 24,
+      ),
+      label: Text(
+        '${entry.value}',
+        style: context.textTheme.bodySmall!.copyWith(
+          color: ColorsManager.spaceColor,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAddDevicesButton(BuildContext context) {
+    return TextButton(
+      onPressed: () => showDialog<void>(
+        context: context,
+        builder: (context) => AddDeviceTypeModelWidget(
+          products: products,
+          subspaces: subspaces,
+          allTags: allTags,
+          spaceName: spaceName,
+          pageContext: pageContext,
+          isCreate: true,
+          spaceModel: spaceModel,
+          otherSpaceModels: otherSpaceModels,
+          projectTags: projectTags,
+        ),
+      ),
+      style: TextButton.styleFrom(
+        padding: EdgeInsets.zero,
+      ),
+      child: const ButtonContentWidget(
+        icon: Icons.add,
+        label: 'Add Devices',
+      ),
+    );
   }
 }

lib/services/devices_mang_api.dart

@@ -321,13 +321,14 @@ class DevicesManagementApi {
   Future<bool> factoryReset(FactoryResetModel factoryReset, String uuid) async {
     try {
       final response = await HTTPService().post(
-        path: ApiEndpoints.factoryReset.replaceAll('{deviceUuid}', uuid),
+        path: ApiEndpoints.factoryReset,
         body: factoryReset.toMap(),
         showServerMessage: true,
         expectedResponseModel: (json) {
           return json['success'] ?? false;
         },
       );
+
       return response;
     } catch (e) {
       debugPrint('Error fetching  $e');