Update SpaceCell widget shadow properties for improved visual appearance

…t Calendar logic

<!--
  Thanks for contributing!

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

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



## Description

<!--- Describe your changes in detail -->
Implement Calendar logic

## Type of Change

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

- [x] ✨ New feature (non-breaking change which adds functionality)
- [ ] 🛠️ 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

.env.development

@@ -1,2 +1,3 @@
 ENV_NAME=development
-BASE_URL=https://syncrow-dev.azurewebsites.net
+BASE_URL=https://syncrow-dev.azurewebsites.net
+RTDB_URL=https://syncrow-dev-79446.asia-southeast1.firebasedatabase.app/

.env.production

@@ -1,2 +1,3 @@
 ENV_NAME=production
-BASE_URL=https://syncrow-staging.azurewebsites.net
+BASE_URL=https://syncrow-staging.azurewebsites.net
+RTDB_URL=https://syncrow-prod-79446.asia-southeast1.firebasedatabase.app/

.env.staging

@@ -1,2 +1,3 @@
 ENV_NAME=staging
-BASE_URL=https://syncrow-staging.azurewebsites.net
+BASE_URL=https://syncrow-staging.azurewebsites.net
+RTDB_URL=https://syncrow-staging-79446.asia-southeast1.firebasedatabase.app/

.vscode/launch.json

@@ -1,67 +1,49 @@
 {
-    "configurations": [
-      
-        {
- 
-            "name": "DEVELOPMENT",
-       
-            "request": "launch",
-       
-            "type": "dart",
-       
-            "args": [
-              "-d",
-              "chrome",
-              "--web-port",
-              "3000",
-              "-t",
-              "lib/main_dev.dart",
-              "--web-experimental-hot-reload",
-            ],
-       
-            "flutterMode": "debug"
-       
-          },{
- 
-            "name": "STAGING",
-       
-            "request": "launch",
-       
-            "type": "dart",
-       
-            "args": [
-                "-d",
-                "chrome",
-                "--web-port",
-                "3000",
-                "-t",
-                "lib/main_staging.dart",
-                "--web-experimental-hot-reload",
-            ],
-       
-            "flutterMode": "debug"
-       
-          },{
- 
-            "name": "PRODUCTION",
-       
-            "request": "launch",
-       
-            "type": "dart",
-       
-            "args": [
-              "-d",
-              "chrome",
-              "--web-port",
-              "3000",
-              "-t",
-              "lib/main.dart",
-              "--web-experimental-hot-reload",
-            ],
-       
-            "flutterMode": "debug"
-       
-          },
-
-    ]
+  "configurations": [
+    {
+      "name": "DEVELOPMENT",
+      "request": "launch",
+      "type": "dart",
+      "args": [
+        "-d",
+        "chrome",
+        "--web-port",
+        "3000",
+        "-t",
+        "lib/main_dev.dart",
+        "--web-experimental-hot-reload"
+      ],
+      "flutterMode": "debug"
+    },
+    {
+      "name": "STAGING",
+      "request": "launch",
+      "type": "dart",
+      "args": [
+        "-d",
+        "chrome",
+        "--web-port",
+        "3000",
+        "-t",
+        "lib/main_staging.dart",
+        "--web-experimental-hot-reload"
+      ],
+      "flutterMode": "debug"
+    },
+    {
+      "name": "PRODUCTION",
+      "request": "launch",
+      "type": "dart",
+      "args": [
+        "-d",
+        "chrome",
+        "--web-port",
+        "3000",
+        "-t",
+        "lib/main.dart",
+        "--web-experimental-hot-reload"
+      ],
+      "flutterMode": "debug"
+    }
+  ]
 }

assets/icons/x_delete.svg

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

firebase.json

@@ -1 +1 @@
-{"flutter":{"platforms":{"android":{"default":{"projectId":"test2-8a3d2","appId":"1:427332280600:android:2bc36fbe82994a3e0c7e6d","fileOutput":"android/app/google-services.json"}},"ios":{"default":{"projectId":"test2-8a3d2","appId":"1:427332280600:ios:14346b200780dc760c7e6d","uploadDebugSymbols":true,"fileOutput":"ios/Runner/GoogleService-Info.plist"}},"macos":{"default":{"projectId":"test2-8a3d2","appId":"1:427332280600:ios:14346b200780dc760c7e6d","uploadDebugSymbols":true,"fileOutput":"macos/Runner/GoogleService-Info.plist"}},"dart":{"lib/firebase_options.dart":{"projectId":"test2-8a3d2","configurations":{"android":"1:427332280600:android:2bc36fbe82994a3e0c7e6d","ios":"1:427332280600:ios:14346b200780dc760c7e6d","macos":"1:427332280600:ios:14346b200780dc760c7e6d","web":"1:427332280600:web:ad50516a87a35a1a0c7e6d","windows":"1:427332280600:web:f7a25537ccd5a7bd0c7e6d"}}}}}}
+{"flutter":{"platforms":{"android":{"default":{"projectId":"test2-8a3d2","appId":"1:427332280600:android:2bc36fbe82994a3e0c7e6d","fileOutput":"android/app/google-services.json"}},"ios":{"default":{"projectId":"test2-8a3d2","appId":"1:427332280600:ios:14346b200780dc760c7e6d","uploadDebugSymbols":true,"fileOutput":"ios/Runner/GoogleService-Info.plist"}},"macos":{"default":{"projectId":"test2-8a3d2","appId":"1:427332280600:ios:14346b200780dc760c7e6d","uploadDebugSymbols":true,"fileOutput":"macos/Runner/GoogleService-Info.plist"}},"dart":{"lib/firebase_options.dart":{"projectId":"syncrow-prod-79446","configurations":{"web":"1:255001682464:web:a03e2d6214c13101561245"}}}}}}

lib/firebase_options.dart

@@ -0,0 +1,16 @@
+import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
+
+final class DefaultFirebaseOptions extends FirebaseOptions {
+  const DefaultFirebaseOptions({
+    required String databaseUrl,
+  }) : super(
+          apiKey: 'AIzaSyDgq5ywsnFVbbQO-Xz1Z4sR5bBcuiDaS9g',
+          appId: '1:255001682464:web:a03e2d6214c13101561245',
+          messagingSenderId: '255001682464',
+          projectId: 'syncrow-prod-79446',
+          authDomain: 'syncrow-prod-79446.firebaseapp.com',
+          storageBucket: 'syncrow-prod-79446.firebasestorage.app',
+          databaseURL: databaseUrl,
+          measurementId: 'G-1850Q89RMK',
+        );
+}

lib/firebase_options_dev.dart

@@ -1,93 +0,0 @@
-// File generated by FlutterFire CLI.
-// ignore_for_file: type=lint
-import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
-import 'package:flutter/foundation.dart'
-    show defaultTargetPlatform, kIsWeb, TargetPlatform;
-
-/// Default [FirebaseOptions] for use with your Firebase apps.
-///
-/// Example:
-/// ```dart
-/// import 'firebase_options.dart';
-/// // ...
-/// await Firebase.initializeApp(
-///   options: DefaultFirebaseOptions.currentPlatform,
-/// );
-/// ```
-class DefaultFirebaseOptionsDev {
-  static FirebaseOptions get currentPlatform {
-    if (kIsWeb) {
-      return web;
-    }
-    switch (defaultTargetPlatform) {
-      case TargetPlatform.android:
-        return android;
-      case TargetPlatform.iOS:
-        return ios;
-      case TargetPlatform.macOS:
-        return macos;
-      case TargetPlatform.windows:
-        return windows;
-      case TargetPlatform.linux:
-        throw UnsupportedError(
-          'DefaultFirebaseOptions have not been configured for linux - '
-          'you can reconfigure this by running the FlutterFire CLI again.',
-        );
-      default:
-        throw UnsupportedError(
-          'DefaultFirebaseOptions are not supported for this platform.',
-        );
-    }
-  }
-
-  static const FirebaseOptions web = FirebaseOptions(
-    apiKey: 'AIzaSyCVEvKsJYzhWDFM-9Od68FE0nPpP933st0',
-    appId: '1:427332280600:web:ad50516a87a35a1a0c7e6d',
-    messagingSenderId: '427332280600',
-    projectId: 'test2-8a3d2',
-    authDomain: 'test2-8a3d2.firebaseapp.com',
-    databaseURL: 'https://test2-8a3d2-default-rtdb.firebaseio.com',
-    storageBucket: 'test2-8a3d2.firebasestorage.app',
-    measurementId: 'G-Z1RTTTV5H9',
-  );
-
-  static const FirebaseOptions android = FirebaseOptions(
-    apiKey: 'AIzaSyA5qOErxdm0zJmoHIB0TixfebYEsNRpwV0',
-    appId: '1:427332280600:android:2bc36fbe82994a3e0c7e6d',
-    messagingSenderId: '427332280600',
-    projectId: 'test2-8a3d2',
-    databaseURL: 'https://test2-8a3d2-default-rtdb.firebaseio.com',
-    storageBucket: 'test2-8a3d2.firebasestorage.app',
-  );
-
-  static const FirebaseOptions ios = FirebaseOptions(
-    apiKey: 'AIzaSyABnpH6yo2RRjtkp4PlvtK84hKwRm2DhBw',
-    appId: '1:427332280600:ios:14346b200780dc760c7e6d',
-    messagingSenderId: '427332280600',
-    projectId: 'test2-8a3d2',
-    databaseURL: 'https://test2-8a3d2-default-rtdb.firebaseio.com',
-    storageBucket: 'test2-8a3d2.firebasestorage.app',
-    iosBundleId: 'com.example.syncrowWeb',
-  );
-
-  static const FirebaseOptions macos = FirebaseOptions(
-    apiKey: 'AIzaSyABnpH6yo2RRjtkp4PlvtK84hKwRm2DhBw',
-    appId: '1:427332280600:ios:14346b200780dc760c7e6d',
-    messagingSenderId: '427332280600',
-    projectId: 'test2-8a3d2',
-    databaseURL: 'https://test2-8a3d2-default-rtdb.firebaseio.com',
-    storageBucket: 'test2-8a3d2.firebasestorage.app',
-    iosBundleId: 'com.example.syncrowWeb',
-  );
-
-  static const FirebaseOptions windows = FirebaseOptions(
-    apiKey: 'AIzaSyDizKjPC5rdkEjDxwXjM-RU5unB0Ziq3iw',
-    appId: '1:427332280600:web:f7a25537ccd5a7bd0c7e6d',
-    messagingSenderId: '427332280600',
-    projectId: 'test2-8a3d2',
-    authDomain: 'test2-8a3d2.firebaseapp.com',
-    databaseURL: 'https://test2-8a3d2-default-rtdb.firebaseio.com',
-    storageBucket: 'test2-8a3d2.firebasestorage.app',
-    measurementId: 'G-4LFVXEXWKY',
-  );
-}

