remove print statment

<!--
  Thanks for contributing!

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

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

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

## Description

Implemented non selected space state
Implemented an initial version of the canvas.

## Type of Change

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

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


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

lib/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart

@@ -41,18 +41,14 @@ class DeviceManagementBloc
       _devices.clear();
       var spaceBloc = event.context.read<SpaceTreeBloc>();
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
-
       if (spaceBloc.state.selectedCommunities.isEmpty) {
-        devices =
-            await DevicesManagementApi().fetchDevices('', '', projectUuid);
+        devices = await DevicesManagementApi().fetchDevices(projectUuid);
       } else {
         for (var community in spaceBloc.state.selectedCommunities) {
           List<String> spacesList =
               spaceBloc.state.selectedCommunityAndSpaces[community] ?? [];
-          for (var space in spacesList) {
-            devices.addAll(await DevicesManagementApi()
-                .fetchDevices(community, space, projectUuid));
-          }
+          devices.addAll(await DevicesManagementApi()
+              .fetchDevices(projectUuid, spacesId: spacesList));
         }
       }
 
@@ -270,6 +266,7 @@ class DeviceManagementBloc
         return 'All';
     }
   }
+
   void _onSearchDevices(
       SearchDevices event, Emitter<DeviceManagementState> emit) {
     if ((event.community == null || event.community!.isEmpty) &&

lib/pages/roles_and_permission/users_page/add_user_dialog/view/edit_user_dialog.dart

@@ -1,9 +1,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/auth/model/user_model.dart';
 import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
-import 'package:syncrow_web/pages/roles_and_permission/model/roles_user_model.dart';
 import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_bloc.dart';
 import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_event.dart';
 import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_status.dart';
@@ -14,11 +12,8 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class EditUserDialog extends StatefulWidget {
-  final RolesUserModel? user;
-  const EditUserDialog({
-    super.key,
-    this.user,
-  });
+  final String? userId;
+  const EditUserDialog({super.key, this.userId});
 
   @override
   _EditUserDialogState createState() => _EditUserDialogState();
@@ -33,11 +28,10 @@ class _EditUserDialogState extends State<EditUserDialog> {
         create: (BuildContext context) => UsersBloc()
           // ..add(const LoadCommunityAndSpacesEvent())
           ..add(const RoleEvent())
-          ..add(GetUserByIdEvent(uuid: widget.user!.uuid)),
+          ..add(GetUserByIdEvent(uuid: widget.userId)),
         child: BlocConsumer<UsersBloc, UsersState>(listener: (context, state) {
           if (state is SpacesLoadedState) {
-            BlocProvider.of<UsersBloc>(context)
-                .add(GetUserByIdEvent(uuid: widget.user!.uuid));
+            BlocProvider.of<UsersBloc>(context).add(GetUserByIdEvent(uuid: widget.userId));
           }
         }, builder: (context, state) {
           final _blocRole = BlocProvider.of<UsersBloc>(context);
@@ -45,8 +39,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
           return Dialog(
               child: Container(
             decoration: const BoxDecoration(
-                color: Colors.white,
-                borderRadius: BorderRadius.all(Radius.circular(20))),
+                color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20))),
             width: 900,
             child: Column(
               children: [
@@ -75,8 +68,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
                             children: [
                               _buildStep1Indicator(1, "Basics", _blocRole),
                               _buildStep2Indicator(2, "Spaces", _blocRole),
-                              _buildStep3Indicator(
-                                  3, "Role & Permissions", _blocRole),
+                              _buildStep3Indicator(3, "Role & Permissions", _blocRole),
                             ],
                           ),
                         ),
@@ -94,7 +86,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
                             children: [
                               const SizedBox(height: 10),
                               Expanded(
-                                child: _getFormContent(widget.user!),
+                                child: _getFormContent(widget.userId),
                               ),
                               const SizedBox(height: 20),
                             ],
@@ -124,14 +116,13 @@ class _EditUserDialogState extends State<EditUserDialog> {
                             if (currentStep < 3) {
                               currentStep++;
                               if (currentStep == 2) {
-                                _blocRole
-                                    .add(CheckStepStatus(isEditUser: true));
+                                _blocRole.add(CheckStepStatus(isEditUser: true));
                               } else if (currentStep == 3) {
                                 _blocRole.add(const CheckSpacesStepStatus());
                               }
                             } else {
-                              _blocRole.add(EditInviteUsers(
-                                  context: context, userId: widget.user!.uuid));
+                              _blocRole
+                                  .add(EditInviteUsers(context: context, userId: widget.userId!));
                             }
                           });
                         },
@@ -140,8 +131,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
                           style: TextStyle(
                               color: (_blocRole.isCompleteSpaces == false ||
                                           _blocRole.isCompleteBasics == false ||
-                                          _blocRole.isCompleteRolePermissions ==
-                                              false) &&
+                                          _blocRole.isCompleteRolePermissions == false) &&
                                       currentStep == 3
                                   ? ColorsManager.grayColor
                                   : ColorsManager.secondaryColor),
@@ -156,15 +146,15 @@ class _EditUserDialogState extends State<EditUserDialog> {
         }));
   }
 
