return true refactor code

<!--
  Thanks for contributing!

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

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

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

## Description

change the Title to Work Flow 

## Type of Change

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

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


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

assets/icons/add_button_Icon.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9795_9381)">
+<path d="M9.21875 13.5149V10.7805H6.48438C6.05286 10.7805 5.70312 10.4308 5.70312 9.99924C5.70312 9.56787 6.05286 9.21799 6.48438 9.21799H9.21875V6.48361C9.21875 6.05225 9.56848 5.70236 10 5.70236C10.4315 5.70236 10.7812 6.05225 10.7812 6.48361V9.21799H13.5156C13.9471 9.21799 14.2969 9.56787 14.2969 9.99924C14.2969 10.4308 13.9471 10.7805 13.5156 10.7805H10.7812V13.5149C10.7812 13.9464 10.4315 14.2961 10 14.2961C9.56848 14.2961 9.21875 13.9464 9.21875 13.5149ZM17.0711 2.92892C15.1823 1.04019 12.6711 0 10 0C7.32895 0 4.81766 1.04019 2.92892 2.92892C1.04019 4.81766 0 7.32895 0 10C0 12.6711 1.04019 15.1823 2.92892 17.0711C4.81766 18.9598 7.32895 20 10 20C11.8286 20 13.6179 19.5016 15.1743 18.5588C15.5434 18.3353 15.6613 17.8549 15.4378 17.486C15.2142 17.1169 14.7337 16.9989 14.3648 17.2224C13.0525 18.0173 11.5431 18.4375 10 18.4375C5.3476 18.4375 1.5625 14.6524 1.5625 10C1.5625 5.3476 5.3476 1.5625 10 1.5625C14.6524 1.5625 18.4375 5.3476 18.4375 10C18.4375 11.6637 17.9428 13.2829 17.0068 14.6831C16.767 15.0417 16.8634 15.5269 17.2221 15.7668C17.5807 16.0065 18.0659 15.91 18.3058 15.5515C19.4141 13.8936 20 11.9739 20 10C20 7.32895 18.9598 4.81766 17.0711 2.92892Z" fill="#023DFE" fill-opacity="0.7"/>
+</g>
+<defs>
+<clipPath id="clip0_9795_9381">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/back_button_icon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C15.514 20 19.9998 15.514 19.9998 9.99995C19.9998 4.48604 15.514 0 10 0C4.48613 0 0.000183105 4.48604 0.000183105 9.99995C0.000183105 15.514 4.48613 20 10 20ZM10 1.36892C14.7591 1.36892 18.6309 5.24077 18.631 9.99995C18.631 14.7591 14.7592 18.631 10 18.6311C5.24095 18.631 1.36919 14.7591 1.36919 9.99986C1.36919 5.24086 5.24095 1.36892 10 1.36892Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M8.65713 14.2828C8.92444 14.55 9.35784 14.5499 9.62505 14.2828C9.89245 14.0154 9.89245 13.5821 9.62496 13.3147L6.99481 10.6846L14.6112 10.6839C14.9892 10.6838 15.2956 10.3775 15.2956 9.99926C15.2955 9.62126 14.9891 9.31499 14.6111 9.31499L6.99444 9.31572L9.62523 6.68511C9.89254 6.41781 9.89254 5.98432 9.62523 5.7171C9.49154 5.5835 9.3164 5.5166 9.14118 5.5166C8.96605 5.5166 8.79092 5.5835 8.65722 5.71701L4.85811 9.51604C4.7297 9.64435 4.65761 9.81838 4.65761 9.99999C4.6577 10.1816 4.7298 10.3555 4.8582 10.4841L8.65713 14.2828Z" fill="#023DFE" fill-opacity="0.7"/>
+</svg>

assets/icons/clock_icon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.9999 0C4.48595 0 0 4.48586 0 9.99971C0 15.514 4.48595 20 9.9999 20C15.5138 20 19.9996 15.5139 19.9996 9.99971C19.9996 4.48586 15.5138 0 9.9999 0ZM9.9999 18.5665C5.27638 18.5665 1.43349 14.7234 1.43349 9.99971C1.43349 5.27628 5.27638 1.43349 9.9999 1.43349C14.7233 1.43349 18.5661 5.27628 18.5661 9.99971C18.5661 14.7234 14.7233 18.5665 9.9999 18.5665Z" fill="#D5D5D5"/>
+<path d="M15.1416 9.83211H10.4423V4.69526C10.4423 4.29943 10.1215 3.97852 9.72553 3.97852C9.3297 3.97852 9.00879 4.29943 9.00879 4.69526V10.5489C9.00879 10.9447 9.3297 11.2656 9.72553 11.2656H15.1416C15.5376 11.2656 15.8584 10.9447 15.8584 10.5489C15.8584 10.153 15.5375 9.83211 15.1416 9.83211Z" fill="#D5D5D5"/>
+</svg>

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

