Uses Inkwell instead of Gesture Detector for canvas widgets.

lib/pages/access_management/booking_system/data/services/remote_calendar_service.dart

@@ -1,170 +0,0 @@
-import 'package:dio/dio.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/domain/models/calendar_event_booking.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/domain/services/calendar_system_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';
-
-class RemoteCalendarService implements CalendarSystemService {
-  const RemoteCalendarService(this._httpService);
-
-  final HTTPService _httpService;
-  static const _defaultErrorMessage = 'Failed to load Calendar';
-
-  @override
-  Future<CalendarEventsResponse> getCalendarEvents({
-    required String spaceId,
-  }) async {
-    try {
-      final response = await _httpService.get(
-        path: ApiEndpoints.getCalendarEvents,
-        queryParameters: {
-          'spaceId': spaceId,
-        },
-        expectedResponseModel: (json) {
-          return CalendarEventsResponse.fromJson(
-            json as Map<String, dynamic>,
-          );
-        },
-      );
-
-      return CalendarEventsResponse.fromJson(response as Map<String, dynamic>);
-    } on DioException catch (e) {
-      final responseData = e.response?.data;
-      if (responseData is Map<String, dynamic>) {
-        final errorMessage = responseData['error']?['message'] as String? ??
-            responseData['message'] as String? ??
-            _defaultErrorMessage;
-        throw APIException(errorMessage);
-      }
-      throw APIException(_defaultErrorMessage);
-    } catch (e) {
-      throw APIException('$_defaultErrorMessage: ${e.toString()}');
-    }
-  }
-}
-
-class FakeRemoteCalendarService implements CalendarSystemService {
-  const FakeRemoteCalendarService(this._httpService, {this.useDummy = false});
-
-  final HTTPService _httpService;
-  final bool useDummy;
-  static const _defaultErrorMessage = 'Failed to load Calendar';
-
-  @override
-  Future<CalendarEventsResponse> getCalendarEvents({
-    required String spaceId,
-  }) async {
-    if (useDummy) {
-      final dummyJson = {
-        'statusCode': 200,
-        'message': 'Successfully fetched all bookings',
-        'data': [
-          {
-            'uuid': 'd4553fa6-a0c9-4f42-81c9-99a13a57bf80',
-            'date': '2025-07-11T10:22:00.626Z',
-            'startTime': '09:00:00',
-            'endTime': '12:00:00',
-            'cost': 10,
-            'user': {
-              'uuid': '784394ff-3197-4c39-9f07-48dc44920b1e',
-              'firstName': 'salsabeel',
-              'lastName': 'abuzaid',
-              'email': 'test@test.com',
-              'companyName': null
-            },
-            'space': {
-              'uuid': '000f4d81-43e4-4ad7-865c-0f8b04b7081e',
-              'spaceName': '2(1)'
-            }
-          },
-          {
-            'uuid': 'e9b27af0-b963-4d98-9657-454c4ba78561',
-            'date': '2025-07-11T10:22:00.626Z',
-            'startTime': '12:00:00',
-            'endTime': '13:00:00',
-            'cost': 10,
-            'user': {
-              'uuid': '784394ff-3197-4c39-9f07-48dc44920b1e',
-              'firstName': 'salsabeel',
-              'lastName': 'abuzaid',
-              'email': 'test@test.com',
-              'companyName': null
-            },
-            'space': {
-              'uuid': '000f4d81-43e4-4ad7-865c-0f8b04b7081e',
-              'spaceName': '2(1)'
-            }
-          },
-          {
-            'uuid': 'e9b27af0-b963-4d98-9657-454c4ba78561',
-            'date': '2025-07-13T10:22:00.626Z',
-            'startTime': '15:30:00',
-            'endTime': '19:00:00',
-            'cost': 20,
-            'user': {
-              'uuid': '784394ff-3197-4c39-9f07-48dc44920b1e',
-              'firstName': 'salsabeel',
-              'lastName': 'abuzaid',
-              'email': 'test@test.com',
-              'companyName': null
-            },
-            'space': {
-              'uuid': '000f4d81-43e4-4ad7-865c-0f8b04b7081e',
-              'spaceName': '2(1)'
-            }
-          }
-        ],
-        'success': true
-      };
-      final response = CalendarEventsResponse.fromJson(dummyJson);
-
-      // Filter events by spaceId
-      final filteredData = response.data.where((event) {
-        return event.space.uuid == spaceId;
-      }).toList();
-      print('Filtering events for spaceId: $spaceId');
-      print('Found ${filteredData.length} matching events');
-      return filteredData.isNotEmpty
-          ? CalendarEventsResponse(
-              statusCode: response.statusCode,
-              message: response.message,
-              data: filteredData,
-              success: response.success,
-            )
-          : CalendarEventsResponse(
-              statusCode: 404,
-              message: 'No events found for spaceId: $spaceId',
-              data: [],
-              success: false,
-            );
-    }
-
-    try {
-      final response = await _httpService.get(
-        path: ApiEndpoints.getCalendarEvents,
-        queryParameters: {
-          'spaceId': spaceId,
-        },
-        expectedResponseModel: (json) {
-          return CalendarEventsResponse.fromJson(
-            json as Map<String, dynamic>,
-          );
-        },
-      );
-
-      return CalendarEventsResponse.fromJson(response as Map<String, dynamic>);
-    } on DioException catch (e) {
-      final responseData = e.response?.data;
-      if (responseData is Map<String, dynamic>) {
-        final errorMessage = responseData['error']?['message'] as String? ??
-            responseData['message'] as String? ??
-            _defaultErrorMessage;
-        throw APIException(errorMessage);
-      }
-      throw APIException(_defaultErrorMessage);
-    } catch (e) {
-      throw APIException('$_defaultErrorMessage: ${e.toString()}');
-    }
-  }
-}

lib/pages/access_management/booking_system/domain/models/calendar_event_booking.dart

@@ -1,134 +0,0 @@
-class CalendarEventBooking {
-  final String uuid;
-  final DateTime date;
-  final String startTime;
-  final String endTime;
-  final int cost;
-  final BookingUser user;
-  final BookingSpace space;
-
-  CalendarEventBooking({
-    required this.uuid,
-    required this.date,
-    required this.startTime,
-    required this.endTime,
-    required this.cost,
-    required this.user,
-    required this.space,
-  });
-
-  factory CalendarEventBooking.fromJson(Map<String, dynamic> json) {
-    return CalendarEventBooking(
-      uuid: json['uuid'] as String? ?? '',
-      date: json['date'] != null
-          ? DateTime.parse(json['date'] as String)
-          : DateTime.now(),
-      startTime: json['startTime'] as String? ?? '',
-      endTime: json['endTime'] as String? ?? '',
-      cost: _parseInt(json['cost']),
-      user: json['user'] != null
-          ? BookingUser.fromJson(json['user'] as Map<String, dynamic>)
-          : BookingUser.empty(),
-      space: json['space'] != null
-          ? BookingSpace.fromJson(json['space'] as Map<String, dynamic>)
-          : BookingSpace.empty(),
-    );
-  }
-
-  static int _parseInt(dynamic value) {
-    if (value is int) return value;
-    if (value is String) return int.tryParse(value) ?? 0;
-    return 0;
-  }
-}
-
-class BookingUser {
-  final String uuid;
-  final String firstName;
-  final String lastName;
-  final String email;
-  final String? companyName;
-
-  BookingUser({
-    required this.uuid,
-    required this.firstName,
-    required this.lastName,
-    required this.email,
-    this.companyName,
-  });
-
-  factory BookingUser.fromJson(Map<String, dynamic> json) {
-    return BookingUser(
-      uuid: json['uuid'] as String? ?? '',
-      firstName: json['firstName'] as String? ?? '',
-      lastName: json['lastName'] as String? ?? '',
-      email: json['email'] as String? ?? '',
-      companyName: json['companyName'] as String?, 
-    );
-  }
-
-  factory BookingUser.empty() {
-    return BookingUser(
-      uuid: '',
-      firstName: '',
-      lastName: '',
-      email: '',
-      companyName: null,
-    );
-  }
-}
-
-class BookingSpace {
-  final String uuid;
-  final String spaceName;
-
-  BookingSpace({
-    required this.uuid,
-    required this.spaceName,
-  });
-
-  factory BookingSpace.fromJson(Map<String, dynamic> json) {
-    return BookingSpace(
-      uuid: json['uuid'] as String? ?? '',
-      spaceName: json['spaceName'] as String? ?? '',
-    );
-  }
-
-  factory BookingSpace.empty() {
-    return BookingSpace(
-      uuid: '',
-      spaceName: '',
-    );
-  }
-}
-
-class CalendarEventsResponse {
-  final int statusCode;
-  final String message;
-  final List<CalendarEventBooking> data;
-  final bool success;
-
-  CalendarEventsResponse({
-    required this.statusCode,
-    required this.message,
-    required this.data,
-    required this.success,
-  });
-
-  factory CalendarEventsResponse.fromJson(Map<String, dynamic> json) {
-    return CalendarEventsResponse(
-      statusCode: _parseInt(json['statusCode']),
-      message: json['message'] as String? ?? '',
-      data: (json['data'] as List? ?? [])
-          .map((e) => CalendarEventBooking.fromJson(e as Map<String, dynamic>))
-          .toList(),
-      success: json['success'] as bool? ?? false,
-    );
-  }
-}
-
-int _parseInt(dynamic value) {
-  if (value is int) return value;
-  if (value is String) return int.tryParse(value) ?? 0;
-  return 0;
-}

lib/pages/access_management/booking_system/domain/services/calendar_system_service.dart

@@ -1,7 +0,0 @@
-import 'package:syncrow_web/pages/access_management/booking_system/domain/models/calendar_event_booking.dart';
-
-abstract class CalendarSystemService {
-  Future<CalendarEventsResponse> getCalendarEvents({
-    required String spaceId,
-  });
-}

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

