Add deviceName field to FailedOperation and SuccessOperation models

… experience

<!--
  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:
-->



## Description

<!--- Describe your changes in detail -->
Enhance navigation buttons in SmartPowerDeviceControl 

## Type of Change

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

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

lib/pages/device_managment/power_clamp/view/smart_power_device_control.dart

@@ -12,7 +12,8 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
 //Smart Power Clamp
-class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayout {
+class SmartPowerDeviceControl extends StatelessWidget
+    with HelperResponsiveLayout {
   final String deviceId;
 
   const SmartPowerDeviceControl({super.key, required this.deviceId});
@@ -145,13 +146,16 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                       children: [
                         IconButton(
                           icon: const Icon(Icons.arrow_left),
-                          onPressed: () {
+                          onPressed: blocProvider.currentPage <= 0
-                            blocProvider.add(SmartPowerArrowPressedEvent(-1));
+                              ? null
-                            pageController.previousPage(
+                              : () {
-                              duration: const Duration(milliseconds: 300),
+                                  blocProvider
-                              curve: Curves.easeInOut,
+                                      .add(SmartPowerArrowPressedEvent(-1));
-                            );
+                                  pageController.previousPage(
-                          },
+                                    duration: const Duration(milliseconds: 300),
+                                    curve: Curves.easeInOut,
+                                  );
+                                },
                         ),
                         Text(
                           currentPage == 0
@@ -165,13 +169,16 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                         ),
                         IconButton(
                           icon: const Icon(Icons.arrow_right),
-                          onPressed: () {
+                          onPressed: blocProvider.currentPage >= 3
-                            blocProvider.add(SmartPowerArrowPressedEvent(1));
+                              ? null
-                            pageController.nextPage(
+                              : () {
-                              duration: const Duration(milliseconds: 300),
+                                  blocProvider
-                              curve: Curves.easeInOut,
+                                      .add(SmartPowerArrowPressedEvent(1));
-                            );
+                                  pageController.nextPage(
-                          },
+                                    duration: const Duration(milliseconds: 300),
+                                    curve: Curves.easeInOut,
+                                  );
+                                },
                         ),
                       ],
                     ),
@@ -195,8 +202,8 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                             blocProvider.add(SelectDateEvent(context: context));
                             blocProvider.add(FilterRecordsByDateEvent(
                                 selectedDate: blocProvider.dateTime!,
-                                viewType:
+                                viewType: blocProvider
-                                    blocProvider.views[blocProvider.currentIndex]));
+                                    .views[blocProvider.currentIndex]));
                           },
                           widget: blocProvider.dateSwitcher(),
                           chartData: blocProvider.energyDataList.isNotEmpty

lib/pages/device_managment/schedule_device/bloc/schedule_bloc.dart

@@ -83,6 +83,12 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
       emit(currentState.copyWith(
         scheduleMode: event.scheduleMode,
         countdownRemaining: Duration.zero,
+        countdownHours: 0,
+        countdownMinutes: 0,
+        inchingHours: 0,
+        inchingMinutes: 0,
+        isCountdownActive: false,
+        isInchingActive: false,
       ));
     }
   }
@@ -94,6 +100,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
     if (state is ScheduleLoaded) {
       final currentState = state as ScheduleLoaded;
       emit(currentState.copyWith(
+        countdownSeconds: event.seconds,
         countdownHours: event.hours,
         countdownMinutes: event.minutes,
         inchingHours: 0,
@@ -113,6 +120,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
         inchingHours: event.hours,
         inchingMinutes: event.minutes,
         countdownRemaining: Duration.zero,
+        inchingSeconds: 0, // Add this
       ));
     }
   }
@@ -424,6 +432,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
               countdownMinutes: countdownDuration.inMinutes % 60,
               countdownRemaining: countdownDuration,
               isCountdownActive: true,
+              countdownSeconds: countdownDuration.inSeconds,
             ),
           );
 
@@ -437,6 +446,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
                 countdownMinutes: 0,
                 countdownRemaining: Duration.zero,
                 isCountdownActive: false,
+                countdownSeconds: 0,
               ),
             );
           }
@@ -448,6 +458,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
               inchingMinutes: inchingDuration.inMinutes % 60,
               isInchingActive: true,
               countdownRemaining: inchingDuration,
+              countdownSeconds: inchingDuration.inSeconds,
             ),
           );
         }