@@ -18,7 +18,7 @@ class RemoteBookableSpacesService implements BookableSystemService {
   }) async {
     try {
       final response = await _httpService.get(
-        path: ApiEndpoints.getBookableSpaces,
+        path: ApiEndpoints.bookableSpaces,
         queryParameters: {
           'page': param.page,
           'size': param.size,

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

@@ -12,10 +12,13 @@ class SvgTextButton extends StatelessWidget {
   final double borderRadius;
   final List<BoxShadow> boxShadow;
   final double svgSize;
-
+  final double? fontSize;
+  final FontWeight? fontWeight;
   const SvgTextButton({
     super.key,
     required this.svgAsset,
+    this.fontSize,
+    this.fontWeight,
     required this.label,
     required this.onPressed,
     this.backgroundColor = ColorsManager.circleRolesBackground,

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

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/icon_text_button.dart';
+
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class BookingPage extends StatelessWidget {
+  final PageController pageController;
+  const BookingPage({
+    super.key,
+    required this.pageController,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Row(
+        children: [
+          Expanded(
+              child: Container(
+            color: Colors.blueGrey[100],
+            child: const Center(
+              child: Text(
+                'Side bar',
+                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+              ),
+            ),
+          )),
+          Expanded(
+              flex: 4,
+              child: Padding(
+                padding: const EdgeInsets.all(20.0),
+                child: SizedBox(
+                  child: Column(
+                    children: [
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.start,
+                        children: [
+                          SvgTextButton(
+                              svgAsset: Assets.homeIcon,
+                              label: 'Manage Bookable Spaces',
+                              onPressed: () {
+                                pageController.jumpToPage(2);
+                              }),
+                          const SizedBox(width: 20),
+                          SvgTextButton(
+                              svgAsset: Assets.groupIcon,
+                              label: 'Manage Users',
+                              onPressed: () {})
+                        ],
+                      )
+                    ],
+                  ),
+                ),
+              ))
+        ],
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/data/remote_bookable_spaces_service.dart

@@ -0,0 +1,47 @@
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.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 RemoteBookableSpacesService implements BookableSpacesService {
+  final HTTPService _httpService;
+  RemoteBookableSpacesService(this._httpService);
+  static const _defaultErrorMessage = 'Failed to load Bookable Spaces';
+  @override
+  Future<PaginatedDataModel<BookableSpacemodel>> load(
+      BookableSpacesParams param) async {
+    try {
+      final response = await _httpService.get(
+        path: ApiEndpoints.bookableSpaces,
+        queryParameters: {
+          'configured': true,
+          'page': param.currentPage,
+        },
+        expectedResponseModel: (json) {
+          final result = json as Map<String, dynamic>;
+          return PaginatedDataModel.fromJson(
+            result,
+            BookableSpacemodel.fromJsonList,
+          );
+        },
+      );
+      return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [
+        _defaultErrorMessage,
+        errorMessage,
+      ].join(': ');
+      throw APIException(formattedErrorMessage);
+    } catch (e) {
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
+    }
+  }
+}

lib/pages/access_management/manage_bookable_spaces/data/remote_non_bookable_spaces.dart

@@ -0,0 +1,85 @@
+import 'dart:async';
+
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/non_bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/send_bookable_spaces_to_api_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/non_bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.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 RemoteNonBookableSpaces implements NonBookableSpacesService {
+  Timer? _debounce;
+
+  final HTTPService _httpService;
+  RemoteNonBookableSpaces(this._httpService);
+  static const _defaultErrorMessage = 'Failed to load Spaces';
+
+  @override
+  Future<PaginatedDataModel<BookableSpacemodel>> load(
+      NonBookableSpacesParams params) {
+    final completer = Completer<PaginatedDataModel<BookableSpacemodel>>();
+
+    _debounce?.cancel();
+    _debounce = Timer(const Duration(milliseconds: 500), () async {
+      try {
+        final response = await _httpService.get(
+          path: ApiEndpoints.bookableSpaces,
+          queryParameters: {
+            'configured': false,
+            'page': params.currentPage,
+            'search': params.searchedWords,
+          },
+          expectedResponseModel: (json) {
+            final result = json as Map<String, dynamic>;
+            return PaginatedDataModel.fromJson(
+              result,
+              BookableSpacemodel.fromJsonList,
+            );
+          },
+        );
+        completer.complete(response);
+      } on DioException catch (e) {
+        final message = e.response?.data as Map<String, dynamic>?;
+        final error = message?['error'] as Map<String, dynamic>?;
+        final errorMessage = error?['error'] as String? ?? '';
+        final formattedErrorMessage = [
+          _defaultErrorMessage,
+          errorMessage,
+        ].join(': ');
+        completer.completeError(APIException(formattedErrorMessage));
+      } catch (e) {
+        final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+        completer.completeError(APIException(formattedErrorMessage));
+      }
+    });
+
+    return completer.future;
+  }
+
+  @override
+  Future<void> sendBookableSpacesToApi(
+      SendBookableSpacesToApiParams params) async {
+    try {
+      await _httpService.post(
+        path: ApiEndpoints.bookableSpaces,
+        body: params.toJson(),
+        expectedResponseModel: (p0) {},
+      );
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [
+        _defaultErrorMessage,
+        errorMessage,
+      ].join(': ');
+      throw APIException(formattedErrorMessage);
+    } catch (e) {
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
+    }
+  }
+}

lib/pages/access_management/manage_bookable_spaces/data/remote_update_bookable_space_service.dart

@@ -0,0 +1,40 @@
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_config.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/update_bookable_space_param.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/update_bookable_space_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/constants/api_const.dart';
+
+class RemoteUpdateBookableSpaceService implements UpdateBookableSpaceService {
+  final HTTPService _httpService;
+  RemoteUpdateBookableSpaceService(this._httpService);
+  static const _defaultErrorMessage = 'Failed to load Bookable Spaces';
+  @override
+  Future<BookableSpaceConfig> update(
+      UpdateBookableSpaceParam updateParam) async {
+    try {
+      final response = await _httpService.put(
+        path: '${ApiEndpoints.bookableSpaces}/${updateParam.spaceUuid}',
+        body: updateParam.toJson(),
+        expectedResponseModel: (json) {
+          return BookableSpaceConfig.fromJson(
+              json['data'] as Map<String, dynamic>);
+        },
+      );
+      return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [
+        _defaultErrorMessage,
+        errorMessage,
+      ].join(': ');
+      throw APIException(formattedErrorMessage);
+    } catch (e) {
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
+    }
+  }
+}

lib/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_config.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+
+class BookableSpaceConfig {
+  String configUuid;
+  List<String> bookableDays;
+  TimeOfDay? bookingStartTime;
+  TimeOfDay? bookingEndTime;
+  int cost;
+  bool availability;
+  BookableSpaceConfig({
+    required this.configUuid,
+    required this.availability,
+    required this.bookableDays,
+    this.bookingEndTime,
+    this.bookingStartTime,
+    required this.cost,
+  });
+  factory BookableSpaceConfig.zero() => BookableSpaceConfig(
+        configUuid: '',
+        bookableDays: [],
+        availability: false,
+        cost: -1,
+      );
+  factory BookableSpaceConfig.fromJson(Map<String, dynamic> json) =>
+      BookableSpaceConfig(
+        configUuid: json['uuid'] as String,
+        bookableDays: (json['daysAvailable'] as List).cast<String>(),
+        availability: (json['active'] as bool?) ?? false,
+        bookingStartTime: parseTimeOfDay(json['startTime'] as String),
+        bookingEndTime: parseTimeOfDay(json['endTime'] as String),
+        cost: json['points'] as int,
+      );
+
+  static TimeOfDay parseTimeOfDay(String timeString) {
+    final parts = timeString.split(':');
+    final hour = int.parse(parts[0]);
+    final minute = int.parse(parts[1]);
+    return TimeOfDay(hour: hour, minute: minute);
+  }
+
+  bool get isValid =>
+      bookableDays.isNotEmpty &&
+      cost >= 0 &&
+      bookingStartTime != null &&
+      bookingEndTime != null;
+
+  BookableSpaceConfig copyWith({
+    List<String>? bookableDays,
+    TimeOfDay? bookingStartTime,
+    TimeOfDay? bookingEndTime,
+    int? cost,
+    bool? availability,
+  }) {
+    return BookableSpaceConfig(
+      configUuid: configUuid,
+      availability: availability ?? this.availability,
+      bookableDays: bookableDays ?? this.bookableDays,
+      cost: cost ?? this.cost,
+      bookingEndTime: bookingEndTime ?? this.bookingEndTime,
+      bookingStartTime: bookingStartTime ?? this.bookingStartTime,
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart

@@ -0,0 +1,58 @@
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_config.dart';
+
+class BookableSpacemodel {
+  String spaceUuid;
+  String spaceName;
+  BookableSpaceConfig? spaceConfig;
+  String spaceVirtualAddress;
+
+  BookableSpacemodel({
+    required this.spaceUuid,
+    required this.spaceName,
+    this.spaceConfig,
+    required this.spaceVirtualAddress,
+  });
+  factory BookableSpacemodel.zero() => BookableSpacemodel(
+        spaceUuid: '',
+        spaceName: '',
+        spaceVirtualAddress: '',
+      );
+  factory BookableSpacemodel.fromJson(Map<String, dynamic> json) =>
+      BookableSpacemodel(
+        spaceUuid: json['uuid'] as String,
+        spaceName: json['spaceName'] as String,
+        spaceConfig: json['bookableConfig'] == null
+            ? BookableSpaceConfig.zero()
+            : BookableSpaceConfig.fromJson(
+                json['bookableConfig'] as Map<String, dynamic>),
+        spaceVirtualAddress: json['virtualLocation'] as String,
+      );
+
+  static List<BookableSpacemodel> fromJsonList(List<dynamic> jsonList) =>
+      jsonList
+          .map(
+            (e) => BookableSpacemodel.fromJson(e as Map<String, dynamic>),
+          )
+          .toList();
+
+  bool get isValid =>
+      spaceUuid.isNotEmpty &&
+      spaceName.isNotEmpty &&
+      spaceVirtualAddress.isNotEmpty &&
+      spaceConfig != null &&
+      spaceConfig!.isValid;
+
+  BookableSpacemodel copyWith({
+    String? spaceUuid,
+    String? spaceName,
+    BookableSpaceConfig? spaceConfig,
+    String? spaceVirtualAddress,
+  }) {
+    return BookableSpacemodel(
+      spaceUuid: spaceUuid ?? this.spaceUuid,
+      spaceName: spaceName ?? this.spaceName,
+      spaceConfig: spaceConfig ?? this.spaceConfig,
+      spaceVirtualAddress: spaceVirtualAddress ?? this.spaceVirtualAddress,
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/domain/params/bookable_spaces_params.dart

@@ -0,0 +1,10 @@
+class BookableSpacesParams {
+  int currentPage;
+  BookableSpacesParams({
+    required this.currentPage,
+  });
+
+  Map<String, dynamic> toJson() => {
+        'page': currentPage,
+      };
+}

lib/pages/access_management/manage_bookable_spaces/domain/params/non_bookable_spaces_params.dart

@@ -0,0 +1,12 @@
+class NonBookableSpacesParams {
+  int currentPage;
+  String? searchedWords;
+  NonBookableSpacesParams({
+    required this.currentPage,
+    this.searchedWords,
+  });
+
+  Map<String, dynamic> toJson() => {
+        'page': currentPage,
+      };
+}

lib/pages/access_management/manage_bookable_spaces/domain/params/send_bookable_spaces_to_api_params.dart

@@ -0,0 +1,41 @@
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/utils/string_utils.dart';
+
+class SendBookableSpacesToApiParams {
+  List<String> spaceUuids;
+  List<String> daysAvailable;
+  String startTime;
+  String endTime;
+  int points;
+  SendBookableSpacesToApiParams({
+    required this.spaceUuids,
+    required this.daysAvailable,
+    required this.startTime,
+    required this.endTime,
+    required this.points,
+  });
+
+  static SendBookableSpacesToApiParams fromBookableSpacesModel(
+      List<BookableSpacemodel> bookableSpaces) {
+    return SendBookableSpacesToApiParams(
+      spaceUuids: bookableSpaces.map((space) => space.spaceUuid).toList(),
+      daysAvailable: bookableSpaces
+          .expand((space) => space.spaceConfig!.bookableDays)
+          .toSet()
+          .toList(),
+      startTime: formatTimeOfDayTo24HourString(
+          bookableSpaces.first.spaceConfig!.bookingStartTime!),
+      endTime: formatTimeOfDayTo24HourString(
+          bookableSpaces.first.spaceConfig!.bookingEndTime!),
+      points: bookableSpaces.first.spaceConfig!.cost,
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+        'spaceUuids': spaceUuids,
+        'daysAvailable': daysAvailable,
+        'startTime': startTime,
+        'endTime': endTime,
+        'points': points
+      };
+}

lib/pages/access_management/manage_bookable_spaces/domain/params/update_bookable_space_param.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/foundation.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/utils/string_utils.dart';
+
+class UpdateBookableSpaceParam {
+  String spaceUuid;
+
+  List<String>? bookableDays;
+  String? bookingStartTime;
+  String? bookingEndTime;
+  int? cost;
+  bool? availability;
+  UpdateBookableSpaceParam({
+    required this.spaceUuid,
+    this.bookingStartTime,
+    this.bookingEndTime,
+    this.bookableDays,
+    this.availability,
+    this.cost,
+  });
+  factory UpdateBookableSpaceParam.fromBookableModel(
+      BookableSpacemodel bookableSpace) {
+    return UpdateBookableSpaceParam(
+      spaceUuid: bookableSpace.spaceUuid,
+      availability: bookableSpace.spaceConfig!.availability,
+      bookableDays: bookableSpace.spaceConfig!.bookableDays,
+      cost: bookableSpace.spaceConfig!.cost,
+      bookingStartTime: formatTimeOfDayTo24HourString(
+          bookableSpace.spaceConfig!.bookingStartTime!),
+      bookingEndTime: formatTimeOfDayTo24HourString(
+          bookableSpace.spaceConfig!.bookingEndTime!),
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+        if (bookableDays != null) 'daysAvailable': bookableDays,
+        if (bookingStartTime != null) 'startTime': bookingStartTime,
+        if (bookingEndTime != null) 'endTime': bookingEndTime,
+        if (cost != null) 'points': cost,
+        if (availability != null) 'active': availability,
+      };
+}

lib/pages/access_management/manage_bookable_spaces/domain/service/bookable_spaces_service.dart

@@ -0,0 +1,8 @@
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart';
+
+abstract class BookableSpacesService {
+  Future<PaginatedDataModel<BookableSpacemodel>> load(
+      BookableSpacesParams param);
+}

lib/pages/access_management/manage_bookable_spaces/domain/service/non_bookable_spaces_service.dart

@@ -0,0 +1,10 @@
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/non_bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/send_bookable_spaces_to_api_params.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart';
+
+abstract class NonBookableSpacesService {
+  Future<PaginatedDataModel<BookableSpacemodel>> load(
+      NonBookableSpacesParams params);
+  Future<void> sendBookableSpacesToApi(SendBookableSpacesToApiParams params);
+}

lib/pages/access_management/manage_bookable_spaces/domain/service/update_bookable_space_service.dart

@@ -0,0 +1,6 @@
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_config.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/update_bookable_space_param.dart';
+
+abstract class UpdateBookableSpaceService {
+  Future<BookableSpaceConfig> update(UpdateBookableSpaceParam updateParam);
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/bookable_spaces_bloc/bookable_spaces_bloc.dart

@@ -0,0 +1,63 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_config.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+
+part 'bookable_spaces_event.dart';
+part 'bookable_spaces_state.dart';
+
+class BookableSpacesBloc
+    extends Bloc<BookableSpacesEvent, BookableSpacesState> {
+  final BookableSpacesService bookableSpacesService;
+  BookableSpacesBloc(this.bookableSpacesService)
+      : super(BookableSpacesInitial()) {
+    on<LoadBookableSpacesEvent>(_onLoadBookableSpaces);
+    on<InsertUpdatedSpaceEvent>(_onInsertUpdatedSpaceEven);
+  }
+
+  Future<void> _onLoadBookableSpaces(
+      LoadBookableSpacesEvent event, Emitter<BookableSpacesState> emit) async {
+    emit(BookableSpacesLoading());
+    try {
+      final bookableSpaces = await bookableSpacesService.load(event.param);
+      emit(BookableSpacesLoaded(bookableSpacesList: bookableSpaces));
+    } on APIException catch (e) {
+      emit(BookableSpacesError(error: e.message));
+    } catch (e) {
+      emit(
+        BookableSpacesError(error: e.toString()),
+      );
+    }
+  }
+
+  void _onInsertUpdatedSpaceEven(
+      InsertUpdatedSpaceEvent event, Emitter<BookableSpacesState> emit) {
+    emit(InsertingUpdatedSpaceState());
+
+    if (event.bookableSpace.spaceConfig!.configUuid ==
+        event.updatedBookableSpaceConfig.configUuid) {
+      final editedBookableSpace = event.bookableSpaces.data.firstWhere(
+        (element) => element.spaceUuid == event.bookableSpace.spaceUuid,
+      );
+      final config = editedBookableSpace.spaceConfig!.copyWith(
+        availability: event.updatedBookableSpaceConfig.availability,
+        bookableDays: event.updatedBookableSpaceConfig.bookableDays,
+        bookingEndTime: event.updatedBookableSpaceConfig.bookingEndTime,
+        bookingStartTime: event.updatedBookableSpaceConfig.bookingStartTime,
+        cost: event.updatedBookableSpaceConfig.cost,
+      );
+      editedBookableSpace.spaceConfig = config;
+      final index = event.bookableSpaces.data.indexWhere(
+        (element) => element.spaceUuid == event.bookableSpace.spaceUuid,
+      );
+      event.bookableSpaces.data.removeAt(index);
+      event.bookableSpaces.data.insert(index, editedBookableSpace);
+    }
+
+    emit(BookableSpacesLoaded(bookableSpacesList: event.bookableSpaces));
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/bookable_spaces_bloc/bookable_spaces_event.dart

@@ -0,0 +1,24 @@
+part of 'bookable_spaces_bloc.dart';
+
+sealed class BookableSpacesEvent extends Equatable {
+  const BookableSpacesEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class LoadBookableSpacesEvent extends BookableSpacesEvent {
+  final BookableSpacesParams param;
+  const LoadBookableSpacesEvent(this.param);
+}
+
+class InsertUpdatedSpaceEvent extends BookableSpacesEvent {
+  final PaginatedDataModel<BookableSpacemodel> bookableSpaces;
+  final BookableSpacemodel bookableSpace;
+  final BookableSpaceConfig updatedBookableSpaceConfig;
+  const InsertUpdatedSpaceEvent({
+    required this.bookableSpaces,
+    required this.bookableSpace,
+    required this.updatedBookableSpaceConfig,
+  });
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/bookable_spaces_bloc/bookable_spaces_state.dart

@@ -0,0 +1,28 @@
+part of 'bookable_spaces_bloc.dart';
+
+sealed class BookableSpacesState extends Equatable {
+  const BookableSpacesState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class BookableSpacesInitial extends BookableSpacesState {}
+
+final class BookableSpacesLoading extends BookableSpacesState {}
+
+final class BookableSpacesLoaded extends BookableSpacesState {
+  final PaginatedDataModel<BookableSpacemodel> bookableSpacesList;
+  const BookableSpacesLoaded({
+    required this.bookableSpacesList,
+  });
+}
+
+final class BookableSpacesError extends BookableSpacesState {
+  final String error;
+  const BookableSpacesError({
+    required this.error,
+  });
+}
+
+class InsertingUpdatedSpaceState extends BookableSpacesState {}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/cubit/toggle_points_switch_cubit.dart

@@ -0,0 +1,18 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+
+part 'toggle_points_switch_state.dart';
+
+class TogglePointsSwitchCubit extends Cubit<TogglePointsSwitchState> {
+  TogglePointsSwitchCubit() : super(TogglePointsSwitchInitial());
+  bool switchValue = true;
+  void activateSwitch() {
+    switchValue = true;
+    emit(ActivatePointsSwitch());
+  }
+
+  void unActivateSwitch() {
+    switchValue = false;
+    emit(UnActivatePointsSwitch());
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/cubit/toggle_points_switch_state.dart

@@ -0,0 +1,14 @@
+part of 'toggle_points_switch_cubit.dart';
+
+sealed class TogglePointsSwitchState extends Equatable {
+  const TogglePointsSwitchState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class TogglePointsSwitchInitial extends TogglePointsSwitchState {}
+
+class ActivatePointsSwitch extends TogglePointsSwitchState {}
+
+class UnActivatePointsSwitch extends TogglePointsSwitchState {}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart

@@ -0,0 +1,150 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/non_bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/send_bookable_spaces_to_api_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/non_bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart';
+
+part 'non_bookaable_spaces_event.dart';
+part 'non_bookaable_spaces_state.dart';
+
+class NonBookableSpacesBloc
+    extends Bloc<NonBookableSpacesEvent, NonBookableSpacesState> {
+  NonBookableSpacesService nonBookableSpacesService;
+  List<BookableSpacemodel> selectedBookableSpaces = [];
+  NonBookableSpacesBloc(this.nonBookableSpacesService)
+      : super(NonBookableSpacesInitial()) {
+    on<CallInitStateEvent>(_onCallInitStateEvent);
+    on<LoadUnBookableSpacesEvent>(_onLoadUnBookableSpacesEvent);
+    on<AddToBookableSpaceEvent>(_onAddToBookableSpaceEvent);
+    on<RemoveFromBookableSpaceEvent>(_onRemoveFromBookableSpaceEvent);
+    on<SendBookableSpacesToApi>(_onSendBookableSpacesToApi);
+    on<CheckConfigurValidityEvent>(_onCheckConfigurValidityEvent);
+    on<EditModeSelected>(_onEditModeSelected);
+  }
+
+  TimeOfDay? get endTime =>
+      selectedBookableSpaces.first.spaceConfig!.bookingEndTime;
+
+  TimeOfDay? get startTime =>
+      selectedBookableSpaces.first.spaceConfig!.bookingStartTime;
+
+  void _onCallInitStateEvent(
+      CallInitStateEvent event, Emitter<NonBookableSpacesState> emit) {
+    emit(NonBookableSpacesInitial());
+  }
+
+  Future<void> _onLoadUnBookableSpacesEvent(LoadUnBookableSpacesEvent event,
+      Emitter<NonBookableSpacesState> emit) async {
+    if (state is NonBookableSpacesLoaded) {
+      final currState = state as NonBookableSpacesLoaded;
+      try {
+        emit(NonBookableSpacesLoading(
+            lastNonBookableSpaces: currState.nonBookableSpaces));
+
+        final nonBookableSpacesList = await nonBookableSpacesService.load(
+          event.nonBookableSpacesParams,
+        );
+        nonBookableSpacesList.data.addAll(currState.nonBookableSpaces.data);
+
+        emit(
+          NonBookableSpacesLoaded(
+            nonBookableSpaces: nonBookableSpacesList,
+          ),
+        );
+      } catch (e) {
+        emit(
+          NonBookableSpacesError(e.toString()),
+        );
+      }
+    } else {
+      try {
+        emit(const NonBookableSpacesLoading());
+        final nonBookableSpacesList = await nonBookableSpacesService.load(
+          event.nonBookableSpacesParams,
+        );
+        emit(
+          NonBookableSpacesLoaded(nonBookableSpaces: nonBookableSpacesList),
+        );
+      } catch (e) {
+        emit(
+          NonBookableSpacesError(e.toString()),
+        );
+      }
+    }
+  }
+
+  void _onAddToBookableSpaceEvent(
+    AddToBookableSpaceEvent event,
+    Emitter<NonBookableSpacesState> emit,
+  ) {
+    if (state is NonBookableSpacesLoaded) {
+      final currentState = state as NonBookableSpacesLoaded;
+      emit(AddNonBookableSpaceIntoBookableState());
+      final updatedSelectedSpaces =
+          List<BookableSpacemodel>.from(currentState.selectedBookableSpaces)
+            ..add(event.nonBookableSpace);
+
+      selectedBookableSpaces.add(event.nonBookableSpace);
+
+      emit(
+        NonBookableSpacesLoaded(
+          nonBookableSpaces: currentState.nonBookableSpaces,
+          selectedBookableSpaces: updatedSelectedSpaces,
+        ),
+      );
+    }
+  }
+
+  void _onRemoveFromBookableSpaceEvent(RemoveFromBookableSpaceEvent event,
+      Emitter<NonBookableSpacesState> emit) {
+    if (state is NonBookableSpacesLoaded) {
+      final currentState = state as NonBookableSpacesLoaded;
+      emit(RemoveBookableSpaceIntoNonBookableState());
+      if (currentState.selectedBookableSpaces.isNotEmpty) {
+        currentState.selectedBookableSpaces.remove(event.bookableSpace);
+      }
+      selectedBookableSpaces.remove(event.bookableSpace);
+      emit(
+        NonBookableSpacesLoaded(
+          nonBookableSpaces: currentState.nonBookableSpaces,
+          selectedBookableSpaces: currentState.selectedBookableSpaces,
+        ),
+      );
+    }
+  }
+
+  Future<void> _onSendBookableSpacesToApi(SendBookableSpacesToApi event,
+      Emitter<NonBookableSpacesState> emit) async {
+    emit(const NonBookableSpacesLoading());
+    try {
+      await nonBookableSpacesService.sendBookableSpacesToApi(
+        SendBookableSpacesToApiParams.fromBookableSpacesModel(
+          selectedBookableSpaces,
+        ),
+      );
+      add(CallInitStateEvent());
+    } catch (e) {
+      emit(
+        NonBookableSpacesError(e.toString()),
+      );
+    }
+  }
+
+  void _onCheckConfigurValidityEvent(
+      CheckConfigurValidityEvent event, Emitter<NonBookableSpacesState> emit) {
+    if (selectedBookableSpaces.first.spaceConfig!.isValid) {
+      emit(ValidSaveButtonState());
+    } else {
+      emit(UnValidSaveButtonState());
+    }
+  }
+
+  void _onEditModeSelected(
+      EditModeSelected event, Emitter<NonBookableSpacesState> emit) {
+    selectedBookableSpaces.clear();
+    selectedBookableSpaces.add(event.editingBookableSpace);
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_event.dart

@@ -0,0 +1,42 @@
+part of 'non_bookaable_spaces_bloc.dart';
+
+sealed class NonBookableSpacesEvent extends Equatable {
+  const NonBookableSpacesEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class CallInitStateEvent extends NonBookableSpacesEvent {}
+
+class LoadUnBookableSpacesEvent extends NonBookableSpacesEvent {
+  final NonBookableSpacesParams nonBookableSpacesParams;
+  const LoadUnBookableSpacesEvent({
+    required this.nonBookableSpacesParams,
+  });
+}
+
+class AddToBookableSpaceEvent extends NonBookableSpacesEvent {
+  final BookableSpacemodel nonBookableSpace;
+  const AddToBookableSpaceEvent({
+    required this.nonBookableSpace,
+  });
+}
+
+class RemoveFromBookableSpaceEvent extends NonBookableSpacesEvent {
+  final BookableSpacemodel bookableSpace;
+  const RemoveFromBookableSpaceEvent({
+    required this.bookableSpace,
+  });
+}
+
+class SendBookableSpacesToApi extends NonBookableSpacesEvent {}
+
+class CheckConfigurValidityEvent extends NonBookableSpacesEvent {}
+
+class EditModeSelected extends NonBookableSpacesEvent {
+  final BookableSpacemodel editingBookableSpace;
+  const EditModeSelected({
+    required this.editingBookableSpace,
+  });
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_state.dart

@@ -0,0 +1,39 @@
+part of 'non_bookaable_spaces_bloc.dart';
+
+sealed class NonBookableSpacesState extends Equatable {
+  const NonBookableSpacesState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class NonBookableSpacesInitial extends NonBookableSpacesState {}
+
+class NonBookableSpacesLoading extends NonBookableSpacesState {
+  final PaginatedDataModel<BookableSpacemodel>? lastNonBookableSpaces;
+  const NonBookableSpacesLoading({
+    this.lastNonBookableSpaces,
+  });
+}
+
+class NonBookableSpacesLoaded extends NonBookableSpacesState {
+  final PaginatedDataModel<BookableSpacemodel> nonBookableSpaces;
+  final List<BookableSpacemodel> selectedBookableSpaces;
+  const NonBookableSpacesLoaded({
+    required this.nonBookableSpaces,
+    this.selectedBookableSpaces = const [],
+  });
+}
+
+class NonBookableSpacesError extends NonBookableSpacesState {
+  final String error;
+  const NonBookableSpacesError(this.error);
+}
+
+class AddNonBookableSpaceIntoBookableState extends NonBookableSpacesState {}
+
+class RemoveBookableSpaceIntoNonBookableState extends NonBookableSpacesState {}
+
+class ValidSaveButtonState extends NonBookableSpacesState {}
+
+class UnValidSaveButtonState extends NonBookableSpacesState {}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/steps_cubit/cubit/steps_cubit.dart

@@ -0,0 +1,22 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+
+part 'steps_state.dart';
+
+class StepsCubit extends Cubit<StepsState> {
+  StepsCubit() : super(StepsInitial());
+
+  void initDialogValue() {
+    emit(StepOneState());
+  }
+
+  void editValueInit() {
+    emit(StepTwoState());
+  }
+
+  void goToNextStep() {
+    if (state is StepOneState) {
+      emit(StepTwoState());
+    }
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/steps_cubit/cubit/steps_state.dart

@@ -0,0 +1,15 @@
+part of 'steps_cubit.dart';
+
+sealed class StepsState extends Equatable {
+  const StepsState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class StepsInitial extends StepsState {}
+
+final class StepOneState extends StepsState {}
+
+final class StepTwoState extends StepsState {}
+

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/update_bookable_spaces/update_bookable_spaces_bloc.dart

@@ -0,0 +1,36 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_config.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/update_bookable_space_param.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/update_bookable_space_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+
+part 'update_bookable_spaces_event.dart';
+part 'update_bookable_spaces_state.dart';
+
+class UpdateBookableSpacesBloc
+    extends Bloc<UpdateBookableSpaceEvent, UpdateBookableSpacesState> {
+  final UpdateBookableSpaceService updateBookableSpaceService;
+  UpdateBookableSpacesBloc(this.updateBookableSpaceService)
+      : super(UpdateBookableSpacesInitial()) {
+    on<UpdateBookableSpace>(_onUpdateBookableSpace);
+  }
+
+  Future<void> _onUpdateBookableSpace(UpdateBookableSpace event,
+      Emitter<UpdateBookableSpacesState> emit) async {
+    emit(UpdateBookableSpaceLoading(event.updatedParams.spaceUuid));
+    try {
+      final updatedSpace =
+          await updateBookableSpaceService.update(event.updatedParams);
+
+      emit(UpdateBookableSpaceSuccess(bookableSpaceConfig: updatedSpace));
+      event.onSuccess?.call();
+    } on APIException catch (e) {
+      emit(UpdateBookableSpaceFailure(error: e.message));
+    } catch (e) {
+      emit(
+        UpdateBookableSpaceFailure(error: e.toString()),
+      );
+    }
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/update_bookable_spaces/update_bookable_spaces_event.dart

@@ -0,0 +1,17 @@
+part of 'update_bookable_spaces_bloc.dart';
+
+sealed class UpdateBookableSpaceEvent extends Equatable {
+  const UpdateBookableSpaceEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class UpdateBookableSpace extends UpdateBookableSpaceEvent {
+  final void Function()? onSuccess;
+  final UpdateBookableSpaceParam updatedParams;
+  const UpdateBookableSpace({
+    required this.updatedParams,
+    this.onSuccess,
+  });
+}

lib/pages/access_management/manage_bookable_spaces/presentation/blocs/update_bookable_spaces/update_bookable_spaces_state.dart

@@ -0,0 +1,30 @@
+part of 'update_bookable_spaces_bloc.dart';
+
+sealed class UpdateBookableSpacesState extends Equatable {
+  const UpdateBookableSpacesState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class UpdateBookableSpacesInitial extends UpdateBookableSpacesState {}
+
+final class UpdateBookableSpaceLoading extends UpdateBookableSpacesState {
+  final String updatingSpaceUuid;
+
+  const UpdateBookableSpaceLoading(this.updatingSpaceUuid);
+}
+
+final class UpdateBookableSpaceSuccess extends UpdateBookableSpacesState {
+  final BookableSpaceConfig bookableSpaceConfig;
+  const UpdateBookableSpaceSuccess({
+    required this.bookableSpaceConfig,
+  });
+}
+
+final class UpdateBookableSpaceFailure extends UpdateBookableSpacesState {
+  final String error;
+  const UpdateBookableSpaceFailure({
+    required this.error,
+  });
+}

lib/pages/access_management/manage_bookable_spaces/presentation/screens/manage_bookable_spaces_screen.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/data/remote_bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/data/remote_update_bookable_space_service.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/bookable_spaces_bloc/bookable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/update_bookable_spaces/update_bookable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/bottom_pagination_part_widget.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/table_part_widget.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/top_part_widget.dart';
+
+import 'package:syncrow_web/services/api/http_service.dart';
+
+class ManageBookableSpacesPage extends StatefulWidget {
+  final PageController pageController;
+  const ManageBookableSpacesPage({
+    super.key,
+    required this.pageController,
+  });
+
+  @override
+  State<ManageBookableSpacesPage> createState() =>
+      _ManageBookableSpacesPageState();
+}
+
+class _ManageBookableSpacesPageState extends State<ManageBookableSpacesPage> {
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(
+          create: (context) => BookableSpacesBloc(
+            RemoteBookableSpacesService(HTTPService()),
+          )..add(
+              LoadBookableSpacesEvent(
+                BookableSpacesParams(currentPage: 1),
+              ),
+            ),
+        ),
+        BlocProvider(
+          create: (context) => UpdateBookableSpacesBloc(
+            RemoteUpdateBookableSpaceService(HTTPService()),
+          ),
+        )
+      ],
+      child: ManageBookableSpacesWidget(
+        pageController: widget.pageController,
+      ),
+    );
+  }
+}
+
+class ManageBookableSpacesWidget extends StatelessWidget {
+  final PageController pageController;
+
+  const ManageBookableSpacesWidget({
+    super.key,
+    required this.pageController,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(20),
+      child: Column(
+        children: [
+          Expanded(
+              flex: 10,
+              child: RowOfButtonsTitleWidget(pageController: pageController)),
+          const SizedBox(
+            height: 10,
+          ),
+          const Expanded(
+            flex: 85,
+            child: TableOfBookableSpacesWidget(),
+          ),
+          const SizedBox(
+            height: 5,
+          ),
+          const Expanded(
+            flex: 5,
+            child: PaginationButtonsWidget(),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/screens/setup_bookable_spaces_dialog.dart

@@ -0,0 +1,119 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/data/remote_non_bookable_spaces.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/non_bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/steps_cubit/cubit/steps_cubit.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/details_steps_widget.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/next_first_step_button.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/save_second_step_button.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/stepper_part_widget.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SetupBookableSpacesDialog extends StatefulWidget {
+  final BookableSpacemodel? editingBookableSpace;
+  SetupBookableSpacesDialog({
+    super.key,
+    this.editingBookableSpace,
+  });
+
+  @override
+  State<SetupBookableSpacesDialog> createState() =>
+      _SetupBookableSpacesDialogState();
+}
+
+class _SetupBookableSpacesDialogState extends State<SetupBookableSpacesDialog> {
+  final TextEditingController pointsController = TextEditingController();
+  @override
+  void dispose() {
+    pointsController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider<StepsCubit>(
+          create: widget.editingBookableSpace == null
+              ? (context) => StepsCubit()..initDialogValue()
+              : (context) => StepsCubit()..editValueInit(),
+        ),
+        BlocProvider<NonBookableSpacesBloc>(
+          create: widget.editingBookableSpace == null
+              ? (context) => NonBookableSpacesBloc(
+                    RemoteNonBookableSpaces(HTTPService()),
+                  )..add(
+                      LoadUnBookableSpacesEvent(
+                        nonBookableSpacesParams:
+                            NonBookableSpacesParams(currentPage: 1),
+                      ),
+                    )
+              : (context) => NonBookableSpacesBloc(
+                    RemoteNonBookableSpaces(HTTPService()),
+                  )..add(
+                      EditModeSelected(
+                          editingBookableSpace: widget.editingBookableSpace!),
+                    ),
+        ),
+      ],
+      child: AlertDialog(
+        backgroundColor: ColorsManager.whiteColors,
+        contentPadding: EdgeInsets.zero,
+        title: Center(
+          child: Text(
+            'Set Up a Bookable Spaces',
+            style: TextStyle(
+              fontWeight: FontWeight.w700,
+              color: ColorsManager.dialogBlueTitle,
+              fontSize: 15,
+            ),
+          ),
+        ),
+        content: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            const Divider(),
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const Expanded(
+                  flex: 3,
+                  child: StepperPartWidget(),
+                ),
+                const SizedBox(
+                  height: 588,
+                  child: VerticalDivider(
+                    thickness: 0.5,
+                    width: 1,
+                  ),
+                ),
+                Expanded(
+                  flex: 7,
+                  child: DetailsStepsWidget(
+                    pointsController: pointsController,
+                    editingBookableSpace: widget.editingBookableSpace,
+                  ),
+                )
+              ],
+            ),
+            Builder(builder: (context) {
+              final stepsState = context.watch<StepsCubit>().state;
+              final nonBookableBloc = context.watch<NonBookableSpacesBloc>();
+              final selectedSpaces = nonBookableBloc.selectedBookableSpaces;
+              return stepsState is StepOneState
+                  ? NextFirstStepButton(selectedSpaces: selectedSpaces)
+                  : SaveSecondStepButton(
+                      selectedSpaces: selectedSpaces,
+                      pointsController: pointsController,
+                      isEditingMode: widget.editingBookableSpace != null,
+                    );
+            }),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/booking_period_widget.dart

@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/time_picker_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/string_utils.dart';
+
+class BookingPeriodWidget extends StatelessWidget {
+  final BookableSpacemodel? editingBookableSpace;
+  const BookingPeriodWidget({
+    super.key,
+    this.editingBookableSpace,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Text(
+              '* ',
+              style: Theme.of(context)
+                  .textTheme
+                  .bodyMedium!
+                  .copyWith(color: Colors.red),
+            ),
+            const Text('Booking Period'),
+          ],
+        ),
+        Container(
+          width: 300,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(12),
+            color: ColorsManager.graysColor,
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              TimePickerWidget(
+                title: editingBookableSpace == null
+                    ? 'Start Time'
+                    : editingBookableSpace!.spaceConfig!.bookingStartTime!
+                        .format(context),
+                onTimePicked: (timePicked) {
+                  if (timePicked == null) {
+                    return;
+                  }
+                  final nonBookableBloc = context.read<NonBookableSpacesBloc>();
+
+                  if (nonBookableBloc.endTime != null &&
+                      isEndTimeAfterStartTime(
+                          timePicked, nonBookableBloc.endTime!)) {
+                    ScaffoldMessenger.of(context).clearSnackBars();
+                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
+                      content:
+                          Text("You can't choose start Time Before End time"),
+                      duration: Duration(seconds: 2),
+                      backgroundColor: ColorsManager.red,
+                    ));
+                    throw Exception();
+                  } else {
+                    nonBookableBloc.selectedBookableSpaces.forEach(
+                      (e) => e.spaceConfig!.bookingStartTime = timePicked,
+                    );
+                  }
+                },
+              ),
+              const Icon(
+                Icons.arrow_right_alt,
+                color: ColorsManager.grayColor,
+              ),
+              TimePickerWidget(
+                title: editingBookableSpace == null
+                    ? 'End Time'
+                    : editingBookableSpace!.spaceConfig!.bookingEndTime!
+                        .format(context),
+                onTimePicked: (timePicked) {
+                  if (timePicked == null) {
+                    return;
+                  }
+                  final nonBookableBloc = context.read<NonBookableSpacesBloc>();
+                  if (nonBookableBloc.startTime != null &&
+                      isEndTimeAfterStartTime(
+                          nonBookableBloc.startTime!, timePicked)) {
+                    ScaffoldMessenger.of(context).clearSnackBars();
+                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
+                      content:
+                          Text("You can't choose End Time After Start time"),
+                      duration: Duration(seconds: 2),
+                      backgroundColor: ColorsManager.red,
+                    ));
+                    throw Exception();
+                  } else {
+                    nonBookableBloc.selectedBookableSpaces.forEach(
+                      (e) => e.spaceConfig!.bookingEndTime = timePicked,
+                    );
+                  }
+                },
+              ),
+              Container(
+                width: 50,
+                height: 32,
+                decoration: const BoxDecoration(
+                  borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(10),
+                    bottomLeft: Radius.circular(10),
+                  ),
+                ),
+                alignment: Alignment.center,
+                child: SvgPicture.asset(
+                  Assets.clockIcon,
+                  height: 15,
+                  color: ColorsManager.blackColor.withValues(alpha: 0.4),
+                ),
+              )
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/buttons_divider_bottom_dialog_widget.dart

@@ -0,0 +1,106 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/bookable_spaces_bloc/bookable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class ButtonsDividerBottomDialogWidget extends StatelessWidget {
+  final String title;
+  final void Function()? onNextPressed;
+  final void Function() onCancelPressed;
+  const ButtonsDividerBottomDialogWidget({
+    super.key,
+    required this.title,
+    required this.onNextPressed,
+    required this.onCancelPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        const Divider(
+          thickness: 0.5,
+          height: 1,
+        ),
+        Row(
+          children: [
+            Expanded(
+              child: InkWell(
+                borderRadius: const BorderRadius.only(
+                  bottomLeft: Radius.circular(26),
+                ),
+                onTap: onCancelPressed,
+                child: Container(
+                  height: 40,
+                  alignment: Alignment.center,
+                  decoration: const BoxDecoration(
+                    border: Border(
+                      right: BorderSide(
+                        color: ColorsManager.grayBorder,
+                      ),
+                    ),
+                    borderRadius: BorderRadius.only(
+                      bottomLeft: Radius.circular(26),
+                    ),
+                  ),
+                  child: const Text(
+                    'Cancel',
+                    style: TextStyle(color: ColorsManager.blackColor),
+                  ),
+                ),
+              ),
+            ),
+            Expanded(
+              child:
+                  BlocConsumer<NonBookableSpacesBloc, NonBookableSpacesState>(
+                listener: (context, nonBookableState) {
+                  if (nonBookableState is NonBookableSpacesInitial) {
+                    context.pop();
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      const SnackBar(
+                        content: Text(
+                          'Operation Done Successfully',
+                          style: TextStyle(color: ColorsManager.activeGreen),
+                        ),
+                        duration: Duration(seconds: 2),
+                        behavior: SnackBarBehavior.floating,
+                      ),
+                    );
+                    context.read<BookableSpacesBloc>().add(
+                          LoadBookableSpacesEvent(
+                            BookableSpacesParams(currentPage: 1),
+                          ),
+                        );
+                  } else if (nonBookableState is NonBookableSpacesError) {
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      SnackBar(
+                        content: Text(
+                          nonBookableState.error,
+                          style:
+                              const TextStyle(color: ColorsManager.red),
+                        ),
+                        duration: const Duration(seconds: 2),
+                        behavior: SnackBarBehavior.floating,
+                      ),
+                    );
+                  }
+                },
+                builder: (context, nonBookableState) {
+                  return TextButton(
+                    onPressed: onNextPressed,
+                    child: Text(
+                      title,
+                    ),
+                  );
+                },
+              ),
+            )
+          ],
+        )
+      ],
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/check_box_space_widget.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+
+class CheckBoxSpaceWidget extends StatelessWidget {
+  final BookableSpacemodel nonBookableSpace;
+  final List<BookableSpacemodel> selectedSpaces;
+
+  const CheckBoxSpaceWidget({
+    super.key,
+    required this.nonBookableSpace,
+    required this.selectedSpaces,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isChecked = selectedSpaces.any(
+      (element) => element.spaceUuid == nonBookableSpace.spaceUuid,
+    );
+
+    return Row(
+      children: [
+        Checkbox(
+          value: isChecked,
+          onChanged: (value) {
+            final bloc = context.read<NonBookableSpacesBloc>();
+            if (value ?? false) {
+              bloc.add(
+                AddToBookableSpaceEvent(
+                  nonBookableSpace: nonBookableSpace,
+                ),
+              );
+            } else {
+              bloc.add(
+                RemoveFromBookableSpaceEvent(
+                  bookableSpace: nonBookableSpace,
+                ),
+              );
+            }
+          },
+        ),
+        const SizedBox(width: 5),
+        Expanded(child: Text(nonBookableSpace.spaceName)),
+      ],
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/column_title_widget.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class ColumnTitleWidget extends StatelessWidget {
+  final bool isFirst;
+  final bool isLast;
+  final String title;
+  const ColumnTitleWidget({
+    super.key,
+    required this.title,
+    required this.isFirst,
+    required this.isLast,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        alignment: Alignment.centerLeft,
+        padding: const EdgeInsets.only(left: 10),
+        decoration: BoxDecoration(
+          color: ColorsManager.graysColor,
+          borderRadius: isFirst
+              ? const BorderRadius.only(
+                  topLeft: Radius.circular(12),
+                )
+              : isLast
+                  ? const BorderRadius.only(
+                      topRight: Radius.circular(12),
+                    )
+                  : null,
+        ),
+        child: Text(
+          title,
+          style: const TextStyle(
+            color: ColorsManager.grayColor,
+            fontSize: 12,
+          ),
+        ));
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/custom_data_table.dart

@@ -0,0 +1,55 @@
+import 'package:data_table_2/data_table_2.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/column_title_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class CustomDataTable<T> extends StatelessWidget {
+  final List<String> columnsTitles;
+  final List<DataCell> Function(T item) cellsWidgets;
+  final List<T> items;
+
+  const CustomDataTable({
+    super.key,
+    required this.items,
+    required this.cellsWidgets,
+    required this.columnsTitles,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return DataTable2(
+      dividerThickness: 0.5,
+      columnSpacing: 2,
+      horizontalMargin: 0,
+      empty: SvgPicture.asset(Assets.emptyDataTable),
+      decoration: BoxDecoration(
+        color: ColorsManager.circleRolesBackground,
+        borderRadius: BorderRadius.circular(12),
+        boxShadow: const [
+          BoxShadow(
+            color: ColorsManager.textGray,
+            blurRadius: 12,
+            offset: Offset(0, 4),
+          ),
+        ],
+      ),
+      columns: columnsTitles.asMap().entries.map((entry) {
+        final index = entry.key;
+        final title = entry.value;
+
+        return DataColumn(
+          label: ColumnTitleWidget(
+            title: title,
+            isFirst: index == 0,
+            isLast: index == columnsTitles.length - 1,
+          ),
+        );
+      }).toList(),
+      rows: items.map((item) {
+        return DataRow(cells: cellsWidgets(item));
+      }).toList(),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/details_steps_widget.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/steps_cubit/cubit/steps_cubit.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/space_step_part_widget.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/step_two_details_widget.dart';
+
+class DetailsStepsWidget extends StatelessWidget {
+  final TextEditingController pointsController;
+  final BookableSpacemodel? editingBookableSpace;
+  const DetailsStepsWidget({
+    super.key,
+    required this.pointsController,
+    this.editingBookableSpace,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
+      child: BlocBuilder<StepsCubit, StepsState>(builder: (context, state) {
+        return switch (state) {
+          StepOneState() => const SpacesStepDetailsWidget(),
+          StepTwoState() => StepTwoDetailsWidget(
+              pointsController: pointsController,
+              editingBookableSpace: editingBookableSpace,
+            ),
+          StepsInitial() => const SizedBox(),
+        };
+      }),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/bottom_pagination_part_widget.dart

@@ -0,0 +1,158 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/bookable_spaces_bloc/bookable_spaces_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class PaginationButtonsWidget extends StatelessWidget {
+  const PaginationButtonsWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<BookableSpacesBloc, BookableSpacesState>(
+      builder: (context, state) {
+        if (state is BookableSpacesLoaded) {
+          final totalPages = state.bookableSpacesList.totalPages;
+          final currentPage = state.bookableSpacesList.page;
+
+          List<Widget> paginationItems = [];
+
+          // « Two pages back
+          if (currentPage > 2) {
+            paginationItems.add(
+              _buildArrowButton(
+                label: '«',
+                onTap: () {
+                  context.read<BookableSpacesBloc>().add(
+                        LoadBookableSpacesEvent(
+                          BookableSpacesParams(currentPage: currentPage - 2),
+                        ),
+                      );
+                },
+              ),
+            );
+          }
+
+          // < One page back
+          if (currentPage > 1) {
+            paginationItems.add(
+              _buildArrowButton(
+                label: '<',
+                onTap: () {
+                  context.read<BookableSpacesBloc>().add(
+                        LoadBookableSpacesEvent(
+                          BookableSpacesParams(currentPage: currentPage - 1),
+                        ),
+                      );
+                },
+              ),
+            );
+          }
+
+          // Page numbers
+          for (int i = 1; i <= totalPages; i++) {
+            paginationItems.add(
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 4),
+                child: GestureDetector(
+                  onTap: () {
+                    if (i != currentPage) {
+                      context.read<BookableSpacesBloc>().add(
+                            LoadBookableSpacesEvent(
+                              BookableSpacesParams(currentPage: i),
+                            ),
+                          );
+                    }
+                  },
+                  child: Container(
+                    width: 30,
+                    height: 30,
+                    alignment: Alignment.center,
+                    decoration: BoxDecoration(
+                      color: i == currentPage
+                          ? ColorsManager.dialogBlueTitle
+                          : Colors.grey[300],
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    child: Text(
+                      '$i',
+                      style: TextStyle(
+                        color: i == currentPage ? Colors.white : Colors.black,
+                        fontWeight: i == currentPage
+                            ? FontWeight.bold
+                            : FontWeight.normal,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            );
+          }
+
+          // > One page forward
+          if (currentPage < totalPages) {
+            paginationItems.add(
+              _buildArrowButton(
+                label: '>',
+                onTap: () {
+                  context.read<BookableSpacesBloc>().add(
+                        LoadBookableSpacesEvent(
+                          BookableSpacesParams(currentPage: currentPage + 1),
+                        ),
+                      );
+                },
+              ),
+            );
+          }
+
+          // » Two pages forward
+          if (currentPage + 1 < totalPages) {
+            paginationItems.add(
+              _buildArrowButton(
+                label: '»',
+                onTap: () {
+                  context.read<BookableSpacesBloc>().add(
+                        LoadBookableSpacesEvent(
+                          BookableSpacesParams(currentPage: currentPage + 2),
+                        ),
+                      );
+                },
+              ),
+            );
+          }
+
+          return Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: paginationItems,
+          );
+        } else {
+          return const SizedBox.shrink();
+        }
+      },
+    );
+  }
+
+  Widget _buildArrowButton(
+      {required String label, required VoidCallback onTap}) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 4),
+      child: GestureDetector(
+        onTap: onTap,
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+          decoration: BoxDecoration(
+            color: Colors.grey[300],
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Text(
+            label,
+            style: const TextStyle(
+              color: Colors.black,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/table_part_widget.dart

@@ -0,0 +1,201 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/data/remote_update_bookable_space_service.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/update_bookable_space_param.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/bookable_spaces_bloc/bookable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/update_bookable_spaces/update_bookable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/screens/setup_bookable_spaces_dialog.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/custom_data_table.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';
+
+class TableOfBookableSpacesWidget extends StatelessWidget {
+  const TableOfBookableSpacesWidget({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<BookableSpacesBloc, BookableSpacesState>(
+      builder: (context, state) {
+        if (state is BookableSpacesLoading) {
+          return const Center(child: CircularProgressIndicator());
+        } else if (state is BookableSpacesError) {
+          return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
+            Text(state.error),
+            const SizedBox(
+              height: 5,
+            ),
+            ElevatedButton(
+                onPressed: () => context
+                    .read<BookableSpacesBloc>()
+                    .add(LoadBookableSpacesEvent(
+                      BookableSpacesParams(currentPage: 1),
+                    )),
+                child: const Text('Try Again'))
+          ]);
+        } else if (state is BookableSpacesLoaded) {
+          return CustomDataTable<BookableSpacemodel>(
+            items: state.bookableSpacesList.data,
+            cellsWidgets: (space) => [
+              DataCell(
+                Padding(
+                    padding: const EdgeInsetsGeometry.only(left: 10),
+                    child: Text(
+                      space.spaceName,
+                      style: const TextStyle(fontSize: 11),
+                    )),
+              ),
+              DataCell(Padding(
+                  padding: const EdgeInsetsGeometry.only(left: 10),
+                  child: Text(
+                    space.spaceVirtualAddress,
+                    style: const TextStyle(fontSize: 11),
+                  ))),
+              DataCell(Container(
+                padding: const EdgeInsetsGeometry.only(left: 10),
+                width: 200,
+                child: Wrap(
+                  spacing: 4,
+                  children: space.spaceConfig!.bookableDays
+                      .map((day) => Text(
+                            day,
+                            style: const TextStyle(fontSize: 11),
+                          ))
+                      .toList(),
+                ),
+              )),
+              DataCell(
+                Padding(
+                  padding: const EdgeInsetsGeometry.only(left: 10),
+                  child: Text(
+                    space.spaceConfig!.bookingStartTime!.format(context),
+                    style: const TextStyle(fontSize: 11),
+                  ),
+                ),
+              ),
+              DataCell(
+                Padding(
+                  padding: const EdgeInsetsGeometry.only(left: 10),
+                  child: Text(
+                    space.spaceConfig!.bookingEndTime!.format(context),
+                    style: const TextStyle(fontSize: 11),
+                  ),
+                ),
+              ),
+              DataCell(Padding(
+                  padding: const EdgeInsetsGeometry.only(left: 10),
+                  child: Text(
+                    '${space.spaceConfig!.cost} Points',
+                    style: const TextStyle(fontSize: 11),
+                  ))),
+              DataCell(Center(
+                child: Transform.scale(
+                  scale: 0.7,
+                  child: BlocConsumer<UpdateBookableSpacesBloc,
+                      UpdateBookableSpacesState>(
+                    listener: (context, updateState) {
+                      if (updateState is UpdateBookableSpaceSuccess) {
+                        context.read<BookableSpacesBloc>().add(
+                              InsertUpdatedSpaceEvent(
+                                bookableSpaces: state.bookableSpacesList,
+                                bookableSpace: space,
+                                updatedBookableSpaceConfig:
+                                    updateState.bookableSpaceConfig,
+                              ),
+                            );
+                      }
+                    },
+                    builder: (context, updateState) {
+                      final isLoading =
+                          updateState is UpdateBookableSpaceLoading &&
+                              updateState.updatingSpaceUuid == space.spaceUuid;
+                      if (isLoading) {
+                        return const Center(child: CircularProgressIndicator());
+                      }
+                      return Switch(
+                        trackOutlineColor:
+                            WidgetStateProperty.resolveWith<Color>(
+                                (Set<WidgetState> states) {
+                          return ColorsManager.whiteColors;
+                        }),
+                        value: space.spaceConfig!.availability,
+                        activeTrackColor: ColorsManager.blueColor,
+                        inactiveTrackColor: ColorsManager.grayBorder,
+                        thumbColor: WidgetStateProperty.resolveWith<Color>(
+                            (Set<WidgetState> states) {
+                          return ColorsManager.whiteColors;
+                        }),
+                        onChanged: (value) {
+                          context.read<UpdateBookableSpacesBloc>().add(
+                                UpdateBookableSpace(
+                                    updatedParams: UpdateBookableSpaceParam(
+                                  spaceUuid: space.spaceUuid,
+                                  availability: value,
+                                )),
+                              );
+                        },
+                      );
+                    },
+                  ),
+                ),
+              )),
+              DataCell(Center(
+                child: ElevatedButton(
+                  onPressed: () {
+                    final bookableBloc = context.read<BookableSpacesBloc>();
+
+                    showDialog(
+                      context: context,
+                      builder: (context) => MultiBlocProvider(
+                        providers: [
+                          BlocProvider.value(
+                            value: bookableBloc,
+                          ),
+                          BlocProvider(
+                            create: (context) => UpdateBookableSpacesBloc(
+                              RemoteUpdateBookableSpaceService(HTTPService()),
+                            ),
+                          ),
+                        ],
+                        child: SetupBookableSpacesDialog(
+                          editingBookableSpace: space,
+                        ),
+                      ),
+                    );
+                  },
+                  style: ElevatedButton.styleFrom(
+                    padding: EdgeInsets.zero,
+                    fixedSize: const Size(50, 30),
+                    elevation: 1,
+                  ),
+                  child: SvgPicture.asset(
+                    Assets.settings,
+                    height: 15,
+                    color: ColorsManager.blue1,
+                  ),
+                ),
+              )),
+            ],
+            columnsTitles: const [
+              'Space',
+              'Space Virtual Address',
+              'Bookable Days',
+              'Booking Start Time',
+              'Booking End Time',
+              'Cost',
+              'Availability',
+              'Settings',
+            ],
+          );
+        } else {
+          return const SizedBox();
+        }
+      },
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/top_part_widget.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/icon_text_button.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/bookable_spaces_bloc/bookable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/screens/setup_bookable_spaces_dialog.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class RowOfButtonsTitleWidget extends StatelessWidget {
+  const RowOfButtonsTitleWidget({
+    super.key,
+    required this.pageController,
+  });
+
+  final PageController pageController;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsetsGeometry.symmetric(vertical: 5),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            children: [
+              ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(12),
+                    ),
+                  ),
+                  child: SvgPicture.asset(
+                    Assets.backButtonIcon,
+                    height: 15,
+                  ),
+                  onPressed: () {
+                    pageController.jumpToPage(1);
+                  }),
+              const SizedBox(
+                width: 10,
+              ),
+              Text(
+                'Manage Bookable Spaces',
+                style: TextStyle(
+                    fontSize: 18,
+                    color: ColorsManager.vividBlue.withValues(
+                      alpha: 0.7,
+                    ),
+                    fontWeight: FontWeight.w700),
+              )
+            ],
+          ),
+          SvgTextButton(
+            svgSize: 15,
+            fontSize: 10,
+            fontWeight: FontWeight.bold,
+            svgAsset: Assets.addButtonIcon,
+            label: 'Set Up a Bookable Spaces',
+            onPressed: () {
+              final bloc = context.read<BookableSpacesBloc>();
+              showDialog(
+                context: context,
+                builder: (context) => BlocProvider.value(
+                  value: bloc,
+                  child: SetupBookableSpacesDialog(),
+                ),
+              );
+            },
+          )
+        ],
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/next_first_step_button.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/steps_cubit/cubit/steps_cubit.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/buttons_divider_bottom_dialog_widget.dart';
+
+class NextFirstStepButton extends StatelessWidget {
+  final List<BookableSpacemodel> selectedSpaces;
+
+  const NextFirstStepButton({
+    super.key,
+    required this.selectedSpaces,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ButtonsDividerBottomDialogWidget(
+      title: 'Next',
+      onNextPressed: selectedSpaces.isEmpty
+          ? null
+          : () {
+              context.read<StepsCubit>().goToNextStep();
+              context
+                  .read<NonBookableSpacesBloc>()
+                  .add(CheckConfigurValidityEvent());
+            },
+      onCancelPressed: () => context.pop(),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/points_part_widget.dart

@@ -0,0 +1,142 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/cubit/toggle_points_switch_cubit.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/search_unbookable_spaces_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class PointsPartWidget extends StatefulWidget {
+  final BookableSpacemodel? editingBookableSpace;
+  const PointsPartWidget({
+    super.key,
+    required this.pointsController,
+    this.editingBookableSpace,
+  });
+
+  final TextEditingController pointsController;
+
+  @override
+  State<PointsPartWidget> createState() => _PointsPartWidgetState();
+}
+
+class _PointsPartWidgetState extends State<PointsPartWidget> {
+  @override
+  void initState() {
+    if (widget.editingBookableSpace != null) {
+      widget.pointsController.text =
+          widget.editingBookableSpace!.spaceConfig!.cost.toString();
+    }
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<TogglePointsSwitchCubit, TogglePointsSwitchState>(
+      builder: (context, state) {
+        return Column(
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  children: [
+                    if (state is ActivatePointsSwitch)
+                      Text(
+                        '* ',
+                        style: Theme.of(context)
+                            .textTheme
+                            .bodyMedium!
+                            .copyWith(color: Colors.red),
+                      )
+                    else
+                      const SizedBox(
+                        width: 11,
+                      ),
+                    const Text('Points/hrs'),
+                  ],
+                ),
+                Transform.scale(
+                  scale: 0.7,
+                  child: Switch(
+                    trackOutlineColor: WidgetStateProperty.resolveWith<Color>(
+                        (Set<WidgetState> states) {
+                      return ColorsManager.whiteColors;
+                    }),
+                    activeTrackColor: ColorsManager.blueColor,
+                    inactiveTrackColor: ColorsManager.grayBorder,
+                    thumbColor: WidgetStateProperty.resolveWith<Color>(
+                        (Set<WidgetState> states) {
+                      return ColorsManager.whiteColors;
+                    }),
+                    value: context.watch<TogglePointsSwitchCubit>().switchValue,
+                    onChanged: (value) {
+                      if (value) {
+                        context
+                            .read<TogglePointsSwitchCubit>()
+                            .activateSwitch();
+                        context
+                            .read<NonBookableSpacesBloc>()
+                            .selectedBookableSpaces
+                            .forEach(
+                              (e) => e.spaceConfig!.cost = -1,
+                            );
+                        context
+                            .read<NonBookableSpacesBloc>()
+                            .add(CheckConfigurValidityEvent());
+                      } else {
+                        context
+                            .read<TogglePointsSwitchCubit>()
+                            .unActivateSwitch();
+                        widget.pointsController.clear();
+                        context
+                            .read<NonBookableSpacesBloc>()
+                            .selectedBookableSpaces
+                            .forEach(
+                              (e) => e.spaceConfig!.cost = 0,
+                            );
+                        context
+                            .read<NonBookableSpacesBloc>()
+                            .add(CheckConfigurValidityEvent());
+                      }
+                    },
+                  ),
+                )
+              ],
+            ),
+            const SizedBox(
+              height: 5,
+            ),
+            if (state is ActivatePointsSwitch)
+              SearchUnbookableSpacesWidget(
+                title: 'Ex: 0',
+                height: 40,
+                onChanged: (p0) {
+                  context
+                      .read<NonBookableSpacesBloc>()
+                      .selectedBookableSpaces
+                      .forEach(
+                        (e) => e.spaceConfig!.cost = int.parse(
+                          widget.pointsController.text.isEmpty
+                              ? '0'
+                              : widget.pointsController.text,
+                        ),
+                      );
+                  context
+                      .read<NonBookableSpacesBloc>()
+                      .add(CheckConfigurValidityEvent());
+                },
+                controller: widget.pointsController,
+                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+                suffix: const SizedBox(),
+              )
+            else
+              const SizedBox(),
+          ],
+        );
+      },
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/save_second_step_button.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/update_bookable_space_param.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/update_bookable_spaces/update_bookable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/buttons_divider_bottom_dialog_widget.dart';
+
+class SaveSecondStepButton extends StatelessWidget {
+  final List<BookableSpacemodel> selectedSpaces;
+  final TextEditingController pointsController;
+  final bool isEditingMode;
+
+  const SaveSecondStepButton({
+    super.key,
+    required this.selectedSpaces,
+    required this.pointsController,
+    required this.isEditingMode,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<NonBookableSpacesBloc, NonBookableSpacesState>(
+      builder: (context, state) {
+        return ButtonsDividerBottomDialogWidget(
+          title: 'Save',
+          onNextPressed: state is UnValidSaveButtonState
+              ? null
+              : () {
+                  if (selectedSpaces.any(
+                    (element) => element.isValid,
+                  )) {
+                    isEditingMode
+                        ? callEditLogic(context)
+                        : context.read<NonBookableSpacesBloc>().add(
+                              SendBookableSpacesToApi(),
+                            );
+                  }
+                },
+          onCancelPressed: () => context.pop(),
+        );
+      },
+    );
+  }
+
+  void callEditLogic(BuildContext context) {
+    context.read<UpdateBookableSpacesBloc>().add(
+          UpdateBookableSpace(
+            onSuccess: () =>
+                context.read<NonBookableSpacesBloc>().add(CallInitStateEvent()),
+            updatedParams: UpdateBookableSpaceParam.fromBookableModel(
+              context
+                  .read<NonBookableSpacesBloc>()
+                  .selectedBookableSpaces
+                  .first,
+            ),
+          ),
+        );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/search_unbookable_spaces_widget.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SearchUnbookableSpacesWidget extends StatelessWidget {
+  final String title;
+  final Widget? suffix;
+  final double? height;
+  final double? width;
+  final TextEditingController? controller;
+  final List<TextInputFormatter>? inputFormatters;
+  final void Function(String)? onChanged;
+  const SearchUnbookableSpacesWidget({
+    required this.title,
+    this.controller,
+    this.onChanged,
+    this.suffix,
+    this.height,
+    this.width,
+    this.inputFormatters,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: width ?? 480,
+      height: height ?? 30,
+      padding: const EdgeInsets.only(top: 4),
+      decoration: BoxDecoration(
+        color: ColorsManager.whiteColors,
+        borderRadius: BorderRadius.circular(12),
+        boxShadow: const [
+          BoxShadow(
+            color: ColorsManager.shadowOfSearchTextfield,
+            offset: Offset(0, 4),
+            blurRadius: 5,
+          ),
+        ],
+      ),
+      child: TextField(
+        controller: controller,
+        inputFormatters: inputFormatters,
+        onChanged: onChanged,
+        decoration: InputDecoration(
+          contentPadding:
+              const EdgeInsets.symmetric(vertical: 5, horizontal: 15),
+          hintText: title,
+          hintStyle: const TextStyle(color: ColorsManager.hintTextGrey),
+          border: InputBorder.none,
+          suffixIcon: suffix ??
+              const Icon(Icons.search,
+                  size: 20, color: ColorsManager.hintTextGrey),
+        ),
+        style: const TextStyle(
+          fontSize: 14,
+          color: ColorsManager.hintTextGrey,
+        ),
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/space_step_part_widget.dart

@@ -0,0 +1,173 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/params/non_bookable_spaces_params.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/search_unbookable_spaces_widget.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/unbookable_list_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SpacesStepDetailsWidget extends StatefulWidget {
+  const SpacesStepDetailsWidget({
+    super.key,
+  });
+
+  @override
+  State<SpacesStepDetailsWidget> createState() =>
+      _SpacesStepDetailsWidgetState();
+}
+
+class _SpacesStepDetailsWidgetState extends State<SpacesStepDetailsWidget> {
+  ScrollController scrollController = ScrollController();
+  int currentPage = 1;
+  String? currentSearchTerm;
+  bool isLoadingMore = false;
+
+  @override
+  void initState() {
+    super.initState();
+
+    scrollController.addListener(() {
+      if (scrollController.position.pixels >=
+          scrollController.position.maxScrollExtent - 100) {
+        final state = context.read<NonBookableSpacesBloc>().state;
+        if (state is NonBookableSpacesLoaded &&
+            state.nonBookableSpaces.hasNext &&
+            !isLoadingMore) {
+          isLoadingMore = true;
+          currentPage++;
+          context.read<NonBookableSpacesBloc>().add(
+                LoadUnBookableSpacesEvent(
+                  nonBookableSpacesParams: NonBookableSpacesParams(
+                    currentPage: currentPage,
+                    searchedWords: currentSearchTerm,
+                  ),
+                ),
+              );
+        }
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const Text(
+          'Select Space',
+          style: TextStyle(
+            fontWeight: FontWeight.w700,
+            color: ColorsManager.blackColor,
+          ),
+        ),
+        const SizedBox(
+          height: 20,
+        ),
+        Container(
+          width: 450,
+          height: 480,
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(20),
+            boxShadow: const [
+              BoxShadow(
+                color: ColorsManager.shadowOfDetailsContainer,
+                offset: Offset.zero,
+                blurRadius: 5,
+              ),
+            ],
+          ),
+          child: Column(
+            children: [
+              Container(
+                width: 520,
+                height: 70,
+                padding:
+                    const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
+                decoration: const BoxDecoration(
+                  color: ColorsManager.circleRolesBackground,
+                  borderRadius: BorderRadius.vertical(
+                    top: Radius.circular(20),
+                  ),
+                ),
+                child: SearchUnbookableSpacesWidget(
+                  title: 'Search',
+                  onChanged: (p0) {
+                    currentSearchTerm = p0;
+                    currentPage = 1;
+                    context.read<NonBookableSpacesBloc>().add(
+                          LoadUnBookableSpacesEvent(
+                            nonBookableSpacesParams: NonBookableSpacesParams(
+                              currentPage: currentPage,
+                              searchedWords: currentSearchTerm,
+                            ),
+                          ),
+                        );
+                  },
+                ),
+              ),
+              Expanded(
+                child:
+                    BlocConsumer<NonBookableSpacesBloc, NonBookableSpacesState>(
+                  listener: (context, state) {
+                    if (state is NonBookableSpacesLoaded) {
+                      isLoadingMore = false;
+                    }
+                  },
+                  builder: (context, state) {
+                    return switch (state) {
+                      NonBookableSpacesError(error: final error) => Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Text(error),
+                            const SizedBox(height: 5),
+                            ElevatedButton(
+                              onPressed: () {
+                                context.read<NonBookableSpacesBloc>().add(
+                                      LoadUnBookableSpacesEvent(
+                                        nonBookableSpacesParams:
+                                            NonBookableSpacesParams(
+                                          currentPage: currentPage,
+                                          searchedWords: currentSearchTerm,
+                                        ),
+                                      ),
+                                    );
+                              },
+                              child: const Text('Try Again'),
+                            ),
+                          ],
+                        ),
+                      NonBookableSpacesLoading(lastNonBookableSpaces: null) =>
+                        const Center(child: CircularProgressIndicator()),
+                      NonBookableSpacesLoading(
+                        lastNonBookableSpaces: final spaces
+                      ) =>
+                        UnbookableListWidget(
+                          scrollController: scrollController,
+                          nonBookableSpaces: spaces!,
+                        ),
+                      NonBookableSpacesLoaded(
+                        nonBookableSpaces: final spaces
+                      ) =>
+                        UnbookableListWidget(
+                          scrollController: scrollController,
+                          nonBookableSpaces: spaces,
+                        ),
+                      _ => const SizedBox(),
+                    };
+                  },
+                ),
+              )
+            ],
+          ),
+        )
+      ],
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/step_two_details_widget.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/cubit/toggle_points_switch_cubit.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/booking_period_widget.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/points_part_widget.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/week_checkbox_title_widget.dart';
+
+class StepTwoDetailsWidget extends StatelessWidget {
+  final TextEditingController pointsController;
+  final BookableSpacemodel? editingBookableSpace;
+  const StepTwoDetailsWidget({
+    super.key,
+    required this.pointsController,
+    this.editingBookableSpace,
+  });
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 450,
+      height: 480,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          WeekDaysCheckboxRow(
+            editingBookableSpace: editingBookableSpace,
+          ),
+          const SizedBox(
+            height: 20,
+          ),
+          BookingPeriodWidget(
+            editingBookableSpace: editingBookableSpace,
+          ),
+          const SizedBox(
+            height: 20,
+          ),
+          BlocProvider(
+            create: editingBookableSpace == null
+                ? (context) => TogglePointsSwitchCubit()..activateSwitch()
+                : editingBookableSpace!.spaceConfig!.cost == 0
+                    ? (context) => TogglePointsSwitchCubit()..unActivateSwitch()
+                    : (context) => TogglePointsSwitchCubit()..activateSwitch(),
+            child: PointsPartWidget(
+                pointsController: pointsController,
+                editingBookableSpace: editingBookableSpace),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/stepper_part_widget.dart

@@ -0,0 +1,123 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/steps_cubit/cubit/steps_cubit.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class StepperPartWidget extends StatelessWidget {
+  const StepperPartWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.all(20),
+      padding: const EdgeInsetsGeometry.only(left: 20),
+      child: BlocBuilder<StepsCubit, StepsState>(
+        builder: (context, state) {
+          if (state is StepOneState) {
+            return Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              children: [
+                const SizedBox(
+                  height: 10,
+                ),
+                const CircleTitleStepperWidget(
+                  title: 'Space',
+                ),
+                Container(
+                    padding: const EdgeInsets.only(left: 3),
+                    alignment: Alignment.centerLeft,
+                    height: 50,
+                    child: const VerticalDivider(
+                      width: 8,
+                    )),
+                const CircleTitleStepperWidget(
+                  title: 'Settings',
+                  titleColor: ColorsManager.softGray,
+                  circleColor: ColorsManager.whiteColors,
+                  borderColor: ColorsManager.textGray,
+                )
+              ],
+            );
+          } else if (state is StepTwoState) {
+            return Column(
+              children: [
+                const SizedBox(
+                  height: 10,
+                ),
+                const CircleTitleStepperWidget(
+                  title: 'Space',
+                  titleColor: ColorsManager.softGray,
+                  cicleIcon: Icon(
+                    Icons.check,
+                    color: ColorsManager.whiteColors,
+                    size: 12,
+                  ),
+                  circleColor: ColorsManager.trueIconGreen,
+                  radius: 15,
+                  borderColor: ColorsManager.trueIconGreen,
+                ),
+                Container(
+                    padding: const EdgeInsets.only(left: 3),
+                    alignment: Alignment.centerLeft,
+                    height: 50,
+                    child: const VerticalDivider(
+                      width: 8,
+                    )),
+                const CircleTitleStepperWidget(
+                  title: 'Settings',
+                )
+              ],
+            );
+          } else {
+            return const SizedBox();
+          }
+        },
+      ),
+    );
+  }
+}
+
+class CircleTitleStepperWidget extends StatelessWidget {
+  final double? radius;
+  final Widget? cicleIcon;
+  final Color? circleColor;
+  final Color? borderColor;
+  final Color? titleColor;
+  final String title;
+  const CircleTitleStepperWidget({
+    super.key,
+    required this.title,
+    this.circleColor,
+    this.borderColor,
+    this.cicleIcon,
+    this.titleColor,
+    this.radius,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Container(
+          width: radius ?? 15,
+          height: radius ?? 15,
+          decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: circleColor ?? ColorsManager.blue1,
+              border: Border.all(color: borderColor ?? ColorsManager.blue1)),
+          child: cicleIcon,
+        ),
+        const SizedBox(
+          width: 10,
+        ),
+        Text(
+          title,
+          style: TextStyle(
+            fontWeight: FontWeight.w700,
+            color: titleColor ?? ColorsManager.blackColor,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/time_picker_widget.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class TimePickerWidget extends StatefulWidget {
+  final String title;
+  TimePickerWidget({
+    super.key,
+    required this.onTimePicked,
+    required this.title,
+  });
+  late NonBookableSpacesBloc nonBookableSpacesBloc;
+  final void Function(TimeOfDay? timePicked) onTimePicked;
+  @override
+  State<TimePickerWidget> createState() => _TimePickerWidgetState();
+}
+
+class _TimePickerWidgetState extends State<TimePickerWidget> {
+  TimeOfDay? timePicked;
+  @override
+  void initState() {
+    widget.nonBookableSpacesBloc = context.read<NonBookableSpacesBloc>();
+
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      borderRadius: BorderRadius.circular(10),
+      onTap: () async {
+        final tempTime = await showTimePicker(
+          context: context,
+          initialTime: TimeOfDay.now(),
+          builder: (context, child) {
+            return Theme(
+              data: ThemeData.light().copyWith(
+                colorScheme: const ColorScheme.light(
+                  primary: ColorsManager.primaryColor,
+                  onSurface: Colors.black,
+                ),
+              ),
+              child: child!,
+            );
+          },
+        );
+        widget.onTimePicked(tempTime);
+        timePicked = tempTime;
+        widget.nonBookableSpacesBloc.add(CheckConfigurValidityEvent());
+        setState(() {});
+      },
+      child: Container(
+        width: 100,
+        height: 32,
+        decoration: const BoxDecoration(
+          borderRadius: BorderRadius.only(
+            topRight: Radius.circular(10),
+            bottomRight: Radius.circular(10),
+          ),
+        ),
+        alignment: Alignment.centerLeft,
+        padding: const EdgeInsets.symmetric(horizontal: 8),
+        child: Text(
+          timePicked == null ? widget.title : timePicked!.format(context),
+          style: TextStyle(
+            color: ColorsManager.blackColor.withValues(alpha: 0.4),
+            fontSize: 12,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/unbookable_list_widget.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/check_box_space_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart';
+
+class UnbookableListWidget extends StatelessWidget {
+  final PaginatedDataModel<BookableSpacemodel> nonBookableSpaces;
+  const UnbookableListWidget({
+    super.key,
+    required this.scrollController,
+    required this.nonBookableSpaces,
+  });
+
+  final ScrollController scrollController;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 490,
+      decoration: const BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.vertical(
+          bottom: Radius.circular(20),
+        ),
+      ),
+      padding: const EdgeInsets.only(top: 10, left: 20, bottom: 5),
+      child: ListView.separated(
+        separatorBuilder: (context, index) => const SizedBox(
+          height: 5,
+        ),
+        controller: scrollController,
+        itemCount: nonBookableSpaces.data.length,
+        itemBuilder: (context, index) {
+          if (index < nonBookableSpaces.data.length) {
+            return CheckBoxSpaceWidget(
+              nonBookableSpace: nonBookableSpaces.data[index],
+              selectedSpaces:
+                  context.read<NonBookableSpacesBloc>().selectedBookableSpaces,
+            );
+          } else {
+            return const Padding(
+              padding: EdgeInsets.symmetric(vertical: 10),
+              child: Center(child: CircularProgressIndicator()),
+            );
+          }
+        },
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/week_checkbox_title_widget.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';
+
+class WeekDaysCheckboxRow extends StatefulWidget {
+  final BookableSpacemodel? editingBookableSpace;
+  const WeekDaysCheckboxRow({
+    super.key,
+    this.editingBookableSpace,
+  });
+
+  @override
+  State<WeekDaysCheckboxRow> createState() => _WeekDaysCheckboxRowState();
+}
+
+class _WeekDaysCheckboxRowState extends State<WeekDaysCheckboxRow> {
+  final Map<String, bool> _daysChecked = {
+    'Mon': false,
+    'Tue': false,
+    'Wed': false,
+    'Thu': false,
+    'Fri': false,
+    'Sat': false,
+    'Sun': false,
+  };
+  @override
+  void initState() {
+    super.initState();
+
+    final existingDays =
+        widget.editingBookableSpace?.spaceConfig?.bookableDays ?? [];
+
+    for (var day in _daysChecked.keys) {
+      if (existingDays.contains(day)) {
+        _daysChecked[day] = true;
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: _daysChecked.entries.map((entry) {
+        return Expanded(
+          child: Row(
+            children: [
+              Expanded(
+                child: Checkbox(
+                  value: entry.value,
+                  onChanged: (newValue) {
+                    setState(() {
+                      _daysChecked[entry.key] = newValue ?? false;
+                      final selectedDays = _daysChecked.entries
+                          .where((e) => e.value)
+                          .map((e) => e.key)
+                          .toList();
+
+                      for (var space in context
+                          .read<NonBookableSpacesBloc>()
+                          .selectedBookableSpaces) {
+                        space.spaceConfig!.bookableDays = selectedDays;
+                      }
+                    });
+
+                    context
+                        .read<NonBookableSpacesBloc>()
+                        .add(CheckConfigurValidityEvent());
+                  },
+                ),
+              ),
+              Expanded(
+                  child: Text(
+                entry.key,
+                style: const TextStyle(fontSize: 10),
+              )),
+            ],
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

lib/pages/access_management/view/access_management.dart

@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/booking_page.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/view/booking_page.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/screens/manage_bookable_spaces_screen.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/booking_page.dart' hide BookingPage;
 import 'package:syncrow_web/pages/access_management/view/access_overview_content.dart';
 import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
@@ -71,9 +73,14 @@ class _AccessManagementPageState extends State<AccessManagementPage>
         scaffoldBody: PageView(
           controller: _pageController,
           physics: const NeverScrollableScrollPhysics(),
-          children: const [
-            AccessOverviewContent(),
-            BookingPage(),
+          children: [
+            const AccessOverviewContent(),
+            BookingPage(
+              pageController: _pageController,
+            ),
+            ManageBookableSpacesPage(
+              pageController: _pageController,
+            ),
           ],
         ),
       ),

lib/pages/common/custom_table.dart

@@ -132,6 +132,8 @@ class _DynamicTableState extends State<DynamicTable> {
           child: SingleChildScrollView(
             controller: _horizontalScrollController,
             scrollDirection: Axis.horizontal,
+            physics:
+                widget.isEmpty ? const NeverScrollableScrollPhysics() : null,
             child: SizedBox(
               width: _totalTableWidth,
               child: Column(
@@ -164,7 +166,6 @@ class _DynamicTableState extends State<DynamicTable> {
                       ],
                     ),
                   ),
-
                   Expanded(
                     child: widget.isEmpty
                         ? _buildEmptyState()
@@ -265,7 +266,7 @@ class _DynamicTableState extends State<DynamicTable> {
                 ),
               ],
             ),
-            SizedBox(height: widget.size.height * 0.5),
+            SizedBox(height: widget.size.height * 0.2),
           ],
         ),
       );

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

@@ -46,15 +46,15 @@ class DeviceManagementBloc
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
 
       if (spaceBloc.state.selectedCommunities.isEmpty) {
-        devices = await DevicesManagementApi().fetchDevices('', '', projectUuid);
+        devices = await DevicesManagementApi().fetchDevices(
+          projectUuid,
+        );
       } else {
-        for (final community in spaceBloc.state.selectedCommunities) {
+        for (var community in spaceBloc.state.selectedCommunities) {
           final spacesList =
               spaceBloc.state.selectedCommunityAndSpaces[community] ?? [];
-          for (final space in spacesList) {
-            devices.addAll(await DevicesManagementApi()
-                .fetchDevices(community, space, projectUuid));
-          }
+          devices.addAll(await DevicesManagementApi()
+              .fetchDevices(projectUuid, spacesId: spacesList));
         }
       }
 

lib/pages/device_managment/all_devices/view/device_managment_page.dart

@@ -24,12 +24,12 @@ class DeviceManagementPage extends StatefulWidget with HelperResponsiveLayout {
 }
 
 class _DeviceManagementPageState extends State<DeviceManagementPage> {
-
-@override
+  @override
   void initState() {
     context.read<SpaceTreeBloc>().add(InitialEvent());
     super.initState();
   }
+
   @override
   Widget build(BuildContext context) {
     return MultiBlocProvider(
@@ -90,7 +90,7 @@ class _DeviceManagementPageState extends State<DeviceManagementPage> {
                             const TriggerSwitchTabsEvent(isRoutineTab: true));
                       },
                 child: Text(
-                  'Routines',
+                  'Workflow Automation',
                   style: context.textTheme.titleMedium?.copyWith(
                     color: state.routineTab
                         ? ColorsManager.whiteColors

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

@@ -29,7 +29,9 @@ class CountdownModeButtons extends StatelessWidget {
       children: [
         Expanded(
           child: DefaultButton(
+            elevation: 2.5,
             height: 40,
+            borderRadius: 8,
             onPressed: () => Navigator.pop(context),
             backgroundColor: ColorsManager.boxColor,
             child: Text('Cancel', style: context.textTheme.bodyMedium),
@@ -39,6 +41,8 @@ class CountdownModeButtons extends StatelessWidget {
         Expanded(
           child: isActive
               ? DefaultButton(
+                  elevation: 2.5,
+                  borderRadius: 8,
                   height: 40,
                   onPressed: () {
                     context.read<ScheduleBloc>().add(
@@ -49,10 +53,12 @@ class CountdownModeButtons extends StatelessWidget {
                           ),
                         );
                   },
-                  backgroundColor: Colors.red,
+                  backgroundColor: ColorsManager.red100,
                   child: const Text('Stop'),
                 )
               : DefaultButton(
+                  elevation: 2.5,
+                  borderRadius: 8,
                   height: 40,
                   onPressed: () {
                     context.read<ScheduleBloc>().add(
@@ -63,7 +69,7 @@ class CountdownModeButtons extends StatelessWidget {
                               countDownCode: countDownCode),
                         );
                   },
-                  backgroundColor: ColorsManager.primaryColor,
+                  backgroundColor: ColorsManager.primaryColorWithOpacity,
                   child: const Text('Save'),
                 ),
         ),

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

@@ -226,6 +226,7 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
                     index.toString().padLeft(2, '0'),
                     style: TextStyle(
                       fontSize: 24,
+                      fontWeight: FontWeight.w400,
                       color: isActive ? ColorsManager.grayColor : Colors.black,
                     ),
                   ),
@@ -240,7 +241,8 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
           label,
           style: const TextStyle(
             color: ColorsManager.grayColor,
-            fontSize: 18,
+            fontSize: 24,
+            fontWeight: FontWeight.w400,
           ),
         ),
       ],

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

@@ -31,12 +31,11 @@ class BuildScheduleView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (_) => ScheduleBloc(
-        deviceId: deviceUuid,
-      )
+      create: (_) => ScheduleBloc(deviceId: deviceUuid,)
         ..add(ScheduleGetEvent(category: category))
         ..add(ScheduleFetchStatusEvent(
-            deviceId: deviceUuid, countdownCode: countdownCode ?? '')),
+            deviceId: deviceUuid,
+            countdownCode: countdownCode ?? '')),
       child: Dialog(
         backgroundColor: Colors.white,
         insetPadding: const EdgeInsets.all(20),
@@ -77,7 +76,8 @@ class BuildScheduleView extends StatelessWidget {
                                         category: category,
                                         time: '',
                                         function: Status(
-                                            code: code.toString(), value: null),
+                                            code: code.toString(),
+                                            value: true),
                                         days: [],
                                       ),
                                       isEdit: false,

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

@@ -13,9 +13,9 @@ class ScheduleHeader extends StatelessWidget {
         Text(
           'Scheduling',
           style: TextStyle(
-            fontWeight: FontWeight.bold,
-            fontSize: 22,
-            color: ColorsManager.dialogBlueTitle,
+            color: ColorsManager.primaryColorWithOpacity,
+            fontWeight: FontWeight.w700,
+            fontSize: 30,
           ),
         ),
         Container(

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

@@ -27,7 +27,7 @@ class ScheduleManagementUI extends StatelessWidget {
           width: 170,
           height: 40,
           child: DefaultButton(
-            borderColor: ColorsManager.boxColor,
+            borderColor: ColorsManager.grayColor.withOpacity(0.5),
             padding: 2,
             backgroundColor: ColorsManager.graysColor,
             borderRadius: 15,

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

@@ -19,6 +19,8 @@ class ScheduleModeButtons extends StatelessWidget {
       children: [
         Expanded(
           child: DefaultButton(
+            elevation: 2.5,
+            borderRadius: 8,
             height: 40,
             onPressed: () {
               Navigator.pop(context);
@@ -33,9 +35,11 @@ class ScheduleModeButtons extends StatelessWidget {
         const SizedBox(width: 20),
         Expanded(
           child: DefaultButton(
+            elevation: 2.5,
+            borderRadius: 8,
             height: 40,
             onPressed: onSave,
-            backgroundColor: ColorsManager.primaryColor,
+            backgroundColor: ColorsManager.primaryColorWithOpacity,
             child: const Text('Save'),
           ),
         ),

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

@@ -35,12 +35,12 @@ class ScheduleModeSelector extends StatelessWidget {
         ),
         const SizedBox(height: 4),
         Row(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: [
             _buildRadioTile(
                 context, 'Countdown', ScheduleModes.countdown, currentMode),
             _buildRadioTile(
                 context, 'Schedule', ScheduleModes.schedule, currentMode),
+            const Spacer(flex: 1),
             // _buildRadioTile(
             //     context, 'Circulate', ScheduleModes.circulate, currentMode),
             // _buildRadioTile(
@@ -65,6 +65,7 @@ class ScheduleModeSelector extends StatelessWidget {
           style: context.textTheme.bodySmall!.copyWith(
             fontSize: 13,
             color: ColorsManager.blackColor,
+            fontWeight: FontWeight.w400,
           ),
         ),
         leading: Radio<ScheduleModes>(

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

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/device_managment/schedule_device/schedule_widgets/schedule_mode_buttons.dart';
 import 'package:syncrow_web/pages/device_managment/water_heater/models/schedule_entry.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 
 class ScheduleDialogHelper {
   static const List<String> allDays = [
@@ -56,8 +58,9 @@ class ScheduleDialogHelper {
                       Text(
                         isEdit ? 'Edit Schedule' : 'Add Schedule',
                         style: Theme.of(context).textTheme.titleLarge!.copyWith(
-                              color: Colors.blue,
-                              fontWeight: FontWeight.bold,
+                              color: ColorsManager.primaryColorWithOpacity,
+                              fontWeight: FontWeight.w700,
+                              fontSize: 30,
                             ),
                       ),
                       const SizedBox(),
@@ -69,9 +72,9 @@ class ScheduleDialogHelper {
                     height: 40,
                     child: ElevatedButton(
                       style: ElevatedButton.styleFrom(
-                        backgroundColor: Colors.grey[200],
+                        backgroundColor: ColorsManager.boxColor,
                         shape: RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(15),
+                          borderRadius: BorderRadius.circular(8),
                         ),
                       ),
                       onPressed: () async {
@@ -110,39 +113,27 @@ class ScheduleDialogHelper {
                 ],
               ),
               actions: [
-                SizedBox(
-                  width: 100,
-                  child: OutlinedButton(
-                    onPressed: () {
-                      Navigator.pop(ctx, null);
-                    },
-                    child: const Text('Cancel'),
-                  ),
+                ScheduleModeButtons(
+                  onSave: () {
+                    dynamic temp;
+                    if (deviceType == 'CUR_2') {
+                      temp = functionOn! ? 'open' : 'close';
+                    } else {
+                      temp = functionOn;
+                    }
+                    final entry = ScheduleEntry(
+                      category: schedule?.category ?? 'switch_1',
+                      time: _formatTimeOfDayToISO(selectedTime),
+                      function: Status(
+                        code: code ?? 'switch_1',
+                        value: temp,
+                      ),
+                      days: _convertSelectedDaysToStrings(selectedDays),
+                      scheduleId: schedule.scheduleId,
+                    );
+                    Navigator.pop(ctx, entry);
+                  },
                 ),
-                SizedBox(
-                    width: 100,
-                    child: ElevatedButton(
-                      onPressed: () {
-                        dynamic temp;
-                        if (deviceType == 'CUR_2') {
-                          temp = functionOn! ? 'open' : 'close';
-                        } else {
-                          temp = functionOn;
-                        }
-                        final entry = ScheduleEntry(
-                          category: schedule?.category ?? 'switch_1',
-                          time: _formatTimeOfDayToISO(selectedTime),
-                          function: Status(
-                            code: code ?? 'switch_1',
-                            value: temp,
-                          ),
-                          days: _convertSelectedDaysToStrings(selectedDays),
-                          scheduleId: schedule.scheduleId,
-                        );
-                        Navigator.pop(ctx, entry);
-                      },
-                      child: const Text('Save'),
-                    )),
               ],
             );
           },

lib/pages/roles_and_permission/model/edit_user_model.dart

@@ -153,6 +153,7 @@ class EditUserModel {
   final String? jobTitle; // can be empty
   final String roleType; // e.g. "ADMIN"
   final List<UserSpaceModel> spaces;
+  final String? companyName;
 
   EditUserModel({
     required this.uuid,
@@ -167,6 +168,7 @@ class EditUserModel {
     required this.jobTitle,
     required this.roleType,
     required this.spaces,
+    this.companyName,
   });
 
   /// Create a [UserData] from JSON data
@@ -182,6 +184,7 @@ class EditUserModel {
       invitedBy: json['invitedBy'] as String,
       phoneNumber: json['phoneNumber'] ?? '',
       jobTitle: json['jobTitle'] ?? '',
+      companyName: json['companyName'] as String?,
       roleType: json['roleType'] as String,
       spaces: (json['spaces'] as List<dynamic>)
           .map((e) => UserSpaceModel.fromJson(e as Map<String, dynamic>))

lib/pages/roles_and_permission/model/roles_user_model.dart

@@ -12,7 +12,7 @@ class RolesUserModel {
   final dynamic jobTitle;
   final dynamic createdDate;
   final dynamic createdTime;
-
+  final String? companyName;
   RolesUserModel({
     required this.uuid,
     required this.createdAt,
@@ -27,6 +27,7 @@ class RolesUserModel {
     this.jobTitle,
     required this.createdDate,
     required this.createdTime,
+    this.companyName,
   });
 
   factory RolesUserModel.fromJson(Map<String, dynamic> json) {
@@ -47,6 +48,7 @@ class RolesUserModel {
           : json['jobTitle'],
       createdDate: json['createdDate'],
       createdTime: json['createdTime'],
+      companyName: json['companyName'] as String?,
     );
   }
 }

lib/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_bloc.dart

@@ -52,7 +52,7 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
   final TextEditingController lastNameController = TextEditingController();
   final TextEditingController emailController = TextEditingController();
   final TextEditingController phoneController = TextEditingController();
-  final TextEditingController jobTitleController = TextEditingController();
+  final TextEditingController companyNameController = TextEditingController();
   final TextEditingController roleSearchController = TextEditingController();
 
   bool? isCompleteBasics;
@@ -352,7 +352,7 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
       bool res = await UserPermissionApi().sendInviteUser(
           email: emailController.text,
           firstName: firstNameController.text,
-          jobTitle: jobTitleController.text,
+          companyName: companyNameController.text,
           lastName: lastNameController.text,
           phoneNumber: phoneController.text,
           roleUuid: roleSelected,
@@ -405,7 +405,7 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
       bool res = await UserPermissionApi().editInviteUser(
           userId: event.userId,
           firstName: firstNameController.text,
-          jobTitle: jobTitleController.text,
+          companyName: companyNameController.text,
           lastName: lastNameController.text,
           phoneNumber: phoneController.text,
           roleUuid: roleSelected,
@@ -455,7 +455,7 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
   Future<void> checkEmail(
       CheckEmailEvent event, Emitter<UsersState> emit) async {
     emit(UsersLoadingState());
-    String?  res = await UserPermissionApi().checkEmail(
+    String? res = await UserPermissionApi().checkEmail(
       emailController.text,
     );
     checkEmailValid = res!;
@@ -529,7 +529,7 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
           lastNameController.text = res.lastName;
           emailController.text = res.email;
           phoneController.text = res.phoneNumber ?? '';
-          jobTitleController.text = res.jobTitle ?? '';
+          companyNameController.text = res.companyName ?? '';
           res.roleType;
           res.spaces.map((space) {
             selectedIds.add(space.uuid);
@@ -645,7 +645,7 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
     lastNameController.dispose();
     emailController.dispose();
     phoneController.dispose();
-    jobTitleController.dispose();
+    companyNameController.dispose();
     roleSearchController.dispose();
     return super.close();
   }

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

@@ -317,7 +317,7 @@ class BasicsView extends StatelessWidget {
                           child: Row(
                         children: [
                           Text(
-                            'Job Title',
+                            'Company Name',
                             style: context.textTheme.bodyMedium?.copyWith(
                               fontWeight: FontWeight.w400,
                               fontSize: 13,
@@ -328,11 +328,11 @@ class BasicsView extends StatelessWidget {
                       Padding(
                         padding: const EdgeInsets.all(8.0),
                         child: TextFormField(
-                          controller: _blocRole.jobTitleController,
+                          controller: _blocRole.companyNameController,
                           style:
                               const TextStyle(color: ColorsManager.blackColor),
                           decoration: inputTextFormDeco(
-                                  hintText: "Job Title (Optional)")
+                                  hintText: 'Company Name (Optional)')
                               .copyWith(
                             hintStyle: context.textTheme.bodyMedium?.copyWith(
                                 fontWeight: FontWeight.w400,

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

@@ -411,7 +411,7 @@ class UsersPage extends StatelessWidget {
                       titles: const [
                         "Full Name",
                         "Email Address",
-                        "Job Title",
+                        "Company Name",
                         "Role",
                         "Creation Date",
                         "Creation Time",
@@ -424,7 +424,7 @@ class UsersPage extends StatelessWidget {
                         return [
                           Text('${user.firstName} ${user.lastName}'),
                           Text(user.email),
-                          Text(user.jobTitle),
+                          Center(child: Text(user.companyName ?? '-')),
                           Text(user.roleType ?? ''),
                           Text(user.createdDate ?? ''),
                           Text(user.createdTime ?? ''),

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

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

lib/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_presence_sensor.dart

@@ -96,9 +96,7 @@ class _WallPresenceSensorState extends State<FlushPresenceSensor> {
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                DialogHeader(widget.dialogType == 'THEN'
-                    ? 'Presence Sensor Functions'
-                    : 'Presence Sensor Condition'),
+                const DialogHeader('Presence Sensor'),
                 Expanded(child: _buildMainContent(context, state)),
                 _buildDialogFooter(context, state),
               ],

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/shared/models/paginated_data_model.dart

@@ -40,4 +40,22 @@ class PaginatedDataModel<T> extends Equatable {
         totalItems,
         totalPages,
       ];
+
+  PaginatedDataModel<T> copyWith({
+    List<T>? data,
+    int? page,
+    int? size,
+    bool? hasNext,
+    int? totalItems,
+    int? totalPages,
+  }) {
+    return PaginatedDataModel<T>(
+      data: data ?? this.data,
+      page: page ?? this.page,
+      size: size ?? this.size,
+      hasNext: hasNext ?? this.hasNext,
+      totalItems: totalItems ?? this.totalItems,
+      totalPages: totalPages ?? this.totalPages,
+    );
+  }
 }

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(
-            communitiesService: DebouncedCommunitiesService(
-              RemoteCommunitiesService(HTTPService()),
-            ),
-          )..add(const LoadCommunities(LoadCommunitiesParam())),
+          create: (context) => CommunitiesTreeSelectionBloc(
+            communitiesBloc: communitiesBloc,
+          ),
         ),
-        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 AnimationController _animationController;
+  late final TransformationController _transformationController;
+  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,
-  ) {
-    for (final space in spaces) {
+    Set<String> highlightedUuids, {
+    CommunityModel? community,
+    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(
-            buildSpaceContainer: () {
-              return Opacity(
-                opacity: hasNoSelectedSpace || isHighlighted ? 1.0 : 0.5,
-                child: Tooltip(
-                  message: space.spaceName,
-                  preferBelow: false,
-                  child: SpaceCell(
-                    onTap: () => _onSpaceTapped(space),
-                    icon: space.icon,
-                    name: space.spaceName,
-                  ),
+          child: Draggable<SpaceReorderDataModel>(
+            data: reorderData,
+            feedback: Material(
+              color: Colors.transparent,
+              child: Opacity(
+                opacity: 0.2,
+                child: SizedBox(
+                  width: _cardWidth,
+                  height: _cardHeight,
+                  child: spaceCard,
                 ),
-              );
-            },
-            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(
-          SpaceConnectionModel(from: space.uuid, to: child.uuid),
+        connections.add(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,
-        vertical: MediaQuery.sizeOf(context).height * 0.3,
+        horizontal: context.screenWidth * 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,
-          height: MediaQuery.sizeOf(context).height * 5,
+          width: context.screenWidth * 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
-              ?.copyWith(color: ColorsManager.blackColor),
+          style: theme.textTheme.headlineLarge?.copyWith(
+            color: ColorsManager.blackColor,
+          ),
         ),
         if (selectedCommunity != null)
           Row(
@@ -67,8 +91,9 @@ class CommunityStructureHeader extends StatelessWidget {
                     Flexible(
                       child: SelectableText(
                         selectedCommunity.name,
-                        style: theme.textTheme.bodyLarge
-                            ?.copyWith(color: ColorsManager.blackColor),
+                        style: theme.textTheme.bodyLarge?.copyWith(
+                          color: ColorsManager.blackColor,
+                        ),
                         maxLines: 1,
                       ),
                     ),
@@ -93,12 +118,24 @@ class CommunityStructureHeader extends StatelessWidget {
               CommunityStructureHeaderActionButtons(
                 onDelete: (space) {},
                 onDuplicate: (space) {},
-                onEdit: (space) {
-                  SpaceDetailsDialogHelper.showEdit(
-                    context,
-                    spaceModel: selectedSpace!,
-                  );
-                },
+                onEdit: (space) => SpaceDetailsDialogHelper.showEdit(
+                  context,
+                  spaceModel: selectedSpace!,
+                  communityUuid: selectedCommunity.uuid,
+                  onSuccess: (updatedSpaceDetails) {
+                    final communitiesBloc = context.read<CommunitiesBloc>();
+                    final updatedSpaces = _updateRecursive(
+                      selectedCommunity.spaces,
+                      updatedSpaceDetails,
+                    );
+
+                    final community = selectedCommunity.copyWith(
+                      spaces: updatedSpaces,
+                    );
+
+                    communitiesBloc.add(CommunitiesUpdateCommunity(community));
+                  },
+                ),
                 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 {
-  const CreateSpaceButton({super.key});
+class CreateSpaceButton extends StatefulWidget {
+  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(
-      onTap: () => SpaceDetailsDialogHelper.showCreate(context),
-      child: Container(
-        height: 60,
-        decoration: BoxDecoration(
-          color: Colors.white,
-          borderRadius: BorderRadius.circular(20),
-          boxShadow: [
-            BoxShadow(
-              color: Colors.grey.withValues(alpha: 0.5),
-              spreadRadius: 5,
-              blurRadius: 7,
-              offset: const Offset(0, 3),
-            ),
-          ],
+    return Tooltip(
+      margin: const EdgeInsets.symmetric(vertical: 24),
+      message: 'Create a new space',
+      child: InkWell(
+        onTap: () => SpaceDetailsDialogHelper.showCreate(
+          context,
+          communityUuid: widget.communityUuid,
         ),
-        child: Center(
-          child: Container(
-            width: 40,
-            height: 40,
-            decoration: const BoxDecoration(
-              color: ColorsManager.boxColor,
-              shape: BoxShape.circle,
-            ),
-            child: const Icon(
-              Icons.add,
-              color: Colors.blue,
+        child: MouseRegion(
+          onEnter: (_) => setState(() => _isHovered = true),
+          onExit: (_) => setState(() => _isHovered = false),
+          child: AnimatedOpacity(
+            duration: const Duration(milliseconds: 100),
+            opacity: _isHovered ? 1.0 : 0.45,
+            child: Container(
+              width: 150,
+              height: 90,
+              decoration: BoxDecoration(
+                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(
-          clipBehavior: Clip.none,
-          alignment: Alignment.center,
-          children: [
-            widget.buildSpaceContainer(),
-            if (isHovered)
-              Positioned(
-                bottom: 0,
-                child: PlusButtonWidget(
-                  offset: Offset.zero,
-                  onButtonTap: widget.onTap,
-                ),
+      child: Stack(
+        clipBehavior: Clip.none,
+        alignment: Alignment.center,
+        children: [
+          widget.buildSpaceContainer(),
+          if (isHovered)
+            Positioned(
+              bottom: 0,
+              child: PlusButtonWidget(
+                offset: Offset.zero,
+                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(
-        children: [spacer, Expanded(child: CreateSpaceButton()), spacer],
+      replacement: Row(
+        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,
-    List<SpaceModel>? expandedSpaces,
+    bool clearSelectedSpace = false,
   }) {
     return CommunitiesTreeSelectionState(
       selectedCommunity: selectedCommunity ?? this.selectedCommunity,
-      selectedSpace: selectedSpace ?? this.selectedSpace,
+      selectedSpace: clearSelectedSpace ? null : selectedSpace ?? this.selectedSpace,
     );
   }
 
   @override
-  List<Object?> get props => [
-        selectedCommunity,
-        selectedSpace,
-      ];
-  }
+  List<Object?> get props => [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),
-            ElevatedButton(
+            FilledButton(
               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(
-        create: (context) => SpaceDetailsBloc(
-          RemoteSpaceDetailsService(httpService: HTTPService()),
-        ),
-        child: SpaceDetailsDialog(
-          context: context,
-          title: const SelectableText('Create Space'),
-          spaceModel: SpaceModel.empty(),
-          onSave: (space) {},
+      builder: (_) => MultiBlocProvider(
+        providers: [
+          BlocProvider(
+            create: (context) => SpaceDetailsBloc(
+              RemoteSpaceDetailsService(httpService: HTTPService()),
+            ),
+          ),
+        ],
+        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(
-        create: (context) => SpaceDetailsBloc(
-          RemoteSpaceDetailsService(httpService: HTTPService()),
-        ),
-        child: SpaceDetailsDialog(
-          context: context,
-          title: const SelectableText('Edit Space'),
-          spaceModel: spaceModel,
-          onSave: (space) {},
+      builder: (_) => MultiBlocProvider(
+        providers: [
+          BlocProvider(
+            create: (context) => SpaceDetailsBloc(
+              RemoteSpaceDetailsService(httpService: HTTPService()),
+            ),
+          ),
+          BlocProvider(
+            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
-            .read<CommunitiesTreeSelectionBloc>()
-            .state
-            .selectedCommunity!
-            .uuid,
+        communityUuid: widget.communityUuid,
       );
       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,
-      orElse: () => Tag(
-        name: value,
-        uuid: '',
-        createdAt: '',
-        updatedAt: '',
-      ),
+      (e) => e.name.toLowerCase() == lowerCaseValue,
+      orElse: () => Tag(uuid: '${const Uuid().v4()}-NewTag', name: value),
     );
     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(
-        path: 'endpoint',
-        body: space.toJson(),
-        expectedResponseModel: (data) => SpaceDetailsModel.fromJson(
-          data as Map<String, dynamic>,
-        ),
+      final path = await _makeUrl(param);
+      await _httpService.put(
+        path: path,
+        body: param.toJson(),
+        expectedResponseModel: (data) {
+          final response = data as Map<String, dynamic>;
+          final isSuccess = response['success'] as bool;
+          if (!isSuccess) {
+            throw APIException(response['error'] as String);
+          }
+          return 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 {
-  Future<SpaceDetailsModel> updateSpace(SpaceDetailsModel space);
+abstract interface class UpdateSpaceService {
+  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/pages/visitor_password/bloc/visitor_password_bloc.dart

@@ -181,7 +181,7 @@ class VisitorPasswordBloc
       effectiveTimeTimeStamp = selectedTimestamp;
       startTimeAccess = selectedDateTime.toString().split('.').first;
     } else {
-      // END TIME VALIDATION
+
       if (effectiveTimeTimeStamp != null &&
           selectedTimestamp < effectiveTimeTimeStamp!) {
         await showDialog<void>(