use TimeOfDay instead of String

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/view/booking_page.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/pages/access_management/booking_system/view/widgets/icon_text_button.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/constants/routes_const.dart';
 
 class BookingPage extends StatelessWidget {
   const BookingPage({super.key});
@@ -33,8 +35,11 @@ class BookingPage extends StatelessWidget {
                           SvgTextButton(
                               svgAsset: Assets.homeIcon,
                               label: 'Manage Bookable Spaces',
-                              onPressed: () {}),
-                          SizedBox(width: 20),
+                              onPressed: () {
+                                context
+                                    .go(RoutesConst.manageBookableSapcesPage);
+                              }),
+                          const SizedBox(width: 20),
                           SvgTextButton(
                               svgAsset: Assets.groupIcon,
                               label: 'Manage Users',

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

@@ -0,0 +1,61 @@
+import 'package:flutter/material.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';
+
+class DummyBookableSpacesService implements BookableSpacesService {
+  @override
+  Future<PaginatedDataModel<BookableSpacemodel>> load(
+      BookableSpacesParams param) async {
+    return PaginatedDataModel(
+      data: [
+        BookableSpacemodel(
+          spaceName: 'space1',
+          spaceConfig: BookableSpaceConfig(
+            configUuid: 'uuid',
+            bookableDays: ['wed', 'saturday'],
+            availability: true,
+            bookingEndTime: const TimeOfDay(hour: 13, minute: 20),
+            bookingStartTime: const TimeOfDay(hour: 13, minute: 20),
+            cost: 6,
+          ),
+          spaceUuid: 'uuiiddd',
+          spaceVirtualAddress: 'idvirtual1',
+        ),
+        BookableSpacemodel(
+          spaceName: 'space2',
+          spaceConfig: BookableSpaceConfig(
+            configUuid: 'uuid',
+            bookableDays: ['wed', 'thur'],
+            availability: true,
+            bookingEndTime: const TimeOfDay(hour: 13, minute: 20),
+            bookingStartTime: const TimeOfDay(hour: 13, minute: 20),
+            cost: 6,
+          ),
+          spaceUuid: 'uuiiddd',
+          spaceVirtualAddress: 'idvirtual1',
+        ),
+        BookableSpacemodel(
+          spaceName: 'space3',
+          spaceConfig: BookableSpaceConfig(
+            configUuid: 'uuid',
+            bookableDays: ['wed', 'fri', 'tues'],
+            availability: true,
+            bookingEndTime: const TimeOfDay(hour: 13, minute: 20),
+            bookingStartTime: const TimeOfDay(hour: 13, minute: 20),
+            cost: 6,
+          ),
+          spaceUuid: 'uuiiddd',
+          spaceVirtualAddress: 'idvirtual1',
+        )
+      ],
+      page: 1,
+      size: 1,
+      hasNext: false,
+      totalItems: 3,
+      totalPages: 1,
+    );
+  }
+}

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

@@ -0,0 +1,73 @@
+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/models/bookable_space_config.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/service/non_bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/send_bookable_spaces_to_api_params.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart';
+
+class DummyNonNookableSpaces implements NonBookableSpacesService {
+  @override
+  Future<PaginatedDataModel<BookableSpacemodel>> load(
+      NonBookableSpacesParams params) {
+    return Future.value(PaginatedDataModel<BookableSpacemodel>(
+      data: [
+        BookableSpacemodel(
+          spaceName: 'space3',
+          spaceConfig: BookableSpaceConfig(
+            configUuid: 'uuid',
+            bookableDays: ['wed', 'saturday'],
+            availability: true,
+            bookingEndTime: const TimeOfDay(hour: 13, minute: 20),
+            bookingStartTime: const TimeOfDay(hour: 6, minute: 20),
+            cost: 6,
+          ),
+          spaceUuid: 'uuiiddd',
+          spaceVirtualAddress: 'idvirtual1',
+        ),
+        BookableSpacemodel(
+          spaceName: 'space3',
+          spaceConfig: BookableSpaceConfig(
+            configUuid: 'uuid',
+            bookableDays: ['wed', 'saturday', 'thuresday'],
+            availability: true,
+            bookingEndTime: const TimeOfDay(hour: 13, minute: 20),
+            bookingStartTime: const TimeOfDay(hour: 5, minute: 20),
+            cost: 5,
+          ),
+          spaceUuid: 'uuiiddd',
+          spaceVirtualAddress: 'idvirtual2',
+        ),
+        BookableSpacemodel(
+          spaceName: 'space3',
+          spaceConfig: BookableSpaceConfig(
+            configUuid: 'uuid',
+            bookableDays: [
+              'saturday',
+              'sunday',
+              'Monday',
+              'tuesday',
+              'wed',
+              'thuresday'
+            ],
+            availability: true,
+            bookingEndTime: const TimeOfDay(hour: 13, minute: 20),
+            bookingStartTime: const TimeOfDay(hour: 15, minute: 20),
+            cost: 2,
+          ),
+          spaceUuid: 'uuiiddd',
+          spaceVirtualAddress: 'idvirtual3',
+        )
+      ],
+      page: 1,
+      size: 1,
+      hasNext: false,
+      totalPages: 0,
+      totalItems: 0,
+    ));
+  }
+
+  @override
+  Future<void> sendBookableSpacesToApi(
+      SendBookableSpacesToApiParams params) async {}
+}

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

@@ -0,0 +1,45 @@
+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 tags';
+  @override
+  Future<PaginatedDataModel<BookableSpacemodel>> load(
+      BookableSpacesParams param) async {
+    try {
+      final response = await _httpService.get(
+        //TODO: you  have to Chage this API call Path
+        path: ApiEndpoints.listTags,
+        //*************|********** */
+        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,71 @@
+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/service/non_bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/send_bookable_spaces_to_api_params.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 {
+  final HTTPService _httpService;
+  RemoteNonBookableSpaces(this._httpService);
+  static const _defaultErrorMessage = 'Failed to load Spaces';
+
+  @override
+  Future<PaginatedDataModel<BookableSpacemodel>> load(
+      NonBookableSpacesParams params) async {
+    try {
+      final response = await _httpService.get(
+        //TODO: you  have to Chage this API call Path
+        path: ApiEndpoints.listTags,
+        //*************|********** */
+        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);
+    }
+  }
+
+  @override
+  Future<void> sendBookableSpacesToApi(
+      SendBookableSpacesToApiParams params) async {
+    try {
+      await _httpService.post(
+        path: ApiEndpoints.addBookableSpaces,
+        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/domain/models/bookable_space_config.dart

@@ -0,0 +1,45 @@
+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,
+    required this.bookingEndTime,
+    required this.bookingStartTime,
+    required this.cost,
+  });
+  factory BookableSpaceConfig.zero() => BookableSpaceConfig(
+        configUuid: '',
+        bookableDays: [],
+        availability: false,
+        bookingEndTime: TimeOfDay.now(),
+        bookingStartTime: TimeOfDay.now(),
+        cost: -1,
+      );
+  factory BookableSpaceConfig.fromJson(Map<String, dynamic> json) =>
+      BookableSpaceConfig(
+        configUuid: json['uuid'] as String,
+        bookableDays: json['daysAvailable'] as List<String>,
+        availability: (json['active'] as bool?) ?? false,
+        bookingEndTime: parseTimeOfDay(json['startTime'] as String),
+        bookingStartTime: 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 =>
+      configUuid.isNotEmpty && bookableDays.isNotEmpty && cost > 0;
+}

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

@@ -0,0 +1,42 @@
+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,
+    required this.spaceConfig,
+    required this.spaceVirtualAddress,
+  });
+  factory BookableSpacemodel.zero() => BookableSpacemodel(
+        spaceUuid: '',
+        spaceName: '',
+        spaceConfig: BookableSpaceConfig.zero(),
+        spaceVirtualAddress: '',
+      );
+  factory BookableSpacemodel.fromJson(Map<String, dynamic> json) =>
+      BookableSpacemodel(
+        spaceUuid: json['uuid'] as String,
+        spaceName: json['spaceName'] as String,
+        spaceConfig: BookableSpaceConfig.fromJson(
+            json['bookableConfig'] as Map<String, dynamic>),
+        spaceVirtualAddress: json['spaceVirtualAddress'] 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.isValid;
+}

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/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/service/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/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/presentation/blocs/bookable_spaces_bloc/bookable_spaces_bloc.dart

@@ -0,0 +1,34 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.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);
+  }
+
+  Future<void> _onLoadBookableSpaces(
+      LoadBookableSpacesEvent event, Emitter<BookableSpacesState> emit) async {
+    emit(BookableSpacesLoading());
+    try {
+      final bookableSpaces = await bookableSpacesService.load(event.params);
+      emit(BookableSpacesLoaded(bookableSpacesList: bookableSpaces));
+    } on APIException catch (e) {
+      emit(BookableSpacesError(error: e.message));
+    } catch (e) {
+      emit(
+        BookableSpacesError(error: e.toString()),
+      );
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+part of 'bookable_spaces_bloc.dart';
+
+sealed class BookableSpacesEvent extends Equatable {
+  const BookableSpacesEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class LoadBookableSpacesEvent extends BookableSpacesEvent {
+  final BookableSpacesParams params;
+  const LoadBookableSpacesEvent(this.params);
+}

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

@@ -0,0 +1,26 @@
+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,
+  });
+}

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

@@ -0,0 +1,99 @@
+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/service/non_bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/service/send_bookable_spaces_to_api_params.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<LoadUnBookableSpacesEvent>(_onLoadUnBookableSpacesEvent);
+    on<AddToBookableSpaceEvent>(_onAddToBookableSpaceEvent);
+    on<RemoveFromBookableSpaceEvent>(_onRemoveFromBookableSpaceEvent);
+    on<SendBookableSpacesToApi>(_onSendBookableSpacesToApi);
+  }
+
+  TimeOfDay get endTime =>
+      selectedBookableSpaces.first.spaceConfig.bookingEndTime;
+
+  TimeOfDay get startTime =>
+      selectedBookableSpaces.first.spaceConfig.bookingStartTime;
+  Future<void> _onLoadUnBookableSpacesEvent(LoadUnBookableSpacesEvent event,
+      Emitter<NonBookableSpacesState> emit) async {
+    emit(NonBookableSpacesLoading());
+    try {
+      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;
+
+      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;
+      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(NonBookableSpacesLoading());
+    try {
+      await nonBookableSpacesService.sendBookableSpacesToApi(
+        SendBookableSpacesToApiParams.fromBookableSpacesModel(
+          selectedBookableSpaces,
+        ),
+      );
+    } catch (e) {
+      emit(
+        NonBookableSpacesError(e.toString()),
+      );
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+part of 'non_bookaable_spaces_bloc.dart';
+
+sealed class NonBookableSpacesEvent extends Equatable {
+  const NonBookableSpacesEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+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 {}

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

@@ -0,0 +1,26 @@
+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 {}
+
+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);
+}

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

@@ -0,0 +1,18 @@
+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 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,16 @@
+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 {}
+
+final class StepEditMode extends StepsState {}

lib/pages/access_management/manage_bookable_spaces/presentation/screens/manage_bookable_spaces_screen.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:go_router/go_router.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/view/widgets/icon_text_button.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/data/dummy_bookable_spaces_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/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/pages/access_management/manage_bookable_spaces/presentation/widgets/custom_data_table.dart';
+import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
+import 'package:syncrow_web/web_layout/web_scaffold.dart';
+
+class ManageBookableSpacesPage extends StatefulWidget {
+  const ManageBookableSpacesPage({super.key});
+
+  @override
+  State<ManageBookableSpacesPage> createState() =>
+      _ManageBookableSpacesPageState();
+}
+
+class _ManageBookableSpacesPageState extends State<ManageBookableSpacesPage> {
+  final PageController _pageController = PageController(initialPage: 1);
+  int _currentPageIndex = 1;
+  @override
+  Widget build(BuildContext context) {
+    return WebScaffold(
+      enableMenuSidebar: false,
+      appBarTitle: Text(
+        'Access Management',
+        style: ResponsiveTextTheme.of(context).deviceManagementTitle,
+      ),
+      centerBody: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          TextButton(
+            onPressed: () => _switchPage(0),
+            child: Text(
+              'Access Overview',
+              style: context.textTheme.titleMedium?.copyWith(
+                color: _currentPageIndex == 0 ? Colors.white : Colors.grey,
+                fontWeight:
+                    _currentPageIndex == 0 ? FontWeight.w700 : FontWeight.w400,
+              ),
+            ),
+          ),
+          TextButton(
+            onPressed: () => _switchPage(1),
+            child: Text(
+              'Booking System',
+              style: context.textTheme.titleMedium?.copyWith(
+                color: _currentPageIndex == 1 ? Colors.white : Colors.grey,
+                fontWeight:
+                    _currentPageIndex == 1 ? FontWeight.w700 : FontWeight.w400,
+              ),
+            ),
+          ),
+        ],
+      ),
+      rightBody: const NavigateHomeGridView(),
+      scaffoldBody: BlocProvider(
+        create: (context) => BookableSpacesBloc(
+          DummyBookableSpacesService(),
+          // RemoteBookableSpacesService(HTTPService()),
+        )..add(LoadBookableSpacesEvent(
+            BookableSpacesParams(currentPage: 1),
+          )),
+        child: const ManageBookableSpacesWidget(),
+      ),
+    );
+  }
+
+  void _switchPage(int index) {
+    setState(() => _currentPageIndex = index);
+    _pageController.jumpToPage(index);
+  }
+}
+
+class ManageBookableSpacesWidget extends StatelessWidget {
+  const ManageBookableSpacesWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(20),
+      child: Column(
+        children: [
+          Expanded(
+              flex: 1,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  SvgTextButton(
+                      svgAsset: Assets.backButtonIcon,
+                      label: 'Booking Home',
+                      onPressed: () {
+                        context.pop();
+                      }),
+                  SvgTextButton(
+                    svgAsset: Assets.backButtonIcon,
+                    label: 'Set Up a Bookable Spaces',
+                    onPressed: () async => showDialog(
+                      context: context,
+                      builder: (context) => SetupBookableSpacesDialog(),
+                    ),
+                  )
+                ],
+              )),
+          Expanded(
+            flex: 9,
+            child: BlocBuilder<BookableSpacesBloc, BookableSpacesState>(
+              builder: (context, state) {
+                if (state is BookableSpacesLoading) {
+                  return const CircularProgressIndicator();
+                } else if (state is BookableSpacesError) {
+                  return Text(state.error);
+                } 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)),
+                      ),
+                      DataCell(Padding(
+                          padding: const EdgeInsetsGeometry.only(left: 10),
+                          child: Text(space.spaceVirtualAddress))),
+                      DataCell(SizedBox(
+                        width: 200,
+                        child: Wrap(
+                          spacing: 4,
+                          children: space.spaceConfig.bookableDays
+                              .map((day) => Text(
+                                    day,
+                                    style: const TextStyle(fontSize: 12),
+                                  ))
+                              .toList(),
+                        ),
+                      )),
+                      DataCell(
+                        Padding(
+                          padding: const EdgeInsetsGeometry.only(left: 10),
+                          child: Text(
+                            space.spaceConfig.bookingStartTime.format(context),
+                          ),
+                        ),
+                      ),
+                      DataCell(
+                        Padding(
+                          padding: const EdgeInsetsGeometry.only(left: 10),
+                          child: Text(
+                            space.spaceConfig.bookingEndTime.format(context),
+                          ),
+                        ),
+                      ),
+                      DataCell(Padding(
+                          padding: const EdgeInsetsGeometry.only(left: 10),
+                          child: Text('${space.spaceConfig.cost} Points'))),
+                      DataCell(Center(
+                        child: Transform.scale(
+                          scale: 0.7,
+                          child: Switch(
+                            value: space.spaceConfig.availability,
+                            onChanged: (value) {},
+                          ),
+                        ),
+                      )),
+                      DataCell(Center(
+                        child: ElevatedButton(
+                          onPressed: () {},
+                          child: SvgPicture.asset(Assets.settings),
+                        ),
+                      )),
+                    ],
+                    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/screens/setup_bookable_spaces_dialog.dart

@@ -0,0 +1,146 @@
+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/data/dummy_non_nookable_spaces.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/buttons_divider_bottom_dialog_widget.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';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/stepper_part_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SetupBookableSpacesDialog extends StatelessWidget {
+  final TextEditingController pointsController = TextEditingController();
+  SetupBookableSpacesDialog({super.key});
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider<StepsCubit>(
+          create: (context) => StepsCubit()..initDialogValue(),
+        ),
+        BlocProvider<NonBookableSpacesBloc>(
+          create: (context) => NonBookableSpacesBloc(
+            DummyNonNookableSpaces(),
+          )..add(
+              LoadUnBookableSpacesEvent(
+                nonBookableSpacesParams:
+                    NonBookableSpacesParams(currentPage: 1),
+              ),
+            ),
+        ),
+      ],
+      child: AlertDialog(
+        contentPadding: EdgeInsets.zero,
+        title: 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,
+                  ),
+                )
+              ],
+            ),
+            Builder(builder: (context) {
+              return ButtonsDividerBottomDialogWidget(
+                onNextPressed: () {
+                  final stepsState = context.read<StepsCubit>().state;
+                  final selectedSpaces = context
+                      .read<NonBookableSpacesBloc>()
+                      .selectedBookableSpaces;
+                  if (stepsState is StepOneState) {
+                    if (selectedSpaces.isNotEmpty) {
+                      context.read<StepsCubit>().goToNextStep();
+                    } else {
+                      ScaffoldMessenger.of(context).clearSnackBars();
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(
+                          content: Text('Please select at least one space.'),
+                        ),
+                      );
+                    }
+                  } else if (stepsState is StepTwoState) {
+                    selectedSpaces.forEach(
+                      (e) => e.spaceConfig.cost = int.parse(
+                          pointsController.text.isEmpty
+                              ? '0'
+                              : pointsController.text),
+                    );
+                    if (selectedSpaces.any(
+                      (element) => !element.isValid,
+                    )) {
+                      ScaffoldMessenger.of(context).clearSnackBars();
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(
+                          content: Text('Please fill the required fields.'),
+                        ),
+                      );
+                    } else {
+                      print(selectedSpaces.first.spaceUuid);
+                    }
+                  }
+                },
+                onCancelPressed: () => context.pop(),
+              );
+            }),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class DetailsStepsWidget extends StatelessWidget {
+  final TextEditingController pointsController;
+  const DetailsStepsWidget({
+    super.key,
+    required this.pointsController,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
+      child: BlocBuilder<StepsCubit, StepsState>(
+        builder: (context, state) {
+          if (state is StepOneState) {
+            return SpacesStepDetailsWidget();
+          } else if (state is StepTwoState) {
+            return StepTwoDetailsWidget(
+              pointsController: pointsController,
+            );
+          } else {
+            return const SizedBox();
+          }
+        },
+      ),
+    );
+  }
+}