@@ -2,17 +2,13 @@ import 'dart:async';
 import 'package:bloc/bloc.dart';
 import 'package:calendar_view/calendar_view.dart';
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/domain/models/calendar_event_booking.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/domain/services/calendar_system_service.dart';
-
 part 'events_event.dart';
 part 'events_state.dart';
 
 class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
   final EventController eventController = EventController();
-  final CalendarSystemService calendarService;
 
-  CalendarEventsBloc({required this.calendarService}) : super(EventsInitial()) {
+  CalendarEventsBloc() : super(EventsInitial()) {
     on<LoadEvents>(_onLoadEvents);
     on<AddEvent>(_onAddEvent);
     on<StartTimer>(_onStartTimer);
@@ -26,24 +22,53 @@ class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
   ) async {
     emit(EventsLoading());
     try {
-      final response = await calendarService.getCalendarEvents(
+      final events = _generateDummyEventsForWeek(event.weekStart);
-        spaceId: event.spaceId,
-      );
-      final events =
-          response.data.map<CalendarEventData>(_toCalendarEventData).toList();
       eventController.addAll(events);
-      emit(EventsLoaded(events: events));
+      emit(EventsLoaded(
+        events: events,
+        initialDate: event.weekStart,
+        weekDays: _getWeekDays(event.weekStart),
+      ));
     } catch (e) {
       emit(EventsError('Failed to load events'));
     }
   }
 
+  List<CalendarEventData> _generateDummyEventsForWeek(DateTime weekStart) {
+    final events = <CalendarEventData>[];
+
+    for (int i = 0; i < 7; i++) {
+      final date = weekStart.add(Duration(days: i));
+
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 9, minute: 0),
+        endTime: date.copyWith(hour: 10, minute: 30),
+        title: 'Team Meeting',
+        description: 'Daily standup',
+        color: Colors.blue,
+      ));
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 14, minute: 0),
+        endTime: date.copyWith(hour: 15, minute: 0),
+        title: 'Client Call',
+        description: 'Project discussion',
+        color: Colors.green,
+      ));
+    }
+
+    return events;
+  }
+
   void _onAddEvent(AddEvent event, Emitter<CalendarEventState> emit) {
     eventController.add(event.event);
     if (state is EventsLoaded) {
       final loaded = state as EventsLoaded;
       emit(EventsLoaded(
         events: [...eventController.events],
+        initialDate: loaded.initialDate,
+        weekDays: loaded.weekDays,
       ));
     }
   }
@@ -61,44 +86,47 @@ class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
       final newWeekDays = _getWeekDays(event.weekDate);
       emit(EventsLoaded(
         events: loaded.events,
+        initialDate: event.weekDate,
+        weekDays: newWeekDays,
       ));
     }
   }
 
