reverted to old import to avoid confusion with QA team.

Implemented space management canvas.
Switched from using Text to SelectableText in CreateCommunityDialog.
2025-07-14 17:25:50 +00:00 · 2025-06-23 16:22:11 +03:00 · 2025-06-23 15:45:49 +03:00 · 2025-06-23 10:13:30 +03:00 · 2025-06-23 10:11:23 +03:00 · 2025-06-23 10:11:03 +03:00
29 changed files with 811 additions and 215 deletions
--- a/lib/pages/analytics/models/range_of_aqi.dart
+++ b/lib/pages/analytics/models/range_of_aqi.dart
@ -38,9 +38,9 @@ class RangeOfAqiValue extends Equatable {
  factory RangeOfAqiValue.fromJson(Map<String, dynamic> json) {
    return RangeOfAqiValue(
      type: json['type'] as String,
-      min: (json['min'] as num? ?? 0).toDouble(),
-      average: (json['average'] as num? ?? 0).toDouble(),
-      max: (json['max'] as num? ?? 0).toDouble(),
+      min: (json['min'] as num).toDouble(),
+      average: (json['average'] as num).toDouble(),
+      max: (json['max'] as num).toDouble(),
    );
  }

--- a/lib/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.dart
+++ b/lib/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.dart
@ -24,13 +24,11 @@ abstract final class FetchAirQualityDataHelper {
  }) {
    final date = context.read<AnalyticsDatePickerBloc>().state.monthlyDate;
    final aqiType = context.read<AirQualityDistributionBloc>().state.selectedAqiType;
-    if (shouldFetchAnalyticsDevices) {
    loadAnalyticsDevices(
      context,
      communityUuid: communityUuid,
      spaceUuid: spaceUuid,
    );
-    }
    loadRangeOfAqi(
      context,
      spaceUuid: spaceUuid,
--- a/lib/pages/analytics/modules/air_quality/helpers/range_of_aqi_charts_helper.dart
+++ b/lib/pages/analytics/modules/air_quality/helpers/range_of_aqi_charts_helper.dart
@ -23,7 +23,6 @@ abstract final class RangeOfAqiChartsHelper {
    return titlesData.copyWith(
      bottomTitles: titlesData.bottomTitles.copyWith(
        sideTitles: titlesData.bottomTitles.sideTitles.copyWith(
-          reservedSize: 36,
          getTitlesWidget: (value, meta) => Padding(
            padding: const EdgeInsetsDirectional.only(top: 20.0),
            child: Text(
@ -41,7 +40,6 @@ abstract final class RangeOfAqiChartsHelper {
          reservedSize: 70,
          interval: 50,
          maxIncluded: false,
-          minIncluded: true,
          getTitlesWidget: (value, meta) {
            final text = value >= 300 ? '301+' : value.toInt().toString();
            return Padding(
--- a/lib/pages/analytics/modules/air_quality/views/air_quality_view.dart
+++ b/lib/pages/analytics/modules/air_quality/views/air_quality_view.dart
@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/air_quality_end_side_widget.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_box.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_legend.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart';

 class AirQualityView extends StatelessWidget {
@ -21,10 +20,6 @@ class AirQualityView extends StatelessWidget {
            child: Column(
              spacing: 32,
              children: [
-                SizedBox(
-                  height: height * 0.1,
-                  child: const AqiLegend(),
-                ),
                SizedBox(
                  height: height * 1.2,
                  child: const AirQualityEndSideWidget(),
@ -45,7 +40,7 @@ class AirQualityView extends StatelessWidget {
        return SingleChildScrollView(
          child: Container(
            padding: _padding,
-            height: height * 1.2,
+            height: height * 1.1,
            child: const Column(
              children: [
                Expanded(
@ -57,9 +52,8 @@ class AirQualityView extends StatelessWidget {
                        child: Column(
                          spacing: 20,
                          children: [
-                            Expanded(flex: 2, child: AqiLegend()),
-                            Expanded(flex: 12, child: RangeOfAqiChartBox()),
-                            Expanded(flex: 12, child: AqiDistributionChartBox()),
+                            Expanded(child: RangeOfAqiChartBox()),
+                            Expanded(child: AqiDistributionChartBox()),
                          ],
                        ),
                      ),
--- a/lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart
+++ b/lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart
@ -32,13 +32,8 @@ class AqiDistributionChart extends StatelessWidget {
  }

  List<BarChartGroupData> _buildBarGroups() {
-    final groups = <BarChartGroupData>[];
-    for (var i = 0; i < chartData.length; i++) {
-      final data = chartData[i];
-      final isAllZero = data.data.every((d) => d.percentage == 0);
-      if (isAllZero) {
-        continue;
-      }
+    return List.generate(chartData.length, (index) {
+      final data = chartData[index];
      final stackItems = <BarChartRodData>[];
      double currentY = 0;
      var isFirstElement = true;
@ -61,15 +56,13 @@ class AqiDistributionChart extends StatelessWidget {
        currentY += percentageData.percentage + _rodStackItemsSpacing;
        isFirstElement = false;
      }
-      groups.add(
-        BarChartGroupData(
-          x: i,
+
+      return BarChartGroupData(
+        x: index,
        barRods: stackItems,
        groupVertically: true,
-        ),
      );
-    }
-    return groups;
+    });
  }

  BarTouchData _barTouchData(BuildContext context) {
@ -80,7 +73,6 @@ class AqiDistributionChart extends StatelessWidget {
          color: ColorsManager.semiTransparentBlack,
        ),
        tooltipRoundedRadius: 16,
-        maxContentWidth: 500,
        tooltipPadding: const EdgeInsets.all(8),
        getTooltipItem: (group, groupIndex, rod, rodIndex) {
          final data = chartData[group.x];
@ -89,13 +81,10 @@ class AqiDistributionChart extends StatelessWidget {

          final textStyle = context.textTheme.bodySmall?.copyWith(
            color: ColorsManager.blackColor,
-            fontSize: 11,
+            fontSize: 8,
          );

          for (final percentageData in data.data) {
-            if (percentageData.percentage == 0) {
-              continue;
-            }
            final percentage = percentageData.percentage.toStringAsFixed(1);
            final type = percentageData.type[0].toUpperCase() +
                percentageData.type.substring(1).replaceAll('_', ' ');
@ -109,7 +98,7 @@ class AqiDistributionChart extends StatelessWidget {
            DateFormat('dd/MM/yyyy').format(data.date),
            context.textTheme.bodyMedium!.copyWith(
              color: ColorsManager.blackColor,
-              fontSize: 12,
+              fontSize: 9,
              fontWeight: FontWeight.w600,
            ),
            textAlign: TextAlign.start,
@ -129,6 +118,7 @@ class AqiDistributionChart extends StatelessWidget {
    final leftTitles = titlesData.leftTitles.copyWith(
      sideTitles: titlesData.leftTitles.sideTitles.copyWith(
        reservedSize: 70,
+        interval: 20,
        maxIncluded: false,
        minIncluded: true,
        getTitlesWidget: (value, meta) => Padding(
@ -150,7 +140,7 @@ class AqiDistributionChart extends StatelessWidget {

    final bottomTitles = AxisTitles(
      sideTitles: SideTitles(
-        showTitles: chartData.isNotEmpty,
+        showTitles: true,
        getTitlesWidget: (value, _) => FittedBox(
          alignment: AlignmentDirectional.bottomCenter,
          fit: BoxFit.scaleDown,
@ -158,7 +148,7 @@ class AqiDistributionChart extends StatelessWidget {
            chartData[value.toInt()].date.day.toString(),
            style: context.textTheme.bodySmall?.copyWith(
              color: ColorsManager.lightGreyColor,
-              fontSize: 12,
+              fontSize: 8,
            ),
          ),
        ),
--- a/lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_title.dart
+++ b/lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_title.dart
@ -19,7 +19,7 @@ class AqiDistributionChartTitle extends StatelessWidget {
      children: [
        ChartsLoadingWidget(isLoading: isLoading),
        const Expanded(
-          flex: 4,
+          flex: 3,
          child: FittedBox(
            fit: BoxFit.scaleDown,
            alignment: AlignmentDirectional.centerStart,
@ -28,9 +28,7 @@ class AqiDistributionChartTitle extends StatelessWidget {
            ),
          ),
        ),
-        Expanded(
-          flex: 2,
-          child: FittedBox(
+        FittedBox(
          alignment: AlignmentDirectional.centerEnd,
          fit: BoxFit.scaleDown,
          child: AqiTypeDropdown(
@ -49,7 +47,6 @@ class AqiDistributionChartTitle extends StatelessWidget {
            },
          ),
        ),
-        ),
      ],
    );
  }
--- a/lib/pages/analytics/modules/air_quality/widgets/aqi_legend.dart
+++ b/lib/pages/analytics/modules/air_quality/widgets/aqi_legend.dart
@ -1,38 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/range_of_aqi_charts_helper.dart';
-import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
-import 'package:syncrow_web/utils/style.dart';
-
-class AqiLegend extends StatelessWidget {
-  const AqiLegend({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsetsDirectional.all(20),
-      decoration: subSectionContainerDecoration.copyWith(
-        borderRadius: BorderRadius.circular(20),
-      ),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        spacing: 16,
-        children: RangeOfAqiChartsHelper.gradientData.map((e) {
-          return Flexible(
-            flex: 4,
-            child: FittedBox(
-              fit: BoxFit.fill,
-              child: ChartInformativeCell(
-                color: e.$1,
-                title: FittedBox(
-                  fit: BoxFit.fill,
-                  child: Text(e.$2),
-                ),
-                height: null,
-              ),
-            ),
-          );
-        }).toList(),
-      ),
-    );
-  }
-}
--- a/lib/pages/analytics/modules/air_quality/widgets/aqi_location_info_cell.dart
+++ b/lib/pages/analytics/modules/air_quality/widgets/aqi_location_info_cell.dart
@ -47,29 +47,19 @@ class AqiLocationInfoCell extends StatelessWidget {
              ),
            ),
            Align(
-              alignment: AlignmentDirectional.bottomCenter,
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.end,
-                children: [
-                  Expanded(
-                    child: SvgPicture.asset(
-                      svgPath,
-                      fit: BoxFit.scaleDown,
-                      alignment: AlignmentDirectional.bottomStart,
-                    ),
-                  ),
-                  Expanded(
-                    child: FittedBox(
-                      fit: BoxFit.scaleDown,
              alignment: AlignmentDirectional.bottomEnd,
              child: Padding(
                padding: const EdgeInsetsDirectional.all(10),
+                child: SizedBox(
+                  height: 40,
+                  width: 120,
+                  child: FittedBox(
+                    fit: BoxFit.scaleDown,
+                    alignment: AlignmentDirectional.bottomEnd,
                    child: Text(
                      value,
                      style: context.textTheme.bodySmall?.copyWith(
-                            color: ColorsManager.vividBlue.withValues(
-                              alpha: 0.7,
-                            ),
+                        color: ColorsManager.vividBlue.withValues(alpha: 0.7),
                        fontWeight: FontWeight.w700,
                        fontSize: 24,
                      ),
@ -77,7 +67,16 @@ class AqiLocationInfoCell extends StatelessWidget {
                  ),
                ),
              ),
-                ],
+            ),
+            Align(
+              alignment: AlignmentDirectional.bottomStart,
+              child: SizedBox.square(
+                dimension: MediaQuery.sizeOf(context).width * 0.45,
+                child: FittedBox(
+                  fit: BoxFit.scaleDown,
+                  alignment: AlignmentDirectional.bottomStart,
+                  child: SvgPicture.asset(svgPath),
+                ),
              ),
            ),
          ],
--- a/lib/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart
+++ b/lib/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart
@ -7,18 +7,16 @@ class ChartInformativeCell extends StatelessWidget {
    required this.title,
    required this.color,
    this.hasBorder = false,
-    this.height,
  });

  final Widget title;
  final Color color;
  final bool hasBorder;
-  final double? height;

  @override
  Widget build(BuildContext context) {
    return Container(
-      height: height ?? MediaQuery.sizeOf(context).height * 0.0385,
+      height: MediaQuery.sizeOf(context).height * 0.0385,
      padding: const EdgeInsetsDirectional.symmetric(
        vertical: 8,
        horizontal: 12,
--- a/lib/pages/common/custom_table.dart
+++ b/lib/pages/common/custom_table.dart
@ -179,10 +179,7 @@ class _DynamicTableState extends State<DynamicTable> {
    );
  }

-  Widget _buildEmptyState() => Container(
-        height: widget.size.height,
-        color: ColorsManager.whiteColors,
-        child: Column(
+  Widget _buildEmptyState() => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
@ -206,9 +203,7 @@ class _DynamicTableState extends State<DynamicTable> {
              ),
            ],
          ),
-            SizedBox(height: widget.size.height * 0.5),
        ],
-        ),
      );
  Widget _buildSelectAllCheckbox() {
    return Container(
--- a/lib/pages/device_managment/all_devices/widgets/device_managment_body.dart
+++ b/lib/pages/device_managment/all_devices/widgets/device_managment_body.dart
@ -62,8 +62,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {

        final buttonLabel =
            (selectedDevices.length > 1) ? 'Batch Control' : 'Control';
-        final isAnyDeviceOffline =
-            selectedDevices.any((element) => !(element.online ?? false));
+
        return Row(
          children: [
            Expanded(child: SpaceTreeView(
@ -104,28 +103,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                decoration: containerDecoration,
                                child: Center(
                                  child: DefaultButton(
-                                    backgroundColor: isAnyDeviceOffline
-                                        ? ColorsManager.primaryColor
-                                            .withValues(alpha: 0.1)
-                                        : null,
                                    onPressed: isControlButtonEnabled
                                        ? () {
-                                            if (isAnyDeviceOffline) {
-                                              ScaffoldMessenger.of(context)
-                                                  .clearSnackBars();
-                                              ScaffoldMessenger.of(context)
-                                                  .showSnackBar(
-                                                const SnackBar(
-                                                  content: Text(
-                                                    'This Device is Offline',
-                                                  ),
-                                                  duration:
-                                                      Duration(seconds: 2),
-                                                ),
-                                              );
-                                              return;
-                                            }
-
                                            if (selectedDevices.length == 1) {
                                              showDialog(
                                                context: context,
--- a/lib/pages/space_management_v2/main_module/models/space_connection_model.dart
+++ b/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});
+}
--- a/lib/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart
+++ b/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;
+}
--- a/lib/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart
+++ b/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),
+              );
+        },
+      ),
+    );
+  }
+}
--- a/lib/pages/space_management_v2/main_module/widgets/community_structure_canvas.dart
+++ b/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),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/pages/space_management_v2/main_module/widgets/community_template_cell.dart
+++ b/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,
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/pages/space_management_v2/main_module/widgets/create_space_button.dart
+++ b/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,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/pages/space_management_v2/main_module/widgets/plus_button_widget.dart
+++ b/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,
+        ),
+      ),
+    );
+  }
+}
--- a/lib/pages/space_management_v2/main_module/widgets/space_card_widget.dart
+++ b/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,
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/lib/pages/space_management_v2/main_module/widgets/space_cell.dart
+++ b/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),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/pages/space_management_v2/main_module/widgets/space_management_body.dart
+++ b/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(),
+            ),
+          ),
+        ),
      ],
    );
  }
--- a/lib/pages/space_management_v2/main_module/widgets/space_management_community_structure.dart
+++ b/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),
+    );
+  }
+}
--- a/lib/pages/space_management_v2/main_module/widgets/space_management_templates_view.dart
+++ b/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,
+  });
+}
--- a/lib/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart
+++ b/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,
      ),
    );
--- a/lib/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_event.dart
+++ b/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];
--- a/lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree_space_tile.dart
+++ b/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(
--- a/lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_header.dart
+++ b/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),
-                );
-          },
-        ),
-      );
 }
--- a/lib/pages/space_management_v2/modules/create_community/data/services/remote_create_community_service.dart
+++ b/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;
  }

--- a/lib/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart
+++ b/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;
Author	SHA1	Message	Date
Faris Armoush	75efc595b4	reverted to old import to avoid confusion with QA team.	2025-06-23 16:22:11 +03:00
Faris Armoush	8bc7a3daa2	Implemented space management canvas.	2025-06-23 15:45:49 +03:00
Faris Armoush	ada7daf179	Switched from using `Text` to `SelectableText` in `CreateCommunityDialog`.	2025-06-23 10:13:30 +03:00
Faris Armoush	4bdb487094	doesnt show a snackbar when creating a community fails, since we show the error message in the dialog itself.	2025-06-23 10:11:23 +03:00
Faris Armoush	f8e4c89cdb	uses correct error message that the api sends in `RemoteCreateCommunityService`.	2025-06-23 10:11:03 +03:00
Faris Armoush	7d4cdba0ef	Connected templates view into `SpaceManagementBody`, while applying the correct UI principals if what to show what when?	2025-06-23 10:06:59 +03:00
Faris Armoush	a78b5993a9	Created `SpaceManagementTemplatesView` widget.	2025-06-23 10:05:53 +03:00
Faris Armoush	0e7109a19e	Created `CommunityTemplateCell` widget.	2025-06-23 10:02:15 +03:00
Faris Armoush	ff3d5cd996	Created a helper class to show create community dialog, since this dialog can be shown from two different widgets.	2025-06-23 10:02:02 +03:00