lib/pages/access_management/manage_bookable_spaces/presentation/widgets/buttons_divider_bottom_dialog_widget.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/presentation/blocs/steps_cubit/cubit/steps_cubit.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class ButtonsDividerBottomDialogWidget extends StatelessWidget {
+  final void Function() onNextPressed;
+  final void Function() onCancelPressed;
+  const ButtonsDividerBottomDialogWidget({
+    super.key,
+    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.grayBorder),
+                  ),
+                ),
+              ),
+            ),
+            Expanded(
+              child: BlocBuilder<StepsCubit, StepsState>(
+                builder: (context, state) {
+                  return InkWell(
+                    borderRadius: const BorderRadius.only(
+                      bottomRight: Radius.circular(26),
+                    ),
+                    onTap: onNextPressed,
+                    child: Container(
+                      height: 40,
+                      alignment: Alignment.center,
+                      decoration: const BoxDecoration(
+                        border: Border(
+                          right: BorderSide(
+                            color: ColorsManager.grayBorder,
+                          ),
+                        ),
+                        borderRadius: BorderRadius.only(
+                          bottomRight: Radius.circular(26),
+                        ),
+                      ),
+                      child: Text(
+                        state is StepOneState ? 'Next' : 'Save',
+                        style: const TextStyle(
+                          color: ColorsManager.blueColor,
+                        ),
+                      ),
+                    ),
+                  );
+                },
+              ),
+            )
+          ],
+        )
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,37 @@
+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),
+        ));
+  }
+}

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/search_unbookable_spaces_widget.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.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,
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+        boxShadow: const [
+          BoxShadow(
+            color: Color(0x26000000),
+            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: Colors.grey),
+          border: InputBorder.none,
+          suffixIcon:
+              suffix ?? const Icon(Icons.search, size: 20, color: Colors.grey),
+        ),
+        style: const TextStyle(
+          fontSize: 14,
+          color: Colors.grey,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,166 @@
+import 'dart:async';
+
+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/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/utils/color_manager.dart';
+
+class SpacesStepDetailsWidget extends StatelessWidget {
+  SpacesStepDetailsWidget({
+    super.key,
+  });
+  Timer? _debounce;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<NonBookableSpacesBloc, NonBookableSpacesState>(
+      builder: (context, state) {
+        if (state is NonBookableSpacesLoading) {
+          return const Center(child: CircularProgressIndicator());
+        } else if (state is NonBookableSpacesError) {
+          return Text(state.error);
+        } else if (state is NonBookableSpacesLoaded) {
+          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: Color(0x40000000),
+                      offset: Offset(0, 4),
+                      blurRadius: 5,
+                    ),
+                  ],
+                ),
+                child: Column(
+                  children: [
+                    Container(
+                      width: 520,
+                      height: 70,
+                      padding: const EdgeInsets.symmetric(
+                          vertical: 15, horizontal: 20),
+                      decoration: const BoxDecoration(
+                        color: Color(0xFFF8F8F8),
+                        borderRadius: BorderRadius.vertical(
+                          top: Radius.circular(20),
+                        ),
+                      ),
+                      child: SearchUnbookableSpacesWidget(
+                        title: 'Search',
+                        onChanged: (p0) {
+                          if (_debounce?.isActive ?? false) _debounce!.cancel();
+                          _debounce =
+                              Timer(const Duration(milliseconds: 500), () {
+                            context.read<NonBookableSpacesBloc>().add(
+                                  LoadUnBookableSpacesEvent(
+                                    nonBookableSpacesParams:
+                                        NonBookableSpacesParams(
+                                      currentPage: 1,
+                                      searchedWords: p0,
+                                    ),
+                                  ),
+                                );
+                          });
+                        },
+                      ),
+                    ),
+                    Expanded(
+                      child: 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,
+                          ),
+                          itemCount: state.nonBookableSpaces.data.length,
+                          itemBuilder: (context, index) => CheckBoxSpaceWidget(
+                            nonBookableSpace:
+                                state.nonBookableSpaces.data[index],
+                          ),
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+              )
+            ],
+          );
+        } else {
+          return const SizedBox();
+        }
+      },
+    );
+  }
+}
+
+class CheckBoxSpaceWidget extends StatefulWidget {
+  final BookableSpacemodel nonBookableSpace;
+
+  const CheckBoxSpaceWidget({
+    super.key,
+    required this.nonBookableSpace,
+  });
+
+  @override
+  State<CheckBoxSpaceWidget> createState() => _CheckBoxSpaceWidgetState();
+}
+
+class _CheckBoxSpaceWidgetState extends State<CheckBoxSpaceWidget> {
+  bool isChecked = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Checkbox(
+          value: isChecked,
+          onChanged: (value) => setState(() {
+            isChecked = value ?? false;
+            if (isChecked) {
+              context.read<NonBookableSpacesBloc>().add(
+                    AddToBookableSpaceEvent(
+                      nonBookableSpace: widget.nonBookableSpace,
+                    ),
+                  );
+            } else {
+              context.read<NonBookableSpacesBloc>().add(
+                    RemoveFromBookableSpaceEvent(
+                      bookableSpace: widget.nonBookableSpace,
+                    ),
+                  );
+            }
+          }),
+        ),
+        const SizedBox(
+          width: 5,
+        ),
+        Text(widget.nonBookableSpace.spaceName),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,151 @@
+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/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/time_picker_widget.dart';
+import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/week_checkbox_title_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/string_utils.dart';
+
+class StepTwoDetailsWidget extends StatelessWidget {
+  final TextEditingController pointsController;
+  const StepTwoDetailsWidget({
+    super.key,
+    required this.pointsController,
+  });
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 450,
+      height: 480,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const WeekDaysCheckboxRow(),
+          const SizedBox(
+            height: 20,
+          ),
+          Row(
+            children: [
+              TitleAndTimePickerWidget(
+                title: 'Booking Start Time',
+                onTimePicked: (timePicked) {
+                  if (timePicked == null) {
+                    return;
+                  }
+                  final nonBookableBloc = context.read<NonBookableSpacesBloc>();
+                  if (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 SizedBox(
+                width: 20,
+              ),
+              TitleAndTimePickerWidget(
+                title: 'Booking End Time',
+                onTimePicked: (timePicked) {
+                  if (timePicked == null) {
+                    return;
+                  }
+                  final nonBookableBloc = context.read<NonBookableSpacesBloc>();
+                  if (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,
+                    );
+                  }
+                },
+              )
+            ],
+          ),
+          const SizedBox(
+            height: 20,
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              Text(
+                '* ',
+                style: Theme.of(context)
+                    .textTheme
+                    .bodyMedium!
+                    .copyWith(color: Colors.red),
+              ),
+              const Text('Points/hrs'),
+            ],
+          ),
+          const SizedBox(
+            height: 5,
+          ),
+          SearchUnbookableSpacesWidget(
+            title: 'Ex: 0',
+            controller: pointsController,
+            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+            suffix: const SizedBox(),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class TitleAndTimePickerWidget extends StatelessWidget {
+  final void Function(TimeOfDay? timePicked) onTimePicked;
+  final String title;
+  const TitleAndTimePickerWidget({
+    super.key,
+    required this.onTimePicked,
+    required this.title,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Text(
+              '* ',
+              style: Theme.of(context)
+                  .textTheme
+                  .bodyMedium!
+                  .copyWith(color: Colors.red),
+            ),
+            Text(title),
+          ],
+        ),
+        const SizedBox(
+          height: 5,
+        ),
+        TimePickerWidget(
+          onTimePicked: onTimePicked,
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,117 @@
+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(
+                    alignment: Alignment.centerLeft,
+                    height: 50,
+                    child: const VerticalDivider(
+                      width: 8,
+                    )),
+                const CircleTitleStepperWidget(
+                  title: 'Settings',
+                  titleColor: ColorsManager.softGray,
+                  circleColor: ColorsManager.softGray,
+                )
+              ],
+            );
+          } 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: 3,
+                ),
+                Container(
+                    alignment: Alignment.centerLeft,
+                    height: 50,
+                    child: const VerticalDivider(
+                      width: 8,
+                    )),
+                const CircleTitleStepperWidget(
+                  title: 'Settings',
+                )
+              ],
+            );
+          } else if (state is StepEditMode) {
+            return const CircleTitleStepperWidget(
+              title: 'Settings',
+            );
+          } else {
+            return const SizedBox();
+          }
+        },
+      ),
+    );
+  }
+}
+
+class CircleTitleStepperWidget extends StatelessWidget {
+  final double? radius;
+  final Widget? cicleIcon;
+  final Color? circleColor;
+  final Color? titleColor;
+  final String title;
+  const CircleTitleStepperWidget({
+    super.key,
+    required this.title,
+    this.circleColor,
+    this.cicleIcon,
+    this.titleColor,
+    this.radius,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        CircleAvatar(
+          minRadius: radius ?? 5,
+          backgroundColor: circleColor ?? 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,83 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_svg/flutter_svg.dart';
+
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class TimePickerWidget extends StatefulWidget {
+  const TimePickerWidget({
+    super.key,
+    required this.onTimePicked,
+  });
+
+  final void Function(TimeOfDay? timePicked) onTimePicked;
+  @override
+  State<TimePickerWidget> createState() => _TimePickerWidgetState();
+}
+
+class _TimePickerWidgetState extends State<TimePickerWidget> {
+  TimeOfDay? timePicked;
+  @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;
+        setState(() {});
+      },
+      child: Row(
+        children: [
+          Container(
+            width: 56,
+            height: 32,
+            decoration: const BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(10),
+                bottomLeft: Radius.circular(10),
+              ),
+            ),
+            alignment: Alignment.center,
+            child: SvgPicture.asset(Assets.clockIcon),
+          ),
+          Container(
+            width: 120,
+            height: 32,
+            decoration: const BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.only(
+                topRight: Radius.circular(10),
+                bottomRight: Radius.circular(10),
+              ),
+            ),
+            alignment: Alignment.centerLeft,
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+            child: Text(
+              timePicked == null
+                  ? TimeOfDay.now().format(context)
+                  : timePicked!.format(context),
+              style: const TextStyle(color: Color(0xB2D5D5D5)),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,62 @@
+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';
+
+class WeekDaysCheckboxRow extends StatefulWidget {
+  const WeekDaysCheckboxRow({super.key});
+
+  @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
+  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;
+                      }
+                    });
+                  },
+                ),
+              ),
+              Expanded(
+                  child: Text(
+                entry.key,
+                style: const TextStyle(fontSize: 10),
+              )),
+            ],
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

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