lib/firebase_options_prod.dart

@@ -1,77 +0,0 @@
-// File generated by FlutterFire CLI.
-// ignore_for_file: type=lint
-import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
-import 'package:flutter/foundation.dart' show defaultTargetPlatform, kIsWeb, TargetPlatform;
-
-/// Default [FirebaseOptions] for use with your Firebase apps.
-///
-/// Example:
-/// ```dart
-/// import 'firebase_options.dart';
-/// // ...
-/// await Firebase.initializeApp(
-///   options: DefaultFirebaseOptions.currentPlatform,
-/// );
-/// ```
-class DefaultFirebaseOptionsStaging {
-  static FirebaseOptions get currentPlatform {
-    if (kIsWeb) {
-      return web;
-    }
-    switch (defaultTargetPlatform) {
-      case TargetPlatform.android:
-        return android;
-      case TargetPlatform.iOS:
-        return ios;
-      case TargetPlatform.macOS:
-        throw UnsupportedError(
-          'DefaultFirebaseOptions have not been configured for macos - '
-          'you can reconfigure this by running the FlutterFire CLI again.',
-        );
-      case TargetPlatform.windows:
-        throw UnsupportedError(
-          'DefaultFirebaseOptions have not been configured for windows - '
-          'you can reconfigure this by running the FlutterFire CLI again.',
-        );
-      case TargetPlatform.linux:
-        throw UnsupportedError(
-          'DefaultFirebaseOptions have not been configured for linux - '
-          'you can reconfigure this by running the FlutterFire CLI again.',
-        );
-      default:
-        throw UnsupportedError(
-          'DefaultFirebaseOptions are not supported for this platform.',
-        );
-    }
-  }
-
-  static const FirebaseOptions android = FirebaseOptions(
-    apiKey: 'AIzaSyDP9GpYfLE8gHTj3kZ1hW8fx_FkJqOqSQk',
-    appId: '1:786692570726:android:0ef7079c2b978d4417b7a7',
-    messagingSenderId: '786692570726',
-    projectId: 'syncrow-staging',
-    databaseURL: 'https://syncrow-staging-default-rtdb.firebaseio.com',
-    storageBucket: 'syncrow-staging.appspot.com',
-  );
-
-  static const FirebaseOptions ios = FirebaseOptions(
-    apiKey: 'AIzaSyAWlRiuJ75FMlf2_UDdri1voWKvkaSHtRg',
-    appId: '1:786692570726:ios:455a6fcff77e130f17b7a7',
-    messagingSenderId: '786692570726',
-    projectId: 'syncrow-staging',
-    databaseURL: 'https://syncrow-staging-default-rtdb.firebaseio.com',
-    storageBucket: 'syncrow-staging.appspot.com',
-    iosBundleId: 'com.example.syncrow.app',
-  );
-
-  static const FirebaseOptions web = FirebaseOptions(
-    apiKey: 'AIzaSyDyGaQ3sZhb4meaY6sGke-YglhdhJ2is8Q',
-    appId: '1:786692570726:web:93c931e6701797b317b7a7',
-    messagingSenderId: '786692570726',
-    projectId: 'syncrow-staging',
-    authDomain: 'syncrow-staging.firebaseapp.com',
-    databaseURL: 'https://syncrow-staging-default-rtdb.firebaseio.com',
-    storageBucket: 'syncrow-staging.appspot.com',
-    measurementId: 'G-CZ3J3G6LMQ',
-  );
-}

lib/main.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:go_router/go_router.dart';
-import 'package:syncrow_web/firebase_options_prod.dart';
+import 'package:syncrow_web/firebase_options.dart';
 import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_event.dart';
@@ -27,7 +27,9 @@ Future<void> main() async {
     await dotenv.load(fileName: '.env.$environment');
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
-      options: DefaultFirebaseOptionsStaging.currentPlatform,
+      options: DefaultFirebaseOptions(
+        databaseUrl: dotenv.env['RTDB_URL']!,
+      ),
     );
     initialSetup();
   } catch (_) {}
@@ -59,7 +61,7 @@ class MyApp extends StatelessWidget {
           BlocProvider<CreateRoutineBloc>(
             create: (context) => CreateRoutineBloc(),
           ),
-          BlocProvider(create: (context) => HomeBloc()..add(FetchUserInfo())),
+          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
           BlocProvider<VisitorPasswordBloc>(
             create: (context) => VisitorPasswordBloc(),
           ),

lib/main_dev.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:go_router/go_router.dart';
-import 'package:syncrow_web/firebase_options_dev.dart';
+import 'package:syncrow_web/firebase_options.dart';
 import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_event.dart';
@@ -27,7 +27,9 @@ Future<void> main() async {
     await dotenv.load(fileName: '.env.$environment');
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
-      options: DefaultFirebaseOptionsDev.currentPlatform,
+      options: DefaultFirebaseOptions(
+        databaseUrl: dotenv.env['RTDB_URL']!,
+      ),
     );
     initialSetup();
   } catch (_) {}
@@ -59,7 +61,7 @@ class MyApp extends StatelessWidget {
           BlocProvider<CreateRoutineBloc>(
             create: (context) => CreateRoutineBloc(),
           ),
-          BlocProvider(create: (context) => HomeBloc()..add(FetchUserInfo())),
+          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
           BlocProvider<VisitorPasswordBloc>(
             create: (context) => VisitorPasswordBloc(),
           ),

lib/main_staging.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:go_router/go_router.dart';
-import 'package:syncrow_web/firebase_options_prod.dart';
+import 'package:syncrow_web/firebase_options.dart';
 import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_event.dart';
@@ -24,7 +24,9 @@ Future<void> main() async {
     await dotenv.load(fileName: '.env.$environment');
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
-      options: DefaultFirebaseOptionsStaging.currentPlatform,
+      options: DefaultFirebaseOptions(
+        databaseUrl: dotenv.env['RTDB_URL']!,
+      ),
     );
     initialSetup();
   } catch (_) {}