-  Widget _getFormContent(RolesUserModel user) {
+  Widget _getFormContent(userid) {
     switch (currentStep) {
       case 1:
         return BasicsView(
-          userId: user.uuid,
+          userId: userid,
         );
       case 2:
         return SpacesAccessView(
-          userId: user.uuid,
+          userId: userid,
         );
       case 3:
         return const RolesAndPermission();
@@ -176,7 +166,6 @@ class _EditUserDialogState extends State<EditUserDialog> {
   int step3 = 0;
 
   Widget _buildStep1Indicator(int step, String label, UsersBloc bloc) {
-    final isCurrentStep = currentStep == step;
     return GestureDetector(
       onTap: () {
         setState(() {
@@ -200,7 +189,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
             child: Row(
               children: [
                 SvgPicture.asset(
-                  isCurrentStep
+                  currentStep == step
                       ? Assets.currentProcessIcon
                       : bloc.isCompleteBasics == false
                           ? Assets.wrongProcessIcon
@@ -215,11 +204,8 @@ class _EditUserDialogState extends State<EditUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: isCurrentStep
-                        ? ColorsManager.blackColor
-                        : ColorsManager.greyColor,
-                    fontWeight:
-                        isCurrentStep ? FontWeight.bold : FontWeight.normal,
+                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
+                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
                   ),
                 ),
               ],
@@ -243,7 +229,6 @@ class _EditUserDialogState extends State<EditUserDialog> {
   }
 
   Widget _buildStep2Indicator(int step, String label, UsersBloc bloc) {
-    final isCurrentStep = currentStep == step;
     return GestureDetector(
       onTap: () {
         setState(() {
@@ -263,7 +248,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
             child: Row(
               children: [
                 SvgPicture.asset(
-                  isCurrentStep
+                  currentStep == step
                       ? Assets.currentProcessIcon
                       : bloc.isCompleteSpaces == false
                           ? Assets.wrongProcessIcon
@@ -278,11 +263,8 @@ class _EditUserDialogState extends State<EditUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: isCurrentStep
-                        ? ColorsManager.blackColor
-                        : ColorsManager.greyColor,
-                    fontWeight:
-                        isCurrentStep ? FontWeight.bold : FontWeight.normal,
+                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
+                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
                   ),
                 ),
               ],
@@ -306,7 +288,6 @@ class _EditUserDialogState extends State<EditUserDialog> {
   }
 
   Widget _buildStep3Indicator(int step, String label, UsersBloc bloc) {
-    final isCurrentStep = currentStep == step;
     return GestureDetector(
       onTap: () {
         setState(() {
@@ -325,7 +306,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
             child: Row(
               children: [
                 SvgPicture.asset(
-                  isCurrentStep
+                  currentStep == step
                       ? Assets.currentProcessIcon
                       : bloc.isCompleteRolePermissions == false
                           ? Assets.wrongProcessIcon
@@ -340,11 +321,8 @@ class _EditUserDialogState extends State<EditUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: isCurrentStep
-                        ? ColorsManager.blackColor
-                        : ColorsManager.greyColor,
-                    fontWeight:
-                        isCurrentStep ? FontWeight.bold : FontWeight.normal,
+                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
+                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
                   ),
                 ),
               ],

lib/pages/roles_and_permission/users_page/users_table/view/users_page.dart

@@ -19,7 +19,6 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
-
 class UsersPage extends StatelessWidget {
   UsersPage({super.key});
 
@@ -452,31 +451,33 @@ class UsersPage extends StatelessWidget {
                           ),
                           Row(
                             children: [
-                              if (user.isEnabled != false)
-                                actionButton(
-                                  isActive: true,
-                                  title: "Edit",
-                                  onTap: () {
-                                    context
-                                        .read<SpaceTreeBloc>()
-                                        .add(ClearCachedData());
-                                    showDialog(
-                                      context: context,
-                                      barrierDismissible: false,
-                                      builder: (BuildContext context) {
-                                        return EditUserDialog(user: user);
+                              user.isEnabled != false
+                                  ? actionButton(
+                                      isActive: true,
+                                      title: "Edit",
+                                      onTap: () {
+                                        context
+                                            .read<SpaceTreeBloc>()
+                                            .add(ClearCachedData());
+                                        showDialog(
+                                          context: context,
+                                          barrierDismissible: false,
+                                          builder: (BuildContext context) {
+                                            return EditUserDialog(
+                                                userId: user.uuid);
+                                          },
+                                        ).then((v) {
+                                          if (v != null) {
+                                            if (v != null) {
+                                              _blocRole.add(const GetUsers());
+                                            }
+                                          }
+                                        });
                                       },
-                                    ).then((v) {
-                                      if (v != null) {
-                                        _blocRole.add(const GetUsers());
-                                      }
-                                    });
-                                  },
-                                )
-                              else
-                                actionButton(
-                                  title: "Edit",
-                                ),
+                                    )
+                                  : actionButton(
+                                      title: "Edit",
+                                    ),
                               actionButton(
                                 title: "Delete",
                                 onTap: () {

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

@@ -170,45 +170,45 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-Future<void> _onLoadScenes(
-    LoadScenes event, Emitter<RoutineState> emit) async {
-  emit(state.copyWith(isLoading: true, errorMessage: null));
-  List<ScenesModel> scenes = [];
-  try {
-    BuildContext context = NavigationService.navigatorKey.currentContext!;
-    var createRoutineBloc = context.read<CreateRoutineBloc>();
-    final projectUuid = await ProjectManager.getProjectUUID() ?? '';
-    if (createRoutineBloc.selectedSpaceId == '' &&
-        createRoutineBloc.selectedCommunityId == '') {
-      var spaceBloc = context.read<SpaceTreeBloc>();
-      for (var communityId in spaceBloc.state.selectedCommunities) {
-        List<String> spacesList =
-            spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
-        for (var spaceId in spacesList) {
-          scenes.addAll(
-              await SceneApi.getScenes(spaceId, communityId, projectUuid));
+  Future<void> _onLoadScenes(
+      LoadScenes event, Emitter<RoutineState> emit) async {
+    emit(state.copyWith(isLoading: true, errorMessage: null));
+    List<ScenesModel> scenes = [];
+    try {
+      BuildContext context = NavigationService.navigatorKey.currentContext!;
+      var createRoutineBloc = context.read<CreateRoutineBloc>();
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      if (createRoutineBloc.selectedSpaceId == '' &&
+          createRoutineBloc.selectedCommunityId == '') {
+        var spaceBloc = context.read<SpaceTreeBloc>();
+        for (var communityId in spaceBloc.state.selectedCommunities) {
+          List<String> spacesList =
+              spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+          for (var spaceId in spacesList) {
+            scenes.addAll(
+                await SceneApi.getScenes(spaceId, communityId, projectUuid));
+          }
         }
+      } else {
+        scenes.addAll(await SceneApi.getScenes(
+            createRoutineBloc.selectedSpaceId,
+            createRoutineBloc.selectedCommunityId,
+            projectUuid));
       }
-    } else {
-      scenes.addAll(await SceneApi.getScenes(
-          createRoutineBloc.selectedSpaceId,
-          createRoutineBloc.selectedCommunityId,
-          projectUuid));
-    }
 
-    emit(state.copyWith(
-      scenes: scenes,
-      isLoading: false,
-    ));
-  } catch (e) {
-    emit(state.copyWith(
+      emit(state.copyWith(
+        scenes: scenes,
         isLoading: false,
-        loadScenesErrorMessage: 'Failed to load scenes',
-        errorMessage: '',
-        loadAutomationErrorMessage: '',
-        scenes: scenes));
+      ));
+    } catch (e) {
+      emit(state.copyWith(
+          isLoading: false,
+          loadScenesErrorMessage: 'Failed to load scenes',
+          errorMessage: '',
+          loadAutomationErrorMessage: '',
+          scenes: scenes));
+    }
   }
-} 
 
   Future<void> _onLoadAutomation(
       LoadAutomation event, Emitter<RoutineState> emit) async {
@@ -936,16 +936,12 @@ Future<void> _onLoadScenes(
         for (var communityId in spaceBloc.state.selectedCommunities) {
           List<String> spacesList =
               spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
-          for (var spaceId in spacesList) {
-            devices.addAll(await DevicesManagementApi()
-                .fetchDevices(communityId, spaceId, projectUuid));
-          }
+          devices.addAll(await DevicesManagementApi()
+              .fetchDevices(projectUuid, spacesId: spacesList));
         }
       } else {
-        devices.addAll(await DevicesManagementApi().fetchDevices(
-            createRoutineBloc.selectedCommunityId,
-            createRoutineBloc.selectedSpaceId,
-            projectUuid));
+        devices.addAll(await DevicesManagementApi().fetchDevices(projectUuid,
+            spacesId: [createRoutineBloc.selectedSpaceId]));
       }
 
       emit(state.copyWith(isLoading: false, devices: devices));

lib/pages/space_management_v2/main_module/models/space_connection_model.dart

@@ -0,0 +1,6 @@
+class SpaceConnectionModel {
+  final String from;
+  final String to;
+
+  const SpaceConnectionModel({required this.from, required this.to});
+}

lib/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_connection_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SpacesConnectionsArrowPainter extends CustomPainter {
+  final List<SpaceConnectionModel> connections;
+  final Map<String, Offset> positions;
+  final double cardWidth = 150.0;
+  final double cardHeight = 90.0;
+  final String? selectedSpaceUuid;
+
+  SpacesConnectionsArrowPainter({
+    required this.connections,
+    required this.positions,
+    this.selectedSpaceUuid,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    for (final connection in connections) {
+      final isSelected = connection.to == selectedSpaceUuid;
+      final paint = Paint()
+        ..color = isSelected
+            ? ColorsManager.primaryColor
+            : ColorsManager.blackColor.withValues(alpha: 0.5)
+        ..strokeWidth = 2.0
+        ..style = PaintingStyle.stroke;
+
+      final from = positions[connection.from];
+      final to = positions[connection.to];
+
+      if (from != null && to != null) {
+        final startPoint =
+            Offset(from.dx + cardWidth / 2, from.dy + cardHeight - 10);
+        final endPoint = Offset(to.dx + cardWidth / 2, to.dy);
+
+        final path = Path()..moveTo(startPoint.dx, startPoint.dy);
+
+        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 60);
+        final controlPoint2 = Offset(endPoint.dx, endPoint.dy - 60);
+
+        path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
+            controlPoint2.dy, endPoint.dx, endPoint.dy);
+
+        canvas.drawPath(path, paint);
+
+        final circlePaint = Paint()
+          ..color = isSelected
+              ? ColorsManager.primaryColor
+              : ColorsManager.blackColor.withValues(alpha: 0.5)
+          ..style = PaintingStyle.fill
+          ..blendMode = BlendMode.srcIn;
+        canvas.drawCircle(endPoint, 4, circlePaint);
+      }
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
+}

lib/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart';
+
+abstract final class SpaceManagementCommunityDialogHelper {
+  static void showCreateDialog(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      builder: (_) => CreateCommunityDialog(
+        title: const SelectableText('Community Name'),
+        onCreateCommunity: (community) {
+          context.read<CommunitiesBloc>().add(
+                InsertCommunity(community),
+              );
+          context.read<CommunitiesTreeSelectionBloc>().add(
+                SelectCommunityEvent(community: community),
+              );
+        },
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/community_structure_canvas.dart

@@ -0,0 +1,236 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_connection_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_card_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_cell.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+
+class CommunityStructureCanvas extends StatefulWidget {
+  const CommunityStructureCanvas({
+    required this.community,
+    super.key,
+  });
+
+  final CommunityModel community;
+
+  @override
+  State<CommunityStructureCanvas> createState() =>_CommunityStructureCanvasState();  
+}
+
+class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
+    with SingleTickerProviderStateMixin {
+  final Map<String, Offset> _positions = {};
+  final double _cardWidth = 150.0;
+  final double _cardHeight = 90.0;
+  final double _horizontalSpacing = 150.0;
+  final double _verticalSpacing = 120.0;
+  String? _selectedSpaceUuid;
+
+  late TransformationController _transformationController;
+  late AnimationController _animationController;
+
+  @override
+  void initState() {
+    super.initState();
+    _transformationController = TransformationController();
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 100),
+    );
+  }
+
+  @override
+  void dispose() {
+    _transformationController.dispose();
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  void _runAnimation(Matrix4 target) {
+    final animation = Matrix4Tween(
+      begin: _transformationController.value,
+      end: target,
+    ).animate(_animationController);
+
+    void listener() {
+      _transformationController.value = animation.value;
+    }
+
+    animation.addListener(listener);
+    _animationController.forward(from: 0).whenCompleteOrCancel(() {
+      animation.removeListener(listener);
+    });
+  }
+
+  void _onSpaceTapped(String spaceUuid) {
+    setState(() {
+      _selectedSpaceUuid = spaceUuid;
+    });
+
+    final position = _positions[spaceUuid];
+    if (position == null) return;
+
+    const scale = 2.0;
+    final viewSize = context.size;
+    if (viewSize == null) return;
+
+    final x = -position.dx * scale + (viewSize.width / 2) - (_cardWidth * scale / 2);
+    final y =
+        -position.dy * scale + (viewSize.height / 2) - (_cardHeight * scale / 2);
+
+    final matrix = Matrix4.identity()
+      ..translate(x, y)
+      ..scale(scale);
+
+    _runAnimation(matrix);
+  }
+
+  void _resetSelectionAndZoom() {
+    setState(() {
+      _selectedSpaceUuid = null;
+    });
+    _runAnimation(Matrix4.identity());
+  }
+
+  void _calculateLayout(
+    List<SpaceModel> spaces,
+    int depth,
+    Map<int, double> levelXOffset,
+  ) {
+    for (final space in spaces) {
+      double childSubtreeWidth = 0;
+      if (space.children.isNotEmpty) {
+        _calculateLayout(space.children, depth + 1, levelXOffset);
+        final firstChildPos = _positions[space.children.first.uuid];
+        final lastChildPos = _positions[space.children.last.uuid];
+        if (firstChildPos != null && lastChildPos != null) {
+          childSubtreeWidth = (lastChildPos.dx + _cardWidth) - firstChildPos.dx;
+        }
+      }
+
+      final currentX = levelXOffset.putIfAbsent(depth, () => 0.0);
+      double? x;
+
+      if (space.children.isNotEmpty) {
+        final firstChildPos = _positions[space.children.first.uuid]!;
+        x = firstChildPos.dx + (childSubtreeWidth - _cardWidth) / 2;
+      } else {
+        x = currentX;
+      }
+
+      if (x < currentX) {
+        final shiftX = currentX - x;
+        _shiftSubtree(space, shiftX);
+        final keysToShift = levelXOffset.keys.where((d) => d > depth).toList();
+        for (final key in keysToShift) {
+          levelXOffset[key] = levelXOffset[key]! + shiftX;
+        }
+        x += shiftX;
+      }
+
+      final y = depth * (_verticalSpacing + _cardHeight);
+      _positions[space.uuid] = Offset(x, y);
+      levelXOffset[depth] = x + _cardWidth + _horizontalSpacing;
+    }
+  }
+
+  void _shiftSubtree(SpaceModel space, double shiftX) {
+    if (_positions.containsKey(space.uuid)) {
+      _positions[space.uuid] = _positions[space.uuid]!.translate(shiftX, 0);
+    }
+    for (final child in space.children) {
+      _shiftSubtree(child, shiftX);
+    }
+  }
+
+  List<Widget> _buildTreeWidgets() {
+    _positions.clear();
+    final community = widget.community;
+
+    _calculateLayout(community.spaces, 0, {});
+
+    final widgets = <Widget>[];
+    final connections = <SpaceConnectionModel>[];
+    _generateWidgets(community.spaces, widgets, connections);
+
+    return [
+      CustomPaint(
+        painter: SpacesConnectionsArrowPainter(
+          connections: connections,
+          positions: _positions,
+          selectedSpaceUuid: _selectedSpaceUuid,
+        ),
+        child: Stack(alignment: AlignmentDirectional.center, children: widgets),
+      ),
+    ];
+  }
+
+  void _generateWidgets(
+    List<SpaceModel> spaces,
+    List<Widget> widgets,
+    List<SpaceConnectionModel> connections,
+  ) {
+    for (final space in spaces) {
+      final position = _positions[space.uuid];
+      if (position == null) continue;
+
+      widgets.add(
+        Positioned(
+          left: position.dx,
+          top: position.dy,
+          width: _cardWidth,
+          height: _cardHeight,
+          child: SpaceCardWidget(
+            index: spaces.indexOf(space),
+            onPositionChanged: (newPosition) {},
+            buildSpaceContainer: (index) {
+              return Opacity(
+                opacity: 1.0,
+                child: SpaceCell(
+                  index: index,
+                  onTap: () => _onSpaceTapped(space.uuid),
+                  icon: space.icon,
+                  name: space.spaceName,
+                ),
+              );
+            },
+            screenSize: MediaQuery.sizeOf(context),
+            position: position,
+            isHovered: false,
+            onHoverChanged: (int index, bool isHovered) {},
+            onButtonTap: (int index, Offset newPosition) {},
+          ),
+        ),
+      );
+
+      for (final child in space.children) {
+        connections.add(SpaceConnectionModel(from: space.uuid, to: child.uuid));
+      }
+      _generateWidgets(space.children, widgets, connections);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final treeWidgets = _buildTreeWidgets();
+    return InteractiveViewer(
+      transformationController: _transformationController,
+      boundaryMargin: EdgeInsets.symmetric(
+        horizontal: MediaQuery.sizeOf(context).width * 0.3,
+        vertical: MediaQuery.sizeOf(context).height * 0.2,
+      ),
+      minScale: 0.5,
+      maxScale: 3.0,
+      constrained: false,
+      child: GestureDetector(
+        onTap: _resetSelectionAndZoom,
+        child: SizedBox(
+          width: MediaQuery.sizeOf(context).width * 2,
+          height: MediaQuery.sizeOf(context).height * 2,
+          child: Stack(children: treeWidgets),
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/community_template_cell.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class CommunityTemplateCell extends StatelessWidget {
+  const CommunityTemplateCell({
+    super.key,
+    required this.onTap,
+    required this.title,
+  });
+
+  final void Function() onTap;
+  final Widget title;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Column(
+        spacing: 8,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Expanded(
+            child: AspectRatio(
+              aspectRatio: 2.0,
+              child: Container(
+                decoration: ShapeDecoration(
+                  shape: RoundedRectangleBorder(
+                    side: const BorderSide(
+                      width: 4,
+                      strokeAlign: BorderSide.strokeAlignOutside,
+                      color: ColorsManager.borderColor,
+                    ),
+                    borderRadius: BorderRadius.circular(5),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          DefaultTextStyle(
+            style: context.textTheme.bodyLarge!.copyWith(
+              color: ColorsManager.blackColor,
+            ),
+            child: title,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/create_space_button.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CreateSpaceButton extends StatelessWidget {
+  const CreateSpaceButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {},
+      child: Container(
+        height: 60,
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(20),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withValues(alpha: 0.5),
+              spreadRadius: 5,
+              blurRadius: 7,
+              offset: const Offset(0, 3),
+            ),
+          ],
+        ),
+        child: Center(
+          child: Container(
+            width: 40,
+            height: 40,
+            decoration: const BoxDecoration(
+              color: ColorsManager.boxColor,
+              shape: BoxShape.circle,
+            ),
+            child: const Icon(
+              Icons.add,
+              color: Colors.blue,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/plus_button_widget.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class PlusButtonWidget extends StatelessWidget {
+  final int index;
+  final String direction;
+  final Offset offset;
+  final void Function(int index, Offset newPosition) onButtonTap;
+
+  const PlusButtonWidget({
+    super.key,
+    required this.index,
+    required this.direction,
+    required this.offset,
+    required this.onButtonTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        if (direction == 'down') {
+          onButtonTap(index, const Offset(0, 150));
+        } else {
+          onButtonTap(index, const Offset(150, 0));
+        }
+      },
+      child: Container(
+        width: 30,
+        height: 30,
+        decoration: const BoxDecoration(
+          color: ColorsManager.spaceColor,
+          shape: BoxShape.circle,
+        ),
+        child: const Icon(
+          Icons.add,
+          color: ColorsManager.whiteColors,
+          size: 20,
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_card_widget.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/plus_button_widget.dart';
+
+class SpaceCardWidget extends StatelessWidget {
+  final int index;
+  final Size screenSize;
+  final Offset position;
+  final bool isHovered;
+  final void Function(int index, bool isHovered) onHoverChanged;
+  final void Function(int index, Offset newPosition) onButtonTap;
+  final Widget Function(int index) buildSpaceContainer;
+  final ValueChanged<Offset> onPositionChanged;
+
+  const SpaceCardWidget({
+    super.key,
+    required this.index,
+    required this.onPositionChanged,
+    required this.screenSize,
+    required this.position,
+    required this.isHovered,
+    required this.onHoverChanged,
+    required this.onButtonTap,
+    required this.buildSpaceContainer,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: (_) => onHoverChanged(index, true),
+      onExit: (_) => onHoverChanged(index, false),
+      child: SizedBox(
+        width: 150,
+        height: 90,
+        child: Stack(
+          clipBehavior: Clip.none,
+          alignment: Alignment.center,
+          children: [
+            buildSpaceContainer(index),
+
+            if (isHovered)
+              Positioned(
+                bottom: 0,
+                child: PlusButtonWidget(
+                  index: index,
+                  direction: 'down',
+                  offset: Offset.zero,
+                  onButtonTap: onButtonTap,
+                ),
+              ),
+            if (isHovered)
+              Positioned(
+                right: -15,
+                child: PlusButtonWidget(
+                  index: index,
+                  direction: 'right',
+                  offset: Offset.zero,
+                  onButtonTap: onButtonTap,
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_cell.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SpaceCell extends StatelessWidget {
+  final int index;
+  final String icon;
+  final String name;
+  final VoidCallback? onDoubleTap;
+  final VoidCallback? onTap;
+
+  const SpaceCell({
+    super.key,
+    required this.index,
+    required this.icon,
+    required this.name,
+    this.onTap,
+    this.onDoubleTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return GestureDetector(
+      onDoubleTap: onDoubleTap,
+      onTap: onTap,
+      child: Container(
+        width: 150,
+        height: 70,
+        decoration: _containerDecoration(),
+        child: Row(
+          children: [
+            _buildIconContainer(),
+            const SizedBox(width: 10),
+            Expanded(
+              child: Text(
+                name,
+                style: theme.textTheme.bodyLarge?.copyWith(
+                  fontWeight: FontWeight.bold,
+                  color: ColorsManager.blackColor,
+                ),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildIconContainer() {
+    return Container(
+      width: 40,
+      height: double.infinity,
+      decoration: const BoxDecoration(
+        color: ColorsManager.spaceColor,
+        borderRadius: BorderRadius.only(
+          topLeft: Radius.circular(15),
+          bottomLeft: Radius.circular(15),
+        ),
+      ),
+      child: Center(
+        child: SvgPicture.asset(
+          icon,
+          color: ColorsManager.whiteColors,
+          width: 24,
+          height: 24,
+        ),
+      ),
+    );
+  }
+
+  BoxDecoration _containerDecoration() {
+    return BoxDecoration(
+      color: ColorsManager.whiteColors,
+      borderRadius: BorderRadius.circular(15),
+      boxShadow: [
+        BoxShadow(
+          color: ColorsManager.lightGrayColor.withValues(alpha: 0.5),
+          spreadRadius: 2,
+          blurRadius: 5,
+          offset: const Offset(0, 3),
+        ),
+      ],
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_management_body.dart

@@ -1,4 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_management_community_structure.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_management_templates_view.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree.dart';
 
 class SpaceManagementBody extends StatelessWidget {
@@ -6,9 +10,21 @@ class SpaceManagementBody extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Row(
+    return Row(
       children: [
-        SpaceManagementCommunitiesTree(),
+        const SpaceManagementCommunitiesTree(),
+        Expanded(
+          child: BlocBuilder<CommunitiesTreeSelectionBloc,
+              CommunitiesTreeSelectionState>(
+            buildWhen: (previous, current) =>
+                previous.selectedCommunity != current.selectedCommunity,
+            builder: (context, state) => Visibility(
+              visible: state.selectedCommunity == null,
+              replacement: const SpaceManagementCommunityStructure(),
+              child: const SpaceManagementTemplatesView(),
+            ),
+          ),
+        ),
       ],
     );
   }

lib/pages/space_management_v2/main_module/widgets/space_management_community_structure.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_canvas.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/create_space_button.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+
+class SpaceManagementCommunityStructure extends StatelessWidget {
+  const SpaceManagementCommunityStructure({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedCommunity =
+        context.watch<CommunitiesTreeSelectionBloc>().state.selectedCommunity!;
+    const spacer = Spacer(flex: 10);
+    return Visibility(
+      visible: selectedCommunity.spaces.isNotEmpty,
+      replacement: const Row(
+          children: [spacer, Expanded(child: CreateSpaceButton()), spacer]),
+      child: CommunityStructureCanvas(community: selectedCommunity),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_management_templates_view.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_template_cell.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SpaceManagementTemplatesView extends StatelessWidget {
+  const SpaceManagementTemplatesView({super.key});
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: ColoredBox(
+        color: ColorsManager.whiteColors,
+        child: GridView.builder(
+          padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
+          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+            maxCrossAxisExtent: 400,
+            mainAxisSpacing: 10,
+            crossAxisSpacing: 10,
+            childAspectRatio: 2.0,
+          ),
+          itemCount: _gridItems(context).length,
+          itemBuilder: (context, index) {
+            final model = _gridItems(context)[index];
+            return CommunityTemplateCell(
+              onTap: model.onTap,
+              title: model.title,
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  List<_CommunityTemplateModel> _gridItems(BuildContext context) {
+    return [
+      _CommunityTemplateModel(
+        title: const Text('Blank'),
+        onTap: () => SpaceManagementCommunityDialogHelper.showCreateDialog(context),
+      ),
+    ];
+  }
+}
+
+class _CommunityTemplateModel {
+  final Widget title;
+  final void Function() onTap;
+
+  _CommunityTemplateModel({
+    required this.title,
+    required this.onTap,
+  });
+}

lib/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart

@@ -32,7 +32,7 @@ class CommunitiesTreeSelectionBloc
   ) {
     emit(
       CommunitiesTreeSelectionState(
-        selectedCommunity: null,
+        selectedCommunity: event.community,
         selectedSpace: event.space,
       ),
     );

lib/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_event.dart

@@ -8,7 +8,7 @@ sealed class CommunitiesTreeSelectionEvent extends Equatable {
 }
 
 final class SelectCommunityEvent extends CommunitiesTreeSelectionEvent {
-  final CommunityModel? community;
+  final CommunityModel community;
 
   const SelectCommunityEvent({required this.community});
   @override
@@ -16,9 +16,10 @@ final class SelectCommunityEvent extends CommunitiesTreeSelectionEvent {
 }
 
 final class SelectSpaceEvent extends CommunitiesTreeSelectionEvent {
-  final SpaceModel? space;
+  final SpaceModel space;
+  final CommunityModel community;
 
-  const SelectSpaceEvent({required this.space});
+  const SelectSpaceEvent({required this.space, required this.community});
 
   @override
   List<Object?> get props => [space];

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree_space_tile.dart

@@ -30,7 +30,7 @@ class SpaceManagementCommunitiesTreeSpaceTile extends StatelessWidget {
         initiallyExpanded: spaceIsExpanded,
         onExpansionChanged: (expanded) {},
         onItemSelected: () => context.read<CommunitiesTreeSelectionBloc>().add(
-              SelectSpaceEvent(space: space),
+              SelectSpaceEvent(community: community, space: space),
             ),
         children: space.children
             .map(

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_header.dart

@@ -1,9 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_add_community_button.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -41,7 +40,7 @@ class SpaceManagementSidebarHeader extends StatelessWidget {
     if (isSelected) {
       _clearSelection(context);
     } else {
-      _showCreateCommunityDialog(context);
+      SpaceManagementCommunityDialogHelper.showCreateDialog(context);
     }
   }
 
@@ -50,19 +49,4 @@ class SpaceManagementSidebarHeader extends StatelessWidget {
           const ClearCommunitiesTreeSelectionEvent(),
         );
   }
-
-  void _showCreateCommunityDialog(BuildContext context) => showDialog<void>(
-        context: context,
-        builder: (_) => CreateCommunityDialog(
-          title: const Text('Community Name'),
-          onCreateCommunity: (community) {
-            context.read<CommunitiesBloc>().add(
-                  InsertCommunity(community),
-                );
-            context.read<CommunitiesTreeSelectionBloc>().add(
-                  SelectCommunityEvent(community: community),
-                );
-          },
-        ),
-      );
 }

lib/pages/space_management_v2/modules/create_community/data/services/remote_create_community_service.dart

@@ -53,7 +53,7 @@ class RemoteCreateCommunityService implements CreateCommunityService {
       return _defaultErrorMessage;
     }
     final error = body['error'] as Map<String, dynamic>?;
-    final errorMessage = error?['error'] as String? ?? '';
+    final errorMessage = error?['message'] as String? ?? '';
     return errorMessage;
   }
 

lib/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart

@@ -41,11 +41,8 @@ class CreateCommunityDialog extends StatelessWidget {
               );
               onCreateCommunity.call(community);
               break;
-            case CreateCommunityFailure(:final message):
+            case CreateCommunityFailure():
               Navigator.of(context).pop();
-              ScaffoldMessenger.of(context).showSnackBar(
-                SnackBar(content: Text(message)),
-              );
               break;
             default:
               break;

lib/services/devices_mang_api.dart

@@ -13,15 +13,13 @@ import 'package:syncrow_web/utils/constants/api_const.dart';
 
 class DevicesManagementApi {
   Future<List<AllDevicesModel>> fetchDevices(
-      String communityId, String spaceId, String projectId) async {
+    String projectId, {
+    List<String>? spacesId,
+  }) async {
     try {
       final response = await HTTPService().get(
-        path: communityId.isNotEmpty && spaceId.isNotEmpty
-            ? ApiEndpoints.getSpaceDevices
-                .replaceAll('{spaceUuid}', spaceId)
-                .replaceAll('{communityUuid}', communityId)
-                .replaceAll('{projectId}', projectId)
-            : ApiEndpoints.getAllDevices.replaceAll('{projectId}', projectId),
+        queryParameters: {if (spacesId != null) 'spaces': spacesId},
+        path: ApiEndpoints.getAllDevices.replaceAll('{projectId}', projectId),
         showServerMessage: true,
         expectedResponseModel: (json) {
           List<dynamic> jsonData = json['data'];
@@ -416,5 +414,4 @@ class DevicesManagementApi {
     );
     return response;
   }
-
 }

lib/utils/constants/api_const.dart

@@ -18,7 +18,7 @@ abstract class ApiEndpoints {
 
   static const String getAllDevices = '/projects/{projectId}/devices';
   static const String getSpaceDevices =
-      '/projects/{projectId}/communities/{communityUuid}/spaces/{spaceUuid}/devices';
+      '/projects/{projectId}/devices';
   static const String getDeviceStatus = '/devices/{uuid}/functions/status';
   static const String getBatchStatus = '/devices/batch';