@@ -574,8 +585,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
   }
 
   String extractTime(String isoDateTime) {
-    // Example input: "2025-06-19T15:45:00.000"
+    return isoDateTime.split('T')[1].split('.')[0];
-    return isoDateTime.split('T')[1].split('.')[0]; // gives "15:45:00"
   }
 
   int? getTimeStampWithoutSeconds(DateTime? dateTime) {

lib/pages/device_managment/schedule_device/bloc/schedule_event.dart

@@ -146,14 +146,16 @@ class UpdateScheduleModeEvent extends ScheduleEvent {
 class UpdateCountdownTimeEvent extends ScheduleEvent {
   final int hours;
   final int minutes;
+  final int seconds;
 
   const UpdateCountdownTimeEvent({
     required this.hours,
     required this.minutes,
+    required this.seconds,
   });
 
   @override
-  List<Object> get props => [hours, minutes];
+  List<Object> get props => [hours, minutes, seconds];
 }
 
 class UpdateInchingTimeEvent extends ScheduleEvent {

lib/pages/device_managment/schedule_device/bloc/schedule_state.dart

@@ -26,11 +26,15 @@ class ScheduleLoaded extends ScheduleState {
   final bool isCountdownActive;
   final int inchingHours;
   final int inchingMinutes;
+  final int inchingSeconds;
   final bool isInchingActive;
   final ScheduleModes scheduleMode;
   final Duration? countdownRemaining;
+  final int? countdownSeconds;
 
   const ScheduleLoaded({
+    this.countdownSeconds = 0,
+    this.inchingSeconds = 0,
     required this.schedules,
     this.selectedTime,
     required this.selectedDays,
@@ -61,6 +65,9 @@ class ScheduleLoaded extends ScheduleState {
     bool? isInchingActive,
     ScheduleModes? scheduleMode,
     Duration? countdownRemaining,
+    String? deviceId,
+    int? countdownSeconds,
+    int? inchingSeconds,
   }) {
     return ScheduleLoaded(
       schedules: schedules ?? this.schedules,
@@ -68,7 +75,7 @@ class ScheduleLoaded extends ScheduleState {
       selectedDays: selectedDays ?? this.selectedDays,
       functionOn: functionOn ?? this.functionOn,
       isEditing: isEditing ?? this.isEditing,
-      deviceId: deviceId,
+      deviceId: deviceId ?? this.deviceId,
       countdownHours: countdownHours ?? this.countdownHours,
       countdownMinutes: countdownMinutes ?? this.countdownMinutes,
       isCountdownActive: isCountdownActive ?? this.isCountdownActive,
@@ -77,6 +84,8 @@ class ScheduleLoaded extends ScheduleState {
       isInchingActive: isInchingActive ?? this.isInchingActive,
       scheduleMode: scheduleMode ?? this.scheduleMode,
       countdownRemaining: countdownRemaining ?? this.countdownRemaining,
+      countdownSeconds: countdownSeconds ?? this.countdownSeconds,
+      inchingSeconds: inchingSeconds ?? this.inchingSeconds,
     );
   }
 
@@ -96,6 +105,8 @@ class ScheduleLoaded extends ScheduleState {
         isInchingActive,
         scheduleMode,
         countdownRemaining,
+        countdownSeconds,
+        inchingSeconds,
       ];
 }
 

lib/pages/device_managment/schedule_device/schedule_widgets/count_down_inching_view.dart

@@ -6,7 +6,8 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class CountdownInchingView extends StatefulWidget {
-  const CountdownInchingView({super.key});
+  final String deviceId;
+  const CountdownInchingView({super.key, required this.deviceId});
 
   @override
   State<CountdownInchingView> createState() => _CountdownInchingViewState();
@@ -15,25 +16,30 @@ class CountdownInchingView extends StatefulWidget {
 class _CountdownInchingViewState extends State<CountdownInchingView> {
   late FixedExtentScrollController _hoursController;
   late FixedExtentScrollController _minutesController;
+  late FixedExtentScrollController _secondsController;
 
   int _lastHours = -1;
   int _lastMinutes = -1;
+  int _lastSeconds = -1;
 
   @override
   void initState() {
     super.initState();
     _hoursController = FixedExtentScrollController();
     _minutesController = FixedExtentScrollController();
+    _secondsController = FixedExtentScrollController();
   }
 
   @override
   void dispose() {
     _hoursController.dispose();
     _minutesController.dispose();
+    _secondsController.dispose();
     super.dispose();
   }
 
-  void _updateControllers(int displayHours, int displayMinutes) {
+  void _updateControllers(
+      int displayHours, int displayMinutes, int displaySeconds) {
     if (_lastHours != displayHours) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         if (_hoursController.hasClients) {
@@ -50,6 +56,15 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
       });
       _lastMinutes = displayMinutes;
     }
+    // Update seconds controller
+    if (_lastSeconds != displaySeconds) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (_secondsController.hasClients) {
+          _secondsController.jumpToItem(displaySeconds);
+        }
+      });
+      _lastSeconds = displaySeconds;
+    }
   }
 
   @override
@@ -57,7 +72,6 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
     return BlocBuilder<ScheduleBloc, ScheduleState>(
       builder: (context, state) {
         if (state is! ScheduleLoaded) return const SizedBox.shrink();
-
         final isCountDown = state.scheduleMode == ScheduleModes.countdown;
         final isActive =
             isCountDown ? state.isCountdownActive : state.isInchingActive;
@@ -67,8 +81,21 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
         final displayMinutes = isActive && state.countdownRemaining != null
             ? state.countdownRemaining!.inMinutes.remainder(60)
             : (isCountDown ? state.countdownMinutes : state.inchingMinutes);
+        final displaySeconds = isActive && state.countdownRemaining != null
+            ? state.countdownRemaining!.inSeconds.remainder(60)
+            : (isCountDown ? state.countdownSeconds : state.inchingSeconds);
+
+        _updateControllers(displayHours, displayMinutes, displaySeconds!);
+
+        if (displayHours == 0 && displayMinutes == 0 && displaySeconds == 0) {
+          context.read<ScheduleBloc>().add(
+                StopScheduleEvent(
+                  mode: ScheduleModes.countdown,
+                  deviceId: widget.deviceId,
+                ),
+              );
+        }
 
-        _updateControllers(displayHours, displayMinutes);
         return Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -100,7 +127,10 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
                   (value) {
                     if (!isActive) {
                       context.read<ScheduleBloc>().add(UpdateCountdownTimeEvent(
-                          hours: value, minutes: displayMinutes));
+                            hours: value,
+                            minutes: displayMinutes,
+                            seconds: displaySeconds,
+                          ));
                     }
                   },
                   isActive: isActive,
@@ -115,11 +145,35 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
                   (value) {
                     if (!isActive) {
                       context.read<ScheduleBloc>().add(UpdateCountdownTimeEvent(
-                          hours: displayHours, minutes: value));
+                            hours: displayHours,
+                            minutes: value,
+                            seconds: displaySeconds,
+                          ));
                     }
                   },
                   isActive: isActive,
                 ),
+                const SizedBox(width: 10),
+                if (isActive)
+                  _buildPickerColumn(
+                    context,
+                    's',
+                    displaySeconds,
+                    60,
+                    _secondsController,
+                    (value) {
+                      if (!isActive) {
+                        context
+                            .read<ScheduleBloc>()
+                            .add(UpdateCountdownTimeEvent(
+                              hours: displayHours,
+                              minutes: displayMinutes,
+                              seconds: value,
+                            ));
+                      }
+                    },
+                    isActive: isActive,
+                  ),
               ],
             ),
           ],