@@ -56,7 +58,7 @@ class MyApp extends StatelessWidget {
           BlocProvider<CreateRoutineBloc>(
             create: (context) => CreateRoutineBloc(),
           ),
-          BlocProvider(create: (context) => HomeBloc()..add(FetchUserInfo())),
+          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
           BlocProvider<VisitorPasswordBloc>(
             create: (context) => VisitorPasswordBloc(),
           ),

lib/pages/access_management/bloc/access_bloc.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
-import 'package:syncrow_web/pages/access_management/model/password_model.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/model/password_model.dart';
 import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/common/hour_picker_dialog.dart';
 import 'package:syncrow_web/services/access_mang_api.dart';

lib/pages/access_management/bloc/access_state.dart

@@ -1,5 +1,5 @@
 import 'package:equatable/equatable.dart';
-import 'package:syncrow_web/pages/access_management/model/password_model.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/model/password_model.dart';
 
 abstract class AccessState extends Equatable {
   const AccessState();

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

@@ -0,0 +1,52 @@
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/paginated_bookable_spaces.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/services/bookable_system_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/constants/api_const.dart';
+
+class RemoteBookableSpacesService implements BookableSystemService {
+  const RemoteBookableSpacesService(this._httpService);
+
+  final HTTPService _httpService;
+  static const _defaultErrorMessage = 'Failed to load bookable spaces';
+
+  @override
+  Future<PaginatedBookableSpaces> getBookableSpaces({
+    required LoadBookableSpacesParam param,
+  }) async {
+    try {
+      final response = await _httpService.get(
+        path: ApiEndpoints.getBookableSpaces,
+        queryParameters: {
+          'page': param.page,
+          'size': param.size,
+          'active': true,
+          'configured': true,
+          if (param.search != null &&
+              param.search.isNotEmpty &&
+              param.search != 'null')
+            'search': param.search,
+        },
+        expectedResponseModel: (json) {
+          return PaginatedBookableSpaces.fromJson(
+            json as Map<String, dynamic>,
+          );
+        },
+      );
+      return response;
+    } on DioException catch (e) {
+      final responseData = e.response?.data;
+      if (responseData is Map<String, dynamic>) {
+        final errorMessage = responseData['error']?['message'] as String? ??
+            responseData['message'] as String? ??
+            _defaultErrorMessage;
+        throw APIException(errorMessage);
+      }
+      throw APIException(_defaultErrorMessage);
+    } catch (e) {
+      throw APIException('$_defaultErrorMessage: ${e.toString()}');
+    }
+  }
+}

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

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

lib/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart

@@ -0,0 +1,36 @@
+import 'package:equatable/equatable.dart';
+
+class LoadBookableSpacesParam extends Equatable {
+  const LoadBookableSpacesParam({
+    this.page = 1,
+    this.size = 25,
+    this.search = '',
+    this.active = true,
+    this.configured = true,
+  });
+
+  final int page;
+  final int size;
+  final String search;
+  final bool active;
+  final bool configured;
+
+  LoadBookableSpacesParam copyWith({
+    int? page,
+    int? size,
+    String? search,
+    bool? active,
+    bool? configured,
+  }) {
+    return LoadBookableSpacesParam(
+      page: page ?? this.page,
+      size: size ?? this.size,
+      search: search ?? this.search,
+      active: active ?? this.active,
+      configured: configured ?? this.configured,
+    );
+  }
+
+  @override
+  List<Object?> get props => [page, size, search, active, configured];
+}

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

@@ -0,0 +1,52 @@
+class BookableSpaceModel {
+  final String uuid;
+  final String spaceName;
+  final String virtualLocation;
+  final BookableConfig bookableConfig;
+
+  BookableSpaceModel({
+    required this.uuid,
+    required this.spaceName,
+    required this.virtualLocation,
+    required this.bookableConfig,
+  });
+
+  factory BookableSpaceModel.fromJson(Map<String, dynamic> json) {
+    return BookableSpaceModel(
+      uuid: json['uuid'] as String,
+      spaceName: json['spaceName'] as String,
+      virtualLocation: json['virtualLocation'] as String,
+      bookableConfig: BookableConfig.fromJson(
+          json['bookableConfig'] as Map<String, dynamic>),
+    );
+  }
+}
+
+class BookableConfig {
+  final String uuid;
+  final List<String> daysAvailable;
+  final String startTime;
+  final String endTime;
+  final bool active;
+  final int points;
+
+  BookableConfig({
+    required this.uuid,
+    required this.daysAvailable,
+    required this.startTime,
+    required this.endTime,
+    required this.active,
+    required this.points,
+  });
+
+  factory BookableConfig.fromJson(Map<String, dynamic> json) {
+    return BookableConfig(
+      uuid: json['uuid'] as String,
+      daysAvailable: (json['daysAvailable'] as List).cast<String>(),
+      startTime: json['startTime'] as String,
+      endTime: json['endTime'] as String,
+      active: json['active'] as bool,
+      points: json['points'] as int,
+    );
+  }
+}

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

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

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

@@ -0,0 +1,40 @@
+
+
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+
+class PaginatedBookableSpaces {
+  final List<BookableSpaceModel> data;
+  final String message;
+  final int page;
+  final int size;
+  final int totalItem;
+  final int totalPage;
+  final bool hasNext;
+  final bool hasPrevious;
+
+  PaginatedBookableSpaces({
+    required this.data,
+    required this.message,
+    required this.page,
+    required this.size,
+    required this.totalItem,
+    required this.totalPage,
+    required this.hasNext,
+    required this.hasPrevious,
+  });
+
+  factory PaginatedBookableSpaces.fromJson(Map<String, dynamic> json) {
+    return PaginatedBookableSpaces(
+      data: (json['data'] as List)
+          .map((item) => BookableSpaceModel.fromJson(item))
+          .toList(),
+      message: json['message'] as String,
+      page: json['page'] as int,
+      size: json['size'] as int,
+      totalItem: json['totalItem'] as int,
+      totalPage: json['totalPage'] as int,
+      hasNext: json['hasNext'] as bool,
+      hasPrevious: json['hasPrevious'] as bool,
+    );
+  }
+}

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

@@ -0,0 +1,8 @@
+import 'package:syncrow_web/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/paginated_bookable_spaces.dart';
+
+abstract class BookableSystemService {
+  Future<PaginatedBookableSpaces> getBookableSpaces({
+    required LoadBookableSpacesParam param,
+  });
+}

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

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

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

@@ -0,0 +1,45 @@
+import 'dart:async';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/paginated_bookable_spaces.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/services/bookable_system_service.dart';
+
+class DebouncedBookableSpacesService implements BookableSystemService {
+  final BookableSystemService _inner;
+  final Duration debounceDuration;
+
+  Timer? _debounceTimer;
+  Completer<PaginatedBookableSpaces>? _lastCompleter;
+
+  DebouncedBookableSpacesService(
+    this._inner, {
+    this.debounceDuration = const Duration(milliseconds: 500),
+  });
+
+  @override
+  Future<PaginatedBookableSpaces> getBookableSpaces({
+    required LoadBookableSpacesParam param,
+  }) {
+    _debounceTimer?.cancel();
+    if (_lastCompleter != null && !_lastCompleter!.isCompleted) {
+      _lastCompleter!.completeError(StateError("Cancelled by new search"));
+    }
+
+    final completer = Completer<PaginatedBookableSpaces>();
+    _lastCompleter = completer;
+
+    _debounceTimer = Timer(debounceDuration, () async {
+      try {
+        final result = await _inner.getBookableSpaces(param: param);
+        if (!completer.isCompleted) {
+          completer.complete(result);
+        }
+      } catch (e, st) {
+        if (!completer.isCompleted) {
+          completer.completeError(e, st);
+        }
+      }
+    });
+
+    return completer.future;
+  }
+}

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

@@ -0,0 +1,115 @@
+import 'dart:async';
+import 'package:bloc/bloc.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/calendar_event_booking.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/services/calendar_system_service.dart';
+
+part 'events_event.dart';
+part 'events_state.dart';
+
+class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
+  final EventController eventController = EventController();
+  final CalendarSystemService calendarService;
+
+  CalendarEventsBloc({required this.calendarService}) : super(EventsInitial()) {
+    on<LoadEvents>(_onLoadEvents);
+    on<AddEvent>(_onAddEvent);
+    on<StartTimer>(_onStartTimer);
+    on<DisposeResources>(_onDisposeResources);
+    on<GoToWeek>(_onGoToWeek);
+  }
+
+  Future<void> _onLoadEvents(
+    LoadEvents event,
+    Emitter<CalendarEventState> emit,
+  ) async {
+    emit(EventsLoading());
+    try {
+      final response = await calendarService.getCalendarEvents(
+        spaceId: event.spaceId,
+      );
+      final events =
+          response.data.map<CalendarEventData>(_toCalendarEventData).toList();
+      eventController.addAll(events);
+      emit(EventsLoaded(events: events));
+    } catch (e) {
+      emit(EventsError('Failed to load events'));
+    }
+  }
+
+  void _onAddEvent(AddEvent event, Emitter<CalendarEventState> emit) {
+    eventController.add(event.event);
+    if (state is EventsLoaded) {
+      final loaded = state as EventsLoaded;
+      emit(EventsLoaded(
+        events: [...eventController.events],
+      ));
+    }
+  }
+
+  void _onStartTimer(StartTimer event, Emitter<CalendarEventState> emit) {}
+
+  void _onDisposeResources(
+      DisposeResources event, Emitter<CalendarEventState> emit) {
+    eventController.dispose();
+  }
+
+  void _onGoToWeek(GoToWeek event, Emitter<CalendarEventState> emit) {
+    if (state is EventsLoaded) {
+      final loaded = state as EventsLoaded;
+      final newWeekDays = _getWeekDays(event.weekDate);
+      emit(EventsLoaded(
+        events: loaded.events,
+      ));
+    }
+  }
+
+  CalendarEventData _toCalendarEventData(CalendarEventBooking booking) {
+    final date = booking.date;
+
+    final localDate = date.toLocal();
+
+    final startParts = booking.startTime.split(':').map(int.parse).toList();
+    final endParts = booking.endTime.split(':').map(int.parse).toList();
+
+    final startTime = DateTime(
+      localDate.year,
+      localDate.month,
+      localDate.day,
+      startParts[0],
+      startParts[1],
+    );
+
+    final endTime = DateTime(
+      localDate.year,
+      localDate.month,
+      localDate.day,
+      endParts[0],
+      endParts[1],
+    );
+
+    return CalendarEventData(
+      date: startTime, 
+      startTime: startTime,
+      endTime: endTime,
+      title:
+          '${booking.space.spaceName} - ${booking.user.firstName} ${booking.user.lastName}',
+      description: 'Cost: ${booking.cost}',
+      color: Colors.blue,
+      event: booking, 
+    );
+  }
+
+  List<DateTime> _getWeekDays(DateTime date) {
+    final int weekday = date.weekday;
+    final DateTime monday = date.subtract(Duration(days: weekday - 1));
+    return List.generate(7, (i) => monday.add(Duration(days: i)));
+  }
+
+  @override
+  Future<void> close() {
+    eventController.dispose();
+    return super.close();
+  }
+}

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

@@ -0,0 +1,37 @@
+part of 'events_bloc.dart';
+
+@immutable
+abstract class CalendarEventsEvent {
+  const CalendarEventsEvent();
+}
+
+class LoadEvents extends CalendarEventsEvent {
+  final String spaceId;
+  final DateTime weekStart;
+  final DateTime weekEnd;
+
+  const LoadEvents({
+    required this.spaceId,
+    required this.weekStart,
+    required this.weekEnd,
+  });
+}
+
+class AddEvent extends CalendarEventsEvent {
+  final CalendarEventData event;
+  const AddEvent(this.event);
+}
+
+class StartTimer extends CalendarEventsEvent {}
+
+class DisposeResources extends CalendarEventsEvent {}
+
+class GoToWeek extends CalendarEventsEvent {
+  final DateTime weekDate;
+  GoToWeek(this.weekDate);
+}
+
+class CheckWeekHasEvents extends CalendarEventsEvent {
+  final DateTime weekStart;
+  const CheckWeekHasEvents(this.weekStart);
+}

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

@@ -0,0 +1,21 @@
+part of 'events_bloc.dart';
+
+@immutable
+abstract class CalendarEventState {}
+
+class EventsInitial extends CalendarEventState {}
+
+class EventsLoading extends CalendarEventState {}
+
+class EventsLoaded extends CalendarEventState {
+  final List<CalendarEventData> events;
+
+  EventsLoaded({
+    required this.events,
+  });
+}
+
+class EventsError extends CalendarEventState {
+  final String message;
+  EventsError(this.message);
+}

lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart

@@ -0,0 +1,40 @@
+import 'package:bloc/bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart';
+import 'date_selection_state.dart';
+
+
+class DateSelectionBloc extends Bloc<DateSelectionEvent, DateSelectionState> {
+  DateSelectionBloc() : super(DateSelectionState.initial()) {
+    on<SelectDate>((event, emit) {
+      final newWeekStart = _getStartOfWeek(event.selectedDate);
+      emit(state.copyWith(
+        selectedDate: event.selectedDate,
+        weekStart: newWeekStart,
+      ));
+    });
+
+    on<NextWeek>((event, emit) {
+      final newWeekStart = state.weekStart.add(const Duration(days: 7));
+      emit(state.copyWith(
+        weekStart: newWeekStart,
+      ));
+    });
+
+    on<PreviousWeek>((event, emit) {
+      final newWeekStart = state.weekStart.subtract(const Duration(days: 7));
+      emit(state.copyWith(
+        weekStart: newWeekStart,
+      ));
+    });
+
+    on<SelectDateFromSidebarCalendar>((event, emit) {
+      emit(state.copyWith(
+        selectedDateFromSideBarCalender: event.selectedDate,
+      ));
+    });
+  }
+
+  static DateTime _getStartOfWeek(DateTime date) {
+    return date.subtract(Duration(days: date.weekday - 1));
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart

@@ -0,0 +1,18 @@
+
+abstract class DateSelectionEvent {
+  const DateSelectionEvent();
+}
+
+class SelectDate extends DateSelectionEvent {
+  final DateTime selectedDate;
+  const SelectDate(this.selectedDate);
+}
+
+class NextWeek extends DateSelectionEvent {}
+
+class PreviousWeek extends DateSelectionEvent {}
+
+class SelectDateFromSidebarCalendar extends DateSelectionEvent {
+  final DateTime selectedDate;
+  SelectDateFromSidebarCalendar(this.selectedDate);
+}

lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart

@@ -0,0 +1,34 @@
+
+class DateSelectionState {
+  final DateTime selectedDate;
+  final DateTime weekStart;
+  final DateTime? selectedDateFromSideBarCalender;
+
+  DateSelectionState({
+    required this.selectedDate,
+    required this.weekStart,
+    this.selectedDateFromSideBarCalender,
+  });
+
+  factory DateSelectionState.initial() {
+    final now = DateTime.now();
+    final weekStart = now.subtract(Duration(days: now.weekday - 1));
+    return DateSelectionState(
+      selectedDate: now,
+      weekStart: weekStart,
+      selectedDateFromSideBarCalender: null,
+    );
+  }
+
+  DateSelectionState copyWith({
+    DateTime? selectedDate,
+    DateTime? weekStart,
+    DateTime? selectedDateFromSideBarCalender,
+  }) {
+    return DateSelectionState(
+      selectedDate: selectedDate ?? this.selectedDate,
+      weekStart: weekStart ?? this.weekStart,
+      selectedDateFromSideBarCalender: selectedDateFromSideBarCalender ?? this.selectedDateFromSideBarCalender,
+    );
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_bloc.dart

@@ -0,0 +1,14 @@
+import 'package:bloc/bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+part 'selected_bookable_space_event.dart';
+part 'selected_bookable_space_state.dart';
+
+class SelectedBookableSpaceBloc
+    extends Bloc<SelectedBookableSpaceEvent, SelectedBookableSpaceState> {
+  SelectedBookableSpaceBloc() : super(const SelectedBookableSpaceState()) {
+    on<SelectBookableSpace>((event, emit) {
+      emit(SelectedBookableSpaceState(
+          selectedBookableSpace: event.bookableSpace));
+    });
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_event.dart

@@ -0,0 +1,11 @@
+part of 'selected_bookable_space_bloc.dart';
+
+abstract class SelectedBookableSpaceEvent {
+  const SelectedBookableSpaceEvent();
+}
+
+class SelectBookableSpace extends SelectedBookableSpaceEvent {
+  final BookableSpaceModel bookableSpace;
+
+  const SelectBookableSpace(this.bookableSpace);
+}

lib/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_state.dart

@@ -0,0 +1,9 @@
+part of 'selected_bookable_space_bloc.dart';
+
+class SelectedBookableSpaceState {
+  final BookableSpaceModel? selectedBookableSpace;
+
+  const SelectedBookableSpaceState(
+   { this.selectedBookableSpace,}
+  );
+}

lib/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_bloc.dart

@@ -0,0 +1,148 @@
+import 'dart:async';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/services/bookable_system_service.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_event.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_state.dart';
+
+class SidebarBloc extends Bloc<SidebarEvent, SidebarState> {
+  final BookableSystemService _bookingService;
+  int _currentPage = 1;
+  final int _pageSize = 20;
+  String _currentSearch = '';
+
+  SidebarBloc(this._bookingService)
+      : super(SidebarState(
+          allRooms: [],
+          displayedRooms: [],
+          isLoading: true,
+          hasMore: true,
+        )) {
+    on<LoadBookableSpaces>(_onLoadBookableSpaces);
+    on<LoadMoreSpaces>(_onLoadMoreSpaces);
+    on<SelectRoomEvent>(_onSelectRoom);
+    on<SearchRoomsEvent>(_onSearchRooms);
+    on<ResetSearch>(_onResetSearch);
+  }
+
+  Future<void> _onLoadBookableSpaces(
+    LoadBookableSpaces event,
+    Emitter<SidebarState> emit,
+  ) async {
+    try {
+      emit(state.copyWith(isLoading: true, errorMessage: null));
+      _currentPage = 1;
+      _currentSearch = '';
+
+      final paginatedSpaces = await _bookingService.getBookableSpaces(
+        param: LoadBookableSpacesParam(
+          page: _currentPage,
+          size: _pageSize,
+          search: _currentSearch,
+        ),
+      );
+
+      emit(state.copyWith(
+        allRooms: paginatedSpaces.data,
+        displayedRooms: paginatedSpaces.data,
+        isLoading: false,
+        hasMore: paginatedSpaces.hasNext,
+        totalPages: paginatedSpaces.totalPage,
+        currentPage: _currentPage,
+      ));
+    } catch (e) {
+      emit(state.copyWith(
+        isLoading: false,
+        errorMessage: 'Failed to load rooms: ${e.toString()}',
+      ));
+    }
+  }
+
+  Future<void> _onLoadMoreSpaces(
+    LoadMoreSpaces event,
+    Emitter<SidebarState> emit,
+  ) async {
+    if (!state.hasMore || state.isLoadingMore) return;
+
+    try {
+      emit(state.copyWith(isLoadingMore: true));
+      _currentPage++;
+
+      final paginatedSpaces = await _bookingService.getBookableSpaces(
+        param: LoadBookableSpacesParam(
+          page: _currentPage,
+          size: _pageSize,
+          search: _currentSearch,
+        ),
+      );
+
+      final updatedRooms = [...state.allRooms, ...paginatedSpaces.data];
+
+      emit(state.copyWith(
+        allRooms: updatedRooms,
+        displayedRooms: updatedRooms,
+        isLoadingMore: false,
+        hasMore: paginatedSpaces.hasNext,
+        totalPages: paginatedSpaces.totalPage,
+        currentPage: _currentPage,
+      ));
+    } catch (e) {
+      _currentPage--;
+      emit(state.copyWith(
+        isLoadingMore: false,
+        errorMessage: 'Failed to load more rooms: ${e.toString()}',
+      ));
+    }
+  }
+
+  Future<void> _onSearchRooms(
+    SearchRoomsEvent event,
+    Emitter<SidebarState> emit,
+  ) async {
+    try {
+      _currentSearch = event.query;
+      _currentPage = 1;
+      emit(state.copyWith(isLoading: true, errorMessage: null));
+      final paginatedSpaces = await _bookingService.getBookableSpaces(
+        param: LoadBookableSpacesParam(
+          page: _currentPage,
+          size: _pageSize,
+          search: _currentSearch,
+        ),
+      );
+      emit(state.copyWith(
+        allRooms: paginatedSpaces.data,
+        displayedRooms: paginatedSpaces.data,
+        isLoading: false,
+        hasMore: paginatedSpaces.hasNext,
+        totalPages: paginatedSpaces.totalPage,
+        currentPage: _currentPage,
+      ));
+    } catch (e) {
+      emit(state.copyWith(
+        isLoading: false,
+        errorMessage: 'Search failed: ${e.toString()}',
+      ));
+    }
+  }
+
+  void _onResetSearch(
+    ResetSearch event,
+    Emitter<SidebarState> emit,
+  ) {
+    _currentSearch = '';
+    add(LoadBookableSpaces());
+  }
+
+  void _onSelectRoom(
+    SelectRoomEvent event,
+    Emitter<SidebarState> emit,
+  ) {
+    emit(state.copyWith(selectedRoomId: event.roomId));
+  }
+
+  @override
+  Future<void> close() {
+    return super.close();
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_event.dart

@@ -0,0 +1,25 @@
+abstract class SidebarEvent {}
+
+class LoadBookableSpaces extends SidebarEvent {}
+
+class SelectRoomEvent extends SidebarEvent {
+  final String roomId;
+
+  SelectRoomEvent(this.roomId);
+}
+
+class SearchRoomsEvent extends SidebarEvent {
+  final String query;
+
+  SearchRoomsEvent(this.query);
+}
+
+class LoadMoreSpaces extends SidebarEvent {}
+
+class ResetSearch extends SidebarEvent {}
+
+class ExecuteSearch extends SidebarEvent {
+  final String query;
+
+  ExecuteSearch(this.query);
+}

lib/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_state.dart

@@ -0,0 +1,49 @@
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+
+class SidebarState {
+  final List<BookableSpaceModel> allRooms;
+  final List<BookableSpaceModel> displayedRooms;
+  final bool isLoading;
+  final bool isLoadingMore;
+  final String? errorMessage;
+  final String? selectedRoomId;
+  final bool hasMore;
+  final int totalPages;
+  final int currentPage;
+
+  SidebarState({
+    required this.allRooms,
+    required this.displayedRooms,
+    required this.isLoading,
+    this.isLoadingMore = false,
+    this.errorMessage,
+    this.selectedRoomId,
+    this.hasMore = true,
+    this.totalPages = 0,
+    this.currentPage = 1,
+  });
+
+  SidebarState copyWith({
+    List<BookableSpaceModel>? allRooms,
+    List<BookableSpaceModel>? displayedRooms,
+    bool? isLoading,
+    bool? isLoadingMore,
+    String? errorMessage,
+    String? selectedRoomId,
+    bool? hasMore,
+    int? totalPages,
+    int? currentPage,
+  }) {
+    return SidebarState(
+      allRooms: allRooms ?? this.allRooms,
+      displayedRooms: displayedRooms ?? this.displayedRooms,
+      isLoading: isLoading ?? this.isLoading,
+      isLoadingMore: isLoadingMore ?? this.isLoadingMore,
+      errorMessage: errorMessage ?? this.errorMessage,
+      selectedRoomId: selectedRoomId ?? this.selectedRoomId,
+      hasMore: hasMore ?? this.hasMore,
+      totalPages: totalPages ?? this.totalPages,
+      currentPage: currentPage ?? this.currentPage,
+    );
+  }
+}

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

@@ -0,0 +1,240 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/data/services/remote_calendar_service.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/calendar/events_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/booking_sidebar.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/custom_calendar_page.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/icon_text_button.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/week_navigation.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/weekly_calendar_page.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class BookingPage extends StatefulWidget {
+  const BookingPage({super.key});
+
+  @override
+  State<BookingPage> createState() => _BookingPageState();
+}
+
+class _BookingPageState extends State<BookingPage> {
+  late final EventController _eventController;
+
+  @override
+  void initState() {
+    super.initState();
+    _eventController = EventController();
+  }
+
+  @override
+  void dispose() {
+    _eventController.dispose();
+    super.dispose();
+  }
+
+  void _dispatchLoadEvents(BuildContext context) {
+    final selectedRoom =
+        context.read<SelectedBookableSpaceBloc>().state.selectedBookableSpace;
+    final dateState = context.read<DateSelectionBloc>().state;
+
+    if (selectedRoom != null) {
+      context.read<CalendarEventsBloc>().add(
+            LoadEvents(
+              spaceId: selectedRoom.uuid,
+              weekStart: dateState.weekStart,
+              weekEnd: dateState.weekStart.add(const Duration(days: 6)),
+            ),
+          );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(create: (_) => SelectedBookableSpaceBloc()),
+        BlocProvider(create: (_) => DateSelectionBloc()),
+        BlocProvider(
+          create: (_) => CalendarEventsBloc(
+            calendarService:
+                FakeRemoteCalendarService(HTTPService(), useDummy: true),
+          ),
+        ),
+      ],
+      child: Builder(
+        builder: (context) =>
+            BlocListener<CalendarEventsBloc, CalendarEventState>(
+          listenWhen: (prev, curr) => curr is EventsLoaded,
+          listener: (context, state) {
+            if (state is EventsLoaded) {
+              _eventController.removeWhere((_) => true);
+              _eventController.addAll(state.events);
+            }
+          },
+          child: BlocListener<SelectedBookableSpaceBloc,
+              SelectedBookableSpaceState>(
+            listener: (context, state) => _dispatchLoadEvents(context),
+            child: BlocListener<DateSelectionBloc, DateSelectionState>(
+              listener: (context, state) => _dispatchLoadEvents(context),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Expanded(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: ColorsManager.whiteColors,
+                        boxShadow: [
+                          BoxShadow(
+                            color: ColorsManager.blackColor.withOpacity(0.1),
+                            offset: const Offset(3, 0),
+                            blurRadius: 6,
+                            spreadRadius: 0,
+                          ),
+                        ],
+                      ),
+                      child: Column(
+                        children: [
+                          Expanded(
+                            flex: 2,
+                            child: BlocBuilder<SelectedBookableSpaceBloc,
+                                SelectedBookableSpaceState>(
+                              builder: (context, state) {
+                                return BookingSidebar(
+                                  onRoomSelected: (selectedRoom) {
+                                    context
+                                        .read<SelectedBookableSpaceBloc>()
+                                        .add(SelectBookableSpace(selectedRoom));
+                                  },
+                                );
+                              },
+                            ),
+                          ),
+                          Expanded(
+                            child: BlocBuilder<DateSelectionBloc,
+                                DateSelectionState>(
+                              builder: (context, dateState) {
+                                return CustomCalendarPage(
+                                  selectedDate: dateState.selectedDate,
+                                  onDateChanged: (day, month, year) {
+                                    final newDate = DateTime(year, month, day);
+                                    context
+                                        .read<DateSelectionBloc>()
+                                        .add(SelectDate(newDate));
+                                    context.read<DateSelectionBloc>().add(
+                                        SelectDateFromSidebarCalendar(newDate));
+                                  },
+                                );
+                              },
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    flex: 4,
+                    child: Padding(
+                      padding: const EdgeInsets.all(20.0),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              Row(
+                                children: [
+                                  SvgTextButton(
+                                    svgAsset: Assets.homeIcon,
+                                    label: 'Manage Bookable Spaces',
+                                    onPressed: () {},
+                                  ),
+                                  const SizedBox(width: 20),
+                                  SvgTextButton(
+                                    svgAsset: Assets.groupIcon,
+                                    label: 'Manage Users',
+                                    onPressed: () {},
+                                  ),
+                                ],
+                              ),
+                              BlocBuilder<DateSelectionBloc,
+                                  DateSelectionState>(
+                                builder: (context, state) {
+                                  final weekStart = state.weekStart;
+                                  final weekEnd =
+                                      weekStart.add(const Duration(days: 6));
+                                  return WeekNavigation(
+                                    weekStart: weekStart,
+                                    weekEnd: weekEnd,
+                                    onPreviousWeek: () {
+                                      context
+                                          .read<DateSelectionBloc>()
+                                          .add(PreviousWeek());
+                                    },
+                                    onNextWeek: () {
+                                      context
+                                          .read<DateSelectionBloc>()
+                                          .add(NextWeek());
+                                    },
+                                  );
+                                },
+                              ),
+                            ],
+                          ),
+                          Expanded(
+                            child: BlocBuilder<SelectedBookableSpaceBloc,
+                                SelectedBookableSpaceState>(
+                              builder: (context, roomState) {
+                                final selectedRoom =
+                                    roomState.selectedBookableSpace;
+                                return BlocBuilder<DateSelectionBloc,
+                                    DateSelectionState>(
+                                  builder: (context, dateState) {
+                                    return BlocListener<CalendarEventsBloc,
+                                        CalendarEventState>(
+                                      listenWhen: (prev, curr) =>
+                                          curr is EventsLoaded,
+                                      listener: (context, state) {
+                                        if (state is EventsLoaded) {
+                                          _eventController
+                                              .removeWhere((_) => true);
+                                          _eventController.addAll(state.events);
+                                        }
+                                      },
+                                      child: WeeklyCalendarPage(
+                                        startTime: selectedRoom
+                                            ?.bookableConfig.startTime,
+                                        endTime: selectedRoom
+                                            ?.bookableConfig.endTime,
+                                        weekStart: dateState.weekStart,
+                                        selectedDate: dateState.selectedDate,
+                                        eventController: _eventController,
+                                        selectedDateFromSideBarCalender: context
+                                            .watch<DateSelectionBloc>()
+                                            .state
+                                            .selectedDateFromSideBarCalender,
+                                      ),
+                                    );
+                                  },
+                                );
+                              },
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,242 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/data/services/remote_bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_event.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_state.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/room_list_item.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 BookingSidebar extends StatelessWidget {
+  final void Function(BookableSpaceModel) onRoomSelected;
+
+  const BookingSidebar({
+    super.key,
+    required this.onRoomSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => SidebarBloc(RemoteBookableSpacesService(
+        HTTPService(),
+      ))
+        ..add(LoadBookableSpaces()),
+      child: _SidebarContent(onRoomSelected: onRoomSelected),
+    );
+  }
+}
+
+class _SidebarContent extends StatefulWidget {
+  final void Function(BookableSpaceModel) onRoomSelected;
+
+  const _SidebarContent({
+    required this.onRoomSelected,
+  });
+
+  @override
+  State<_SidebarContent> createState() => __SidebarContentState();
+}
+
+class __SidebarContentState extends State<_SidebarContent> {
+  final TextEditingController searchController = TextEditingController();
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_scrollListener);
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  void _scrollListener() {
+    if (_scrollController.position.pixels ==
+        _scrollController.position.maxScrollExtent) {
+      context.read<SidebarBloc>().add(LoadMoreSpaces());
+    }
+  }
+
+  void _handleSearch(String value) {
+    context.read<SidebarBloc>().add(SearchRoomsEvent(value));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocConsumer<SidebarBloc, SidebarState>(
+      listener: (context, state) {
+        if (state.currentPage == 1 && searchController.text.isNotEmpty) {
+          searchController.clear();
+        }
+      },
+      builder: (context, state) {
+        return Column(
+          children: [
+            const _SidebarHeader(title: 'Spaces'),
+            Container(
+              decoration: BoxDecoration(
+                color: ColorsManager.whiteColors,
+                borderRadius: BorderRadius.circular(8.0),
+                boxShadow: [
+                  BoxShadow(
+                    color: ColorsManager.blackColor.withOpacity(0.1),
+                    offset: const Offset(0, -2),
+                    blurRadius: 4,
+                    spreadRadius: 0,
+                  ),
+                  BoxShadow(
+                    color: ColorsManager.blackColor.withOpacity(0.1),
+                    offset: const Offset(0, 2),
+                    blurRadius: 4,
+                    spreadRadius: 0,
+                  ),
+                ],
+              ),
+              child: Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: Container(
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(
+                        horizontal: 16.0, vertical: 8.0),
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: ColorsManager.counterBackgroundColor,
+                        borderRadius: BorderRadius.circular(8.0),
+                      ),
+                      child: Row(
+                        children: [
+                          Expanded(
+                            child: TextField(
+                              style: Theme.of(context)
+                                  .textTheme
+                                  .bodyMedium
+                                  ?.copyWith(
+                                    color: ColorsManager.blackColor,
+                                  ),
+                              controller: searchController,
+                              onChanged: _handleSearch,
+                              decoration: InputDecoration(
+                                hintText: 'Search',
+                                suffixIcon: Padding(
+                                  padding: const EdgeInsets.all(8.0),
+                                  child: SizedBox(
+                                    width: 20,
+                                    height: 20,
+                                    child: SvgPicture.asset(
+                                      Assets.searchIconUser,
+                                      color: ColorsManager.primaryTextColor,
+                                    ),
+                                  ),
+                                ),
+                                contentPadding: const EdgeInsets.symmetric(
+                                    vertical: 8, horizontal: 12),
+                                border: const OutlineInputBorder(
+                                    borderSide: BorderSide.none),
+                              ),
+                            ),
+                          ),
+                          if (searchController.text.isNotEmpty)
+                            IconButton(
+                              icon: const Icon(Icons.close),
+                              onPressed: () {
+                                context.read<SidebarBloc>().add(ResetSearch());
+                              },
+                            ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            if (state.isLoading)
+              const Expanded(
+                child: Center(child: CircularProgressIndicator()),
+              )
+            else if (state.errorMessage != null)
+              Expanded(
+                child: Center(child: Text(state.errorMessage!)),
+              )
+            else
+              Expanded(
+                child: ListView.builder(
+                  controller: _scrollController,
+                  itemCount:
+                      state.displayedRooms.length + (state.hasMore ? 1 : 0),
+                  itemBuilder: (context, index) {
+                    if (index == state.displayedRooms.length) {
+                      return _buildLoadMoreIndicator(state);
+                    }
+
+                    final room = state.displayedRooms[index];
+                    return RoomListItem(
+                      room: room,
+                      isSelected: state.selectedRoomId == room.uuid,
+                      onTap: () {
+                        context
+                            .read<SidebarBloc>()
+                            .add(SelectRoomEvent(room.uuid));
+                        widget.onRoomSelected(room);
+                      },
+                    );
+                  },
+                ),
+              ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildLoadMoreIndicator(SidebarState state) {
+    if (state.isLoadingMore) {
+      return const Padding(
+        padding: EdgeInsets.symmetric(vertical: 16.0),
+        child: Center(child: CircularProgressIndicator()),
+      );
+    } else if (state.hasMore) {
+      return const Padding(
+        padding: EdgeInsets.symmetric(vertical: 16.0),
+        child: Center(child: Text('Scroll to load more')),
+      );
+    } else {
+      return const SizedBox.shrink();
+    }
+  }
+}
+
+class _SidebarHeader extends StatelessWidget {
+  final String title;
+
+  const _SidebarHeader({
+    required this.title,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            title,
+            style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                  fontWeight: FontWeight.w400,
+                  color: ColorsManager.primaryTextColor,
+                  fontSize: 20,
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:calendar_date_picker2/calendar_date_picker2.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CustomCalendarPage extends StatefulWidget {
+  final DateTime selectedDate;
+  final Function(int day, int month, int year) onDateChanged;
+
+  const CustomCalendarPage({
+    super.key,
+    required this.selectedDate,
+    required this.onDateChanged,
+  });
+
+  @override
+  State<CustomCalendarPage> createState() => _CustomCalendarPageState();
+}
+
+class _CustomCalendarPageState extends State<CustomCalendarPage> {
+  late DateTime _selectedDate;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedDate = widget.selectedDate;
+  }
+
+  @override
+  void didUpdateWidget(CustomCalendarPage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.selectedDate != oldWidget.selectedDate) {
+      setState(() {
+        _selectedDate = widget.selectedDate;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final config = CalendarDatePicker2Config(
+      calendarType: CalendarDatePicker2Type.single,
+      selectedDayHighlightColor: const Color(0xFF3B82F6),
+      selectedDayTextStyle: const TextStyle(
+        color: Colors.white,
+        fontWeight: FontWeight.w400,
+        fontSize: 14,
+      ),
+      dayTextStyle: const TextStyle(
+        color: ColorsManager.blackColor,
+        fontWeight: FontWeight.w400,
+        fontSize: 14,
+      ),
+      weekdayLabelTextStyle: const TextStyle(
+        color: ColorsManager.grey50,
+        fontWeight: FontWeight.w400,
+        fontSize: 14,
+      ),
+      controlsTextStyle: const TextStyle(
+        color: Color(0xFF232D3A),
+        fontWeight: FontWeight.w400,
+        fontSize: 18,
+      ),
+      centerAlignModePicker: false,
+      disableMonthPicker: true,
+      firstDayOfWeek: 1,
+      weekdayLabels: const ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+    );
+
+    return CalendarDatePicker2(
+      config: config,
+      value: [_selectedDate],
+      onValueChanged: (dates) {
+        final picked = dates.first;
+        if (picked != null) {
+          setState(() {
+            _selectedDate = picked;
+          });
+          widget.onDateChanged(picked.day, picked.month, picked.year);
+        }
+      },
+    );
+  }
+}

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

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

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

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

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

@@ -20,13 +20,13 @@ class SvgTextButton extends StatelessWidget {
     required this.onPressed,
     this.backgroundColor = ColorsManager.circleRolesBackground,
     this.svgColor = const Color(0xFF496EFF),
-    this.labelColor = Colors.black87,
+    this.labelColor = Colors.black,
     this.borderRadius = 10.0,
     this.boxShadow = const [
       BoxShadow(
-        color: ColorsManager.textGray,
-        blurRadius: 12,
-        offset: Offset(0, 4),
+        color: ColorsManager.lightGrayColor,
+        blurRadius: 4,
+        offset: Offset(0, 1),
       ),
     ],
     this.svgSize = 24.0,
@@ -53,15 +53,14 @@ class SvgTextButton extends StatelessWidget {
                 svgAsset,
                 width: svgSize,
                 height: svgSize,
-                color: svgColor,
               ),
               const SizedBox(width: 12),
               Text(
                 label,
                 style: TextStyle(
                   color: labelColor,
-                  fontSize: 16,
-                  fontWeight: FontWeight.w500,
+                  fontSize: 12,
+                  fontWeight: FontWeight.w400,
                 ),
               ),
             ],

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

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class RoomListItem extends StatelessWidget {
+  final BookableSpaceModel room;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const RoomListItem({
+    required this.room,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return RadioListTile(
+      value: room.uuid,
+      contentPadding: const EdgeInsetsDirectional.symmetric(horizontal: 16),
+      groupValue: isSelected ? room.uuid : null,
+      visualDensity: const VisualDensity(vertical: -4),
+      onChanged: (value) => onTap(),
+      activeColor: ColorsManager.primaryColor,
+      title: Text(
+        room.spaceName,
+        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+            color: ColorsManager.lightGrayColor,
+            fontWeight: FontWeight.w700,
+            fontSize: 12),
+      ),
+      subtitle: Text(
+        room.virtualLocation,
+        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+              fontSize: 10,
+              fontWeight: FontWeight.w400,
+              color: ColorsManager.textGray,
+            ),
+      ),
+    );
+  }
+}

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

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

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

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class WeekDayHeader extends StatelessWidget {
+  final DateTime date;
+  final bool isSelectedDay;
+
+  const WeekDayHeader({
+    Key? key,
+    required this.date,
+    required this.isSelectedDay,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Text(
+          DateFormat('EEE').format(date).toUpperCase(),
+          style: TextStyle(
+            fontWeight: FontWeight.w400,
+            fontSize: 14,
+            color: isSelectedDay ? Colors.blue : Colors.black,
+          ),
+        ),
+        Text(
+          DateFormat('d').format(date),
+          style: TextStyle(
+            fontWeight: FontWeight.w700,
+            fontSize: 20,
+            color:
+                isSelectedDay ? ColorsManager.blue1 : ColorsManager.blackColor,
+          ),
+        ),
+      ],
+    );
+  }
+}

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

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

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

@@ -0,0 +1,218 @@
+import 'package:flutter/material.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/event_tile_widget.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/hatched_column_background.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/time_line_widget.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/week_day_header.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class WeeklyCalendarPage extends StatelessWidget {
+  final DateTime weekStart;
+  final DateTime selectedDate;
+  final EventController eventController;
+  final String? startTime;
+  final String? endTime;
+  final DateTime? selectedDateFromSideBarCalender;
+
+  const WeeklyCalendarPage({
+    super.key,
+    required this.weekStart,
+    required this.selectedDate,
+    required this.eventController,
+    this.startTime,
+    this.endTime,
+    this.selectedDateFromSideBarCalender,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final startHour = _parseHour(startTime, defaultValue: 0);
+    final endHour = _parseHour(endTime, defaultValue: 24);
+
+    if (endTime == null || endTime!.isEmpty) {
+      return const Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.calendar_today,
+              color: ColorsManager.lightGrayColor,
+              size: 80,
+            ),
+            SizedBox(height: 20),
+            Text(
+              'Please select a bookable space to view the calendar.',
+              style: TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w500,
+                  color: ColorsManager.lightGrayColor),
+            ),
+          ],
+        ),
+      );
+    }
+
+    final weekDays = _getWeekDays(weekStart);
+
+    final selectedDayIndex =
+        weekDays.indexWhere((d) => isSameDay(d, selectedDate));
+    final selectedSidebarIndex = selectedDateFromSideBarCalender == null
+        ? -1
+        : weekDays
+            .indexWhere((d) => isSameDay(d, selectedDateFromSideBarCalender!));
+
+    const double timeLineWidth = 80;
+    const int totalDays = 7;
+    final DateTime highlightStart = DateTime(2025, 7, 10);
+    final DateTime highlightEnd = DateTime(2025, 7, 19);
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final double calendarWidth = constraints.maxWidth;
+        final double dayColumnWidth =
+            (calendarWidth - timeLineWidth) / totalDays - 0.1;
+        bool isInRange(DateTime date, DateTime start, DateTime end) {
+          return !date.isBefore(start) && !date.isAfter(end);
+        }
+
+        return Padding(
+          padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 25),
+          child: Stack(
+            children: [
+              WeekView(
+                weekDetectorBuilder: ({
+                  required date,
+                  required height,
+                  required heightPerMinute,
+                  required minuteSlotSize,
+                  required width,
+                }) {
+                  return isInRange(date, highlightStart, highlightEnd)
+                      ? HatchedColumnBackground(
+                          backgroundColor: ColorsManager.grey800,
+                          lineColor: ColorsManager.textGray,
+                          opacity: 0.3,
+                          stripeSpacing: 12,
+                          borderRadius: BorderRadius.circular(8),
+                        )
+                      : const SizedBox();
+                },
+                pageViewPhysics: const NeverScrollableScrollPhysics(),
+                key: ValueKey(weekStart),
+                controller: eventController,
+                initialDay: weekStart,
+                startHour: startHour - 1,
+                endHour: endHour,
+                heightPerMinute: 1.1,
+                showLiveTimeLineInAllDays: false,
+                showVerticalLines: true,
+                emulateVerticalOffsetBy: -80,
+                startDay: WeekDays.monday,
+                liveTimeIndicatorSettings: const LiveTimeIndicatorSettings(
+                  showBullet: false,
+                  height: 0,
+                ),
+                weekDayBuilder: (date) {
+                  return WeekDayHeader(
+                    date: date,
+                    isSelectedDay: isSameDay(date, selectedDate),
+                  );
+                },
+                timeLineBuilder: (date) {
+                  return TimeLineWidget(date: date);
+                },
+                timeLineWidth: timeLineWidth,
+                weekPageHeaderBuilder: (start, end) => Container(),
+                weekTitleHeight: 60,
+                weekNumberBuilder: (firstDayOfWeek) => Padding(
+                  padding: const EdgeInsets.only(right: 15, bottom: 10),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [
+                      Text(
+                        firstDayOfWeek.timeZoneName.replaceAll(':00', ''),
+                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                              fontSize: 12,
+                              color: ColorsManager.blackColor,
+                              fontWeight: FontWeight.w400,
+                            ),
+                      ),
+                    ],
+                  ),
+                ),
+                eventTileBuilder: (date, events, boundary, start, end) {
+                  return EventTileWidget(
+                    events: events,
+                  );
+                },
+              ),
+              if (selectedDayIndex >= 0)
+                Positioned(
+                  left: (timeLineWidth + 3) +
+                      (dayColumnWidth - 8) * (selectedDayIndex - 0.01),
+                  top: 0,
+                  bottom: 0,
+                  width: dayColumnWidth,
+                  child: IgnorePointer(
+                    child: Container(
+                      margin: const EdgeInsets.symmetric(
+                          vertical: 0, horizontal: 4),
+                      color: ColorsManager.spaceColor.withOpacity(0.07),
+                    ),
+                  ),
+                ),
+              if (selectedSidebarIndex >= 0 &&
+                  selectedSidebarIndex != selectedDayIndex)
+                Positioned(
+                  left: (timeLineWidth + 3) +
+                      (dayColumnWidth - 8) * (selectedSidebarIndex - 0.01),
+                  top: 0,
+                  bottom: 0,
+                  width: dayColumnWidth,
+                  child: IgnorePointer(
+                    child: Container(
+                      margin: const EdgeInsets.symmetric(
+                          vertical: 0, horizontal: 4),
+                      color: Colors.orange.withOpacity(0.14),
+                    ),
+                  ),
+                ),
+              Positioned(
+                right: 0,
+                top: 50,
+                bottom: 0,
+                child: IgnorePointer(
+                  child: Container(
+                    width: 1,
+                    color: Theme.of(context).scaffoldBackgroundColor,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  List<DateTime> _getWeekDays(DateTime date) {
+    final int weekday = date.weekday;
+    final DateTime monday = date.subtract(Duration(days: weekday - 1));
+    return List.generate(7, (i) => monday.add(Duration(days: i)));
+  }
+}
+
+bool isSameDay(DateTime d1, DateTime d2) {
+  return d1.year == d2.year && d1.month == d2.month && d1.day == d2.day;
+}
+
+int _parseHour(String? time, {required int defaultValue}) {
+  if (time == null || time.isEmpty || !time.contains(':')) {
+    return defaultValue;
+  }
+  try {
+    return int.parse(time.split(':')[0]);
+  } catch (e) {
+    return defaultValue;
+  }
+}

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

@@ -1,52 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/view/widgets/icon_text_button.dart';
-import 'package:syncrow_web/utils/constants/assets.dart';
-
-class BookingPage extends StatelessWidget {
-  const BookingPage({super.key});
-
-  @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: () {}),
-                          SizedBox(width: 20),
-                          SvgTextButton(
-                              svgAsset: Assets.groupIcon,
-                              label: 'Manage Users',
-                              onPressed: () {})
-                        ],
-                      )
-                    ],
-                  ),
-                ),
-              ))
-        ],
-      ),
-    );
-  }
-}

lib/pages/access_management/view/access_management.dart

@@ -2,7 +2,7 @@ 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/view/booking_page.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/booking_page.dart';
 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';

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

@@ -0,0 +1,41 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+
+abstract final class SpacesRecursiveHelper {
+  static List<SpaceModel> recusrivelyUpdate(
+    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: recusrivelyUpdate(space.children, updatedSpace),
+        );
+      }
+      return space;
+    }).toList();
+  }
+
+  static List<SpaceModel> recusrivelyDelete(
+    List<SpaceModel> spaces,
+    String spaceUuid,
+  ) {
+    final s = spaces.map((space) {
+      if (space.uuid == spaceUuid) return null;
+      if (space.children.isNotEmpty) {
+        return space.copyWith(
+          children: recusrivelyDelete(space.children, spaceUuid),
+        );
+      }
+      return space;
+    }).toList();
+
+    return s.whereType<SpaceModel>().toList();
+  }
+}

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

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

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

@@ -37,8 +37,8 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
 
         final path = Path()..moveTo(startPoint.dx, startPoint.dy);
 
-        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 20);
-        final controlPoint2 = Offset(endPoint.dx, endPoint.dy - 60);
+        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 100);
+        final controlPoint2 = Offset(endPoint.dx, endPoint.dy - 100);
 
         path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
             controlPoint2.dy, endPoint.dx, endPoint.dy);

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() {
@@ -46,7 +51,6 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
 
   @override
   void didUpdateWidget(covariant CommunityStructureCanvas oldWidget) {
-    super.didUpdateWidget(oldWidget);
     if (widget.selectedSpace?.uuid != oldWidget.selectedSpace?.uuid) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         if (mounted) {
@@ -54,6 +58,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
         }
       });
     }
+    super.didUpdateWidget(oldWidget);
   }
 
   @override
@@ -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

@@ -2,18 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart';
-import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_header_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_header_action_buttons_composer.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class CommunityStructureHeader extends StatelessWidget {
   const CommunityStructureHeader({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
     final screenWidth = MediaQuery.of(context).size.width;
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
@@ -34,7 +33,7 @@ class CommunityStructureHeader extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Expanded(
-                child: _buildCommunityInfo(context, theme, screenWidth),
+                child: _buildCommunityInfo(context, screenWidth),
               ),
               const SizedBox(width: 16),
             ],
@@ -44,8 +43,7 @@ class CommunityStructureHeader extends StatelessWidget {
     );
   }
 
-  Widget _buildCommunityInfo(
-      BuildContext context, ThemeData theme, double screenWidth) {
+  Widget _buildCommunityInfo(BuildContext context, double screenWidth) {
     final selectedCommunity =
         context.watch<CommunitiesTreeSelectionBloc>().state.selectedCommunity;
     final selectedSpace =
@@ -55,8 +53,9 @@ class CommunityStructureHeader extends StatelessWidget {
       children: [
         Text(
           'Community Structure',
-          style: theme.textTheme.headlineLarge
-              ?.copyWith(color: ColorsManager.blackColor),
+          style: context.textTheme.headlineLarge?.copyWith(
+            color: ColorsManager.blackColor,
+          ),
         ),
         if (selectedCommunity != null)
           Row(
@@ -67,8 +66,9 @@ class CommunityStructureHeader extends StatelessWidget {
                     Flexible(
                       child: SelectableText(
                         selectedCommunity.name,
-                        style: theme.textTheme.bodyLarge
-                            ?.copyWith(color: ColorsManager.blackColor),
+                        style: context.textTheme.bodyLarge?.copyWith(
+                          color: ColorsManager.blackColor,
+                        ),
                         maxLines: 1,
                       ),
                     ),
@@ -90,15 +90,8 @@ class CommunityStructureHeader extends StatelessWidget {
                 ),
               ),
               const SizedBox(width: 8),
-              CommunityStructureHeaderActionButtons(
-                onDelete: (space) {},
-                onDuplicate: (space) {},
-                onEdit: (space) {
-                  SpaceDetailsDialogHelper.showEdit(
-                    context,
-                    spaceModel: selectedSpace!,
-                  );
-                },
+              CommunityStructureHeaderActionButtonsComposer(
+                selectedCommunity: selectedCommunity,
                 selectedSpace: selectedSpace,
               ),
             ],

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

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

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

@@ -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,
@@ -74,9 +74,8 @@ class SpaceCell extends StatelessWidget {
       borderRadius: BorderRadius.circular(15),
       boxShadow: [
         BoxShadow(
-          color: ColorsManager.lightGrayColor.withValues(alpha: 0.5),
-          spreadRadius: 2,
-          blurRadius: 5,
+          color: ColorsManager.lightGrayColor.withValues(alpha: 0.25),
+          blurRadius: 7,
           offset: const Offset(0, 3),
         ),
       ],

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/delete_space/data/remote_delete_space_service.dart

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/data/remote_delete_space_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/presentation/bloc/delete_space_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/delete_space/presentation/widgets/delete_space_dialog_form.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class DeleteSpaceDialog extends StatelessWidget {
+  const DeleteSpaceDialog({
+    required this.space,
+    required this.community,
+    required this.onSuccess,
+    super.key,
+  });
+
+  final SpaceModel space;
+  final CommunityModel community;
+  final void Function() onSuccess;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => DeleteSpaceBloc(
+        RemoteDeleteSpaceService(httpService: HTTPService()),
+      ),
+      child: Builder(
+        builder: (context) => Dialog(
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+          child: Container(
+            padding: const EdgeInsetsDirectional.all(32),
+            constraints: BoxConstraints(
+              maxWidth: context.screenWidth * 0.2,
+            ),
+            child: BlocConsumer<DeleteSpaceBloc, DeleteSpaceState>(
+              listener: (context, state) {
+                if (state case DeleteSpaceSuccess()) onSuccess();
+              },
+              builder: (context, state) => switch (state) {
+                DeleteSpaceInitial() => DeleteSpaceDialogForm(
+                    space: space,
+                    communityUuid: community.uuid,
+                  ),
+                DeleteSpaceLoading() => const DeleteSpaceLoadingWidget(),
+                DeleteSpaceSuccess(:final successMessage) => DeleteSpaceStatusWidget(
+                    message: successMessage,
+                    icon: const Icon(
+                      Icons.check_circle,
+                      size: 92,
+                      color: ColorsManager.goodGreen,
+                    ),
+                  ),
+                DeleteSpaceFailure() => DeleteSpaceStatusWidget(
+                    message: state.errorMessage,
+                    icon: const Icon(
+                      Icons.error,
+                      size: 92,
+                      color: ColorsManager.red,
+                    ),
+                  ),
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class DeleteSpaceLoadingWidget extends StatelessWidget {
+  const DeleteSpaceLoadingWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SizedBox.square(
+      dimension: 32,
+      child: Center(child: CircularProgressIndicator()),
+    );
+  }
+}
+
+class DeleteSpaceStatusWidget extends StatelessWidget {
+  const DeleteSpaceStatusWidget({
+    required this.message,
+    required this.icon,
+    super.key,
+  });
+
+  final String message;
+  final Widget icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      spacing: 16,
+      children: [
+        icon,
+        SelectableText(
+          message,
+          style: context.textTheme.bodyMedium?.copyWith(
+            color: ColorsManager.blackColor,
+            fontSize: 22,
+          ),
+          textAlign: TextAlign.center,
+        ),
+        FilledButton(
+          onPressed: Navigator.of(context).pop,
+          child: const Text('Close'),
+        ),
+      ],
+    );
+  }
+}

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

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

lib/pages/space_management_v2/modules/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/services/access_mang_api.dart

@@ -1,5 +1,5 @@
 import 'dart:convert';
-import 'package:syncrow_web/pages/access_management/model/password_model.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/model/password_model.dart';
 import 'package:syncrow_web/pages/visitor_password/model/device_model.dart';
 import 'package:syncrow_web/pages/visitor_password/model/schedule_model.dart';
 import 'package:syncrow_web/services/api/http_service.dart';

lib/utils/color_manager.dart

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

lib/utils/constants/api_const.dart

@@ -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}';
+
+  static const String getBookableSpaces = '/bookable-spaces';
+  static const String getCalendarEvents = '/api';
 }

lib/utils/constants/assets.dart

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

pubspec.yaml

@@ -63,6 +63,9 @@ dependencies:
   bloc: ^9.0.0
   geocoding: ^4.0.0
   gauge_indicator: ^0.4.3
+  calendar_view: ^1.4.0
+  calendar_date_picker2: ^2.0.1
+
 
 
 dev_dependencies: