enhance week navigation layout for improved UI

<!--
  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 garage door scheduling functionality and UI improvements

## 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

assets/icons/x_delete.svg

@@ -0,0 +1,5 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 34.9999C27.1649 34.9999 34.9999 27.1649 34.9999 17.4999C34.9999 7.83499 27.1649 0 17.5 0C7.83499 0 0 7.83499 0 17.5C0 27.1651 7.83499 34.9999 17.5 34.9999Z" fill="#FF6465"/>
+<path opacity="0.1" d="M4.70804 17.5C4.70804 8.63343 11.3024 1.30805 19.854 0.158115C19.0839 0.0545507 18.2984 0 17.5 0C7.835 0 0 7.835 0 17.5C0 27.1651 7.83499 35 17.4999 35C18.2983 35 19.0839 34.9455 19.8539 34.8419C11.3024 33.6919 4.70804 26.3665 4.70804 17.5Z" fill="black"/>
+<path d="M21.4229 17.5003L26.0301 12.8931C26.365 12.5582 26.365 12.0152 26.0301 11.6804L23.3197 8.96992C22.9848 8.63503 22.4418 8.63503 22.107 8.96992L17.4997 13.5772L12.8924 8.96992C12.5576 8.63503 12.0146 8.63503 11.6798 8.96992L8.96931 11.6804C8.63442 12.0153 8.63442 12.5582 8.96931 12.8931L13.5766 17.5003L8.96931 22.1076C8.63442 22.4425 8.63442 22.9855 8.96931 23.3204L11.6798 26.0308C12.0146 26.3657 12.5576 26.3657 12.8924 26.0308L17.4997 21.4235L22.1071 26.0308C22.442 26.3657 22.9849 26.3657 23.3198 26.0308L26.0302 23.3204C26.3651 22.9855 26.3651 22.4425 26.0302 22.1076L21.4229 17.5003Z" fill="white"/>
+</svg>

lib/main.dart

@@ -1,22 +1,9 @@
 import 'package:firebase_core/firebase_core.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
-import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/firebase_options.dart';
-import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
-import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
-import 'package:syncrow_web/pages/home/bloc/home_event.dart';
-import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
-import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
-import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_bloc.dart';
 import 'package:syncrow_web/services/locator.dart';
-import 'package:syncrow_web/utils/app_routes.dart';
-import 'package:syncrow_web/utils/constants/routes_const.dart';
-import 'package:syncrow_web/utils/navigation_service.dart';
-import 'package:syncrow_web/utils/theme/theme.dart';
+import 'package:syncrow_web/syncrow_app.dart';
 
 Future<void> main() async {
   try {
@@ -33,59 +20,5 @@ Future<void> main() async {
     );
     initialSetup();
   } catch (_) {}
-  runApp(MyApp());
-}
-
-class MyApp extends StatelessWidget {
-  MyApp({super.key});
-
-  final GoRouter _router = GoRouter(
-    initialLocation: RoutesConst.auth,
-    routes: AppRoutes.getRoutes(),
-    redirect: (context, state) async {
-      final checkToken = await AuthBloc.getTokenAndValidate();
-      final loggedIn = checkToken == 'Success';
-      final goingToLogin = state.uri.toString() == RoutesConst.auth;
-
-      if (!loggedIn && !goingToLogin) return RoutesConst.auth;
-      if (loggedIn && goingToLogin) return RoutesConst.home;
-
-      return null;
-    },
-  );
-
-  @override
-  Widget build(BuildContext context) {
-    return MultiBlocProvider(
-        providers: [
-          BlocProvider<CreateRoutineBloc>(
-            create: (context) => CreateRoutineBloc(),
-          ),
-          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
-          BlocProvider<VisitorPasswordBloc>(
-            create: (context) => VisitorPasswordBloc(),
-          ),
-          BlocProvider<RoutineBloc>(
-            create: (context) => RoutineBloc(),
-          ),
-          BlocProvider<SpaceTreeBloc>(
-            create: (context) => SpaceTreeBloc(),
-          ),
-        ],
-        child: MaterialApp.router(
-          debugShowCheckedModeBanner: false,
-          scrollBehavior: const MaterialScrollBehavior().copyWith(
-            dragDevices: {
-              PointerDeviceKind.mouse,
-              PointerDeviceKind.touch,
-              PointerDeviceKind.stylus,
-              PointerDeviceKind.unknown,
-            },
-          ),
-          key: NavigationService.navigatorKey,
-          // scaffoldMessengerKey: NavigationService.snackbarKey,
-          theme: myTheme,
-          routerConfig: _router,
-        ));
-  }
+  runApp(const SyncrowApp());
 }

lib/main_dev.dart

@@ -1,22 +1,9 @@
 import 'package:firebase_core/firebase_core.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
-import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/firebase_options.dart';
-import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
-import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
-import 'package:syncrow_web/pages/home/bloc/home_event.dart';
-import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
-import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
-import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_bloc.dart';
 import 'package:syncrow_web/services/locator.dart';
-import 'package:syncrow_web/utils/app_routes.dart';
-import 'package:syncrow_web/utils/constants/routes_const.dart';
-import 'package:syncrow_web/utils/navigation_service.dart';
-import 'package:syncrow_web/utils/theme/theme.dart';
+import 'package:syncrow_web/syncrow_app.dart';
 
 Future<void> main() async {
   try {
@@ -33,59 +20,5 @@ Future<void> main() async {
     );
     initialSetup();
   } catch (_) {}
-  runApp(MyApp());
-}
-
-class MyApp extends StatelessWidget {
-  MyApp({super.key});
-
-  final GoRouter _router = GoRouter(
-    initialLocation: RoutesConst.auth,
-    routes: AppRoutes.getRoutes(),
-    redirect: (context, state) async {
-      final checkToken = await AuthBloc.getTokenAndValidate();
-      final loggedIn = checkToken == 'Success';
-      final goingToLogin = state.uri.toString() == RoutesConst.auth;
-
-      if (!loggedIn && !goingToLogin) return RoutesConst.auth;
-      if (loggedIn && goingToLogin) return RoutesConst.home;
-
-      return null;
-    },
-  );
-
-  @override
-  Widget build(BuildContext context) {
-    return MultiBlocProvider(
-        providers: [
-          BlocProvider<CreateRoutineBloc>(
-            create: (context) => CreateRoutineBloc(),
-          ),
-          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
-          BlocProvider<VisitorPasswordBloc>(
-            create: (context) => VisitorPasswordBloc(),
-          ),
-          BlocProvider<RoutineBloc>(
-            create: (context) => RoutineBloc(),
-          ),
-          BlocProvider<SpaceTreeBloc>(
-            create: (context) => SpaceTreeBloc(),
-          ),
-        ],
-        child: MaterialApp.router(
-          debugShowCheckedModeBanner: false,
-          scrollBehavior: const MaterialScrollBehavior().copyWith(
-            dragDevices: {
-              PointerDeviceKind.mouse,
-              PointerDeviceKind.touch,
-              PointerDeviceKind.stylus,
-              PointerDeviceKind.unknown,
-            },
-          ),
-          key: NavigationService.navigatorKey,
-          // scaffoldMessengerKey: NavigationService.snackbarKey,
-          theme: myTheme,
-          routerConfig: _router,
-        ));
-  }
+  runApp(const SyncrowApp());
 }

lib/main_staging.dart

@@ -1,26 +1,16 @@
 import 'package:firebase_core/firebase_core.dart';
-import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
-import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/firebase_options.dart';
-import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
-import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
-import 'package:syncrow_web/pages/home/bloc/home_event.dart';
-import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
-import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
-import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_bloc.dart';
 import 'package:syncrow_web/services/locator.dart';
-import 'package:syncrow_web/utils/app_routes.dart';
-import 'package:syncrow_web/utils/constants/routes_const.dart';
-import 'package:syncrow_web/utils/navigation_service.dart';
-import 'package:syncrow_web/utils/theme/theme.dart';
+import 'package:syncrow_web/syncrow_app.dart';
 
 Future<void> main() async {
   try {
-    const environment = String.fromEnvironment('FLAVOR', defaultValue: 'staging');
+    const environment = String.fromEnvironment(
+      'FLAVOR',
+      defaultValue: 'staging',
+    );
     await dotenv.load(fileName: '.env.$environment');
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
@@ -30,59 +20,5 @@ Future<void> main() async {
     );
     initialSetup();
   } catch (_) {}
-  runApp(MyApp());
-}
-
-class MyApp extends StatelessWidget {
-  MyApp({super.key});
-
-  final GoRouter _router = GoRouter(
-    initialLocation: RoutesConst.auth,
-    routes: AppRoutes.getRoutes(),
-    redirect: (context, state) async {
-      final checkToken = await AuthBloc.getTokenAndValidate();
-      final loggedIn = checkToken == 'Success';
-      final goingToLogin = state.uri.toString() == RoutesConst.auth;
-
-      if (!loggedIn && !goingToLogin) return RoutesConst.auth;
-      if (loggedIn && goingToLogin) return RoutesConst.home;
-
-      return null;
-    },
-  );
-
-  @override
-  Widget build(BuildContext context) {
-    return MultiBlocProvider(
-        providers: [
-          BlocProvider<CreateRoutineBloc>(
-            create: (context) => CreateRoutineBloc(),
-          ),
-          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
-          BlocProvider<VisitorPasswordBloc>(
-            create: (context) => VisitorPasswordBloc(),
-          ),
-          BlocProvider<RoutineBloc>(
-            create: (context) => RoutineBloc(),
-          ),
-          BlocProvider<SpaceTreeBloc>(
-            create: (context) => SpaceTreeBloc(),
-          ),
-        ],
-        child: MaterialApp.router(
-          debugShowCheckedModeBanner: false,
-          scrollBehavior: const MaterialScrollBehavior().copyWith(
-            dragDevices: {
-              PointerDeviceKind.mouse,
-              PointerDeviceKind.touch,
-              PointerDeviceKind.stylus,
-              PointerDeviceKind.unknown,
-            },
-          ),
-          key: NavigationService.navigatorKey,
-          // scaffoldMessengerKey: NavigationService.snackbarKey,
-          theme: myTheme,
-          routerConfig: _router,
-        ));
-  }
+  runApp(const SyncrowApp());
 }

lib/pages/access_management/booking_system/presentation/bloc/calendar/events_bloc.dart

@@ -10,7 +10,7 @@ part 'events_event.dart';
 part 'events_state.dart';
 
 class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
-  final EventController eventController = EventController();
+  EventController eventController = EventController();
   final CalendarSystemService calendarService;
 
   CalendarEventsBloc({
@@ -20,7 +20,9 @@ class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
     on<AddEvent>(_onAddEvent);
     on<DisposeResources>(_onDisposeResources);
     on<GoToWeek>(_onGoToWeek);
+    on<ResetEvents>(_onResetEvents);
   }
+
   Future<void> _onLoadEvents(
     LoadEvents event,
     Emitter<CalendarEventState> emit,
@@ -126,4 +128,18 @@ class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
     eventController.dispose();
     return super.close();
   }
+
+  void _onResetEvents(
+    ResetEvents event,
+    Emitter<CalendarEventState> emit,
+  ) {
+    if (calendarService is MemoryCalendarServiceWithRemoteFallback) {
+      (calendarService as MemoryCalendarServiceWithRemoteFallback)
+          .memoryService
+          .clear();
+    }
+    eventController.dispose();
+    eventController = EventController();
+    emit(EventsInitial());
+  }
 }

lib/pages/access_management/booking_system/presentation/bloc/calendar/events_event.dart

@@ -29,3 +29,10 @@ class CheckWeekHasEvents extends CalendarEventsEvent {
   final DateTime weekStart;
   const CheckWeekHasEvents(this.weekStart);
 }
+
+class ResetEvents extends CalendarEventsEvent {
+  const ResetEvents();
+
+  @override
+  List<Object?> get props => [];
+}

lib/pages/access_management/booking_system/presentation/view/booking_page.dart

@@ -26,7 +26,33 @@ class BookingPage extends StatefulWidget {
 }
 
 class _BookingPageState extends State<BookingPage> {
-  late final EventController _eventController;
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(create: (_) => SelectedBookableSpaceBloc()),
+        BlocProvider(create: (_) => DateSelectionBloc()),
+        BlocProvider(
+          create: (_) => CalendarEventsBloc(
+            calendarService: MemoryCalendarServiceWithRemoteFallback(
+              remoteService: RemoteCalendarService(HTTPService()),
+              memoryService: MemoryCalendarService(),
+            ),
+          ),
+        ),
+      ],
+      child: _BookingPageContent(),
+    );
+  }
+}
+
+class _BookingPageContent extends StatefulWidget {
+  @override
+  State<_BookingPageContent> createState() => _BookingPageContentState();
+}
+
+class _BookingPageContentState extends State<_BookingPageContent> {
+  late EventController _eventController;
 
   @override
   void initState() {
@@ -40,7 +66,7 @@ class _BookingPageState extends State<BookingPage> {
     super.dispose();
   }
 
-  void _dispatchLoadEvents(BuildContext context) {
+  void _loadEvents(BuildContext context) {
     final selectedRoom =
         context.read<SelectedBookableSpaceBloc>().state.selectedBookableSpace;
     final dateState = context.read<DateSelectionBloc>().state;
@@ -60,186 +86,168 @@ class _BookingPageState extends State<BookingPage> {
 
   @override
   Widget build(BuildContext context) {
-    return MultiBlocProvider(
-      providers: [
-        BlocProvider(create: (_) => SelectedBookableSpaceBloc()),
-        BlocProvider(create: (_) => DateSelectionBloc()),
-        BlocProvider(
-            create: (_) => CalendarEventsBloc(
-                  calendarService: MemoryCalendarServiceWithRemoteFallback(
-                    remoteService: RemoteCalendarService(
-                      HTTPService(),
-                    ),
-                    memoryService: MemoryCalendarService(),
-                  ),
-                )),
-      ],
-      child: Builder(
-        builder: (context) =>
-            BlocListener<CalendarEventsBloc, CalendarEventState>(
-          listenWhen: (prev, curr) => curr is EventsLoaded,
+    return BlocListener<SelectedBookableSpaceBloc, SelectedBookableSpaceState>(
+      listener: (context, state) {
+        if (state.selectedBookableSpace != null) {
+          context.read<CalendarEventsBloc>().add(const ResetEvents());
+          _loadEvents(context);
+        }
+      },
+      child: BlocListener<DateSelectionBloc, DateSelectionState>(
+        listener: (context, state) {
+          _loadEvents(context);
+        },
+        child: BlocListener<CalendarEventsBloc, CalendarEventState>(
           listener: (context, state) {
             if (state is EventsLoaded) {
               _eventController.removeWhere((_) => true);
               _eventController.addAll(state.events);
             }
           },
-          child: BlocListener<SelectedBookableSpaceBloc,
-              SelectedBookableSpaceState>(
-            listener: (context, state) => _dispatchLoadEvents(context),
-            child: BlocListener<DateSelectionBloc, DateSelectionState>(
-              listener: (context, state) => _dispatchLoadEvents(context),
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Expanded(
-                    child: Container(
-                      decoration: BoxDecoration(
-                        color: ColorsManager.whiteColors,
-                        boxShadow: [
-                          BoxShadow(
-                            color: ColorsManager.blackColor.withOpacity(0.1),
-                            offset: const Offset(3, 0),
-                            blurRadius: 6,
-                            spreadRadius: 0,
-                          ),
-                        ],
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                child: Container(
+                  decoration: BoxDecoration(
+                    color: ColorsManager.whiteColors,
+                    boxShadow: [
+                      BoxShadow(
+                        color: ColorsManager.blackColor.withOpacity(0.1),
+                        offset: const Offset(3, 0),
+                        blurRadius: 6,
+                        spreadRadius: 0,
                       ),
-                      child: Column(
-                        children: [
-                          Expanded(
-                            flex: 2,
-                            child: BlocBuilder<SelectedBookableSpaceBloc,
-                                SelectedBookableSpaceState>(
-                              builder: (context, state) {
-                                return BookingSidebar(
-                                  onRoomSelected: (selectedRoom) {
-                                    context
-                                        .read<SelectedBookableSpaceBloc>()
-                                        .add(SelectBookableSpace(selectedRoom));
-                                  },
-                                );
-                              },
-                            ),
-                          ),
-                          Expanded(
-                            child: BlocBuilder<DateSelectionBloc,
-                                DateSelectionState>(
-                              builder: (context, dateState) {
-                                return CustomCalendarPage(
-                                  selectedDate: dateState.selectedDate,
-                                  onDateChanged: (day, month, year) {
-                                    final newDate = DateTime(year, month, day);
-                                    context
-                                        .read<DateSelectionBloc>()
-                                        .add(SelectDate(newDate));
-                                    context.read<DateSelectionBloc>().add(
-                                        SelectDateFromSidebarCalendar(newDate));
-                                  },
-                                );
-                              },
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
+                    ],
                   ),
-                  Expanded(
-                    flex: 5,
-                    child: Padding(
-                      padding: const EdgeInsets.all(20.0),
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
+                  child: Column(
+                    children: [
+                      Expanded(
+                        flex: 2,
+                        child: BlocBuilder<SelectedBookableSpaceBloc,
+                            SelectedBookableSpaceState>(
+                          builder: (context, state) {
+                            return BookingSidebar(
+                              onRoomSelected: (selectedRoom) {
+                                context
+                                    .read<SelectedBookableSpaceBloc>()
+                                    .add(SelectBookableSpace(selectedRoom));
+                              },
+                            );
+                          },
+                        ),
+                      ),
+                      Expanded(
+                        child:
+                            BlocBuilder<DateSelectionBloc, DateSelectionState>(
+                          builder: (context, dateState) {
+                            return CustomCalendarPage(
+                              selectedDate: dateState.selectedDate,
+                              onDateChanged: (day, month, year) {
+                                final newDate = DateTime(year, month, day);
+                                context
+                                    .read<DateSelectionBloc>()
+                                    .add(SelectDate(newDate));
+                                context.read<DateSelectionBloc>().add(
+                                    SelectDateFromSidebarCalendar(newDate));
+                              },
+                            );
+                          },
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+              Expanded(
+                flex: 5,
+                child: Padding(
+                  padding: const EdgeInsets.all(20.0),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                         children: [
                           Row(
-                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                             children: [
-                              Row(
-                                children: [
-                                  SvgTextButton(
-                                    svgAsset: Assets.homeIcon,
-                                    label: 'Manage Bookable Spaces',
-                                    onPressed: () {},
-                                  ),
-                                  const SizedBox(width: 20),
-                                  SvgTextButton(
-                                    svgAsset: Assets.groupIcon,
-                                    label: 'Manage Users',
-                                    onPressed: () {},
-                                  ),
-                                ],
+                              SvgTextButton(
+                                svgAsset: Assets.homeIcon,
+                                label: 'Manage Bookable Spaces',
+                                onPressed: () {},
                               ),
-                              BlocBuilder<DateSelectionBloc,
-                                  DateSelectionState>(
-                                builder: (context, state) {
-                                  final weekStart = state.weekStart;
-                                  final weekEnd =
-                                      weekStart.add(const Duration(days: 6));
-                                  return WeekNavigation(
-                                    weekStart: weekStart,
-                                    weekEnd: weekEnd,
-                                    onPreviousWeek: () {
-                                      context
-                                          .read<DateSelectionBloc>()
-                                          .add(PreviousWeek());
-                                    },
-                                    onNextWeek: () {
-                                      context
-                                          .read<DateSelectionBloc>()
-                                          .add(NextWeek());
-                                    },
-                                  );
-                                },
+                              const SizedBox(width: 20),
+                              SvgTextButton(
+                                svgAsset: Assets.groupIcon,
+                                label: 'Manage Users',
+                                onPressed: () {},
                               ),
                             ],
                           ),
-                          Expanded(
-                            flex: 5,
-                            child: BlocBuilder<SelectedBookableSpaceBloc,
-                                SelectedBookableSpaceState>(
-                              builder: (context, roomState) {
-                                final selectedRoom =
-                                    roomState.selectedBookableSpace;
-                                return BlocBuilder<DateSelectionBloc,
-                                    DateSelectionState>(
-                                  builder: (context, dateState) {
-                                    return BlocListener<CalendarEventsBloc,
-                                        CalendarEventState>(
-                                      listenWhen: (prev, curr) =>
-                                          curr is EventsLoaded,
-                                      listener: (context, state) {
-                                        if (state is EventsLoaded) {
-                                          _eventController
-                                              .removeWhere((_) => true);
-                                          _eventController.addAll(state.events);
-                                        }
-                                      },
-                                      child: WeeklyCalendarPage(
-                                        startTime: selectedRoom
-                                            ?.bookableConfig.startTime,
-                                        endTime: selectedRoom
-                                            ?.bookableConfig.endTime,
-                                        weekStart: dateState.weekStart,
-                                        selectedDate: dateState.selectedDate,
-                                        eventController: _eventController,
-                                        selectedDateFromSideBarCalender: context
-                                            .watch<DateSelectionBloc>()
-                                            .state
-                                            .selectedDateFromSideBarCalender,
-                                      ),
+                          BlocBuilder<DateSelectionBloc, DateSelectionState>(
+                            builder: (context, state) {
+                              final weekStart = state.weekStart;
+                              final weekEnd =
+                                  weekStart.add(const Duration(days: 6));
+                              return WeekNavigation(
+                                weekStart: weekStart,
+                                weekEnd: weekEnd,
+                                onPreviousWeek: () {
+                                  context
+                                      .read<DateSelectionBloc>()
+                                      .add(PreviousWeek());
+                                },
+                                onNextWeek: () {
+                                  context
+                                      .read<DateSelectionBloc>()
+                                      .add(NextWeek());
+                                },
+                              );
+                            },
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 20),
+                      Expanded(
+                        flex: 5,
+                        child: BlocBuilder<SelectedBookableSpaceBloc,
+                            SelectedBookableSpaceState>(
+                          builder: (context, roomState) {
+                            final selectedRoom =
+                                roomState.selectedBookableSpace;
+                            return BlocBuilder<DateSelectionBloc,
+                                DateSelectionState>(
+                              builder: (context, dateState) {
+                                return BlocBuilder<CalendarEventsBloc,
+                                    CalendarEventState>(
+                                  builder: (context, eventState) {
+                                    return WeeklyCalendarPage(
+                                      key: ValueKey(
+                                          selectedRoom?.uuid ?? 'no-room'),
+                                      startTime: selectedRoom
+                                          ?.bookableConfig.startTime,
+                                      endTime:
+                                          selectedRoom?.bookableConfig.endTime,
+                                      weekStart: dateState.weekStart,
+                                      selectedDate: dateState.selectedDate,
+                                      eventController: _eventController,
+                                      selectedDateFromSideBarCalender: context
+                                          .watch<DateSelectionBloc>()
+                                          .state
+                                          .selectedDateFromSideBarCalender,
                                     );
                                   },
                                 );
                               },
-                            ),
-                          ),
-                        ],
+                            );
+                          },
+                        ),
                       ),
-                    ),
+                    ],
                   ),
-                ],
+                ),
               ),
-            ),
+            ],
           ),
         ),
       ),

lib/pages/access_management/booking_system/presentation/view/widgets/booking_sidebar.dart

@@ -76,21 +76,29 @@ class __SidebarContentState extends State<_SidebarContent> {
       builder: (context, state) {
         return Column(
           children: [
-            const _SidebarHeader(title: 'Spaces'),
+            Padding(
+              padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
+              child: Container(
+                  decoration: BoxDecoration(
+                    color: ColorsManager.whiteColors,
+                    boxShadow: [
+                      BoxShadow(
+                        color: ColorsManager.blackColor.withOpacity(0.1),
+                        offset: const Offset(0, 4),
+                        blurRadius: 4,
+                        spreadRadius: 0,
+                      ),
+                    ],
+                  ),
+                  child: _SidebarHeader(title: 'Spaces')),
+            ),
             Container(
               decoration: BoxDecoration(
                 color: ColorsManager.whiteColors,
-                borderRadius: BorderRadius.circular(8.0),
                 boxShadow: [
                   BoxShadow(
                     color: ColorsManager.blackColor.withOpacity(0.1),
-                    offset: const Offset(0, -2),
-                    blurRadius: 4,
-                    spreadRadius: 0,
-                  ),
-                  BoxShadow(
-                    color: ColorsManager.blackColor.withOpacity(0.1),
-                    offset: const Offset(0, 2),
+                    offset: const Offset(0, 4),
                     blurRadius: 4,
                     spreadRadius: 0,
                   ),
@@ -220,7 +228,7 @@ class _SidebarHeader extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.all(16.0),
+      padding: const EdgeInsets.all(10.0),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [

lib/pages/access_management/booking_system/presentation/view/widgets/custom_calendar_page.dart

@@ -66,18 +66,28 @@ class _CustomCalendarPageState extends State<CustomCalendarPage> {
       weekdayLabels: const ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
     );
 
-    return CalendarDatePicker2(
-      config: config,
-      value: [_selectedDate],
-      onValueChanged: (dates) {
-        final picked = dates.first;
-        if (picked != null) {
-          setState(() {
-            _selectedDate = picked;
-          });
-          widget.onDateChanged(picked.day, picked.month, picked.year);
-        }
-      },
+    return Container(
+      decoration: const BoxDecoration(
+        border: Border(
+          top: BorderSide(
+            color: ColorsManager.textGray,
+            width: 1.0,
+          ),
+        ),
+      ),
+      child: CalendarDatePicker2(
+        config: config,
+        value: [_selectedDate],
+        onValueChanged: (dates) {
+          final picked = dates.first;
+          if (picked != null) {
+            setState(() {
+              _selectedDate = picked;
+            });
+            widget.onDateChanged(picked.day, picked.month, picked.year);
+          }
+        },
+      ),
     );
   }
 }

lib/pages/access_management/booking_system/presentation/view/widgets/event_tile_widget.dart

@@ -32,15 +32,17 @@ class EventTileWidget extends StatelessWidget {
           return Expanded(
             child: Container(
               width: double.infinity,
-              padding: EdgeInsets.all(5),
+              padding: const EdgeInsets.all(5),
               decoration: BoxDecoration(
                 color: isEventEnded
                     ? ColorsManager.grayColor.withOpacity(0.1)
                     : ColorsManager.blue1.withOpacity(0.1),
                 borderRadius: BorderRadius.circular(6),
-                border: const Border(
+                border: Border(
                   left: BorderSide(
-                    color: ColorsManager.grayColor,
+                    color: isEventEnded
+                        ? ColorsManager.grayColor
+                        : ColorsManager.secondaryColor,
                     width: 4,
                   ),
                 ),

lib/pages/access_management/booking_system/presentation/view/widgets/room_list_item.dart

@@ -21,7 +21,7 @@ class RoomListItem extends StatelessWidget {
       groupValue: isSelected ? room.uuid : null,
       visualDensity: const VisualDensity(vertical: -4),
       onChanged: (value) => onTap(),
-      activeColor: ColorsManager.primaryColor,
+      activeColor: ColorsManager.secondaryColor,
       title: Text(
         room.spaceName,
         maxLines: 2,

lib/pages/access_management/booking_system/presentation/view/widgets/week_day_header.dart

@@ -14,26 +14,33 @@ class WeekDayHeader extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      children: [
-        Text(
-          DateFormat('EEE').format(date).toUpperCase(),
-          style: TextStyle(
-            fontWeight: FontWeight.w400,
-            fontSize: 14,
-            color: isSelectedDay ? Colors.blue : Colors.black,
+    return ColoredBox(
+      color: isSelectedDay
+          ? ColorsManager.secondaryColor.withOpacity(0.1)
+          : Colors.transparent,
+      child: Column(
+        children: [
+          const SizedBox(
+            height: 10,
           ),
-        ),
-        Text(
-          DateFormat('d').format(date),
-          style: TextStyle(
-            fontWeight: FontWeight.w700,
-            fontSize: 20,
-            color:
-                isSelectedDay ? ColorsManager.blue1 : ColorsManager.blackColor,
+          Text(
+            DateFormat('EEE').format(date).toUpperCase(),
+            style: const TextStyle(
+              fontWeight: FontWeight.w400,
+              fontSize: 14,
+              color: ColorsManager.blackColor,
+            ),
           ),
-        ),
-      ],
+          Text(
+            DateFormat('d').format(date),
+            style: const TextStyle(
+              fontWeight: FontWeight.w700,
+              fontSize: 30,
+              color: ColorsManager.blackColor,
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

lib/pages/access_management/booking_system/presentation/view/widgets/week_navigation.dart

@@ -19,6 +19,7 @@ class WeekNavigation extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
+      width: 250,
       padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
       decoration: BoxDecoration(
         color: ColorsManager.circleRolesBackground,
@@ -32,6 +33,8 @@ class WeekNavigation extends StatelessWidget {
         ],
       ),
       child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           IconButton(
             iconSize: 15,
@@ -40,12 +43,16 @@ class WeekNavigation extends StatelessWidget {
             onPressed: onPreviousWeek,
           ),
           const SizedBox(width: 10),
-          Text(
-            _getMonthYearText(weekStart, weekEnd),
-            style: const TextStyle(
-              color: ColorsManager.lightGrayColor,
-              fontSize: 14,
-              fontWeight: FontWeight.w400,
+          SizedBox(
+            width: 120,
+            child: Text(
+              _getMonthYearText(weekStart, weekEnd),
+              style: const TextStyle(
+                color: ColorsManager.lightGrayColor,
+                fontSize: 14,
+                fontWeight: FontWeight.w400,
+              ),
+              textAlign: TextAlign.center,
             ),
           ),
           const SizedBox(width: 10),

lib/pages/access_management/booking_system/presentation/view/widgets/weekly_calendar_page.dart

@@ -24,7 +24,7 @@ class WeeklyCalendarPage extends StatelessWidget {
   });
   static const double timeLineWidth = 65;
   static const int totalDays = 7;
-  static const double dayColumnWidth = 220; 
+  static const double dayColumnWidth = 220;
 
   final double calendarContentWidth =
       timeLineWidth + (totalDays * dayColumnWidth);
@@ -57,13 +57,10 @@ class WeeklyCalendarPage extends StatelessWidget {
       );
     }
 
-  
-
-    const double timeLineWidth = 65;
+    const double timeLineWidth = 90;
 
     return LayoutBuilder(
       builder: (context, constraints) {
-  
         bool isInRange(DateTime date, DateTime start, DateTime end) {
           !date.isBefore(start) && !date.isAfter(end);
           // remove this line and Check if the date is within the range
@@ -100,7 +97,6 @@ class WeeklyCalendarPage extends StatelessWidget {
                               width: width,
                               decoration: BoxDecoration(
                                 color: Colors.orange.withOpacity(0.13),
-                                borderRadius: BorderRadius.circular(8),
                               ),
                             );
                           } else if (isSelected) {
@@ -110,7 +106,6 @@ class WeeklyCalendarPage extends StatelessWidget {
                               decoration: BoxDecoration(
                                 color:
                                     ColorsManager.spaceColor.withOpacity(0.07),
-                                borderRadius: BorderRadius.circular(8),
                               ),
                             );
                           }
@@ -143,7 +138,7 @@ class WeeklyCalendarPage extends StatelessWidget {
                         heightPerMinute: 1.7,
                         showLiveTimeLineInAllDays: false,
                         showVerticalLines: true,
-                        emulateVerticalOffsetBy: -80,
+                        emulateVerticalOffsetBy: -95,
                         startDay: WeekDays.monday,
                         liveTimeIndicatorSettings:
                             const LiveTimeIndicatorSettings(
@@ -161,7 +156,7 @@ class WeeklyCalendarPage extends StatelessWidget {
                         },
                         timeLineWidth: timeLineWidth,
                         weekPageHeaderBuilder: (start, end) => Container(),
-                        weekTitleHeight: 60,
+                        weekTitleHeight: 90,
                         weekNumberBuilder: (firstDayOfWeek) => Padding(
                           padding: const EdgeInsets.only(right: 15, bottom: 10),
                           child: Column(
@@ -208,8 +203,6 @@ class WeeklyCalendarPage extends StatelessWidget {
       },
     );
   }
-
-
 }
 
 bool isSameDay(DateTime d1, DateTime d2) {

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

@@ -53,8 +53,9 @@ class DeviceManagementBloc
         for (var community in spaceBloc.state.selectedCommunities) {
           final spacesList =
               spaceBloc.state.selectedCommunityAndSpaces[community] ?? [];
-          devices.addAll(await DevicesManagementApi()
-              .fetchDevices(projectUuid, spacesId: spacesList));
+          devices.addAll(await DevicesManagementApi().fetchDevices(projectUuid,
+              spacesId: spacesList,
+              communities: spaceBloc.state.selectedCommunities));
         }
       }
 
@@ -158,7 +159,8 @@ class DeviceManagementBloc
     add(FilterDevices(_getFilterFromIndex(_selectedIndex)));
   }
 
-  void _onSelectDevice(SelectDevice event, Emitter<DeviceManagementState> emit) {
+  void _onSelectDevice(
+      SelectDevice event, Emitter<DeviceManagementState> emit) {
     final selectedUuid = event.selectedDevice.uuid;
 
     if (_selectedDevices.any((device) => device.uuid == selectedUuid)) {
@@ -254,7 +256,8 @@ class DeviceManagementBloc
     _onlineCount = _devices.where((device) => device.online == true).length;
     _offlineCount = _devices.where((device) => device.online == false).length;
     _lowBatteryCount = _devices
-        .where((device) => device.batteryLevel != null && device.batteryLevel! < 20)
+        .where((device) =>
+            device.batteryLevel != null && device.batteryLevel! < 20)
         .length;
   }
 
@@ -271,7 +274,8 @@ class DeviceManagementBloc
     }
   }
 
-  void _onSearchDevices(SearchDevices event, Emitter<DeviceManagementState> emit) {
+  void _onSearchDevices(
+      SearchDevices event, Emitter<DeviceManagementState> emit) {
     if ((event.community == null || event.community!.isEmpty) &&
         (event.unitName == null || event.unitName!.isEmpty) &&
         (event.deviceNameOrProductName == null ||
@@ -435,8 +439,8 @@ class DeviceManagementBloc
       final selectedDevices = loaded.selectedDevice?.map((device) {
         if (device.uuid == event.deviceId) {
           return device.copyWith(
-              subspace:
-                  device.subspace?.copyWith(subspaceName: event.newSubSpaceName));
+              subspace: device.subspace
+                  ?.copyWith(subspaceName: event.newSubSpaceName));
         }
         return device;
       }).toList();

lib/pages/device_managment/garage_door/view/garage_door_control_view.dart

@@ -6,6 +6,7 @@ import 'package:syncrow_web/pages/device_managment/garage_door/bloc/garage_door_
 import 'package:syncrow_web/pages/device_managment/garage_door/helper/garage_door_helper.dart';
 import 'package:syncrow_web/pages/device_managment/garage_door/models/garage_door_model.dart';
 import 'package:syncrow_web/pages/device_managment/garage_door/schedule_view/schedule_garage_view.dart';
+import 'package:syncrow_web/pages/device_managment/schedule_device/schedule_widgets/schedual_view.dart';
 import 'package:syncrow_web/pages/device_managment/shared/icon_name_status_container.dart';
 import 'package:syncrow_web/pages/device_managment/shared/table/report_table.dart';
 import 'package:syncrow_web/pages/device_managment/shared/toggle_widget.dart';
@@ -94,11 +95,18 @@ class GarageDoorControlView extends StatelessWidget
                   FetchGarageDoorSchedulesEvent(
                       deviceId: deviceId, category: 'doorcontact_state'),
                 );
-            showDialog(
+
+            showDialog<void>(
                 context: context,
                 builder: (ctx) => BlocProvider.value(
                       value: BlocProvider.of<GarageDoorBloc>(context),
-                      child: BuildGarageDoorScheduleView(status: status),
+                      child: BuildScheduleView(
+                        deviceUuid: deviceId,
+                        category: 'Timer',
+                        code: 'doorcontact_state',
+                        countdownCode: 'Timer',
+                        deviceType: 'GD',
+                      ),
                     ));
           },
           name: 'Scheduling',

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

@@ -287,7 +287,8 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
     try {
       if (state is ScheduleLoaded) {
         Status status = Status(code: '', value: '');
-        if (event.deviceType == 'CUR_2') {
+        if (event.deviceType == 'CUR_2' ||
+            event.deviceType == 'GD' ) {
           status = status.copyWith(
               code: 'control',
               value: event.functionOn == true ? 'open' : 'close');

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

@@ -69,7 +69,7 @@ class CountdownModeButtons extends StatelessWidget {
                               countDownCode: countDownCode),
                         );
                   },
-                  backgroundColor: ColorsManager.primaryColorWithOpacity,
+                  backgroundColor: ColorsManager.secondaryColor,
                   child: const Text('Save'),
                 ),
         ),

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

@@ -63,7 +63,7 @@ class InchingModeButtons extends StatelessWidget {
                           ),
                         );
                   },
-                  backgroundColor: ColorsManager.primaryColor,
+                  backgroundColor: ColorsManager.secondaryColor,
                   child: const Text('Save'),
                 ),
         ),

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

@@ -31,11 +31,12 @@ class BuildScheduleView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (_) => ScheduleBloc(deviceId: deviceUuid,)
+      create: (_) => ScheduleBloc(
+        deviceId: deviceUuid,
+      )
         ..add(ScheduleGetEvent(category: category))
         ..add(ScheduleFetchStatusEvent(
-            deviceId: deviceUuid,
-            countdownCode: countdownCode ?? '')),
+            deviceId: deviceUuid, countdownCode: countdownCode ?? '')),
       child: Dialog(
         backgroundColor: Colors.white,
         insetPadding: const EdgeInsets.all(20),
@@ -56,7 +57,7 @@ class BuildScheduleView extends StatelessWidget {
                       children: [
                         const ScheduleHeader(),
                         const SizedBox(height: 20),
-                        if (deviceType == 'CUR_2')
+                        if (deviceType == 'CUR_2' || deviceType == 'GD')
                           const SizedBox()
                         else
                           ScheduleModeSelector(
@@ -76,8 +77,7 @@ class BuildScheduleView extends StatelessWidget {
                                         category: category,
                                         time: '',
                                         function: Status(
-                                            code: code.toString(),
-                                            value: true),
+                                            code: code.toString(), value: true),
                                         days: [],
                                       ),
                                       isEdit: false,
@@ -96,7 +96,7 @@ class BuildScheduleView extends StatelessWidget {
                               }
                             },
                           ),
-                        if (deviceType != 'CUR_2')
+                        if (deviceType != 'CUR_2'|| deviceType != 'GD')
                           if (state.scheduleMode == ScheduleModes.countdown ||
                               state.scheduleMode == ScheduleModes.inching)
                             CountdownInchingView(

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

@@ -24,12 +24,13 @@ class ScheduleManagementUI extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         SizedBox(
-          width: 170,
+          width: 177,
           height: 40,
           child: DefaultButton(
-            borderColor: ColorsManager.grayColor.withOpacity(0.5),
-            padding: 2,
-            backgroundColor: ColorsManager.graysColor,
+            borderWidth: 4,
+            borderColor: ColorsManager.neutralGray,
+            padding: 8,
+            backgroundColor: ColorsManager.textFieldGreyColor,
             borderRadius: 15,
             onPressed: onAddSchedule,
             child: Row(

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

@@ -39,7 +39,7 @@ class ScheduleModeButtons extends StatelessWidget {
             borderRadius: 8,
             height: 40,
             onPressed: onSave,
-            backgroundColor: ColorsManager.primaryColorWithOpacity,
+            backgroundColor: ColorsManager.secondaryColor,
             child: const Text('Save'),
           ),
         ),

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

@@ -194,7 +194,7 @@ class _ScheduleTableView extends StatelessWidget {
             child: Text(_getSelectedDays(
                 ScheduleModel.parseSelectedDays(schedule.days)))),
         Center(child: Text(formatIsoStringToTime(schedule.time, context))),
-        if (deviceType == 'CUR_2')
+        if (deviceType == 'CUR_2' || deviceType == 'GD')
           Center(
               child: Text(schedule.function.value == true ? 'open' : 'close'))
         else

lib/pages/device_managment/water_heater/helper/add_schedule_dialog_helper.dart

@@ -23,7 +23,7 @@ class ScheduleDialogHelper {
     required String deviceType,
   }) {
     bool temp;
-    if (deviceType == 'CUR_2') {
+    if (deviceType == 'CUR_2' || deviceType == 'GD') {
       temp = schedule!.function.value == 'open' ? true : false;
     } else {
       temp = schedule!.function.value;
@@ -116,7 +116,7 @@ class ScheduleDialogHelper {
                 ScheduleModeButtons(
                   onSave: () {
                     dynamic temp;
-                    if (deviceType == 'CUR_2') {
+                    if (deviceType == 'CUR_2' || deviceType == 'GD') {
                       temp = functionOn! ? 'open' : 'close';
                     } else {
                       temp = functionOn;
@@ -202,18 +202,23 @@ class ScheduleDialogHelper {
         ),
         const SizedBox(width: 10),
         Radio<bool>(
+          activeColor: ColorsManager.secondaryColor,
+          focusColor: ColorsManager.secondaryColor,
           value: true,
           groupValue: isOn,
           onChanged: (val) => onChanged(true),
         ),
-        Text(categor == 'CUR_2' ? 'open' : 'On'),
+        Text(categor == 'CUR_2' || categor == 'GD' ? 'open' : 'On'),
         const SizedBox(width: 10),
         Radio<bool>(
+          activeColor: ColorsManager.secondaryColor,
+          focusColor: ColorsManager.secondaryColor,
+
           value: false,
           groupValue: isOn,
           onChanged: (val) => onChanged(false),
         ),
-        Text(categor == 'CUR_2' ? 'close' : 'Off'),
+        Text(categor == 'CUR_2' || categor == 'GD' ? 'close' : 'Off'),
       ],
     );
   }

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

@@ -937,13 +937,17 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           List<String> spacesList =
               spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
 
-          devices.addAll(await DevicesManagementApi()
-              .fetchDevices(projectUuid, spacesId: spacesList));
+          devices.addAll(await DevicesManagementApi().fetchDevices(
+            projectUuid,
+            spacesId: spacesList,
+            communities: spaceBloc.state.selectedCommunities,
+          ));
         }
       } else {
         devices.addAll(await DevicesManagementApi().fetchDevices(
           projectUuid,
           spacesId: [createRoutineBloc.selectedSpaceId],
+          communities: spaceBloc.state.selectedCommunities,
         ));
       }
 

lib/pages/space_management_v2/main_module/helpers/spaces_recursive_helper.dart

@@ -0,0 +1,71 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+
+abstract final class SpacesRecursiveHelper {
+  const SpacesRecursiveHelper._();
+
+  static List<SpaceModel> recusrivelyUpdate(
+    List<SpaceModel> spaces,
+    SpaceDetailsModel updatedSpace,
+  ) {
+    return spaces.map((space) {
+      final isUpdatedSpace = space.uuid == updatedSpace.uuid;
+      if (isUpdatedSpace) {
+        return space.copyWith(
+          spaceName: updatedSpace.spaceName,
+          icon: updatedSpace.icon,
+        );
+      }
+      final hasChildren = space.children.isNotEmpty;
+      if (hasChildren) {
+        return space.copyWith(
+          children: recusrivelyUpdate(space.children, updatedSpace),
+        );
+      }
+      return space;
+    }).toList();
+  }
+
+  static List<SpaceModel> recusrivelyDelete(
+    List<SpaceModel> spaces,
+    String spaceUuid,
+  ) {
+    final updatedSpaces = spaces.map((space) {
+      if (space.uuid == spaceUuid) return null;
+      if (space.children.isNotEmpty) {
+        return space.copyWith(
+          children: recusrivelyDelete(space.children, spaceUuid),
+        );
+      }
+      return space;
+    }).toList();
+    final nonNullSpaces = updatedSpaces.whereType<SpaceModel>().toList();
+    return nonNullSpaces;
+  }
+
+  static List<SpaceModel> recursivelyInsert({
+    required List<SpaceModel> spaces,
+    required String parentUuid,
+    required SpaceModel newSpace,
+  }) {
+    return spaces.map((space) {
+      final isParentSpace = space.uuid == parentUuid;
+      if (isParentSpace) {
+        return space.copyWith(
+          children: [...space.children, newSpace],
+        );
+      }
+      final hasChildren = space.children.isNotEmpty;
+      if (hasChildren) {
+        return space.copyWith(
+          children: recursivelyInsert(
+            spaces: space.children,
+            parentUuid: parentUuid,
+            newSpace: newSpace,
+          ),
+        );
+      }
+      return space;
+    }).toList();
+  }
+}

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

@@ -5,13 +5,14 @@ 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 Map<String, double> cardWidths;
   final double cardHeight = 90.0;
   final Set<String> highlightedUuids;
 
   SpacesConnectionsArrowPainter({
     required this.connections,
     required this.positions,
+    required this.cardWidths,
     required this.highlightedUuids,
   });
 
@@ -29,19 +30,30 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
 
       final from = positions[connection.from];
       final to = positions[connection.to];
+      final fromWidth = cardWidths[connection.from] ?? 150.0;
+      final toWidth = cardWidths[connection.to] ?? 150.0;
 
       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);
+            Offset(from.dx + fromWidth / 2, from.dy + cardHeight - 10);
+        final endPoint = Offset(to.dx + toWidth / 2, to.dy);
 
         final path = Path()..moveTo(startPoint.dx, startPoint.dy);
 
-        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 20);
-        final controlPoint2 = Offset(endPoint.dx, endPoint.dy - 60);
-
-        path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
-            controlPoint2.dy, endPoint.dx, endPoint.dy);
+        if ((startPoint.dx - endPoint.dx).abs() < 1.0) {
+          path.lineTo(endPoint.dx, endPoint.dy);
+        } else {
+          final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 100);
+          final controlPoint2 = Offset(endPoint.dx, endPoint.dy - 100);
+          path.cubicTo(
+            controlPoint1.dx,
+            controlPoint1.dy,
+            controlPoint2.dx,
+            controlPoint2.dy,
+            endPoint.dx,
+            endPoint.dy,
+          );
+        }
 
         canvas.drawPath(path, paint);
 
@@ -51,7 +63,7 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
               : ColorsManager.blackColor.withValues(alpha: 0.5)
           ..style = PaintingStyle.fill
           ..blendMode = BlendMode.srcIn;
-        canvas.drawCircle(endPoint, 4, circlePaint);
+        canvas.drawCircle(endPoint, 6, circlePaint);
       }
     }
   }

lib/pages/space_management_v2/main_module/views/space_management_page.dart

@@ -10,7 +10,7 @@ import 'package:syncrow_web/pages/space_management_v2/modules/communities/presen
 import 'package:syncrow_web/pages/space_management_v2/modules/products/data/services/remote_products_service.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/presentation/bloc/products_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/remote_space_details_service.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/unique_subspaces_decorator.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/unique_space_details_spaces_decorator_service.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
@@ -49,7 +49,7 @@ class _SpaceManagementPageState extends State<SpaceManagementPage> {
         ),
         BlocProvider(
           create: (context) => SpaceDetailsBloc(
-            UniqueSubspacesDecorator(
+            UniqueSpaceDetailsSpacesDecoratorService(
               RemoteSpaceDetailsService(httpService: HTTPService()),
             ),
           ),

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/helpers/spaces_recursive_helper.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/models/space_reorder_data_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart';
@@ -30,10 +31,11 @@ class CommunityStructureCanvas extends StatefulWidget {
 class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     with SingleTickerProviderStateMixin {
   final Map<String, Offset> _positions = {};
-  final double _cardWidth = 150.0;
+  final Map<String, double> _cardWidths = {};
   final double _cardHeight = 90.0;
   final double _horizontalSpacing = 150.0;
   final double _verticalSpacing = 120.0;
+  static const double _minCardWidth = 150.0;
 
   late final TransformationController _transformationController;
   late final AnimationController _animationController;
@@ -52,6 +54,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
   @override
   void didUpdateWidget(covariant CommunityStructureCanvas oldWidget) {
     super.didUpdateWidget(oldWidget);
+    if (widget.selectedSpace == null) return;
     if (widget.selectedSpace?.uuid != oldWidget.selectedSpace?.uuid) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         if (mounted) {
@@ -68,6 +71,34 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     super.dispose();
   }
 
+  double _calculateCardWidth(String text) {
+    final style = context.textTheme.bodyLarge?.copyWith(
+      fontWeight: FontWeight.bold,
+    );
+    final textPainter = TextPainter(
+      text: TextSpan(text: text, style: style),
+      maxLines: 1,
+      textDirection: TextDirection.ltr,
+    )..layout();
+
+    const iconWidth = 40.0;
+    const horizontalPadding = 10.0;
+    const contentPadding = 10.0;
+    final calculatedWidth =
+        iconWidth + horizontalPadding + textPainter.width + contentPadding;
+
+    return calculatedWidth.clamp(_minCardWidth, double.infinity);
+  }
+
+  void _calculateAllCardWidths(List<SpaceModel> spaces) {
+    for (final space in spaces) {
+      _cardWidths[space.uuid] = _calculateCardWidth(space.spaceName);
+      if (space.children.isNotEmpty) {
+        _calculateAllCardWidths(space.children);
+      }
+    }
+  }
+
   Set<String> _getAllDescendantUuids(SpaceModel space) {
     final uuids = <String>{};
     for (final child in space.children) {
@@ -102,11 +133,12 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     final position = _positions[space.uuid];
     if (position == null) return;
 
+    final cardWidth = _cardWidths[space.uuid] ?? _minCardWidth;
     const scale = 1;
     final viewSize = context.size;
     if (viewSize == null) return;
 
-    final x = -position.dx * scale + (viewSize.width / 2) - (_cardWidth * scale / 2);
+    final x = -position.dx * scale + (viewSize.width / 2) - (cardWidth * scale / 2);
     final y =
         -position.dy * scale + (viewSize.height / 2) - (_cardHeight * scale / 2);
 
@@ -155,13 +187,16 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     Map<int, double> levelXOffset,
   ) {
     for (final space in spaces) {
+      final cardWidth = _cardWidths[space.uuid] ?? _minCardWidth;
       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 lastChildWidth =
+              _cardWidths[space.children.last.uuid] ?? _minCardWidth;
+          childSubtreeWidth = (lastChildPos.dx + lastChildWidth) - firstChildPos.dx;
         }
       }
 
@@ -170,7 +205,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
 
       if (space.children.isNotEmpty) {
         final firstChildPos = _positions[space.children.first.uuid]!;
-        x = firstChildPos.dx + (childSubtreeWidth - _cardWidth) / 2;
+        x = firstChildPos.dx + (childSubtreeWidth - cardWidth) / 2;
       } else {
         x = currentX;
       }
@@ -187,7 +222,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
 
       final y = depth * (_verticalSpacing + _cardHeight);
       _positions[space.uuid] = Offset(x, y);
-      levelXOffset[depth] = x + _cardWidth + _horizontalSpacing;
+      levelXOffset[depth] = x + cardWidth + _horizontalSpacing;
     }
   }
 
@@ -202,8 +237,11 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
 
   List<Widget> _buildTreeWidgets() {
     _positions.clear();
+    _cardWidths.clear();
     final community = widget.community;
 
+    _calculateAllCardWidths(community.spaces);
+
     final levelXOffset = <int, double>{};
     _calculateLayout(community.spaces, 0, levelXOffset);
 
@@ -231,7 +269,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
       Positioned(
         left: createButtonX,
         top: createButtonY,
-        child: CreateSpaceButton(communityUuid: widget.community.uuid),
+        child: CreateSpaceButton(community: widget.community),
       ),
     );
 
@@ -240,6 +278,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
         painter: SpacesConnectionsArrowPainter(
           connections: connections,
           positions: _positions,
+          cardWidths: _cardWidths,
           highlightedUuids: highlightedUuids,
         ),
         child: Stack(alignment: AlignmentDirectional.center, children: widgets),
@@ -271,6 +310,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
         continue;
       }
 
+      final cardWidth = _cardWidths[space.uuid] ?? _minCardWidth;
       final isHighlighted = highlightedUuids.contains(space.uuid);
       final hasNoSelectedSpace = widget.selectedSpace == null;
 
@@ -278,20 +318,29 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
         buildSpaceContainer: () {
           return Opacity(
             opacity: hasNoSelectedSpace || isHighlighted ? 1.0 : 0.5,
-            child: Tooltip(
-              message: space.spaceName,
-              preferBelow: false,
-              child: SpaceCell(
-                onTap: () => _onSpaceTapped(space),
-                icon: space.icon,
-                name: space.spaceName,
-              ),
+            child: SpaceCell(
+              onTap: () => _onSpaceTapped(space),
+              icon: space.icon,
+              name: space.spaceName,
             ),
           );
         },
         onTap: () => SpaceDetailsDialogHelper.showCreate(
           context,
           communityUuid: widget.community.uuid,
+          parentUuid: space.uuid,
+          onSuccess: (updatedSpaceModel) {
+            final updatedSpaces = SpacesRecursiveHelper.recursivelyInsert(
+              spaces: widget.community.spaces,
+              parentUuid: space.uuid,
+              newSpace: updatedSpaceModel,
+            );
+            context.read<CommunitiesBloc>().add(
+                  CommunitiesUpdateCommunity(
+                    widget.community.copyWith(spaces: updatedSpaces),
+                  ),
+                );
+          },
         ),
       );
 
@@ -305,7 +354,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
         Positioned(
           left: position.dx,
           top: position.dy,
-          width: _cardWidth,
+          width: cardWidth,
           height: _cardHeight,
           child: Draggable<SpaceReorderDataModel>(
             data: reorderData,
@@ -314,7 +363,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
               child: Opacity(
                 opacity: 0.2,
                 child: SizedBox(
-                  width: _cardWidth,
+                  width: cardWidth,
                   height: _cardHeight,
                   child: spaceCard,
                 ),
@@ -330,7 +379,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
       );
 
       final targetPos = Offset(
-        position.dx + _cardWidth + (_horizontalSpacing / 4) - 20,
+        position.dx + cardWidth + (_horizontalSpacing / 4) - 20,
         position.dy,
       );
       widgets.add(_buildDropTarget(parent, community, i + 1, targetPos));
@@ -418,17 +467,17 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
   @override
   Widget build(BuildContext context) {
     final treeWidgets = _buildTreeWidgets();
-    return InteractiveViewer(
-      transformationController: _transformationController,
-      boundaryMargin: EdgeInsets.symmetric(
-        horizontal: context.screenWidth * 0.3,
-        vertical: context.screenHeight * 0.3,
-      ),
-      minScale: 0.5,
-      maxScale: 3.0,
-      constrained: false,
-      child: GestureDetector(
-        onTap: _resetSelectionAndZoom,
+    return GestureDetector(
+      onTap: _resetSelectionAndZoom,
+      child: InteractiveViewer(
+        transformationController: _transformationController,
+        boundaryMargin: EdgeInsets.symmetric(
+          horizontal: context.screenWidth * 0.3,
+          vertical: context.screenHeight * 0.3,
+        ),
+        minScale: 0.5,
+        maxScale: 3.0,
+        constrained: false,
         child: SizedBox(
           width: context.screenWidth * 5,
           height: context.screenHeight * 5,

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

@@ -2,41 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.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_structure_header_action_buttons.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/bloc/communities_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_header_action_buttons_composer.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/domain/models/space_details_model.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';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class CommunityStructureHeader extends StatelessWidget {
   const CommunityStructureHeader({super.key});
 
-  List<SpaceModel> _updateRecursive(
-    List<SpaceModel> spaces,
-    SpaceDetailsModel updatedSpace,
-  ) {
-    return spaces.map((space) {
-      if (space.uuid == updatedSpace.uuid) {
-        return space.copyWith(
-          spaceName: updatedSpace.spaceName,
-          icon: updatedSpace.icon,
-        );
-      }
-      if (space.children.isNotEmpty) {
-        return space.copyWith(
-          children: _updateRecursive(space.children, updatedSpace),
-        );
-      }
-      return space;
-    }).toList();
-  }
-
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
     final screenWidth = MediaQuery.of(context).size.width;
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
@@ -44,9 +20,9 @@ class CommunityStructureHeader extends StatelessWidget {
         color: ColorsManager.whiteColors,
         boxShadow: [
           BoxShadow(
-            color: ColorsManager.shadowBlackColor,
-            blurRadius: 8,
-            offset: const Offset(0, 4),
+            color: ColorsManager.shadowBlackColor.withValues(alpha: 0.1),
+            blurRadius: 20,
+            offset: const Offset(0, 1),
           ),
         ],
       ),
@@ -57,7 +33,7 @@ class CommunityStructureHeader extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Expanded(
-                child: _buildCommunityInfo(context, theme, screenWidth),
+                child: _buildCommunityInfo(context, screenWidth),
               ),
               const SizedBox(width: 16),
             ],
@@ -67,8 +43,7 @@ class CommunityStructureHeader extends StatelessWidget {
     );
   }
 
-  Widget _buildCommunityInfo(
-      BuildContext context, ThemeData theme, double screenWidth) {
+  Widget _buildCommunityInfo(BuildContext context, double screenWidth) {
     final selectedCommunity =
         context.watch<CommunitiesTreeSelectionBloc>().state.selectedCommunity;
     final selectedSpace =
@@ -78,7 +53,7 @@ class CommunityStructureHeader extends StatelessWidget {
       children: [
         Text(
           'Community Structure',
-          style: theme.textTheme.headlineLarge?.copyWith(
+          style: context.textTheme.headlineLarge?.copyWith(
             color: ColorsManager.blackColor,
           ),
         ),
@@ -91,7 +66,7 @@ class CommunityStructureHeader extends StatelessWidget {
                     Flexible(
                       child: SelectableText(
                         selectedCommunity.name,
-                        style: theme.textTheme.bodyLarge?.copyWith(
+                        style: context.textTheme.bodyLarge?.copyWith(
                           color: ColorsManager.blackColor,
                         ),
                         maxLines: 1,
@@ -115,27 +90,8 @@ class CommunityStructureHeader extends StatelessWidget {
                 ),
               ),
               const SizedBox(width: 8),
-              CommunityStructureHeaderActionButtons(
-                onDelete: (space) {},
-                onDuplicate: (space) {},
-                onEdit: (space) => SpaceDetailsDialogHelper.showEdit(
-                  context,
-                  spaceModel: selectedSpace!,
-                  communityUuid: selectedCommunity.uuid,
-                  onSuccess: (updatedSpaceDetails) {
-                    final communitiesBloc = context.read<CommunitiesBloc>();
-                    final updatedSpaces = _updateRecursive(
-                      selectedCommunity.spaces,
-                      updatedSpaceDetails,
-                    );
-
-                    final community = selectedCommunity.copyWith(
-                      spaces: updatedSpaces,
-                    );
-
-                    communitiesBloc.add(CommunitiesUpdateCommunity(community));
-                  },
-                ),
+              CommunityStructureHeaderActionButtonsComposer(
+                selectedCommunity: selectedCommunity,
                 selectedSpace: selectedSpace,
               ),
             ],

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

@@ -19,27 +19,27 @@ class CommunityStructureHeaderActionButtons extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    if (selectedSpace == null) return const SizedBox.shrink();
+
     return Wrap(
       alignment: WrapAlignment.end,
       spacing: 10,
       children: [
-        if (selectedSpace != null) ...[
-          CommunityStructureHeaderButton(
-            label: 'Edit',
-            svgAsset: Assets.editSpace,
-            onPressed: () => onEdit(selectedSpace!),
-          ),
-          CommunityStructureHeaderButton(
-            label: 'Duplicate',
-            svgAsset: Assets.duplicate,
-            onPressed: () => onDuplicate(selectedSpace!),
-          ),
-          CommunityStructureHeaderButton(
-            label: 'Delete',
-            svgAsset: Assets.spaceDelete,
-            onPressed: () => onDelete(selectedSpace!),
-          ),
-        ],
+        CommunityStructureHeaderButton(
+          label: 'Edit',
+          svgAsset: Assets.editSpace,
+          onPressed: () => onEdit(selectedSpace!),
+        ),
+        CommunityStructureHeaderButton(
+          label: 'Duplicate',
+          svgAsset: Assets.duplicate,
+          onPressed: () => onDuplicate(selectedSpace!),
+        ),
+        CommunityStructureHeaderButton(
+          label: 'Delete',
+          svgAsset: Assets.spaceDelete,
+          onPressed: () => onDelete(selectedSpace!),
+        ),
       ],
     );
   }

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

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/helpers/spaces_recursive_helper.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_header_action_buttons.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/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/delete_space/presentation/widgets/delete_space_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
+
+class CommunityStructureHeaderActionButtonsComposer extends StatelessWidget {
+  const CommunityStructureHeaderActionButtonsComposer({
+    required this.selectedCommunity,
+    required this.selectedSpace,
+    super.key,
+  });
+  final CommunityModel selectedCommunity;
+  final SpaceModel? selectedSpace;
+
+  @override
+  Widget build(BuildContext context) {
+    return CommunityStructureHeaderActionButtons(
+      onDelete: (space) => showDialog<void>(
+        context: context,
+        barrierDismissible: false,
+        builder: (_) => DeleteSpaceDialog(
+          space: space,
+          community: selectedCommunity,
+          onSuccess: () {
+            final updatedSpaces = SpacesRecursiveHelper.recusrivelyDelete(
+              selectedCommunity.spaces,
+              space.uuid,
+            );
+            final community = selectedCommunity.copyWith(
+              spaces: updatedSpaces,
+            );
+            context.read<CommunitiesBloc>().add(
+                  CommunitiesUpdateCommunity(community),
+                );
+            context.read<CommunitiesTreeSelectionBloc>().add(
+                  SelectCommunityEvent(community: selectedCommunity),
+                );
+          },
+        ),
+      ),
+      onDuplicate: (space) {},
+      onEdit: (space) => SpaceDetailsDialogHelper.showEdit(
+        context,
+        spaceModel: selectedSpace!,
+        communityUuid: selectedCommunity.uuid,
+        onSuccess: (updatedSpaceDetails) {
+          final communitiesBloc = context.read<CommunitiesBloc>();
+          final updatedSpaces = SpacesRecursiveHelper.recusrivelyUpdate(
+            selectedCommunity.spaces,
+            updatedSpaceDetails,
+          );
+
+          final community = selectedCommunity.copyWith(
+            spaces: updatedSpaces,
+          );
+
+          communitiesBloc.add(CommunitiesUpdateCommunity(community));
+        },
+      ),
+      selectedSpace: selectedSpace,
+    );
+  }
+}

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

@@ -1,14 +1,18 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.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/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/space_details/presentation/helpers/space_details_dialog_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class CreateSpaceButton extends StatefulWidget {
   const CreateSpaceButton({
-    required this.communityUuid,
+    required this.community,
     super.key,
   });
 
-  final String communityUuid;
+  final CommunityModel community;
 
   @override
   State<CreateSpaceButton> createState() => _CreateSpaceButtonState();
@@ -25,7 +29,21 @@ class _CreateSpaceButtonState extends State<CreateSpaceButton> {
       child: InkWell(
         onTap: () => SpaceDetailsDialogHelper.showCreate(
           context,
-          communityUuid: widget.communityUuid,
+          communityUuid: widget.community.uuid,
+          onSuccess: (updatedSpaceModel) {
+            final newCommunity = widget.community.copyWith(
+              spaces: [...widget.community.spaces, updatedSpaceModel],
+            );
+            context.read<CommunitiesBloc>().add(
+                  CommunitiesUpdateCommunity(newCommunity),
+                );
+            context.read<CommunitiesTreeSelectionBloc>().add(
+                  SelectSpaceEvent(
+                    space: updatedSpaceModel,
+                    community: newCommunity,
+                  ),
+                );
+          },
         ),
         child: MouseRegion(
           onEnter: (_) => setState(() => _isHovered = true),

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

@@ -2,31 +2,22 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class PlusButtonWidget extends StatelessWidget {
-  final Offset offset;
-  final void Function() onButtonTap;
+  final void Function() onTap;
 
   const PlusButtonWidget({
+    required this.onTap,
     super.key,
-    required this.offset,
-    required this.onButtonTap,
   });
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: onButtonTap,
-      child: Container(
-        width: 30,
-        height: 30,
-        decoration: const BoxDecoration(
-          color: ColorsManager.spaceColor,
-          shape: BoxShape.circle,
-        ),
-        child: const Icon(
-          Icons.add,
-          color: ColorsManager.whiteColors,
-          size: 20,
-        ),
+    return IconButton.filled(
+      onPressed: onTap,
+      style: IconButton.styleFrom(backgroundColor: ColorsManager.spaceColor),
+      icon: const Icon(
+        Icons.add,
+        color: ColorsManager.whiteColors,
+        size: 20,
       ),
     );
   }

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

@@ -29,10 +29,9 @@ class _SpaceCardWidgetState extends State<SpaceCardWidget> {
           widget.buildSpaceContainer(),
           if (isHovered)
             Positioned(
-              bottom: 0,
+              bottom: -5,
               child: PlusButtonWidget(
-                offset: Offset.zero,
-                onButtonTap: widget.onTap,
+                onTap: widget.onTap,
               ),
             ),
         ],

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

@@ -20,21 +20,19 @@ class SpaceCell extends StatelessWidget {
     return InkWell(
       onTap: onTap,
       child: Container(
-        width: 150,
+        padding: const EdgeInsetsDirectional.only(end: 10),
         height: 70,
         decoration: _containerDecoration(),
         child: Row(
+          spacing: 10,
+          mainAxisSize: MainAxisSize.min,
           children: [
             _buildIconContainer(),
-            const SizedBox(width: 10),
-            Expanded(
-              child: Text(
-                name,
-                style: context.textTheme.bodyLarge?.copyWith(
-                  fontWeight: FontWeight.bold,
-                  color: ColorsManager.blackColor,
-                ),
-                overflow: TextOverflow.ellipsis,
+            Text(
+              name,
+              style: context.textTheme.bodyLarge?.copyWith(
+                fontWeight: FontWeight.bold,
+                color: ColorsManager.blackColor,
               ),
             ),
           ],

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

@@ -3,6 +3,9 @@ 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/community_structure_header.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/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/bloc/communities_bloc.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 {
@@ -10,31 +13,59 @@ class SpaceManagementCommunityStructure extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final selectionBloc = context.watch<CommunitiesTreeSelectionBloc>().state;
-    final selectedCommunity = selectionBloc.selectedCommunity;
-    final selectedSpace = selectionBloc.selectedSpace;
+    return BlocBuilder<CommunitiesTreeSelectionBloc, CommunitiesTreeSelectionState>(
+      builder: (context, state) {
+        final selectedCommunity = state.selectedCommunity;
+        final selectedSpace = state.selectedSpace;
+
+        if (selectedCommunity == null) {
+          return const SizedBox.shrink();
+        }
+
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const CommunityStructureHeader(),
+            BlocBuilder<CommunitiesBloc, CommunitiesState>(
+              builder: (context, state) {
+                final community = state.communities.firstWhere(
+                  (element) => element.uuid == selectedCommunity.uuid,
+                  orElse: () => selectedCommunity,
+                );
+                return Visibility(
+                  visible: community.spaces.isNotEmpty,
+                  replacement: _buildEmptyWidget(community),
+                  child: _buildCanvas(community, selectedSpace),
+                );
+              },
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildCanvas(
+    CommunityModel selectedCommunity,
+    SpaceModel? selectedSpace,
+  ) {
+    return Expanded(
+      child: CommunityStructureCanvas(
+        community: selectedCommunity,
+        selectedSpace: selectedSpace,
+      ),
+    );
+  }
+
+  Widget _buildEmptyWidget(CommunityModel selectedCommunity) {
     const spacer = Spacer(flex: 6);
-    return Visibility(
-      visible: selectedCommunity!.spaces.isNotEmpty,
-      replacement: Row(
+
+    return Expanded(
+      child: Row(
         children: [
           spacer,
-          Expanded(
-            child: CreateSpaceButton(communityUuid: selectedCommunity.uuid),
-          ),
-          spacer
-        ],
-      ),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          const CommunityStructureHeader(),
-          Expanded(
-            child: CommunityStructureCanvas(
-              community: selectedCommunity,
-              selectedSpace: selectedSpace,
-            ),
-          ),
+          Expanded(child: CreateSpaceButton(community: selectedCommunity)),
+          spacer,
         ],
       ),
     );

lib/pages/space_management_v2/modules/create_space/data/services/remote_create_space_service.dart

@@ -0,0 +1,63 @@
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.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/create_space/domain/params/create_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_space/domain/services/create_space_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+final class RemoteCreateSpaceService implements CreateSpaceService {
+  const RemoteCreateSpaceService(this._httpService);
+
+  final HTTPService _httpService;
+
+  static const _defaultErrorMessage = 'Failed to create space';
+
+  @override
+  Future<SpaceModel> createSpace(CreateSpaceParam param) async {
+    try {
+      final path = await _makeUrl(param);
+      final response = await _httpService.post(
+        path: path,
+        body: param.toJson(),
+        expectedResponseModel: (data) {
+          final response = data as Map<String, dynamic>;
+          final isSuccess = response['success'] as bool;
+          if (!isSuccess) {
+            throw APIException(response['error'] as String);
+          }
+
+          return SpaceModel.fromJson(response['data'] as Map<String, dynamic>);
+        },
+      );
+
+      return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [
+        _defaultErrorMessage,
+        errorMessage,
+      ].join(': ');
+      throw APIException(formattedErrorMessage);
+    } catch (e) {
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
+    }
+  }
+
+  Future<String> _makeUrl(CreateSpaceParam param) async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null || projectUuid.isEmpty) {
+      throw APIException('Project UUID is not set');
+    }
+
+    final communityUuid = param.communityUuid;
+    if (communityUuid.isEmpty) {
+      throw APIException('Community UUID is not set');
+    }
+
+    return '/projects/$projectUuid/communities/$communityUuid/spaces';
+  }
+}

lib/pages/space_management_v2/modules/create_space/domain/params/create_space_param.dart

@@ -0,0 +1,22 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+
+class CreateSpaceParam {
+  final String communityUuid;
+  final SpaceDetailsModel space;
+  final String? parentUuid;
+
+  const CreateSpaceParam({
+    required this.communityUuid,
+    required this.space,
+    required this.parentUuid,
+  });
+
+  Map<String, dynamic> toJson() {
+    return {
+      'parentUuid': parentUuid,
+      ...space.toJson(),
+      'x': 0,
+      'y': 0,
+    };
+  }
+}

lib/pages/space_management_v2/modules/create_space/domain/services/create_space_service.dart

@@ -0,0 +1,6 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_space/domain/params/create_space_param.dart';
+
+abstract interface class CreateSpaceService {
+  Future<SpaceModel> createSpace(CreateSpaceParam param);
+}

lib/pages/space_management_v2/modules/create_space/presentation/bloc/create_space_bloc.dart

@@ -0,0 +1,34 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.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/create_space/domain/params/create_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_space/domain/services/create_space_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+
+part 'create_space_event.dart';
+part 'create_space_state.dart';
+
+class CreateSpaceBloc extends Bloc<CreateSpaceEvent, CreateSpaceState> {
+  CreateSpaceBloc(
+    this._createSpaceService,
+  ) : super(const CreateSpaceInitial()) {
+    on<CreateSpace>(_onCreateSpace);
+  }
+
+  final CreateSpaceService _createSpaceService;
+
+  Future<void> _onCreateSpace(
+    CreateSpace event,
+    Emitter<CreateSpaceState> emit,
+  ) async {
+    emit(const CreateSpaceLoading());
+    try {
+      final result = await _createSpaceService.createSpace(event.param);
+      emit(CreateSpaceSuccess(result));
+    } on APIException catch (e) {
+      emit(CreateSpaceFailure(e.message));
+    } catch (e) {
+      emit(CreateSpaceFailure(e.toString()));
+    }
+  }
+}

lib/pages/space_management_v2/modules/create_space/presentation/bloc/create_space_event.dart

@@ -0,0 +1,17 @@
+part of 'create_space_bloc.dart';
+
+sealed class CreateSpaceEvent extends Equatable {
+  const CreateSpaceEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class CreateSpace extends CreateSpaceEvent {
+  const CreateSpace(this.param);
+
+  final CreateSpaceParam param;
+
+  @override
+  List<Object> get props => [param];
+}

lib/pages/space_management_v2/modules/create_space/presentation/bloc/create_space_state.dart

@@ -0,0 +1,31 @@
+part of 'create_space_bloc.dart';
+
+sealed class CreateSpaceState extends Equatable {
+  const CreateSpaceState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class CreateSpaceInitial extends CreateSpaceState {
+  const CreateSpaceInitial();
+}
+
+final class CreateSpaceLoading extends CreateSpaceState {
+  const CreateSpaceLoading();
+}
+
+final class CreateSpaceSuccess extends CreateSpaceState {
+  const CreateSpaceSuccess(this.space);
+
+  final SpaceModel space;
+
+  @override
+  List<Object> get props => [space];
+}
+
+final class CreateSpaceFailure extends CreateSpaceState {
+  const CreateSpaceFailure(this.errorMessage);
+
+  final String errorMessage;
+}

lib/pages/space_management_v2/modules/delete_space/data/remote_delete_space_service.dart

@@ -0,0 +1,64 @@
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/domain/params/delete_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/domain/services/delete_space_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/constants/api_const.dart';
+
+final class RemoteDeleteSpaceService implements DeleteSpaceService {
+  const RemoteDeleteSpaceService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<void> delete(DeleteSpaceParam param) async {
+    try {
+      await _httpService.delete(
+        path: await _makeUrl(param),
+        expectedResponseModel: (json) {
+          final response = json as Map<String, dynamic>;
+          final hasSuccessfullyDeletedSpace = response['success'] as bool? ?? false;
+
+          if (!hasSuccessfullyDeletedSpace) {
+            throw APIException('Failed to delete space');
+          }
+
+          return hasSuccessfullyDeletedSpace;
+        },
+      );
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      throw APIException(_getErrorMessageFromBody(message));
+    } catch (e) {
+      throw APIException(e.toString());
+    }
+  }
+
+  String _getErrorMessageFromBody(Map<String, dynamic>? body) {
+    if (body == null) return 'Failed to delete space';
+    final error = body['error'] as Map<String, dynamic>?;
+    final errorMessage = error?['message'] as String? ?? '';
+    return errorMessage;
+  }
+
+  Future<String> _makeUrl(DeleteSpaceParam param) async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null) {
+      throw APIException('Project UUID is not set');
+    }
+
+    if (param.communityUuid.isEmpty) {
+      throw APIException('Community UUID is not set');
+    }
+
+    if (param.spaceUuid.isEmpty) {
+      throw APIException('Space UUID is not set');
+    }
+
+    return ApiEndpoints.deleteSpace
+        .replaceAll('{projectId}', projectUuid)
+        .replaceAll('{communityId}', param.communityUuid)
+        .replaceAll('{spaceId}', param.spaceUuid);
+  }
+}

lib/pages/space_management_v2/modules/delete_space/domain/params/delete_space_param.dart

@@ -0,0 +1,9 @@
+class DeleteSpaceParam {
+  const DeleteSpaceParam({
+    required this.spaceUuid,
+    required this.communityUuid,
+  });
+
+  final String spaceUuid;
+  final String communityUuid;
+}

lib/pages/space_management_v2/modules/delete_space/domain/services/delete_space_service.dart

@@ -0,0 +1,5 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/domain/params/delete_space_param.dart';
+
+abstract interface class DeleteSpaceService {
+  Future<void> delete(DeleteSpaceParam param);
+}

lib/pages/space_management_v2/modules/delete_space/presentation/bloc/delete_space_bloc.dart

@@ -0,0 +1,31 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/domain/params/delete_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/domain/services/delete_space_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+
+part 'delete_space_event.dart';
+part 'delete_space_state.dart';
+
+class DeleteSpaceBloc extends Bloc<DeleteSpaceEvent, DeleteSpaceState> {
+  DeleteSpaceBloc(this._deleteSpaceService) : super(DeleteSpaceInitial()) {
+    on<DeleteSpace>(_onDeleteSpace);
+  }
+
+  final DeleteSpaceService _deleteSpaceService;
+
+  Future<void> _onDeleteSpace(
+    DeleteSpace event,
+    Emitter<DeleteSpaceState> emit,
+  ) async {
+    emit(DeleteSpaceLoading());
+    try {
+      await _deleteSpaceService.delete(event.param);
+      emit(const DeleteSpaceSuccess('Space deleted successfully'));
+    } on APIException catch (e) {
+      emit(DeleteSpaceFailure(e.message));
+    } catch (e) {
+      emit(DeleteSpaceFailure(e.toString()));
+    }
+  }
+}

lib/pages/space_management_v2/modules/delete_space/presentation/bloc/delete_space_event.dart

@@ -0,0 +1,17 @@
+part of 'delete_space_bloc.dart';
+
+sealed class DeleteSpaceEvent extends Equatable {
+  const DeleteSpaceEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class DeleteSpace extends DeleteSpaceEvent {
+  const DeleteSpace(this.param);
+
+  final DeleteSpaceParam param;
+
+  @override
+  List<Object> get props => [param];
+}

lib/pages/space_management_v2/modules/delete_space/presentation/bloc/delete_space_state.dart

@@ -0,0 +1,30 @@
+part of 'delete_space_bloc.dart';
+
+sealed class DeleteSpaceState extends Equatable {
+  const DeleteSpaceState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class DeleteSpaceInitial extends DeleteSpaceState {}
+
+final class DeleteSpaceLoading extends DeleteSpaceState {}
+
+final class DeleteSpaceSuccess extends DeleteSpaceState {
+  const DeleteSpaceSuccess(this.successMessage);
+
+  final String successMessage;
+
+  @override
+  List<Object> get props => [successMessage];
+}
+
+final class DeleteSpaceFailure extends DeleteSpaceState {
+  const DeleteSpaceFailure(this.errorMessage);
+
+  final String errorMessage;
+
+  @override
+  List<Object> get props => [errorMessage];
+}

lib/pages/space_management_v2/modules/delete_space/presentation/widgets/delete_space_dialog.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.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/delete_space/data/remote_delete_space_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/presentation/bloc/delete_space_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/presentation/widgets/delete_space_dialog_form.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/presentation/widgets/delete_space_loading_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/presentation/widgets/delete_space_status_widget.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class DeleteSpaceDialog extends StatelessWidget {
+  const DeleteSpaceDialog({
+    required this.space,
+    required this.community,
+    required this.onSuccess,
+    super.key,
+  });
+
+  final SpaceModel space;
+  final CommunityModel community;
+  final void Function() onSuccess;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => DeleteSpaceBloc(
+        RemoteDeleteSpaceService(HTTPService()),
+      ),
+      child: Builder(
+        builder: (context) => Dialog(
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+          child: Container(
+            padding: const EdgeInsetsDirectional.all(32),
+            constraints: BoxConstraints(
+              maxWidth: context.screenWidth * 0.2,
+            ),
+            child: BlocConsumer<DeleteSpaceBloc, DeleteSpaceState>(
+              listener: (context, state) {
+                if (state case DeleteSpaceSuccess()) onSuccess();
+              },
+              builder: (context, state) => switch (state) {
+                DeleteSpaceInitial() => DeleteSpaceDialogForm(
+                    space: space,
+                    communityUuid: community.uuid,
+                  ),
+                DeleteSpaceLoading() => const DeleteSpaceLoadingWidget(),
+                DeleteSpaceSuccess() => DeleteSpaceStatusWidget(
+                    message: state.successMessage,
+                    icon: const Icon(
+                      Icons.check_circle,
+                      size: 92,
+                      color: ColorsManager.goodGreen,
+                    ),
+                  ),
+                DeleteSpaceFailure() => DeleteSpaceStatusWidget(
+                    message: state.errorMessage,
+                    icon: const Icon(
+                      Icons.error,
+                      size: 92,
+                      color: ColorsManager.red,
+                    ),
+                  ),
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/delete_space/presentation/widgets/delete_space_dialog_form.dart

@@ -0,0 +1,106 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.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/delete_space/domain/params/delete_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/presentation/bloc/delete_space_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class DeleteSpaceDialogForm extends StatelessWidget {
+  const DeleteSpaceDialogForm({
+    required this.space,
+    required this.communityUuid,
+    super.key,
+  });
+
+  final SpaceModel space;
+  final String communityUuid;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SvgPicture.asset(Assets.xDelete, width: 36, height: 36),
+        const SizedBox(height: 16),
+        SelectableText(
+          'Delete Space',
+          textAlign: TextAlign.center,
+          style: context.textTheme.titleLarge?.copyWith(
+            color: ColorsManager.blackColor,
+            fontWeight: FontWeight.w400,
+            fontSize: 24,
+          ),
+        ),
+        const SizedBox(height: 8),
+        SelectableText(
+          'Are you sure you want to delete this space? This action is irreversible',
+          textAlign: TextAlign.center,
+          style: context.textTheme.bodyLarge?.copyWith(
+            color: ColorsManager.lightGreyColor,
+            fontWeight: FontWeight.w400,
+            fontSize: 14,
+          ),
+        ),
+        const SizedBox(height: 24),
+        Row(
+          children: [
+            Expanded(
+              child: FilledButton(
+                style: _buildButtonStyle(
+                  context,
+                  color: ColorsManager.grey25,
+                  textColor: ColorsManager.blackColor,
+                ),
+                onPressed: Navigator.of(context).pop,
+                child: const Text('Cancel'),
+              ),
+            ),
+            const SizedBox(width: 16),
+            Expanded(
+              child: FilledButton(
+                style: _buildButtonStyle(
+                  context,
+                  color: ColorsManager.semiTransparentRed,
+                  textColor: ColorsManager.whiteColors,
+                ),
+                onPressed: () {
+                  context.read<DeleteSpaceBloc>().add(
+                        DeleteSpace(
+                          DeleteSpaceParam(
+                            spaceUuid: space.uuid,
+                            communityUuid: communityUuid,
+                          ),
+                        ),
+                      );
+                },
+                child: const Text('Delete'),
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  ButtonStyle _buildButtonStyle(
+    BuildContext context, {
+    required Color color,
+    required Color textColor,
+  }) {
+    return FilledButton.styleFrom(
+      padding: const EdgeInsets.symmetric(vertical: 12),
+      backgroundColor: color,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      foregroundColor: textColor,
+      textStyle: context.textTheme.bodyLarge?.copyWith(
+        fontWeight: FontWeight.w400,
+        fontSize: 14,
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/delete_space/presentation/widgets/delete_space_loading_widget.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+
+class DeleteSpaceLoadingWidget extends StatelessWidget {
+  const DeleteSpaceLoadingWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SizedBox.square(
+      dimension: 32,
+      child: Center(child: CircularProgressIndicator()),
+    );
+  }
+}

lib/pages/space_management_v2/modules/delete_space/presentation/widgets/delete_space_status_widget.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class DeleteSpaceStatusWidget extends StatelessWidget {
+  const DeleteSpaceStatusWidget({
+    required this.message,
+    required this.icon,
+    super.key,
+  });
+
+  final String message;
+  final Widget icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      spacing: 16,
+      children: [
+        icon,
+        SelectableText(
+          message,
+          style: context.textTheme.bodyMedium?.copyWith(
+            color: ColorsManager.blackColor,
+            fontSize: 22,
+          ),
+          textAlign: TextAlign.center,
+        ),
+        FilledButton(
+          onPressed: Navigator.of(context).pop,
+          child: const Text('Close'),
+        ),
+      ],
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/data/services/unique_space_details_spaces_decorator_service.dart

@@ -1,24 +1,29 @@
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_space_details_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/services/space_details_service.dart';
 
-class UniqueSubspacesDecorator implements SpaceDetailsService {
+class UniqueSpaceDetailsSpacesDecoratorService implements SpaceDetailsService {
   final SpaceDetailsService _decoratee;
 
-  const UniqueSubspacesDecorator(this._decoratee);
+  const UniqueSpaceDetailsSpacesDecoratorService(this._decoratee);
 
   @override
   Future<SpaceDetailsModel> getSpaceDetails(LoadSpaceDetailsParam param) async {
     final response = await _decoratee.getSpaceDetails(param);
 
     final uniqueSubspaces = <String, Subspace>{};
+    final duplicateNames = <String>{};
 
     for (final subspace in response.subspaces) {
       final normalizedName = subspace.name.trim().toLowerCase();
-      if (!uniqueSubspaces.containsKey(normalizedName)) {
+      if (uniqueSubspaces.containsKey(normalizedName)) {
+        duplicateNames.add(normalizedName);
+      } else {
         uniqueSubspaces[normalizedName] = subspace;
       }
     }
+    duplicateNames.forEach(uniqueSubspaces.remove);
 
     return response.copyWith(
       subspaces: uniqueSubspaces.values.toList(),

lib/pages/space_management_v2/modules/space_details/domain/models/product_allocation.dart

@@ -0,0 +1,47 @@
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
+import 'package:uuid/uuid.dart';
+
+class ProductAllocation extends Equatable {
+  final String uuid;
+  final Product product;
+  final Tag tag;
+
+  const ProductAllocation({
+    required this.uuid,
+    required this.product,
+    required this.tag,
+  });
+
+  factory ProductAllocation.fromJson(Map<String, dynamic> json) {
+    return ProductAllocation(
+      uuid: json['uuid'] as String? ?? const Uuid().v4(),
+      product: Product.fromJson(json['product'] as Map<String, dynamic>),
+      tag: Tag.fromJson(json['tag'] as Map<String, dynamic>),
+    );
+  }
+
+  ProductAllocation copyWith({
+    String? uuid,
+    Product? product,
+    Tag? tag,
+  }) {
+    return ProductAllocation(
+      uuid: uuid ?? this.uuid,
+      product: product ?? this.product,
+      tag: tag ?? this.tag,
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    final isNewTag = tag.uuid.isEmpty;
+    return <String, dynamic>{
+      if (isNewTag) 'tagName': tag.name else 'tagUuid': tag.uuid,
+      'productUuid': product.uuid,
+    };
+  }
+
+  @override
+  List<Object?> get props => [uuid, product, tag];
+}

lib/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart

@@ -1,8 +1,7 @@
 import 'package:equatable/equatable.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/product_allocation.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
-import 'package:uuid/uuid.dart';
 
 class SpaceDetailsModel extends Equatable {
   final String uuid;
@@ -26,6 +25,7 @@ class SpaceDetailsModel extends Equatable {
         productAllocations: [],
         subspaces: [],
       );
+
   factory SpaceDetailsModel.fromJson(Map<String, dynamic> json) {
     return SpaceDetailsModel(
       uuid: json['uuid'] as String,
@@ -56,78 +56,21 @@ class SpaceDetailsModel extends Equatable {
     );
   }
 
-  @override
-  List<Object?> get props => [uuid, spaceName, icon, productAllocations, subspaces];
-}
-
-class ProductAllocation extends Equatable {
-  final String uuid;
-  final Product product;
-  final Tag tag;
-
-  const ProductAllocation({
-    required this.uuid,
-    required this.product,
-    required this.tag,
-  });
-
-  factory ProductAllocation.fromJson(Map<String, dynamic> json) {
-    return ProductAllocation(
-      uuid: json['uuid'] as String? ?? const Uuid().v4(),
-      product: Product.fromJson(json['product'] as Map<String, dynamic>),
-      tag: Tag.fromJson(json['tag'] as Map<String, dynamic>),
-    );
-  }
-
-  ProductAllocation copyWith({
-    String? uuid,
-    Product? product,
-    Tag? tag,
-  }) {
-    return ProductAllocation(
-      uuid: uuid ?? this.uuid,
-      product: product ?? this.product,
-      tag: tag ?? this.tag,
-    );
+  Map<String, dynamic> toJson() {
+    return {
+      'spaceName': spaceName,
+      'icon': icon,
+      'subspaces': subspaces.map((e) => e.toJson()).toList(),
+      'productAllocations': productAllocations.map((e) => e.toJson()).toList(),
+    };
   }
 
   @override
-  List<Object?> get props => [uuid, product, tag];
-}
-
-class Subspace extends Equatable {
-  final String uuid;
-  final String name;
-  final List<ProductAllocation> productAllocations;
-
-  const Subspace({
-    required this.uuid,
-    required this.name,
-    required this.productAllocations,
-  });
-
-  factory Subspace.fromJson(Map<String, dynamic> json) {
-    return Subspace(
-      uuid: json['uuid'] as String,
-      name: json['subspaceName'] as String,
-      productAllocations: (json['productAllocations'] as List)
-          .map((e) => ProductAllocation.fromJson(e as Map<String, dynamic>))
-          .toList(),
-    );
-  }
-
-  Subspace copyWith({
-    String? uuid,
-    String? name,
-    List<ProductAllocation>? productAllocations,
-  }) {
-    return Subspace(
-      uuid: uuid ?? this.uuid,
-      name: name ?? this.name,
-      productAllocations: productAllocations ?? this.productAllocations,
-    );
-  }
-
-  @override
-  List<Object?> get props => [uuid, name, productAllocations];
+  List<Object?> get props => [
+        uuid,
+        spaceName,
+        icon,
+        productAllocations,
+        subspaces,
+      ];
 }

lib/pages/space_management_v2/modules/space_details/domain/models/subspace.dart

@@ -0,0 +1,48 @@
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/product_allocation.dart';
+
+class Subspace extends Equatable {
+  final String uuid;
+  final String name;
+  final List<ProductAllocation> productAllocations;
+
+  const Subspace({
+    required this.uuid,
+    required this.name,
+    required this.productAllocations,
+  });
+
+  factory Subspace.fromJson(Map<String, dynamic> json) {
+    return Subspace(
+      uuid: json['uuid'] as String,
+      name: json['subspaceName'] as String,
+      productAllocations: (json['productAllocations'] as List)
+          .map((e) => ProductAllocation.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    final isNewSubspace = uuid.endsWith('-NewTag');
+    return <String, dynamic>{
+      if (!isNewSubspace) 'uuid': uuid,
+      'subspaceName': name,
+      'productAllocations': productAllocations.map((e) => e.toJson()).toList(),
+    };
+  }
+
+  Subspace copyWith({
+    String? uuid,
+    String? name,
+    List<ProductAllocation>? productAllocations,
+  }) {
+    return Subspace(
+      uuid: uuid ?? this.uuid,
+      name: name ?? this.name,
+      productAllocations: productAllocations ?? this.productAllocations,
+    );
+  }
+
+  @override
+  List<Object?> get props => [uuid, name, productAllocations];
+}

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

@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.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/create_space/data/services/remote_create_space_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_space/domain/params/create_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_space/presentation/bloc/create_space_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/remote_space_details_service.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
@@ -14,6 +17,8 @@ abstract final class SpaceDetailsDialogHelper {
   static void showCreate(
     BuildContext context, {
     required String communityUuid,
+    required void Function(SpaceModel updatedSpaceModel)? onSuccess,
+    String? parentUuid,
   }) {
     showDialog<void>(
       context: context,
@@ -24,14 +29,41 @@ abstract final class SpaceDetailsDialogHelper {
               RemoteSpaceDetailsService(httpService: HTTPService()),
             ),
           ),
+          BlocProvider(
+            create: (context) => CreateSpaceBloc(
+              RemoteCreateSpaceService(HTTPService()),
+            ),
+          ),
         ],
         child: Builder(
-          builder: (context) => SpaceDetailsDialog(
-            context: context,
-            title: const SelectableText('Create Space'),
-            spaceModel: SpaceModel.empty(),
-            onSave: (space) {},
-            communityUuid: communityUuid,
+          builder: (context) => BlocListener<CreateSpaceBloc, CreateSpaceState>(
+            listener: (context, state) => switch (state) {
+              CreateSpaceInitial() => null,
+              CreateSpaceLoading() => _onLoading(context),
+              CreateSpaceSuccess() => _onCreateSuccess(
+                  context,
+                  state.space,
+                  onSuccess,
+                ),
+              CreateSpaceFailure() => _onError(context, state.errorMessage),
+            },
+            child: SpaceDetailsDialog(
+              context: context,
+              title: const SelectableText('Create Space'),
+              spaceModel: SpaceModel.empty(),
+              onSave: (space) {
+                context.read<CreateSpaceBloc>().add(
+                      CreateSpace(
+                        CreateSpaceParam(
+                          communityUuid: communityUuid,
+                          space: space,
+                          parentUuid: parentUuid,
+                        ),
+                      ),
+                    );
+              },
+              communityUuid: communityUuid,
+            ),
           ),
         ),
       ),
@@ -135,4 +167,14 @@ abstract final class SpaceDetailsDialogHelper {
       ),
     );
   }
+
+  static void _onCreateSuccess(
+    BuildContext context,
+    SpaceModel space,
+    void Function(SpaceModel updatedSpaceModel)? onSuccess,
+  ) {
+    Navigator.of(context).pop();
+    Navigator.of(context).pop();
+    onSuccess?.call(space);
+  }
 }

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

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/common/edit_chip.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/button_content_widget.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_sub_spaces_dialog.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/subspace_name_display_widget.dart';

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

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/sub_spaces_input.dart';
 import 'package:uuid/uuid.dart';

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

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/subspace_chip.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';

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

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 

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

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';

lib/pages/space_management_v2/modules/tags/presentation/widgets/add_device_type_widget.dart

@@ -10,7 +10,12 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class AddDeviceTypeWidget extends StatefulWidget {
-  const AddDeviceTypeWidget({super.key});
+  const AddDeviceTypeWidget({
+    super.key,
+    this.initialProducts = const [],
+  });
+
+  final List<Product> initialProducts;
 
   @override
   State<AddDeviceTypeWidget> createState() => _AddDeviceTypeWidgetState();
@@ -18,6 +23,16 @@ class AddDeviceTypeWidget extends StatefulWidget {
 
 class _AddDeviceTypeWidgetState extends State<AddDeviceTypeWidget> {
   final Map<Product, int> _selectedProducts = {};
+  final Map<Product, int> _initialProductCounts = {};
+
+  @override
+  void initState() {
+    super.initState();
+    for (final product in widget.initialProducts) {
+      _initialProductCounts[product] = (_initialProductCounts[product] ?? 0) + 1;
+    }
+    _selectedProducts.addAll(_initialProductCounts);
+  }
 
   void _onIncrement(Product product) {
     setState(() {
@@ -27,8 +42,12 @@ class _AddDeviceTypeWidgetState extends State<AddDeviceTypeWidget> {
 
   void _onDecrement(Product product) {
     setState(() {
-      if ((_selectedProducts[product] ?? 0) > 0) {
-        _selectedProducts[product] = _selectedProducts[product]! - 1;
+      final initialCount = _initialProductCounts[product] ?? 0;
+      final currentCount = _selectedProducts[product] ?? 0;
+      if (currentCount > initialCount) {
+        _selectedProducts[product] = currentCount - 1;
+      } else if (currentCount > 0 && initialCount == 0) {
+        _selectedProducts[product] = currentCount - 1;
         if (_selectedProducts[product] == 0) {
           _selectedProducts.remove(product);
         }
@@ -63,7 +82,22 @@ class _AddDeviceTypeWidgetState extends State<AddDeviceTypeWidget> {
           actions: [
             SpaceDetailsActionButtons(
               onSave: () {
-                final result = _selectedProducts.entries
+                final resultMap = <Product, int>{};
+                resultMap.addAll(_selectedProducts);
+
+                for (final entry in _initialProductCounts.entries) {
+                  final product = entry.key;
+                  final initialCount = entry.value;
+                  final currentCount = resultMap[product] ?? 0;
+
+                  if (currentCount > initialCount) {
+                    resultMap[product] = currentCount - initialCount;
+                  } else {
+                    resultMap.remove(product);
+                  }
+                }
+
+                final result = resultMap.entries
                     .expand((entry) => List.generate(entry.value, (_) => entry.key))
                     .toList();
                 Navigator.of(context).pop(result);

lib/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_dialog.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/product_allocation.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
@@ -205,7 +206,14 @@ class _AssignTagsDialogState extends State<AssignTagsDialog> {
           onCancel: () async {
             final newProducts = await showDialog<List<Product>>(
               context: context,
-              builder: (context) => const AddDeviceTypeWidget(),
+              builder: (context) => AddDeviceTypeWidget(
+                initialProducts: [
+                  ..._space.productAllocations.map((e) => e.product),
+                  ..._space.subspaces
+                      .expand((s) => s.productAllocations)
+                      .map((e) => e.product),
+                ],
+              ),
             );
 
             if (newProducts == null || newProducts.isEmpty) return;

lib/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_table.dart

@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/common/dialog_dropdown.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/product_allocation.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/data/services/remote_tags_service.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/bloc/tags_bloc.dart';

lib/pages/space_management_v2/modules/update_space/data/services/remote_update_space_service.dart

@@ -34,7 +34,7 @@ class RemoteUpdateSpaceService implements UpdateSpaceService {
     } on DioException catch (e) {
       final message = e.response?.data as Map<String, dynamic>?;
       final error = message?['error'] as Map<String, dynamic>?;
-      final errorMessage = error?['error'] as String? ?? '';
+      final errorMessage = error?['message'] as String? ?? '';
       final formattedErrorMessage = [
         _defaultErrorMessage,
         errorMessage,

lib/pages/space_management_v2/modules/update_space/domain/params/update_space_param.dart

@@ -9,34 +9,5 @@ class UpdateSpaceParam {
   final SpaceDetailsModel space;
   final String communityUuid;
 
-  Map<String, dynamic> toJson() {
-    return {
-      'spaceName': space.spaceName,
-      'icon': space.icon,
-      'subspaces': space.subspaces.map((e) => e._toJson()).toList(),
-      'productAllocations':
-          space.productAllocations.map((e) => e._toJson()).toList(),
-    };
-  }
-}
-
-extension _ProductAllocationToJson on ProductAllocation {
-  Map<String, dynamic> _toJson() {
-    final isNewTag = tag.uuid.isEmpty;
-    return <String, dynamic>{
-      if (isNewTag) 'tagName': tag.name else 'tagUuid': tag.uuid,
-      'productUuid': product.uuid,
-    };
-  }
-}
-
-extension _SubspaceToJson on Subspace {
-  Map<String, dynamic> _toJson() {
-    final isNewSubspace = uuid.endsWith('-NewTag');
-    return <String, dynamic>{
-      if (!isNewSubspace) 'uuid': uuid,
-      'subspaceName': name,
-      'productAllocations': productAllocations.map((e) => e._toJson()).toList(),
-    };
-  }
+  Map<String, dynamic> toJson() => space.toJson();
 }

lib/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart

@@ -1,6 +1,8 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/product_allocation.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/subspace.dart';
 
 part 'space_details_model_event.dart';
 

lib/services/devices_mang_api.dart

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

lib/services/locator.dart

@@ -4,9 +4,7 @@ import 'package:syncrow_web/services/api/http_interceptor.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 final GetIt serviceLocator = GetIt.instance;
-//setupLocator() // to search for dependency injection in flutter
-initialSetup() {
+void initialSetup() {
   serviceLocator.registerSingleton<HTTPInterceptor>(HTTPInterceptor());
-  //Base classes
   serviceLocator.registerSingleton<Dio>(HTTPService.setupDioClient());
 }

lib/syncrow_app.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
+import 'package:syncrow_web/pages/home/bloc/home_event.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_bloc.dart';
+import 'package:syncrow_web/utils/app_routes.dart';
+import 'package:syncrow_web/utils/navigation_service.dart';
+import 'package:syncrow_web/utils/theme/theme.dart';
+
+class SyncrowApp extends StatelessWidget {
+  const SyncrowApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider<CreateRoutineBloc>(
+          create: (context) => CreateRoutineBloc(),
+        ),
+        BlocProvider(
+          create: (context) => HomeBloc()..add(const FetchUserInfo()),
+        ),
+        BlocProvider<VisitorPasswordBloc>(
+          create: (context) => VisitorPasswordBloc(),
+        ),
+        BlocProvider<RoutineBloc>(
+          create: (context) => RoutineBloc(),
+        ),
+        BlocProvider<SpaceTreeBloc>(
+          create: (context) => SpaceTreeBloc(),
+        ),
+      ],
+      child: MaterialApp.router(
+        debugShowCheckedModeBanner: false,
+        scrollBehavior: const MaterialScrollBehavior().copyWith(
+          dragDevices: {
+            PointerDeviceKind.mouse,
+            PointerDeviceKind.touch,
+            PointerDeviceKind.stylus,
+            PointerDeviceKind.unknown,
+          },
+        ),
+        key: NavigationService.navigatorKey,
+        theme: myTheme,
+        routerConfig: AppRoutes.router,
+      ),
+    );
+  }
+}

lib/utils/app_routes.dart

@@ -1,17 +1,31 @@
 import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/pages/access_management/view/access_management.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/views/analytics_page.dart';
+import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
 import 'package:syncrow_web/pages/auth/view/login_page.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/view/device_managment_page.dart';
 import 'package:syncrow_web/pages/home/view/home_page.dart';
 import 'package:syncrow_web/pages/roles_and_permission/view/roles_and_permission_page.dart';
-import 'package:syncrow_web/pages/spaces_management/all_spaces/view/spaces_management_page.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/views/space_management_page.dart';
 import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart';
 import 'package:syncrow_web/utils/constants/routes_const.dart';
 
-class AppRoutes {
-  static List<GoRoute> getRoutes() {
-    return [
+abstract final class AppRoutes {
+  const AppRoutes._();
+
+  static final GoRouter router = GoRouter(
+    initialLocation: RoutesConst.auth,
+    redirect: (context, state) async {
+      final checkToken = await AuthBloc.getTokenAndValidate();
+      final loggedIn = checkToken == 'Success';
+      final goingToLogin = state.uri.toString() == RoutesConst.auth;
+
+      if (!loggedIn && !goingToLogin) return RoutesConst.auth;
+      if (loggedIn && goingToLogin) return RoutesConst.home;
+
+      return null;
+    },
+    routes: [
       GoRoute(
         path: RoutesConst.auth,
         builder: (context, state) => const LoginPage(),
@@ -43,6 +57,6 @@ class AppRoutes {
         name: 'analytics',
         builder: (context, state) => const AnalyticsPage(),
       ),
-    ];
-  }
+    ],
+  );
 }

lib/utils/constants/api_const.dart

@@ -140,6 +140,5 @@ abstract class ApiEndpoints {
   static const String saveSchedule = '/schedule/{deviceUuid}';
 
   static const String getBookableSpaces = '/bookable-spaces';
-  static const String getBookings =
-      '/bookings?month={mm}%2F{yyyy}&space={space}';
+  static const String getBookings = '/bookings?month={mm}-{yyyy}&space={space}';
 }

lib/utils/constants/assets.dart

@@ -517,4 +517,5 @@ class Assets {
   static const String emptyRangeOfAqi = 'assets/icons/empty_range_of_aqi.svg';
   static const String homeIcon = 'assets/icons/home_icon.svg';
   static const String groupIcon = 'assets/icons/group_icon.svg';
+  static const String xDelete = 'assets/icons/x_delete.svg';
 }