lib/pages/device_managment/schedule_device/schedule_widgets/schedual_view.dart

@@ -74,7 +74,9 @@ class BuildScheduleView extends StatelessWidget {
                           ),
                         if (state.scheduleMode == ScheduleModes.countdown ||
                             state.scheduleMode == ScheduleModes.inching)
-                          const CountdownInchingView(),
+                           CountdownInchingView(
+                            deviceId: deviceUuid,
+                          ),
                         const SizedBox(height: 20),
                         if (state.scheduleMode == ScheduleModes.countdown)
                           CountdownModeButtons(

lib/pages/device_managment/shared/device_control_dialog.dart

@@ -79,6 +79,7 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
   }
 
   Widget _buildDeviceInfoSection() {
+    final isOnlineDevice = device.online != null && device.online!;
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 50),
       child: Table(
@@ -107,7 +108,7 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
                 'Installation Date and Time:',
                 formatDateTime(
                   DateTime.fromMillisecondsSinceEpoch(
-                    ((device.createTime ?? 0) * 1000),
+                    (device.createTime ?? 0) * 1000,
                   ),
                 ),
               ),
@@ -126,12 +127,16 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
           ),
           TableRow(
             children: [
-              _buildInfoRow('Status:', 'Online', statusColor: Colors.green),
+              _buildInfoRow(
+                'Status:',
+                isOnlineDevice ? 'Online' : 'offline',
+                statusColor: isOnlineDevice ? Colors.green : Colors.red,
+              ),
               _buildInfoRow(
                 'Last Offline Date and Time:',
                 formatDateTime(
                   DateTime.fromMillisecondsSinceEpoch(
-                    ((device.updateTime ?? 0) * 1000),
+                    (device.updateTime ?? 0) * 1000,
                   ),
                 ),
               ),

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

@@ -7,21 +7,22 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
   final Map<String, Offset> positions;
   final double cardWidth = 150.0;
   final double cardHeight = 90.0;
-  final String? selectedSpaceUuid;
+  final Set<String> highlightedUuids;
 
   SpacesConnectionsArrowPainter({
     required this.connections,
     required this.positions,
-    this.selectedSpaceUuid,
+    required this.highlightedUuids,
   });
 
   @override
   void paint(Canvas canvas, Size size) {
     for (final connection in connections) {
-      final isSelected = connection.to == selectedSpaceUuid;
+      final isSelected = highlightedUuids.contains(connection.from) ||
+          highlightedUuids.contains(connection.to);
       final paint = Paint()
         ..color = isSelected
-            ? ColorsManager.primaryColor
+            ? ColorsManager.blackColor
             : ColorsManager.blackColor.withValues(alpha: 0.5)
         ..strokeWidth = 2.0
         ..style = PaintingStyle.stroke;
@@ -36,7 +37,7 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
 
         final path = Path()..moveTo(startPoint.dx, startPoint.dy);
 
-        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 60);
+        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 20);
         final controlPoint2 = Offset(endPoint.dx, endPoint.dy - 60);
 
         path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
@@ -46,7 +47,7 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
 
         final circlePaint = Paint()
           ..color = isSelected
-              ? ColorsManager.primaryColor
+              ? ColorsManager.blackColor
               : ColorsManager.blackColor.withValues(alpha: 0.5)
           ..style = PaintingStyle.fill
           ..blendMode = BlendMode.srcIn;

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

@@ -1,21 +1,26 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.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';
+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/space_details/presentation/helpers/space_details_dialog_helper.dart';
 
 class CommunityStructureCanvas extends StatefulWidget {
   const CommunityStructureCanvas({
     required this.community,
+    required this.selectedSpace,
     super.key,
   });
 
   final CommunityModel community;
+  final SpaceModel? selectedSpace;
 
   @override
-  State<CommunityStructureCanvas> createState() =>_CommunityStructureCanvasState();  
+  State<CommunityStructureCanvas> createState() => _CommunityStructureCanvasState();
 }
 
 class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
@@ -25,19 +30,30 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
   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),
+      duration: const Duration(milliseconds: 150),
     );
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(covariant CommunityStructureCanvas oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.selectedSpace?.uuid != oldWidget.selectedSpace?.uuid) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          _animateToSpace(widget.selectedSpace);
+        }
+      });
+    }
   }
 
   @override