-  CalendarEventData _toCalendarEventData(CalendarEventBooking booking) {
+  List<CalendarEventData> _generateDummyEvents() {
-    final date = booking.date;
+    final now = DateTime.now();
-
+    return [
-    final localDate = date.toLocal();
+      CalendarEventData(
-
+        date: now,
-    final startParts = booking.startTime.split(':').map(int.parse).toList();
+        startTime: now.copyWith(hour: 8, minute: 00, second: 0),
-    final endParts = booking.endTime.split(':').map(int.parse).toList();
+        endTime: now.copyWith(hour: 9, minute: 00, second: 0),
-
+        title: 'Team Meeting',
-    final startTime = DateTime(
+        description: 'Weekly team sync',
-      localDate.year,
+        color: Colors.blue,
-      localDate.month,
+      ),
-      localDate.day,
+      CalendarEventData(
-      startParts[0],
+        date: now,
-      startParts[1],
+        startTime: now.copyWith(hour: 9, minute: 00, second: 0),
-    );
+        endTime: now.copyWith(hour: 10, minute: 30, second: 0),
-
+        title: 'Team Meeting',
-    final endTime = DateTime(
+        description: 'Weekly team sync',
-      localDate.year,
+        color: Colors.blue,
-      localDate.month,
+      ),
-      localDate.day,
+      CalendarEventData(
-      endParts[0],
+        date: now.add(const Duration(days: 1)),
-      endParts[1],
+        startTime: now.copyWith(hour: 14, day: now.day + 1),
-    );
+        endTime: now.copyWith(hour: 15, day: now.day + 1),
-
+        title: 'Client Call',
-    return CalendarEventData(
+        description: 'Project discussion',
-      date: startTime, 
+        color: Colors.green,
-      startTime: startTime,
+      ),
-      endTime: endTime,
+      CalendarEventData(
-      title:
+        date: now.add(const Duration(days: 2)),
-          '${booking.space.spaceName} - ${booking.user.firstName} ${booking.user.lastName}',
+        startTime: now.copyWith(hour: 11, day: now.day + 2),
-      description: 'Cost: ${booking.cost}',
+        endTime: now.copyWith(hour: 12, day: now.day + 2),
-      color: Colors.blue,
+        title: 'Lunch with Team',
-      event: booking, 
+        color: Colors.orange,
-    );
+      ),
+    ];
   }
 
   List<DateTime> _getWeekDays(DateTime date) {

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

@@ -6,20 +6,13 @@ abstract class CalendarEventsEvent {
 }
 
 class LoadEvents extends CalendarEventsEvent {
-  final String spaceId;
   final DateTime weekStart;
-  final DateTime weekEnd;
+  const LoadEvents({required this.weekStart});
-
-  const LoadEvents({
-    required this.spaceId,
-    required this.weekStart,
-    required this.weekEnd,
-  });
 }
 
 class AddEvent extends CalendarEventsEvent {
   final CalendarEventData event;
-  const AddEvent(this.event);
+  AddEvent(this.event);
 }
 
 class StartTimer extends CalendarEventsEvent {}
@@ -30,8 +23,3 @@ class GoToWeek extends CalendarEventsEvent {
   final DateTime weekDate;
   GoToWeek(this.weekDate);
 }
-
-class CheckWeekHasEvents extends CalendarEventsEvent {
-  final DateTime weekStart;
-  const CheckWeekHasEvents(this.weekStart);
-}

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

@@ -9,9 +9,13 @@ class EventsLoading extends CalendarEventState {}
 
 class EventsLoaded extends CalendarEventState {
   final List<CalendarEventData> events;
+  final DateTime initialDate;
+  final List<DateTime> weekDays;
 
   EventsLoaded({
     required this.events,
+    required this.initialDate,
+    required this.weekDays,
   });
 }
 

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

@@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:intl/intl.dart';
 import 'package:calendar_view/calendar_view.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/data/services/remote_calendar_service.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/calendar/events_bloc.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart';
@@ -10,9 +9,7 @@ import 'package:syncrow_web/pages/access_management/booking_system/presentation/
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/booking_sidebar.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/custom_calendar_page.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/icon_text_button.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/week_navigation.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/weekly_calendar_page.dart';
-import 'package:syncrow_web/services/api/http_service.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
@@ -38,20 +35,33 @@ class _BookingPageState extends State<BookingPage> {
     super.dispose();
   }
 
-  void _dispatchLoadEvents(BuildContext context) {
+  List<CalendarEventData> _generateDummyEventsForWeek(DateTime weekStart) {
-    final selectedRoom =
+    final List<CalendarEventData> events = [];
-        context.read<SelectedBookableSpaceBloc>().state.selectedBookableSpace;
+    for (int i = 0; i < 7; i++) {
-    final dateState = context.read<DateSelectionBloc>().state;
+      final date = weekStart.add(Duration(days: i));
-
+      events.add(CalendarEventData(
-    if (selectedRoom != null) {
+        date: date,
-      context.read<CalendarEventsBloc>().add(
+        startTime: date.copyWith(hour: 9, minute: 0),
-            LoadEvents(
+        endTime: date.copyWith(hour: 10, minute: 30),
-              spaceId: selectedRoom.uuid,
+        title: 'Team Meeting',
-              weekStart: dateState.weekStart,
+        description: 'Daily standup',
-              weekEnd: dateState.weekStart.add(const Duration(days: 6)),
+        color: Colors.blue,
-            ),
+      ));
-          );
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 14, minute: 0),
+        endTime: date.copyWith(hour: 15, minute: 0),
+        title: 'Client Call',
+        description: 'Project discussion',
+        color: Colors.green,
+      ));
     }
+    return events;
+  }
+
+  void _loadEventsForWeek(DateTime weekStart) {
+    _eventController.removeWhere((_) => true);
+    _eventController.addAll(_generateDummyEventsForWeek(weekStart));
   }
 
   @override
@@ -60,181 +70,197 @@ class _BookingPageState extends State<BookingPage> {
       providers: [
         BlocProvider(create: (_) => SelectedBookableSpaceBloc()),
         BlocProvider(create: (_) => DateSelectionBloc()),
-        BlocProvider(
-          create: (_) => CalendarEventsBloc(
-            calendarService:
-                FakeRemoteCalendarService(HTTPService(), useDummy: true),
-          ),
-        ),
       ],
-      child: Builder(
+      child: BlocListener<DateSelectionBloc, DateSelectionState>(
-        builder: (context) =>
+        listenWhen: (previous, current) =>
-            BlocListener<CalendarEventsBloc, CalendarEventState>(
+            previous.weekStart != current.weekStart,
-          listenWhen: (prev, curr) => curr is EventsLoaded,
+        listener: (context, state) {
-          listener: (context, state) {
+          _loadEventsForWeek(state.weekStart);
-            if (state is EventsLoaded) {
+        },
-              _eventController.removeWhere((_) => true);
+        child: Row(
-              _eventController.addAll(state.events);
+          crossAxisAlignment: CrossAxisAlignment.start,
-            }
+          children: [
-          },
+            Expanded(
-          child: BlocListener<SelectedBookableSpaceBloc,
+              child: Container(
-              SelectedBookableSpaceState>(
+                decoration: BoxDecoration(
-            listener: (context, state) => _dispatchLoadEvents(context),
+                  color: ColorsManager.whiteColors,
-            child: BlocListener<DateSelectionBloc, DateSelectionState>(
+                  boxShadow: [
-              listener: (context, state) => _dispatchLoadEvents(context),
+                    BoxShadow(
-              child: Row(
+                      color: ColorsManager.blackColor.withOpacity(0.1),
-                crossAxisAlignment: CrossAxisAlignment.start,
+                      offset: const Offset(3, 0),
-                children: [
+                      blurRadius: 6,
-                  Expanded(
+                      spreadRadius: 0,
-                    child: Container(
+                    ),
-                      decoration: BoxDecoration(
+                  ],
-                        color: ColorsManager.whiteColors,
+                ),
-                        boxShadow: [
+                child: Column(
-                          BoxShadow(
+                  children: [
-                            color: ColorsManager.blackColor.withOpacity(0.1),
+                    Expanded(
-                            offset: const Offset(3, 0),
+                      flex: 2,
-                            blurRadius: 6,
+                      child: BlocBuilder<SelectedBookableSpaceBloc,
-                            spreadRadius: 0,
+                          SelectedBookableSpaceState>(
-                          ),
+                        builder: (context, state) {
-                        ],
+                          return BookingSidebar(
-                      ),
+                            onRoomSelected: (selectedRoom) {
-                      child: Column(
+                              context
-                        children: [
+                                  .read<SelectedBookableSpaceBloc>()
-                          Expanded(
+                                  .add(SelectBookableSpace(selectedRoom));
-                            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(
-                  Expanded(
+                      child: BlocBuilder<DateSelectionBloc, DateSelectionState>(
-                    flex: 4,
+                        builder: (context, dateState) {
-                    child: Padding(
+                          return CustomCalendarPage(
-                      padding: const EdgeInsets.all(20.0),
+                            selectedDate: dateState.selectedDate,
-                      child: Column(
+                            onDateChanged: (day, month, year) {
-                        crossAxisAlignment: CrossAxisAlignment.start,
+                              final newDate = DateTime(year, month, day);
-                        children: [
+                              context
-                          Row(
+                                  .read<DateSelectionBloc>()
-                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                  .add(SelectDate(newDate));
-                            children: [
+                              context
-                              Row(
+                                  .read<DateSelectionBloc>()
-                                children: [
+                                  .add(SelectDateFromSidebarCalendar(newDate));
-                                  SvgTextButton(
+                            },
-                                    svgAsset: Assets.homeIcon,
+                          );
-                                    label: 'Manage Bookable Spaces',
+                        },
-                                    onPressed: () {},
+                      ),
-                                  ),
+                    ),
-                                  const SizedBox(width: 20),
+                  ],
-                                  SvgTextButton(
+                ),
-                                    svgAsset: Assets.groupIcon,
+              ),
-                                    label: 'Manage Users',
+            ),
-                                    onPressed: () {},
+            Expanded(
+              flex: 4,
+              child: Padding(
+                padding: const EdgeInsets.all(20.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  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: () {},
+                            ),
+                          ],
+                        ),
+                        BlocBuilder<DateSelectionBloc, DateSelectionState>(
+                          builder: (context, state) {
+                            final weekStart = state.weekStart;
+                            final weekEnd =
+                                weekStart.add(const Duration(days: 6));
+                            return Container(
+                              padding: const EdgeInsets.symmetric(
+                                  horizontal: 10, vertical: 5),
+                              decoration: BoxDecoration(
+                                color: ColorsManager.circleRolesBackground,
+                                borderRadius: BorderRadius.circular(10),
+                                boxShadow: const [
+                                  BoxShadow(
+                                    color: ColorsManager.lightGrayColor,
+                                    blurRadius: 4,
+                                    offset: Offset(0, 1),
                                   ),
                                 ],
                               ),
-                              BlocBuilder<DateSelectionBloc,
+                              child: Row(
-                                  DateSelectionState>(
+                                children: [
-                                builder: (context, state) {
+                                  IconButton(
-                                  final weekStart = state.weekStart;
+                                    iconSize: 15,
-                                  final weekEnd =
+                                    icon: const Icon(Icons.arrow_back_ios,
-                                      weekStart.add(const Duration(days: 6));
+                                        color: ColorsManager.lightGrayColor),
-                                  return WeekNavigation(
+                                    onPressed: () {
-                                    weekStart: weekStart,
-                                    weekEnd: weekEnd,
-                                    onPreviousWeek: () {
                                       context
                                           .read<DateSelectionBloc>()
                                           .add(PreviousWeek());
                                     },
-                                    onNextWeek: () {
+                                  ),
+                                  const SizedBox(width: 10),
+                                  Text(
+                                    _getMonthYearText(weekStart, weekEnd),
+                                    style: const TextStyle(
+                                      color: ColorsManager.lightGrayColor,
+                                      fontSize: 14,
+                                      fontWeight: FontWeight.w400,
+                                    ),
+                                  ),
+                                  const SizedBox(width: 10),
+                                  IconButton(
+                                    iconSize: 15,
+                                    icon: const Icon(Icons.arrow_forward_ios,
+                                        color: ColorsManager.lightGrayColor),
+                                    onPressed: () {
                                       context
                                           .read<DateSelectionBloc>()
                                           .add(NextWeek());
                                     },
-                                  );
+                                  ),
-                                },
+                                ],
                               ),
-                            ],
+                            );
-                          ),
+                          },
-                          Expanded(
+                        ),
-                            child: BlocBuilder<SelectedBookableSpaceBloc,
+                      ],
-                                SelectedBookableSpaceState>(
+                    ),
-                              builder: (context, roomState) {
+                    Expanded(
-                                final selectedRoom =
+                      child: BlocBuilder<SelectedBookableSpaceBloc,
-                                    roomState.selectedBookableSpace;
+                          SelectedBookableSpaceState>(
-                                return BlocBuilder<DateSelectionBloc,
+                        builder: (context, roomState) {
-                                    DateSelectionState>(
+                          final selectedRoom = roomState.selectedBookableSpace;
-                                  builder: (context, dateState) {
+                          return BlocBuilder<DateSelectionBloc,
-                                    return BlocListener<CalendarEventsBloc,
+                              DateSelectionState>(
-                                        CalendarEventState>(
+                            builder: (context, dateState) {
-                                      listenWhen: (prev, curr) =>
+                              return WeeklyCalendarPage(
-                                          curr is EventsLoaded,
+                                startTime:
-                                      listener: (context, state) {
+                                    selectedRoom?.bookableConfig.startTime,
-                                        if (state is EventsLoaded) {
+                                endTime: selectedRoom?.bookableConfig.endTime,
-                                          _eventController
+                                weekStart: dateState.weekStart,
-                                              .removeWhere((_) => true);
+                                selectedDate: dateState.selectedDate,
-                                          _eventController.addAll(state.events);
+                                eventController: _eventController,
-                                        }
+                                selectedDateFromSideBarCalender: context
-                                      },
+                                    .watch<DateSelectionBloc>()
-                                      child: WeeklyCalendarPage(
+                                    .state
-                                        startTime: selectedRoom
+                                    .selectedDateFromSideBarCalender,
-                                            ?.bookableConfig.startTime,
+                              );
-                                        endTime: selectedRoom
+                            },
-                                            ?.bookableConfig.endTime,
+                          );
-                                        weekStart: dateState.weekStart,
+                        },
-                                        selectedDate: dateState.selectedDate,
-                                        eventController: _eventController,
-                                        selectedDateFromSideBarCalender: context
-                                            .watch<DateSelectionBloc>()
-                                            .state
-                                            .selectedDateFromSideBarCalender,
-                                      ),
-                                    );
-                                  },
-                                );
-                              },
-                            ),
-                          ),
-                        ],
                       ),
                     ),
-                  ),
+                  ],
-                ],
+                ),
               ),
             ),
-          ),
+          ],
         ),
       ),
     );
   }
+
+  String _getMonthYearText(DateTime start, DateTime end) {
+    final startMonth = DateFormat('MMM').format(start);
+    final endMonth = DateFormat('MMM').format(end);
+    final year = start.year == end.year
+        ? start.year.toString()
+        : '${start.year}-${end.year}';
+
+    if (start.month == end.month) {
+      return '$startMonth $year';
+    } else {
+      return '$startMonth - $endMonth $year';
+    }
+  }
 }

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

@@ -1,60 +0,0 @@
-import 'package:calendar_view/calendar_view.dart';
-import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-
-class EventTileWidget extends StatelessWidget {
-  final List<CalendarEventData<Object?>> events;
-
-  const EventTileWidget({
-    super.key,
-    required this.events,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 2),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: events.map((event) {
-          final bool isEventEnded =
-              event.endTime != null && event.endTime!.isBefore(DateTime.now());
-          return Expanded(
-            child: Container(
-              width: double.infinity,
-              padding: const EdgeInsets.all(6),
-              decoration: BoxDecoration(
-                color: isEventEnded
-                    ? ColorsManager.lightGrayBorderColor
-                    : ColorsManager.blue1.withOpacity(0.25),
-                borderRadius: BorderRadius.circular(6),
-              ),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    DateFormat('h:mm a').format(event.startTime!),
-                    style: const TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 12,
-                      color: Colors.black87,
-                    ),
-                  ),
-                  const SizedBox(height: 2),
-                  Text(
-                    event.title,
-                    style: const TextStyle(
-                      fontSize: 12,
-                      color: ColorsManager.blackColor,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          );
-        }).toList(),
-      ),
-    );
-  }
-}

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

@@ -1,91 +0,0 @@
-import 'package:flutter/material.dart';
-import 'dart:math' as math;
-
-class HatchedColumnBackground extends StatelessWidget {
-  final Color backgroundColor;
-  final Color lineColor;
-  final double opacity;
-  final double stripeSpacing;
-  final BorderRadius? borderRadius;
-
-  const HatchedColumnBackground({
-    super.key,
-    required this.backgroundColor,
-    required this.lineColor,
-    this.opacity = 0.15,
-    this.stripeSpacing = 12,
-    this.borderRadius,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return CustomPaint(
-      painter: _HatchedBackgroundPainter(
-        backgroundColor: backgroundColor,
-        opacity: opacity,
-        lineColor: lineColor,
-        stripeSpacing: stripeSpacing,
-        borderRadius: borderRadius,
-      ),
-      size: Size.infinite,
-    );
-  }
-}
-
-class _HatchedBackgroundPainter extends CustomPainter {
-  final Color backgroundColor;
-  final double opacity;
-  final Color lineColor;
-  final double stripeSpacing;
-  final BorderRadius? borderRadius;
-
-  _HatchedBackgroundPainter({
-    required this.backgroundColor,
-    required this.opacity,
-    required this.lineColor,
-    required this.stripeSpacing,
-    this.borderRadius,
-  });
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
-    final RRect rrect = borderRadius?.toRRect(rect) ??
-        RRect.fromRectAndRadius(rect, Radius.zero);
-    final backgroundPaint = Paint()
-      ..color = backgroundColor.withOpacity(0.02)
-      ..style = PaintingStyle.fill;
-    canvas.drawRRect(rrect, backgroundPaint);
-    canvas.save();
-    canvas.clipRRect(rrect);
-    final linePaint = Paint()
-      ..color = lineColor
-      ..strokeWidth = 0.5
-      ..style = PaintingStyle.stroke;
-    final maxExtent =
-        math.sqrt(size.width * size.width + size.height * size.height);
-
-    canvas.translate(0, size.height);
-    canvas.rotate(-math.pi / 4); 
-    double y = -maxExtent;
-    while (y < maxExtent) {
-      canvas.drawLine(
-        Offset(-maxExtent, y),
-        Offset(maxExtent, y),
-        linePaint,
-      );
-      y += stripeSpacing;
-    }
-
-    canvas.restore();
-  }
-
-  @override
-  bool shouldRepaint(covariant _HatchedBackgroundPainter oldDelegate) {
-    return backgroundColor != oldDelegate.backgroundColor ||
-        opacity != oldDelegate.opacity ||
-        lineColor != oldDelegate.lineColor ||
-        stripeSpacing != oldDelegate.stripeSpacing ||
-        borderRadius != oldDelegate.borderRadius;
-  }
-}

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

@@ -1,49 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-
-class TimeLineWidget extends StatelessWidget {
-  final DateTime date;
-
-  const TimeLineWidget({Key? key, required this.date}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    int hour =
-        date.hour == 0 ? 12 : (date.hour > 12 ? date.hour - 12 : date.hour);
-    String period = date.hour >= 12 ? 'PM' : 'AM';
-    return Container(
-      height: 60,
-      alignment: Alignment.center,
-      child: RichText(
-        text: TextSpan(
-          children: [
-            TextSpan(
-              text: '$hour',
-              style: const TextStyle(
-                fontWeight: FontWeight.w700,
-                fontSize: 24,
-                color: ColorsManager.blackColor,
-              ),
-            ),
-            WidgetSpan(
-              child: Padding(
-                padding: const EdgeInsets.only(left: 2, top: 6),
-                child: Text(
-                  period,
-                  style: const TextStyle(
-                    fontWeight: FontWeight.w400,
-                    fontSize: 12,
-                    color: ColorsManager.blackColor,
-                    letterSpacing: 1,
-                  ),
-                ),
-              ),
-              alignment: PlaceholderAlignment.baseline,
-              baseline: TextBaseline.alphabetic,
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}

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

@@ -1,39 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-
-class WeekDayHeader extends StatelessWidget {
-  final DateTime date;
-  final bool isSelectedDay;
-
-  const WeekDayHeader({
-    Key? key,
-    required this.date,
-    required this.isSelectedDay,
-  }) : super(key: key);
-
-  @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,
-          ),
-        ),
-        Text(
-          DateFormat('d').format(date),
-          style: TextStyle(
-            fontWeight: FontWeight.w700,
-            fontSize: 20,
-            color:
-                isSelectedDay ? ColorsManager.blue1 : ColorsManager.blackColor,
-          ),
-        ),
-      ],
-    );
-  }
-}

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

@@ -1,76 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-
-class WeekNavigation extends StatelessWidget {
-  final DateTime weekStart;
-  final DateTime weekEnd;
-  final VoidCallback onPreviousWeek;
-  final VoidCallback onNextWeek;
-
-  const WeekNavigation({
-    Key? key,
-    required this.weekStart,
-    required this.weekEnd,
-    required this.onPreviousWeek,
-    required this.onNextWeek,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-      decoration: BoxDecoration(
-        color: ColorsManager.circleRolesBackground,
-        borderRadius: BorderRadius.circular(10),
-        boxShadow: const [
-          BoxShadow(
-            color: ColorsManager.lightGrayColor,
-            blurRadius: 4,
-            offset: Offset(0, 1),
-          ),
-        ],
-      ),
-      child: Row(
-        children: [
-          IconButton(
-            iconSize: 15,
-            icon: const Icon(Icons.arrow_back_ios,
-                color: ColorsManager.lightGrayColor),
-            onPressed: onPreviousWeek,
-          ),
-          const SizedBox(width: 10),
-          Text(
-            _getMonthYearText(weekStart, weekEnd),
-            style: const TextStyle(
-              color: ColorsManager.lightGrayColor,
-              fontSize: 14,
-              fontWeight: FontWeight.w400,
-            ),
-          ),
-          const SizedBox(width: 10),
-          IconButton(
-            iconSize: 15,
-            icon: const Icon(Icons.arrow_forward_ios,
-                color: ColorsManager.lightGrayColor),
-            onPressed: onNextWeek,
-          ),
-        ],
-      ),
-    );
-  }
-
-  String _getMonthYearText(DateTime start, DateTime end) {
-    final startMonth = DateFormat('MMM').format(start);
-    final endMonth = DateFormat('MMM').format(end);
-    final year = start.year == end.year
-        ? start.year.toString()
-        : '${start.year}-${end.year}';
-
-    if (start.month == end.month) {
-      return '$startMonth $year';
-    } else {
-      return '$startMonth - $endMonth $year';
-    }
-  }
-}

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

@@ -1,9 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:calendar_view/calendar_view.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/event_tile_widget.dart';
+import 'package:intl/intl.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/hatched_column_background.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/time_line_widget.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/week_day_header.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class WeeklyCalendarPage extends StatelessWidget {
@@ -63,39 +60,18 @@ class WeeklyCalendarPage extends StatelessWidget {
 
     const double timeLineWidth = 80;
     const int totalDays = 7;
-    final DateTime highlightStart = DateTime(2025, 7, 10);
+
-    final DateTime highlightEnd = DateTime(2025, 7, 19);
     return LayoutBuilder(
       builder: (context, constraints) {
         final double calendarWidth = constraints.maxWidth;
         final double dayColumnWidth =
             (calendarWidth - timeLineWidth) / totalDays - 0.1;
-        bool isInRange(DateTime date, DateTime start, DateTime end) {
-          return !date.isBefore(start) && !date.isAfter(end);
-        }
 
         return Padding(
           padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 25),
           child: Stack(
             children: [
               WeekView(
-                weekDetectorBuilder: ({
-                  required date,
-                  required height,
-                  required heightPerMinute,
-                  required minuteSlotSize,
-                  required width,
-                }) {
-                  return isInRange(date, highlightStart, highlightEnd)
-                      ? HatchedColumnBackground(
-                          backgroundColor: ColorsManager.grey800,
-                          lineColor: ColorsManager.textGray,
-                          opacity: 0.3,
-                          stripeSpacing: 12,
-                          borderRadius: BorderRadius.circular(8),
-                        )
-                      : const SizedBox();
-                },
                 pageViewPhysics: const NeverScrollableScrollPhysics(),
                 key: ValueKey(weekStart),
                 controller: eventController,
@@ -112,13 +88,70 @@ class WeeklyCalendarPage extends StatelessWidget {
                   height: 0,
                 ),
                 weekDayBuilder: (date) {
-                  return WeekDayHeader(
+                  final index = weekDays.indexWhere((d) => isSameDay(d, date));
-                    date: date,
+                  final isSelectedDay = index == selectedDayIndex;
-                    isSelectedDay: isSameDay(date, selectedDate),
+                  return Column(
+                    children: [
+                      Text(
+                        DateFormat('EEE').format(date).toUpperCase(),
+                        style: TextStyle(
+                          fontWeight: FontWeight.w400,
+                          fontSize: 14,
+                          color: isSelectedDay ? Colors.blue : Colors.black,
+                        ),
+                      ),
+                      Text(
+                        DateFormat('d').format(date),
+                        style: TextStyle(
+                          fontWeight: FontWeight.w700,
+                          fontSize: 20,
+                          color: isSelectedDay
+                              ? ColorsManager.blue1
+                              : ColorsManager.blackColor,
+                        ),
+                      ),
+                    ],
                   );
                 },
                 timeLineBuilder: (date) {
-                  return TimeLineWidget(date: date);
+                  int hour = date.hour == 0
+                      ? 12
+                      : (date.hour > 12 ? date.hour - 12 : date.hour);
+                  String period = date.hour >= 12 ? 'PM' : 'AM';
+                  return Container(
+                    height: 60,
+                    alignment: Alignment.center,
+                    child: RichText(
+                      text: TextSpan(
+                        children: [
+                          TextSpan(
+                            text: '$hour',
+                            style: const TextStyle(
+                              fontWeight: FontWeight.w700,
+                              fontSize: 24,
+                              color: ColorsManager.blackColor,
+                            ),
+                          ),
+                          WidgetSpan(
+                            child: Padding(
+                              padding: const EdgeInsets.only(left: 2, top: 6),
+                              child: Text(
+                                period,
+                                style: const TextStyle(
+                                  fontWeight: FontWeight.w400,
+                                  fontSize: 12,
+                                  color: ColorsManager.blackColor,
+                                  letterSpacing: 1,
+                                ),
+                              ),
+                            ),
+                            alignment: PlaceholderAlignment.baseline,
+                            baseline: TextBaseline.alphabetic,
+                          ),
+                        ],
+                      ),
+                    ),
+                  );
                 },
                 timeLineWidth: timeLineWidth,
                 weekPageHeaderBuilder: (start, end) => Container(),
@@ -141,8 +174,49 @@ class WeeklyCalendarPage extends StatelessWidget {
                   ),
                 ),
                 eventTileBuilder: (date, events, boundary, start, end) {
-                  return EventTileWidget(
+                  return Container(
-                    events: events,
+                    margin:
+                        const EdgeInsets.symmetric(vertical: 2, horizontal: 2),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: events.map((event) {
+                        final bool isEventEnded = event.endTime != null &&
+                            event.endTime!.isBefore(DateTime.now());
+                        return Expanded(
+                          child: Container(
+                            width: double.infinity,
+                            padding: const EdgeInsets.all(6),
+                            decoration: BoxDecoration(
+                              color: isEventEnded
+                                  ? ColorsManager.lightGrayBorderColor
+                                  : ColorsManager.blue1.withOpacity(0.25),
+                              borderRadius: BorderRadius.circular(6),
+                            ),
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Text(
+                                  DateFormat('h:mm a').format(event.startTime!),
+                                  style: const TextStyle(
+                                    fontWeight: FontWeight.bold,
+                                    fontSize: 12,
+                                    color: Colors.black87,
+                                  ),
+                                ),
+                                const SizedBox(height: 2),
+                                Text(
+                                  event.title,
+                                  style: const TextStyle(
+                                    fontSize: 12,
+                                    color: ColorsManager.blackColor,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        );
+                      }).toList(),
+                    ),
                   );
                 },
               ),

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

@@ -0,0 +1,14 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+
+class SpaceReorderDataModel {
+  const SpaceReorderDataModel({
+    required this.space,
+    this.parent,
+    this.community,
+  });
+
+  final SpaceModel space;
+  final SpaceModel? parent;
+  final CommunityModel? community;
+}

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

@@ -16,21 +16,37 @@ import 'package:syncrow_web/services/api/http_service.dart';
 import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
 
-class SpaceManagementPage extends StatelessWidget {
+class SpaceManagementPage extends StatefulWidget {
   const SpaceManagementPage({super.key});
 
+  @override
+  State<SpaceManagementPage> createState() => _SpaceManagementPageState();
+}
+
+class _SpaceManagementPageState extends State<SpaceManagementPage> {
+  late final CommunitiesBloc communitiesBloc;
+
+  @override
+  void initState() {
+    communitiesBloc = CommunitiesBloc(
+      communitiesService: DebouncedCommunitiesService(
+        RemoteCommunitiesService(HTTPService()),
+      ),
+    )..add(const LoadCommunities(LoadCommunitiesParam()));
+
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return MultiBlocProvider(
       providers: [
+        BlocProvider.value(value: communitiesBloc),
         BlocProvider(
-          create: (context) => CommunitiesBloc(
+          create: (context) => CommunitiesTreeSelectionBloc(
-            communitiesService: DebouncedCommunitiesService(
+            communitiesBloc: communitiesBloc,
-              RemoteCommunitiesService(HTTPService()),
+          ),
-            ),
-          )..add(const LoadCommunities(LoadCommunitiesParam())),
         ),
-        BlocProvider(create: (context) => CommunitiesTreeSelectionBloc()),
         BlocProvider(
           create: (context) => SpaceDetailsBloc(
             UniqueSubspacesDecorator(

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

@@ -1,13 +1,17 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_connection_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_reorder_data_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/create_space_button.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_card_widget.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_cell.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/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/extension/build_context_x.dart';
 
 class CommunityStructureCanvas extends StatefulWidget {
   const CommunityStructureCanvas({
@@ -31,8 +35,9 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
   final double _horizontalSpacing = 150.0;
   final double _verticalSpacing = 120.0;
 
-  late TransformationController _transformationController;
+  late final TransformationController _transformationController;
-  late AnimationController _animationController;
+  late final AnimationController _animationController;
+  SpaceReorderDataModel? _draggedData;
 
   @override
   void initState() {
@@ -97,7 +102,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     final position = _positions[space.uuid];
     if (position == null) return;
 
-    const scale = 1.5;
+    const scale = 1;
     final viewSize = context.size;
     if (viewSize == null) return;
 
@@ -112,16 +117,33 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     _runAnimation(matrix);
   }
 
+  void _onReorder(SpaceReorderDataModel data, int newIndex) {
+    final newCommunity = widget.community.copyWith();
+    final children = data.parent?.children ?? newCommunity.spaces;
+    final oldIndex = children.indexWhere((s) => s.uuid == data.space.uuid);
+    if (oldIndex != -1) {
+      final item = children.removeAt(oldIndex);
+      if (newIndex > oldIndex) {
+        children.insert(newIndex - 1, item);
+      } else {
+        children.insert(newIndex, item);
+      }
+    }
+    context.read<CommunitiesBloc>().add(
+          CommunitiesUpdateCommunity(newCommunity),
+        );
+  }
+
   void _onSpaceTapped(SpaceModel? space) {
     context.read<CommunitiesTreeSelectionBloc>().add(
           SelectSpaceEvent(community: widget.community, space: space),
         );
   }
 
-  void _resetSelectionAndZoom() {
+  void _resetSelectionAndZoom([CommunityModel? community]) {
     context.read<CommunitiesTreeSelectionBloc>().add(
           SelectSpaceEvent(
-            community: widget.community,
+            community: community ?? widget.community,
             space: null,
           ),
         );
@@ -182,7 +204,8 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     _positions.clear();
     final community = widget.community;
 
-    _calculateLayout(community.spaces, 0, {});
+    final levelXOffset = <int, double>{};
+    _calculateLayout(community.spaces, 0, levelXOffset);
 
     final selectedSpace = widget.selectedSpace;
     final highlightedUuids = <String>{};
@@ -193,7 +216,24 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
 
     final widgets = <Widget>[];
     final connections = <SpaceConnectionModel>[];
-    _generateWidgets(community.spaces, widgets, connections, highlightedUuids);
+    _generateWidgets(
+      widget.community.spaces,
+      widgets,
+      connections,
+      highlightedUuids,
+      community: widget.community,
+    );
+
+    final createButtonX = levelXOffset[0] ?? 0.0;
+    const createButtonY = 0.0;
+
+    widgets.add(
+      Positioned(
+        left: createButtonX,
+        top: createButtonY,
+        child: CreateSpaceButton(communityUuid: widget.community.uuid),
+      ),
+    );
 
     return [
       CustomPaint(
@@ -211,58 +251,178 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     List<SpaceModel> spaces,
     List<Widget> widgets,
     List<SpaceConnectionModel> connections,
-    Set<String> highlightedUuids,
+    Set<String> highlightedUuids, {
-  ) {
+    CommunityModel? community,
-    for (final space in spaces) {
+    SpaceModel? parent,
+  }) {
+    if (spaces.isNotEmpty) {
+      final firstChildPos = _positions[spaces.first.uuid]!;
+      final targetPos = Offset(
+        firstChildPos.dx - (_horizontalSpacing / 4),
+        firstChildPos.dy,
+      );
+      widgets.add(_buildDropTarget(parent, community, 0, targetPos));
+    }
+
+    for (var i = 0; i < spaces.length; i++) {
+      final space = spaces[i];
       final position = _positions[space.uuid];
-      if (position == null) continue;
+      if (position == null) {
+        continue;
+      }
 
       final isHighlighted = highlightedUuids.contains(space.uuid);
       final hasNoSelectedSpace = widget.selectedSpace == null;
 
+      final spaceCard = SpaceCardWidget(
+        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,
+              ),
+            ),
+          );
+        },
+        onTap: () => SpaceDetailsDialogHelper.showCreate(
+          context,
+          communityUuid: widget.community.uuid,
+        ),
+      );
+
+      final reorderData = SpaceReorderDataModel(
+        space: space,
+        parent: parent,
+        community: community,
+      );
+
       widgets.add(
         Positioned(
           left: position.dx,
           top: position.dy,
           width: _cardWidth,
           height: _cardHeight,
-          child: SpaceCardWidget(
+          child: Draggable<SpaceReorderDataModel>(
-            buildSpaceContainer: () {
+            data: reorderData,
-              return Opacity(
+            feedback: Material(
-                opacity: hasNoSelectedSpace || isHighlighted ? 1.0 : 0.5,
+              color: Colors.transparent,
-                child: Tooltip(
+              child: Opacity(
-                  message: space.spaceName,
+                opacity: 0.2,
-                  preferBelow: false,
+                child: SizedBox(
-                  child: SpaceCell(
+                  width: _cardWidth,
-                    onTap: () => _onSpaceTapped(space),
+                  height: _cardHeight,
-                    icon: space.icon,
+                  child: spaceCard,
-                    name: space.spaceName,
-                  ),
                 ),
-              );
+              ),
-            },
+            ),
-            onTap: () => SpaceDetailsDialogHelper.showCreate(context),
+            onDragStarted: () => setState(() => _draggedData = reorderData),
+            onDragEnd: (_) => setState(() => _draggedData = null),
+            onDraggableCanceled: (_, __) => setState(() => _draggedData = null),
+            childWhenDragging: Opacity(opacity: 0.4, child: spaceCard),
+            child: spaceCard,
           ),
         ),
       );
 
+      final targetPos = Offset(
+        position.dx + _cardWidth + (_horizontalSpacing / 4) - 20,
+        position.dy,
+      );
+      widgets.add(_buildDropTarget(parent, community, i + 1, targetPos));
+
       for (final child in space.children) {
-        connections.add(
+        connections.add(SpaceConnectionModel(from: space.uuid, to: child.uuid));
-          SpaceConnectionModel(from: space.uuid, to: child.uuid),
+      }
+
+      if (space.children.isNotEmpty) {
+        _generateWidgets(
+          space.children,
+          widgets,
+          connections,
+          highlightedUuids,
+          parent: space,
         );
       }
-      _generateWidgets(space.children, widgets, connections, highlightedUuids);
     }
   }
 
+  Widget _buildDropTarget(
+    SpaceModel? parent,
+    CommunityModel? community,
+    int index,
+    Offset position,
+  ) {
+    return Positioned(
+      left: position.dx,
+      top: position.dy,
+      width: 40,
+      height: _cardHeight,
+      child: DragTarget<SpaceReorderDataModel>(
+        builder: (context, candidateData, rejectedData) {
+          if (_draggedData == null) {
+            return const SizedBox();
+          }
+
+          final isTargetForDragged = (_draggedData?.parent?.uuid == parent?.uuid &&
+                  _draggedData?.community == null) ||
+              (_draggedData?.community?.uuid == community?.uuid &&
+                  _draggedData?.parent == null);
+
+          if (!isTargetForDragged) {
+            return const SizedBox();
+          }
+
+          return Container(
+            width: 40,
+            height: _cardHeight,
+            decoration: BoxDecoration(
+              color: context.theme.colorScheme.primary.withValues(
+                alpha: candidateData.isNotEmpty ? 0.7 : 0.3,
+              ),
+              borderRadius: BorderRadius.circular(8),
+            ),
+            child: Icon(
+              Icons.add,
+              color: context.theme.colorScheme.onPrimary,
+            ),
+          );
+        },
+        onWillAcceptWithDetails: (data) {
+          final children = parent?.children ?? community?.spaces ?? [];
+          final isSameParent = (data.data.parent?.uuid == parent?.uuid &&
+                  data.data.community == null) ||
+              (data.data.community?.uuid == community?.uuid &&
+                  data.data.parent == null);
+
+          if (!isSameParent) {
+            return false;
+          }
+
+          final oldIndex =
+              children.indexWhere((s) => s.uuid == data.data.space.uuid);
+          if (oldIndex == index || oldIndex == index - 1) {
+            return false;
+          }
+          return true;
+        },
+        onAcceptWithDetails: (data) => _onReorder(data.data, index),
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final treeWidgets = _buildTreeWidgets();
     return InteractiveViewer(
       transformationController: _transformationController,
       boundaryMargin: EdgeInsets.symmetric(
-        horizontal: MediaQuery.sizeOf(context).width * 0.3,
+        horizontal: context.screenWidth * 0.3,
-        vertical: MediaQuery.sizeOf(context).height * 0.3,
+        vertical: context.screenHeight * 0.3,
       ),
       minScale: 0.5,
       maxScale: 3.0,
@@ -270,8 +430,8 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
       child: GestureDetector(
         onTap: _resetSelectionAndZoom,
         child: SizedBox(
-          width: MediaQuery.sizeOf(context).width * 5,
+          width: context.screenWidth * 5,
-          height: MediaQuery.sizeOf(context).height * 5,
+          height: context.screenHeight * 5,
           child: Stack(children: treeWidgets),
         ),
       ),

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

@@ -3,7 +3,10 @@ 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/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';
@@ -11,6 +14,26 @@ import 'package:syncrow_web/utils/constants/assets.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);
@@ -55,8 +78,9 @@ class CommunityStructureHeader extends StatelessWidget {
       children: [
         Text(
           'Community Structure',
-          style: theme.textTheme.headlineLarge
+          style: theme.textTheme.headlineLarge?.copyWith(
-              ?.copyWith(color: ColorsManager.blackColor),
+            color: ColorsManager.blackColor,
+          ),
         ),
         if (selectedCommunity != null)
           Row(
@@ -67,8 +91,9 @@ class CommunityStructureHeader extends StatelessWidget {
                     Flexible(
                       child: SelectableText(
                         selectedCommunity.name,
-                        style: theme.textTheme.bodyLarge
+                        style: theme.textTheme.bodyLarge?.copyWith(
-                            ?.copyWith(color: ColorsManager.blackColor),
+                          color: ColorsManager.blackColor,
+                        ),
                         maxLines: 1,
                       ),
                     ),
@@ -93,12 +118,24 @@ class CommunityStructureHeader extends StatelessWidget {
               CommunityStructureHeaderActionButtons(
                 onDelete: (space) {},
                 onDuplicate: (space) {},
-                onEdit: (space) {
+                onEdit: (space) => SpaceDetailsDialogHelper.showEdit(
-                  SpaceDetailsDialogHelper.showEdit(
+                  context,
-                    context,
+                  spaceModel: selectedSpace!,
-                    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));
+                  },
+                ),
                 selectedSpace: selectedSpace,
               ),
             ],

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

@@ -2,38 +2,66 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
-class CreateSpaceButton extends StatelessWidget {
+class CreateSpaceButton extends StatefulWidget {
-  const CreateSpaceButton({super.key});
+  const CreateSpaceButton({
+    required this.communityUuid,
+    super.key,
+  });
+
+  final String communityUuid;
+
+  @override
+  State<CreateSpaceButton> createState() => _CreateSpaceButtonState();
+}
+
+class _CreateSpaceButtonState extends State<CreateSpaceButton> {
+  bool _isHovered = false;
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
+    return Tooltip(
-      onTap: () => SpaceDetailsDialogHelper.showCreate(context),
+      margin: const EdgeInsets.symmetric(vertical: 24),
-      child: Container(
+      message: 'Create a new space',
-        height: 60,
+      child: InkWell(
-        decoration: BoxDecoration(
+        onTap: () => SpaceDetailsDialogHelper.showCreate(
-          color: Colors.white,
+          context,
-          borderRadius: BorderRadius.circular(20),
+          communityUuid: widget.communityUuid,
-          boxShadow: [
-            BoxShadow(
-              color: Colors.grey.withValues(alpha: 0.5),
-              spreadRadius: 5,
-              blurRadius: 7,
-              offset: const Offset(0, 3),
-            ),
-          ],
         ),
-        child: Center(
+        child: MouseRegion(
-          child: Container(
+          onEnter: (_) => setState(() => _isHovered = true),
-            width: 40,
+          onExit: (_) => setState(() => _isHovered = false),
-            height: 40,
+          child: AnimatedOpacity(
-            decoration: const BoxDecoration(
+            duration: const Duration(milliseconds: 100),
-              color: ColorsManager.boxColor,
+            opacity: _isHovered ? 1.0 : 0.45,
-              shape: BoxShape.circle,
+            child: Container(
-            ),
+              width: 150,
-            child: const Icon(
+              height: 90,
-              Icons.add,
+              decoration: BoxDecoration(
-              color: Colors.blue,
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(20),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.grey.withValues(alpha: 0.2),
+                    spreadRadius: 3,
+                    blurRadius: 8,
+                    offset: const Offset(0, 4),
+                  ),
+                ],
+              ),
+              child: Container(
+                margin: const EdgeInsets.symmetric(vertical: 20),
+                decoration: BoxDecoration(
+                  border: Border.all(color: ColorsManager.borderColor, width: 2),
+                  color: ColorsManager.boxColor,
+                  shape: BoxShape.circle,
+                ),
+                child: const Center(
+                  child: Icon(
+                    Icons.add,
+                    color: Colors.blue,
+                  ),
+                ),
+              ),
             ),
           ),
         ),

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

@@ -22,22 +22,20 @@ class _SpaceCardWidgetState extends State<SpaceCardWidget> {
     return MouseRegion(
       onEnter: (_) => setState(() => isHovered = true),
       onExit: (_) => setState(() => isHovered = false),
-      child: SizedBox(
+      child: Stack(
-        child: Stack(
+        clipBehavior: Clip.none,
-          clipBehavior: Clip.none,
+        alignment: Alignment.center,
-          alignment: Alignment.center,
+        children: [
-          children: [
+          widget.buildSpaceContainer(),
-            widget.buildSpaceContainer(),
+          if (isHovered)
-            if (isHovered)
+            Positioned(
-              Positioned(
+              bottom: 0,
-                bottom: 0,
+              child: PlusButtonWidget(
-                child: PlusButtonWidget(
+                offset: Offset.zero,
-                  offset: Offset.zero,
+                onButtonTap: widget.onTap,
-                  onButtonTap: widget.onTap,
-                ),
               ),
-          ],
+            ),
-        ),
+        ],
       ),
     );
   }

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

@@ -17,7 +17,7 @@ class SpaceCell extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
+    return InkWell(
       onTap: onTap,
       child: Container(
         width: 150,

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

@@ -13,11 +13,17 @@ class SpaceManagementCommunityStructure extends StatelessWidget {
     final selectionBloc = context.watch<CommunitiesTreeSelectionBloc>().state;
     final selectedCommunity = selectionBloc.selectedCommunity;
     final selectedSpace = selectionBloc.selectedSpace;
-    const spacer = Spacer(flex: 10);
+    const spacer = Spacer(flex: 6);
     return Visibility(
       visible: selectedCommunity!.spaces.isNotEmpty,
-      replacement: const Row(
+      replacement: Row(
-        children: [spacer, Expanded(child: CreateSpaceButton()), spacer],
+        children: [
+          spacer,
+          Expanded(
+            child: CreateSpaceButton(communityUuid: selectedCommunity.uuid),
+          ),
+          spacer
+        ],
       ),
       child: Column(
         mainAxisSize: MainAxisSize.min,

lib/pages/space_management_v2/modules/communities/domain/models/space_model.dart

@@ -46,6 +46,25 @@ class SpaceModel extends Equatable {
     );
   }
 
+  SpaceModel copyWith({
+    String? uuid,
+    DateTime? createdAt,
+    DateTime? updatedAt,
+    String? spaceName,
+    String? icon,
+    List<SpaceModel>? children,
+  }) {
+    return SpaceModel(
+      uuid: uuid ?? this.uuid,
+      createdAt: createdAt ?? this.createdAt,
+      updatedAt: updatedAt ?? this.updatedAt,
+      spaceName: spaceName ?? this.spaceName,
+      icon: icon ?? this.icon,
+      children: children ?? this.children,
+      parent: parent,
+    );
+  }
+
   @override
   List<Object?> get props => [uuid, spaceName, icon, children];
 }

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

@@ -1,17 +1,39 @@
+import 'dart:async';
+
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.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';
 
 part 'communities_tree_selection_event.dart';
 part 'communities_tree_selection_state.dart';
 
 class CommunitiesTreeSelectionBloc
     extends Bloc<CommunitiesTreeSelectionEvent, CommunitiesTreeSelectionState> {
-  CommunitiesTreeSelectionBloc() : super(const CommunitiesTreeSelectionState()) {
+  CommunitiesTreeSelectionBloc({
+    required CommunitiesBloc communitiesBloc,
+  })  : _communitiesBloc = communitiesBloc,
+        super(const CommunitiesTreeSelectionState()) {
     on<SelectCommunityEvent>(_onSelectCommunity);
     on<SelectSpaceEvent>(_onSelectSpace);
     on<ClearCommunitiesTreeSelectionEvent>(_onClearSelection);
+    on<_CommunitiesStateUpdated>(_onCommunitiesStateUpdated);
+
+    _communitiesSubscription = _communitiesBloc.stream.listen((communitiesState) {
+      if (state.selectedCommunity != null) {
+        add(_CommunitiesStateUpdated(communitiesState));
+      }
+    });
+  }
+
+  final CommunitiesBloc _communitiesBloc;
+  late final StreamSubscription<CommunitiesState> _communitiesSubscription;
+
+  @override
+  Future<void> close() {
+    _communitiesSubscription.cancel();
+    return super.close();
   }
 
   void _onSelectCommunity(
@@ -44,4 +66,59 @@ class CommunitiesTreeSelectionBloc
   ) {
     emit(const CommunitiesTreeSelectionState());
   }
+
+  void _onCommunitiesStateUpdated(
+    _CommunitiesStateUpdated event,
+    Emitter<CommunitiesTreeSelectionState> emit,
+  ) {
+    if (state.selectedCommunity == null) return;
+
+    final communities = event.communitiesState.communities;
+    try {
+      final updatedCommunity = communities.firstWhere(
+        (c) => c.uuid == state.selectedCommunity!.uuid,
+      );
+
+      var updatedSelectedSpace = state.selectedSpace;
+      if (state.selectedSpace != null) {
+        updatedSelectedSpace = _findSpaceInCommunity(
+          updatedCommunity,
+          state.selectedSpace!.uuid,
+        );
+      }
+      emit(
+        state.copyWith(
+          selectedCommunity: updatedCommunity,
+          selectedSpace: updatedSelectedSpace,
+          clearSelectedSpace: updatedSelectedSpace == null,
+        ),
+      );
+    } catch (_) {
+      add(const ClearCommunitiesTreeSelectionEvent());
+    }
+  }
+
+  SpaceModel? _findSpaceInCommunity(CommunityModel community, String spaceUuid) {
+    try {
+      return _findSpaceRecursive(community.spaces, spaceUuid);
+    } catch (_) {
+      return null;
+    }
+  }
+
+  SpaceModel _findSpaceRecursive(List<SpaceModel> spaces, String spaceUuid) {
+    for (final space in spaces) {
+      if (space.uuid == spaceUuid) {
+        return space;
+      }
+      if (space.children.isNotEmpty) {
+        try {
+          return _findSpaceRecursive(space.children, spaceUuid);
+        } catch (_) {
+          // not found in this branch
+        }
+      }
+    }
+    throw Exception('Space not found');
+  }
 }

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

@@ -29,3 +29,12 @@ final class ClearCommunitiesTreeSelectionEvent
     extends CommunitiesTreeSelectionEvent {
   const ClearCommunitiesTreeSelectionEvent();
 }
+
+final class _CommunitiesStateUpdated extends CommunitiesTreeSelectionEvent {
+  const _CommunitiesStateUpdated(this.communitiesState);
+
+  final CommunitiesState communitiesState;
+
+  @override
+  List<Object> get props => [communitiesState];
+}

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

@@ -12,18 +12,14 @@ final class CommunitiesTreeSelectionState extends Equatable {
   CommunitiesTreeSelectionState copyWith({
     CommunityModel? selectedCommunity,
     SpaceModel? selectedSpace,
-    List<CommunityModel>? expandedCommunities,
+    bool clearSelectedSpace = false,
-    List<SpaceModel>? expandedSpaces,
   }) {
     return CommunitiesTreeSelectionState(
       selectedCommunity: selectedCommunity ?? this.selectedCommunity,
-      selectedSpace: selectedSpace ?? this.selectedSpace,
+      selectedSpace: clearSelectedSpace ? null : selectedSpace ?? this.selectedSpace,
     );
   }
 
   @override
-  List<Object?> get props => [
+  List<Object?> get props => [selectedCommunity, selectedSpace];
-        selectedCommunity,
+}
-        selectedSpace,
-      ];
-  }

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

@@ -13,14 +13,14 @@ class CommunitiesTreeFailureWidget extends StatelessWidget {
     return Expanded(
       child: Center(
         child: Column(
+          spacing: 16,
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Text(
+            SelectableText(
               errorMessage ?? 'Something went wrong',
               textAlign: TextAlign.center,
             ),
-            const SizedBox(height: 16),
+            FilledButton(
-            ElevatedButton(
               onPressed: () => context.read<CommunitiesBloc>().add(
                     LoadCommunities(
                       LoadCommunitiesParam(

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

@@ -40,16 +40,6 @@ class SpaceDetailsModel extends Equatable {
     );
   }
 
-  Map<String, dynamic> toJson() {
-    return {
-      'uuid': uuid,
-      'spaceName': spaceName,
-      'icon': icon,
-      'productAllocations': productAllocations.map((e) => e.toJson()).toList(),
-      'subspaces': subspaces.map((e) => e.toJson()).toList(),
-    };
-  }
-
   SpaceDetailsModel copyWith({
     String? uuid,
     String? spaceName,
@@ -89,14 +79,6 @@ class ProductAllocation extends Equatable {
     );
   }
 
-  Map<String, dynamic> toJson() {
-    return {
-      'uuid': uuid,
-      'product': product.toJson(),
-      'tag': tag.toJson(),
-    };
-  }
-
   ProductAllocation copyWith({
     String? uuid,
     Product? product,
@@ -134,14 +116,6 @@ class Subspace extends Equatable {
     );
   }
 
-  Map<String, dynamic> toJson() {
-    return {
-      'uuid': uuid,
-      'name': name,
-      'productAllocations': productAllocations.map((e) => e.toJson()).toList(),
-    };
-  }
-
   Subspace copyWith({
     String? uuid,
     String? name,

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

@@ -2,23 +2,37 @@ 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/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';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/data/services/remote_update_space_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/domain/params/update_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/update_space_bloc.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 abstract final class SpaceDetailsDialogHelper {
-  static void showCreate(BuildContext context) {
+  static void showCreate(
+    BuildContext context, {
+    required String communityUuid,
+  }) {
     showDialog<void>(
       context: context,
-      builder: (_) => BlocProvider(
+      builder: (_) => MultiBlocProvider(
-        create: (context) => SpaceDetailsBloc(
+        providers: [
-          RemoteSpaceDetailsService(httpService: HTTPService()),
+          BlocProvider(
-        ),
+            create: (context) => SpaceDetailsBloc(
-        child: SpaceDetailsDialog(
+              RemoteSpaceDetailsService(httpService: HTTPService()),
-          context: context,
+            ),
-          title: const SelectableText('Create Space'),
+          ),
-          spaceModel: SpaceModel.empty(),
+        ],
-          onSave: (space) {},
+        child: Builder(
+          builder: (context) => SpaceDetailsDialog(
+            context: context,
+            title: const SelectableText('Create Space'),
+            spaceModel: SpaceModel.empty(),
+            onSave: (space) {},
+            communityUuid: communityUuid,
+          ),
         ),
       ),
     );
@@ -27,20 +41,98 @@ abstract final class SpaceDetailsDialogHelper {
   static void showEdit(
     BuildContext context, {
     required SpaceModel spaceModel,
+    required String communityUuid,
+    required void Function(SpaceDetailsModel updatedSpaceDetails)? onSuccess,
   }) {
     showDialog<void>(
       context: context,
-      builder: (_) => BlocProvider(
+      builder: (_) => MultiBlocProvider(
-        create: (context) => SpaceDetailsBloc(
+        providers: [
-          RemoteSpaceDetailsService(httpService: HTTPService()),
+          BlocProvider(
-        ),
+            create: (context) => SpaceDetailsBloc(
-        child: SpaceDetailsDialog(
+              RemoteSpaceDetailsService(httpService: HTTPService()),
-          context: context,
+            ),
-          title: const SelectableText('Edit Space'),
+          ),
-          spaceModel: spaceModel,
+          BlocProvider(
-          onSave: (space) {},
+            create: (context) => UpdateSpaceBloc(
+              RemoteUpdateSpaceService(HTTPService()),
+            ),
+          ),
+        ],
+        child: Builder(
+          builder: (context) => BlocListener<UpdateSpaceBloc, UpdateSpaceState>(
+            listener: (context, state) => _updateListener(
+              context,
+              state,
+              onSuccess,
+            ),
+            child: SpaceDetailsDialog(
+              context: context,
+              title: const SelectableText('Edit Space'),
+              spaceModel: spaceModel,
+              onSave: (space) => context.read<UpdateSpaceBloc>().add(
+                    UpdateSpace(
+                      UpdateSpaceParam(
+                        communityUuid: communityUuid,
+                        space: space,
+                      ),
+                    ),
+                  ),
+              communityUuid: communityUuid,
+            ),
+          ),
         ),
       ),
     );
   }
+
+  static void _updateListener(
+    BuildContext context,
+    UpdateSpaceState state,
+    void Function(SpaceDetailsModel updatedSpaceDetails)? onSuccess,
+  ) {
+    return switch (state) {
+      UpdateSpaceInitial() => null,
+      UpdateSpaceLoading() => _onLoading(context),
+      UpdateSpaceSuccess(:final space) =>
+        _onUpdateSuccess(context, space, onSuccess),
+      UpdateSpaceFailure(:final errorMessage) => _onError(context, errorMessage),
+    };
+  }
+
+  static void _onUpdateSuccess(
+    BuildContext context,
+    SpaceDetailsModel space,
+    void Function(SpaceDetailsModel updatedSpaceDetails)? onSuccess,
+  ) {
+    Navigator.of(context).pop();
+    Navigator.of(context).pop();
+    onSuccess?.call(space);
+  }
+
+  static void _onLoading(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      barrierDismissible: false,
+      builder: (_) => const Center(child: CircularProgressIndicator()),
+    );
+  }
+
+  static void _onError(BuildContext context, String errorMessage) {
+    Navigator.of(context).pop();
+    showDialog<void>(
+      context: context,
+      barrierDismissible: false,
+      builder: (_) => AlertDialog(
+        title: const Text('Error'),
+        content: Text(errorMessage),
+        actions: [
+          TextButton(
+            onPressed: Navigator.of(context).pop,
+            child: const Text('OK'),
+          ),
+        ],
+      ),
+    );
+  }
 }

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

@@ -1,7 +1,6 @@
 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/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/domain/params/load_space_details_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
@@ -15,6 +14,7 @@ class SpaceDetailsDialog extends StatefulWidget {
     required this.spaceModel,
     required this.onSave,
     required this.context,
+    required this.communityUuid,
     super.key,
   });
 
@@ -22,6 +22,7 @@ class SpaceDetailsDialog extends StatefulWidget {
   final SpaceModel spaceModel;
   final void Function(SpaceDetailsModel space) onSave;
   final BuildContext context;
+  final String communityUuid;
 
   @override
   State<SpaceDetailsDialog> createState() => _SpaceDetailsDialogState();
@@ -35,11 +36,7 @@ class _SpaceDetailsDialogState extends State<SpaceDetailsDialog> {
     if (!isCreateMode) {
       final param = LoadSpaceDetailsParam(
         spaceUuid: widget.spaceModel.uuid,
-        communityUuid: widget.context
+        communityUuid: widget.communityUuid,
-            .read<CommunitiesTreeSelectionBloc>()
-            .state
-            .selectedCommunity!
-            .uuid,
       );
       widget.context.read<SpaceDetailsBloc>().add(LoadSpaceDetails(param));
     }

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

@@ -37,7 +37,7 @@ class _SpaceSubSpacesDialogState extends State<SpaceSubSpacesDialog> {
         ..._subspaces,
         Subspace(
           name: name,
-          uuid: const Uuid().v4(),
+          uuid: '${const Uuid().v4()}-NewTag',
           productAllocations: const [],
         ),
       ];

lib/pages/space_management_v2/modules/tags/domain/models/tag.dart

@@ -3,41 +3,19 @@ import 'package:equatable/equatable.dart';
 class Tag extends Equatable {
   final String uuid;
   final String name;
-  final String createdAt;
-  final String updatedAt;
 
   const Tag({
     required this.uuid,
     required this.name,
-    required this.createdAt,
-    required this.updatedAt,
   });
 
-  factory Tag.empty() => const Tag(
-        uuid: '',
-        name: '',
-        createdAt: '',
-        updatedAt: '',
-      );
-
   factory Tag.fromJson(Map<String, dynamic> json) {
     return Tag(
       uuid: json['uuid'] as String,
       name: json['name'] as String,
-      createdAt: json['createdAt'] as String,
-      updatedAt: json['updatedAt'] as String,
     );
   }
 
-  Map<String, dynamic> toJson() {
-    return {
-      'uuid': uuid,
-      'name': name,
-      'createdAt': createdAt,
-      'updatedAt': updatedAt,
-    };
-  }
-
   @override
-  List<Object?> get props => [uuid, name, createdAt, updatedAt];
+  List<Object?> get props => [uuid, name];
 }

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

@@ -214,9 +214,12 @@ class _AssignTagsDialogState extends State<AssignTagsDialog> {
               for (final product in newProducts) {
                 _space.productAllocations.add(
                   ProductAllocation(
-                    uuid: const Uuid().v4(),
+                    uuid: '${const Uuid().v4()}-NewProductUuid',
                     product: product,
-                    tag: Tag.empty(),
+                    tag: Tag(
+                      uuid: '${const Uuid().v4()}-NewTag',
+                      name: '',
+                    ),
                   ),
                 );
               }

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

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:uuid/uuid.dart';
 
 class ProductTagField extends StatefulWidget {
   final List<Tag> items;
@@ -53,13 +54,8 @@ class _ProductTagFieldState extends State<ProductTagField> {
   void _submit(String value) {
     final lowerCaseValue = value.toLowerCase();
     final selectedTag = widget.items.firstWhere(
-      (tag) => tag.name.toLowerCase() == lowerCaseValue,
+      (e) => e.name.toLowerCase() == lowerCaseValue,
-      orElse: () => Tag(
+      orElse: () => Tag(uuid: '${const Uuid().v4()}-NewTag', name: value),
-        name: value,
-        uuid: '',
-        createdAt: '',
-        updatedAt: '',
-      ),
     );
     widget.onSelected(selectedTag);
     _closeDropdown();

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

@@ -1,5 +1,7 @@
 import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.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/update_space/domain/params/update_space_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/update_space/domain/services/update_space_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
@@ -12,17 +14,23 @@ class RemoteUpdateSpaceService implements UpdateSpaceService {
   static const _defaultErrorMessage = 'Failed to update space';
 
   @override
-  Future<SpaceDetailsModel> updateSpace(SpaceDetailsModel space) async {
+  Future<SpaceDetailsModel> updateSpace(UpdateSpaceParam param) async {
     try {
-      final response = await _httpService.put(
+      final path = await _makeUrl(param);
-        path: 'endpoint',
+      await _httpService.put(
-        body: space.toJson(),
+        path: path,
-        expectedResponseModel: (data) => SpaceDetailsModel.fromJson(
+        body: param.toJson(),
-          data as Map<String, dynamic>,
+        expectedResponseModel: (data) {
-        ),
+          final response = data as Map<String, dynamic>;
+          final isSuccess = response['success'] as bool;
+          if (!isSuccess) {
+            throw APIException(response['error'] as String);
+          }
+          return isSuccess;
+        },
       );
 
-      return response;
+      return param.space;
     } on DioException catch (e) {
       final message = e.response?.data as Map<String, dynamic>?;
       final error = message?['error'] as Map<String, dynamic>?;
@@ -37,4 +45,23 @@ class RemoteUpdateSpaceService implements UpdateSpaceService {
       throw APIException(formattedErrorMessage);
     }
   }
+
+  Future<String> _makeUrl(UpdateSpaceParam param) async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null || projectUuid.isEmpty) {
+      throw APIException('Project UUID is not set');
+    }
+
+    final spaceUuid = param.space.uuid;
+    if (spaceUuid.isEmpty) {
+      throw APIException('Space UUID is not set');
+    }
+
+    final communityUuid = param.communityUuid;
+    if (communityUuid.isEmpty) {
+      throw APIException('Community UUID is not set');
+    }
+
+    return '/projects/$projectUuid/communities/$communityUuid/spaces/$spaceUuid';
+  }
 }

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

@@ -0,0 +1,42 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+
+class UpdateSpaceParam {
+  UpdateSpaceParam({
+    required this.space,
+    required this.communityUuid,
+  });
+
+  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(),
+    };
+  }
+}

lib/pages/space_management_v2/modules/update_space/domain/services/update_space_service.dart

@@ -1,5 +1,6 @@
 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/update_space/domain/params/update_space_param.dart';
 
-abstract class UpdateSpaceService {
+abstract interface class UpdateSpaceService {
-  Future<SpaceDetailsModel> updateSpace(SpaceDetailsModel space);
+  Future<SpaceDetailsModel> updateSpace(UpdateSpaceParam param);
 }

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

@@ -1,6 +1,7 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.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/update_space/domain/params/update_space_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/update_space/domain/services/update_space_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 
@@ -20,7 +21,7 @@ class UpdateSpaceBloc extends Bloc<UpdateSpaceEvent, UpdateSpaceState> {
   ) async {
     emit(UpdateSpaceLoading());
     try {
-      final updatedSpace = await _updateSpaceService.updateSpace(event.space);
+      final updatedSpace = await _updateSpaceService.updateSpace(event.param);
       emit(UpdateSpaceSuccess(updatedSpace));
     } on APIException catch (e) {
       emit(UpdateSpaceFailure(e.message));

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

@@ -8,10 +8,10 @@ sealed class UpdateSpaceEvent extends Equatable {
 }
 
 final class UpdateSpace extends UpdateSpaceEvent {
-  const UpdateSpace(this.space);
+  const UpdateSpace(this.param);
 
-  final SpaceDetailsModel space;
+  final UpdateSpaceParam param;
 
   @override
-  List<Object> get props => [space];
+  List<Object> get props => [param];
 }

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

@@ -21,10 +21,10 @@ final class UpdateSpaceSuccess extends UpdateSpaceState {
 }
 
 final class UpdateSpaceFailure extends UpdateSpaceState {
-  final String message;
+  final String errorMessage;
 
-  const UpdateSpaceFailure(this.message);
+  const UpdateSpaceFailure(this.errorMessage);
 
   @override
-  List<Object> get props => [message];
+  List<Object> get props => [errorMessage];
 }

lib/utils/color_manager.dart

@@ -69,6 +69,7 @@ abstract class ColorsManager {
   static const Color invitedOrange = Color(0xFFFFE193);
   static const Color invitedOrangeText = Color(0xFFFFBF00);
   static const Color lightGrayBorderColor = Color(0xB2D5D5D5);
+  //background: #F8F8F8;
   static const Color vividBlue = Color(0xFF023DFE);
   static const Color semiTransparentRed = Color(0x99FF0000);
   static const Color grey700 = Color(0xFF2D3748);
@@ -84,5 +85,4 @@ abstract class ColorsManager {
   static const Color minBlueDot = Color(0xFF023DFE);
   static const Color grey25 = Color(0xFFF9F9F9);
   static const Color grey50 = Color(0xFF718096);
-  static const Color grey800 = Color(0xffF8F8F8);
 }

lib/utils/constants/api_const.dart

@@ -141,5 +141,4 @@ abstract class ApiEndpoints {
   static const String saveSchedule = '/schedule/{deviceUuid}';
 
   static const String getBookableSpaces = '/bookable-spaces';
-  static const String getCalendarEvents = '/api';
 }