lib/utils/app_routes.dart

@@ -1,4 +1,5 @@
 import 'package:go_router/go_router.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/view/access_management.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/views/analytics_page.dart';
 import 'package:syncrow_web/pages/auth/view/login_page.dart';
@@ -28,6 +29,10 @@ class AppRoutes {
         path: RoutesConst.accessManagementPage,
         builder: (context, state) => const AccessManagementPage(),
       ),
+      GoRoute(
+        path: RoutesConst.manageBookableSapcesPage,
+        builder: (context, state) => const ManageBookableSpacesPage(),
+      ),
       GoRoute(
         path: RoutesConst.deviceManagementPage,
         builder: (context, state) => const DeviceManagementPage(),

lib/utils/color_manager.dart

@@ -64,6 +64,7 @@ abstract class ColorsManager {
   static const Color circleRolesBackground = Color(0xFFF8F8F8);
   static const Color activeGreen = Color(0xFF99FF93);
   static const Color activeGreenText = Color(0xFF008905);
+  static const Color trueIconGreen = Color(0xFFBBEC6C);
   static const Color disabledPink = Color(0xFFFF9395);
   static const Color disabledRedText = Color(0xFF890002);
   static const Color invitedOrange = Color(0xFFFFE193);

lib/utils/constants/api_const.dart

@@ -46,7 +46,8 @@ abstract class ApiEndpoints {
 // Community Module
   static const String createCommunity = '/projects/{projectId}/communities';
   static const String getCommunityList = '/projects/{projectId}/communities';
-  static const String getCommunityListv2 = '/projects/{projectId}/communities/v2';
+  static const String getCommunityListv2 =
+      '/projects/{projectId}/communities/v2';
   static const String getCommunityById =
       '/projects/{projectId}/communities/{communityId}';
   static const String updateCommunity =
@@ -138,4 +139,7 @@ abstract class ApiEndpoints {
   static const String assignDeviceToRoom =
       '/projects/{projectUuid}/communities/{communityUuid}/spaces/{spaceUuid}/subspaces/{subSpaceUuid}/devices/{deviceUuid}';
   static const String saveSchedule = '/schedule/{deviceUuid}';
+
+  ////booking System
+  static const String addBookableSpaces = '/bookable-spaces';
 }

lib/utils/constants/assets.dart

@@ -18,6 +18,9 @@ class Assets {
       'assets/images/Password_invisible.svg';
   static const String visiblePassword = 'assets/images/password_visible.svg';
   static const String accessIcon = 'assets/images/access_icon.svg';
+  static const String addButtonIcon = 'assets/icons/add_button_Icon.svg';
+  static const String backButtonIcon = 'assets/icons/back_button_icon.svg';
+  static const String emptyDataTable = 'assets/icons/no_data_table.svg';
   static const String spaseManagementIcon =
       'assets/images/spase_management_icon.svg';
   static const String devicesIcon = 'assets/images/devices_icon.svg';
@@ -205,6 +208,7 @@ class Assets {
 
   //assets/icons/ac_lock.svg
   static const String acLock = 'assets/icons/ac_lock.svg';
+  static const String clockIcon = 'assets/icons/clock_icon.svg';
 
   //assets/icons/ac_schedule.svg
   static const String acSchedule = 'assets/icons/ac_schedule.svg';

lib/utils/constants/routes_const.dart

@@ -7,4 +7,5 @@ class RoutesConst {
   static const String spacesManagementPage = '/spaces_management-page';
   static const String rolesAndPermissions = '/roles_and_Permissions-page';
   static const String analytics = '/syncrow_analytics';
+  static const String manageBookableSapcesPage = '/manage_bookable_spaces';
 }

lib/utils/string_utils.dart

@@ -1,6 +1,25 @@
+import 'package:flutter/material.dart';
+
 class StringUtils {
   static String capitalizeFirstLetter(String text) {
     if (text.isEmpty) return text;
     return text[0].toUpperCase() + text.substring(1);
   }
 }
+
+bool isEndTimeAfterStartTime(TimeOfDay start, TimeOfDay end) {
+  final startMinutes = start.hour * 60 + start.minute;
+  final endMinutes = end.hour * 60 + end.minute;
+
+  if (endMinutes <= startMinutes) {
+    return true;
+  }
+
+  return false;
+}
+
+String formatTimeOfDayTo24HourString(TimeOfDay time) {
+  final hour = time.hour.toString().padLeft(2, '0');
+  final minute = time.minute.toString().padLeft(2, '0');
+  return '$hour:$minute';
+}

pubspec.yaml

@@ -44,7 +44,7 @@ dependencies:
   flutter_secure_storage: ^9.2.2
   shared_preferences: ^2.3.0
   dropdown_button2: ^2.3.9
-  data_table_2: ^2.5.15
+  data_table_2: ^2.6.0
   go_router:
   intl: ^0.20.2
   dropdown_search: ^6.0.2