@@ -47,6 +63,15 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     super.dispose();
   }
 
+  Set<String> _getAllDescendantUuids(SpaceModel space) {
+    final uuids = <String>{};
+    for (final child in space.children) {
+      uuids.add(child.uuid);
+      uuids.addAll(_getAllDescendantUuids(child));
+    }
+    return uuids;
+  }
+
   void _runAnimation(Matrix4 target) {
     final animation = Matrix4Tween(
       begin: _transformationController.value,
@@ -63,15 +88,16 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     });
   }
 
-  void _onSpaceTapped(String spaceUuid) {
+  void _animateToSpace(SpaceModel? space) {
-    setState(() {
+    if (space == null) {
-      _selectedSpaceUuid = spaceUuid;
+      _runAnimation(Matrix4.identity());
-    });
+      return;
+    }
 
-    final position = _positions[spaceUuid];
+    final position = _positions[space.uuid];
     if (position == null) return;
 
-    const scale = 2.0;
+    const scale = 1.5;
     final viewSize = context.size;
     if (viewSize == null) return;
 
@@ -86,11 +112,19 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     _runAnimation(matrix);
   }
 
+  void _onSpaceTapped(SpaceModel? space) {
+    context.read<CommunitiesTreeSelectionBloc>().add(
+          SelectSpaceEvent(community: widget.community, space: space),
+        );
+  }
+
   void _resetSelectionAndZoom() {
-    setState(() {
+    context.read<CommunitiesTreeSelectionBloc>().add(
-      _selectedSpaceUuid = null;
+          SelectSpaceEvent(
-    });
+            community: widget.community,
-    _runAnimation(Matrix4.identity());
+            space: null,
+          ),
+        );
   }
 
   void _calculateLayout(
@@ -150,16 +184,23 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
 
     _calculateLayout(community.spaces, 0, {});
 
+    final selectedSpace = widget.selectedSpace;
+    final highlightedUuids = <String>{};
+    if (selectedSpace != null) {
+      highlightedUuids.add(selectedSpace.uuid);
+      highlightedUuids.addAll(_getAllDescendantUuids(selectedSpace));
+    }
+
     final widgets = <Widget>[];
     final connections = <SpaceConnectionModel>[];
-    _generateWidgets(community.spaces, widgets, connections);
+    _generateWidgets(community.spaces, widgets, connections, highlightedUuids);
 
     return [
       CustomPaint(
         painter: SpacesConnectionsArrowPainter(
           connections: connections,
           positions: _positions,
-          selectedSpaceUuid: _selectedSpaceUuid,
+          highlightedUuids: highlightedUuids,
         ),
         child: Stack(alignment: AlignmentDirectional.center, children: widgets),
       ),
@@ -170,11 +211,15 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     List<SpaceModel> spaces,
     List<Widget> widgets,
     List<SpaceConnectionModel> connections,
+    Set<String> highlightedUuids,
   ) {
     for (final space in spaces) {
       final position = _positions[space.uuid];
       if (position == null) continue;
 
+      final isHighlighted = highlightedUuids.contains(space.uuid);
+      final hasNoSelectedSpace = widget.selectedSpace == null;
+
       widgets.add(
         Positioned(
           left: position.dx,
@@ -182,32 +227,31 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
           width: _cardWidth,
           height: _cardHeight,
           child: SpaceCardWidget(
-            index: spaces.indexOf(space),
+            buildSpaceContainer: () {
-            onPositionChanged: (newPosition) {},
-            buildSpaceContainer: (index) {
               return Opacity(
-                opacity: 1.0,
+                opacity: hasNoSelectedSpace || isHighlighted ? 1.0 : 0.5,
-                child: SpaceCell(
+                child: Tooltip(
-                  index: index,
+                  message: space.spaceName,
-                  onTap: () => _onSpaceTapped(space.uuid),
+                  preferBelow: false,
-                  icon: space.icon,
+                  child: SpaceCell(
-                  name: space.spaceName,
+                    onTap: () => _onSpaceTapped(space),
+                    icon: space.icon,
+                    name: space.spaceName,
+                  ),
                 ),
               );
             },
-            screenSize: MediaQuery.sizeOf(context),
+            onTap: () => SpaceDetailsDialogHelper.showCreate(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));
+        connections.add(
+          SpaceConnectionModel(from: space.uuid, to: child.uuid),
+        );
       }
-      _generateWidgets(space.children, widgets, connections);
+      _generateWidgets(space.children, widgets, connections, highlightedUuids);
     }
   }
 
@@ -218,7 +262,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
       transformationController: _transformationController,
       boundaryMargin: EdgeInsets.symmetric(
         horizontal: MediaQuery.sizeOf(context).width * 0.3,
-        vertical: MediaQuery.sizeOf(context).height * 0.2,
+        vertical: MediaQuery.sizeOf(context).height * 0.3,
       ),
       minScale: 0.5,
       maxScale: 3.0,
@@ -226,8 +270,8 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
       child: GestureDetector(
         onTap: _resetSelectionAndZoom,
         child: SizedBox(
-          width: MediaQuery.sizeOf(context).width * 2,
+          width: MediaQuery.sizeOf(context).width * 5,
-          height: MediaQuery.sizeOf(context).height * 2,
+          height: MediaQuery.sizeOf(context).height * 5,
           child: Stack(children: treeWidgets),
         ),
       ),

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

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class CreateSpaceButton extends StatelessWidget {
@@ -7,7 +8,7 @@ class CreateSpaceButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: () {},
+      onTap: () => SpaceDetailsDialogHelper.showCreate(context),
       child: Container(
         height: 60,
         decoration: BoxDecoration(

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

@@ -2,15 +2,11 @@ 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;
+  final void Function() onButtonTap;
 
   const PlusButtonWidget({
     super.key,
-    required this.index,
-    required this.direction,
     required this.offset,
     required this.onButtonTap,
   });
@@ -18,13 +14,7 @@ class PlusButtonWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: () {
+      onTap: onButtonTap,
-        if (direction == 'down') {
-          onButtonTap(index, const Offset(0, 150));
-        } else {
-          onButtonTap(index, const Offset(150, 0));
-        }
-      },
       child: Container(
         width: 30,
         height: 30,

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

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

@@ -1,29 +1,23 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.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,
+    required this.onTap,
-    this.onDoubleTap,
   });
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-
     return GestureDetector(
-      onDoubleTap: onDoubleTap,
       onTap: onTap,
       child: Container(
         width: 150,
@@ -36,7 +30,7 @@ class SpaceCell extends StatelessWidget {
             Expanded(
               child: Text(
                 name,
-                style: theme.textTheme.bodyLarge?.copyWith(
+                style: context.textTheme.bodyLarge?.copyWith(
                   fontWeight: FontWeight.bold,
                   color: ColorsManager.blackColor,
                 ),
@@ -63,7 +57,10 @@ class SpaceCell extends StatelessWidget {
       child: Center(
         child: SvgPicture.asset(
           icon,
-          color: ColorsManager.whiteColors,
+          colorFilter: const ColorFilter.mode(
+            ColorsManager.whiteColors,
+            BlendMode.srcIn,
+          ),
           width: 24,
           height: 24,
         ),

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

@@ -9,14 +9,19 @@ class SpaceManagementCommunityStructure extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final selectedCommunity =
+    final selectionBloc = context.watch<CommunitiesTreeSelectionBloc>().state;
-        context.watch<CommunitiesTreeSelectionBloc>().state.selectedCommunity!;
+    final selectedCommunity = selectionBloc.selectedCommunity;
+    final selectedSpace = selectionBloc.selectedSpace;
     const spacer = Spacer(flex: 10);
     return Visibility(
-      visible: selectedCommunity.spaces.isNotEmpty,
+      visible: selectedCommunity!.spaces.isNotEmpty,
       replacement: const Row(
-          children: [spacer, Expanded(child: CreateSpaceButton()), spacer]),
+        children: [spacer, Expanded(child: CreateSpaceButton()), spacer],
-      child: CommunityStructureCanvas(community: selectedCommunity),
+      ),
+      child: CommunityStructureCanvas(
+        community: selectedCommunity,
+        selectedSpace: selectedSpace,
+      ),
     );
   }
 }

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

@@ -7,26 +7,24 @@ class SpaceManagementTemplatesView extends StatelessWidget {
   const SpaceManagementTemplatesView({super.key});
   @override
   Widget build(BuildContext context) {
-    return Expanded(
+    return ColoredBox(
-      child: ColoredBox(
+      color: ColorsManager.whiteColors,
-        color: ColorsManager.whiteColors,
+      child: GridView.builder(
-        child: GridView.builder(
+        padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
-          padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
+        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+          maxCrossAxisExtent: 400,
-            maxCrossAxisExtent: 400,
+          mainAxisSpacing: 10,
-            mainAxisSpacing: 10,
+          crossAxisSpacing: 10,
-            crossAxisSpacing: 10,
+          childAspectRatio: 2.0,
-            childAspectRatio: 2.0,
-          ),
-          itemCount: _gridItems(context).length,
-          itemBuilder: (context, index) {
-            final model = _gridItems(context)[index];
-            return CommunityTemplateCell(
-              onTap: model.onTap,
-              title: model.title,
-            );
-          },
         ),
+        itemCount: _gridItems(context).length,
+        itemBuilder: (context, index) {
+          final model = _gridItems(context)[index];
+          return CommunityTemplateCell(
+            onTap: model.onTap,
+            title: model.title,
+          );
+        },
       ),
     );
   }

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

@@ -16,7 +16,7 @@ final class SelectCommunityEvent extends CommunitiesTreeSelectionEvent {
 }
 
 final class SelectSpaceEvent extends CommunitiesTreeSelectionEvent {
-  final SpaceModel space;
+  final SpaceModel? space;
   final CommunityModel community;
 
   const SelectSpaceEvent({required this.space, required this.community});

lib/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_dialog.dart';
+
+abstract final class SpaceDetailsDialogHelper {
+  static void showCreate(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      builder: (context) => const SpaceDetailsDialog(),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_dialog.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class SpaceDetailsDialog extends StatelessWidget {
+  const SpaceDetailsDialog({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Dialog(
+      child: Text('Create Space'),
+    );
+  }
+}

lib/pages/visitor_password/model/failed_operation.dart

@@ -2,11 +2,13 @@ class FailedOperation {
   final bool success;
   final dynamic deviceUuid;
   final dynamic error;
+  final String deviceName;
 
   FailedOperation({
     required this.success,
     required this.deviceUuid,
     required this.error,
+    required this.deviceName,
   });
 
   factory FailedOperation.fromJson(Map<String, dynamic> json) {
@@ -14,6 +16,7 @@ class FailedOperation {
       success: json['success'],
       deviceUuid: json['deviceUuid'],
       error: json['error'],
+      deviceName: json['deviceName'] as String? ?? '',
     );
   }
 
@@ -22,21 +25,22 @@ class FailedOperation {
       'success': success,
       'deviceUuid': deviceUuid,
       'error': error,
+      'deviceName': deviceName,
     };
   }
 }
 
-
-
 class SuccessOperation {
   final bool success;
   // final Result result;
   final String deviceUuid;
+  final String deviceName;
 
   SuccessOperation({
     required this.success,
     // required this.result,
     required this.deviceUuid,
+    required this.deviceName,
   });
 
   factory SuccessOperation.fromJson(Map<String, dynamic> json) {
@@ -44,6 +48,7 @@ class SuccessOperation {
       success: json['success'],
       // result: Result.fromJson(json['result']),
       deviceUuid: json['deviceUuid'],
+      deviceName: json['deviceName'] as String? ?? '',
     );
   }
 
@@ -52,6 +57,7 @@ class SuccessOperation {
       'success': success,
       // 'result': result.toJson(),
       'deviceUuid': deviceUuid,
+      'deviceName': deviceName,
     };
   }
 }
@@ -92,8 +98,6 @@ class SuccessOperation {
 //   }
 // }
 
-
-
 class PasswordStatus {
   final List<SuccessOperation> successOperations;
   final List<FailedOperation> failedOperations;
@@ -121,4 +125,3 @@ class PasswordStatus {
     };
   }
 }
-

lib/pages/visitor_password/view/visitor_password_dialog.dart

@@ -63,7 +63,7 @@ class VisitorPasswordDialog extends StatelessWidget {
                                           child: Text(visitorBloc
                                               .passwordStatus!
                                               .failedOperations[index]
-                                              .deviceUuid)),
+                                              .deviceName)),
                                     );
                                   },
                                 ),
@@ -92,7 +92,7 @@ class VisitorPasswordDialog extends StatelessWidget {
                                           child: Text(visitorBloc
                                               .passwordStatus!
                                               .successOperations[index]
-                                              .deviceUuid)),
+                                              .deviceName)),
                                     );
                                   },
                                 ),
@@ -102,7 +102,7 @@ class VisitorPasswordDialog extends StatelessWidget {
                       ],
                     ))
                 .then((v) {
-              Navigator.of(context).pop(true);
+              Navigator.of(context).pop(v);
             });
           } else if (state is FailedState) {
             visitorBloc.stateDialog(
@@ -476,7 +476,7 @@ class VisitorPasswordDialog extends StatelessWidget {
                   child: DefaultButton(
                     borderRadius: 8,
                     onPressed: () {
-                      Navigator.of(context).pop(true);
+                      Navigator.of(context).pop(null);
                     },
                     backgroundColor: Colors.white,
                     child: Text(
@@ -651,7 +651,7 @@ class VisitorPasswordDialog extends StatelessWidget {
                     child: DefaultButton(
                       borderRadius: 8,
                       onPressed: () {
-                        Navigator.of(context).pop();
+                        Navigator.of(context).pop(null);
                       },
                       backgroundColor: Colors.white,
                       child: Text(