Uses Inkwell instead of Gesture Detector for canvas widgets.

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

Setup new firebase project in the web platform.

## Type of Change

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

- [ ] ✨ 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
- [x] ✅ Build configuration change
- [ ] 📝 Documentation
- [ ] 🗑️ Chore

.env.development

@@ -1,2 +1,3 @@
 ENV_NAME=development
 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
+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
+RTDB_URL=https://syncrow-staging-79446.asia-southeast1.firebasedatabase.app/

.vscode/launch.json

@@ -1,14 +1,9 @@
 {
   "configurations": [
-      
     {
- 
       "name": "DEVELOPMENT",
-       
       "request": "launch",
-       
       "type": "dart",
-       
       "args": [
         "-d",
         "chrome",
@@ -16,19 +11,14 @@
         "3000",
         "-t",
         "lib/main_dev.dart",
-              "--web-experimental-hot-reload",
+        "--web-experimental-hot-reload"
       ],
-       
       "flutterMode": "debug"
-       
+    },
-          },{
+    {
- 
       "name": "STAGING",
-       
       "request": "launch",
-       
       "type": "dart",
-       
       "args": [
         "-d",
         "chrome",
@@ -36,19 +26,14 @@
         "3000",
         "-t",
         "lib/main_staging.dart",
-                "--web-experimental-hot-reload",
+        "--web-experimental-hot-reload"
       ],
-       
       "flutterMode": "debug"
-       
+    },
-          },{
+    {
- 
       "name": "PRODUCTION",
-       
       "request": "launch",
-       
       "type": "dart",
-       
       "args": [
         "-d",
         "chrome",
@@ -56,12 +41,9 @@
         "3000",
         "-t",
         "lib/main.dart",
-              "--web-experimental-hot-reload",
+        "--web-experimental-hot-reload"
       ],
-       
       "flutterMode": "debug"
-       
+    }
-          },
-
   ]
 }

assets/icons/group_icon.svg

@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9717_7433)">
+<path d="M17.1131 10.6766H15.5664C15.7241 11.1083 15.8102 11.5741 15.8102 12.0596V17.9053C15.8102 18.1077 15.775 18.302 15.7109 18.4827H18.2679C19.2231 18.4827 20.0002 17.7056 20.0002 16.7505V13.5637C20.0002 11.9718 18.7051 10.6766 17.1131 10.6766Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M4.19005 12.0596C4.19005 11.5741 4.27618 11.1083 4.43384 10.6766H2.88712C1.29516 10.6766 0 11.9718 0 13.5637V16.7505C0 17.7057 0.777072 18.4828 1.73227 18.4828H4.28938C4.22528 18.302 4.19005 18.1077 4.19005 17.9053V12.0596Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M11.7679 9.17249H8.23184C6.63989 9.17249 5.34473 10.4676 5.34473 12.0596V17.9053C5.34473 18.2242 5.60324 18.4827 5.92215 18.4827H14.0776C14.3965 18.4827 14.655 18.2242 14.655 17.9053V12.0596C14.655 10.4676 13.3598 9.17249 11.7679 9.17249Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M9.99995 1.51721C8.08541 1.51721 6.52783 3.07479 6.52783 4.98937C6.52783 6.288 7.24459 7.42218 8.30311 8.01765C8.80518 8.30008 9.38401 8.46148 9.99995 8.46148C10.6159 8.46148 11.1947 8.30008 11.6968 8.01765C12.7553 7.42218 13.4721 6.28796 13.4721 4.98937C13.4721 3.07483 11.9145 1.51721 9.99995 1.51721Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M3.90284 4.75354C2.471 4.75354 1.30615 5.91839 1.30615 7.35022C1.30615 8.78206 2.471 9.94691 3.90284 9.94691C4.26604 9.94691 4.6119 9.87168 4.92608 9.73644C5.46929 9.50257 5.91718 9.08859 6.19433 8.57003C6.38886 8.20609 6.49952 7.79089 6.49952 7.35022C6.49952 5.91843 5.33468 4.75354 3.90284 4.75354Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M16.0972 4.75354C14.6653 4.75354 13.5005 5.91839 13.5005 7.35022C13.5005 7.79093 13.6112 8.20612 13.8057 8.57003C14.0828 9.08863 14.5307 9.50261 15.0739 9.73644C15.3881 9.87168 15.734 9.94691 16.0972 9.94691C17.529 9.94691 18.6939 8.78206 18.6939 7.35022C18.6939 5.91839 17.529 4.75354 16.0972 4.75354Z" fill="#023DFE" fill-opacity="0.7"/>
+</g>
+<defs>
+<clipPath id="clip0_9717_7433">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/home_icon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0002 5.97498L3.12109 11.2683V18.3601H8.64871V13.163H11.5852V18.3601H16.8794V11.2683L10.0002 5.97498Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M17.1673 7.15356V3.52759H14.2702V4.92485L10 1.63989L0 9.33274L1.38043 11.1271L10 4.49458L18.6196 11.1272L20 9.33278L17.1673 7.15356Z" fill="#023DFE" fill-opacity="0.7"/>
+</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/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/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/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,143 @@
+import 'dart:async';
+import 'package:bloc/bloc.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:flutter/material.dart';
+part 'events_event.dart';
+part 'events_state.dart';
+
+class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
+  final EventController eventController = EventController();
+
+  CalendarEventsBloc() : 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 events = _generateDummyEventsForWeek(event.weekStart);
+      eventController.addAll(events);
+      emit(EventsLoaded(
+        events: events,
+        initialDate: event.weekStart,
+        weekDays: _getWeekDays(event.weekStart),
+      ));
+    } catch (e) {
+      emit(EventsError('Failed to load events'));
+    }
+  }
+
+  List<CalendarEventData> _generateDummyEventsForWeek(DateTime weekStart) {
+    final events = <CalendarEventData>[];
+
+    for (int i = 0; i < 7; i++) {
+      final date = weekStart.add(Duration(days: i));
+
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 9, minute: 0),
+        endTime: date.copyWith(hour: 10, minute: 30),
+        title: 'Team Meeting',
+        description: 'Daily standup',
+        color: Colors.blue,
+      ));
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 14, minute: 0),
+        endTime: date.copyWith(hour: 15, minute: 0),
+        title: 'Client Call',
+        description: 'Project discussion',
+        color: Colors.green,
+      ));
+    }
+
+    return events;
+  }
+
+  void _onAddEvent(AddEvent event, Emitter<CalendarEventState> emit) {
+    eventController.add(event.event);
+    if (state is EventsLoaded) {
+      final loaded = state as EventsLoaded;
+      emit(EventsLoaded(
+        events: [...eventController.events],
+        initialDate: loaded.initialDate,
+        weekDays: loaded.weekDays,
+      ));
+    }
+  }
+
+  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,
+        initialDate: event.weekDate,
+        weekDays: newWeekDays,
+      ));
+    }
+  }
+
+  List<CalendarEventData> _generateDummyEvents() {
+    final now = DateTime.now();
+    return [
+      CalendarEventData(
+        date: now,
+        startTime: now.copyWith(hour: 8, minute: 00, second: 0),
+        endTime: now.copyWith(hour: 9, minute: 00, second: 0),
+        title: 'Team Meeting',
+        description: 'Weekly team sync',
+        color: Colors.blue,
+      ),
+      CalendarEventData(
+        date: now,
+        startTime: now.copyWith(hour: 9, minute: 00, second: 0),
+        endTime: now.copyWith(hour: 10, minute: 30, second: 0),
+        title: 'Team Meeting',
+        description: 'Weekly team sync',
+        color: Colors.blue,
+      ),
+      CalendarEventData(
+        date: now.add(const Duration(days: 1)),
+        startTime: now.copyWith(hour: 14, day: now.day + 1),
+        endTime: now.copyWith(hour: 15, day: now.day + 1),
+        title: 'Client Call',
+        description: 'Project discussion',
+        color: Colors.green,
+      ),
+      CalendarEventData(
+        date: now.add(const Duration(days: 2)),
+        startTime: now.copyWith(hour: 11, day: now.day + 2),
+        endTime: now.copyWith(hour: 12, day: now.day + 2),
+        title: 'Lunch with Team',
+        color: Colors.orange,
+      ),
+    ];
+  }
+
+  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,25 @@
+part of 'events_bloc.dart';
+
+@immutable
+abstract class CalendarEventsEvent {
+  const CalendarEventsEvent();
+}
+
+class LoadEvents extends CalendarEventsEvent {
+  final DateTime weekStart;
+  const LoadEvents({required this.weekStart});
+}
+
+class AddEvent extends CalendarEventsEvent {
+  final CalendarEventData event;
+  AddEvent(this.event);
+}
+
+class StartTimer extends CalendarEventsEvent {}
+
+class DisposeResources extends CalendarEventsEvent {}
+
+class GoToWeek extends CalendarEventsEvent {
+  final DateTime weekDate;
+  GoToWeek(this.weekDate);
+}

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

@@ -0,0 +1,25 @@
+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;
+  final DateTime initialDate;
+  final List<DateTime> weekDays;
+
+  EventsLoaded({
+    required this.events,
+    required this.initialDate,
+    required this.weekDays,
+  });
+}
+
+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,266 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:intl/intl.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/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/weekly_calendar_page.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();
+  }
+
+  List<CalendarEventData> _generateDummyEventsForWeek(DateTime weekStart) {
+    final List<CalendarEventData> events = [];
+    for (int i = 0; i < 7; i++) {
+      final date = weekStart.add(Duration(days: i));
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 9, minute: 0),
+        endTime: date.copyWith(hour: 10, minute: 30),
+        title: 'Team Meeting',
+        description: 'Daily standup',
+        color: Colors.blue,
+      ));
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 14, minute: 0),
+        endTime: date.copyWith(hour: 15, minute: 0),
+        title: 'Client Call',
+        description: 'Project discussion',
+        color: Colors.green,
+      ));
+    }
+    return events;
+  }
+
+  void _loadEventsForWeek(DateTime weekStart) {
+    _eventController.removeWhere((_) => true);
+    _eventController.addAll(_generateDummyEventsForWeek(weekStart));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(create: (_) => SelectedBookableSpaceBloc()),
+        BlocProvider(create: (_) => DateSelectionBloc()),
+      ],
+      child: BlocListener<DateSelectionBloc, DateSelectionState>(
+        listenWhen: (previous, current) =>
+            previous.weekStart != current.weekStart,
+        listener: (context, state) {
+          _loadEventsForWeek(state.weekStart);
+        },
+        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 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: () {
+                                      context
+                                          .read<DateSelectionBloc>()
+                                          .add(PreviousWeek());
+                                    },
+                                  ),
+                                  const SizedBox(width: 10),
+                                  Text(
+                                    _getMonthYearText(weekStart, weekEnd),
+                                    style: const TextStyle(
+                                      color: ColorsManager.lightGrayColor,
+                                      fontSize: 14,
+                                      fontWeight: FontWeight.w400,
+                                    ),
+                                  ),
+                                  const SizedBox(width: 10),
+                                  IconButton(
+                                    iconSize: 15,
+                                    icon: const Icon(Icons.arrow_forward_ios,
+                                        color: ColorsManager.lightGrayColor),
+                                    onPressed: () {
+                                      context
+                                          .read<DateSelectionBloc>()
+                                          .add(NextWeek());
+                                    },
+                                  ),
+                                ],
+                              ),
+                            );
+                          },
+                        ),
+                      ],
+                    ),
+                    Expanded(
+                      child: BlocBuilder<SelectedBookableSpaceBloc,
+                          SelectedBookableSpaceState>(
+                        builder: (context, roomState) {
+                          final selectedRoom = roomState.selectedBookableSpace;
+                          return BlocBuilder<DateSelectionBloc,
+                              DateSelectionState>(
+                            builder: (context, dateState) {
+                              return WeeklyCalendarPage(
+                                startTime:
+                                    selectedRoom?.bookableConfig.startTime,
+                                endTime: selectedRoom?.bookableConfig.endTime,
+                                weekStart: dateState.weekStart,
+                                selectedDate: dateState.selectedDate,
+                                eventController: _eventController,
+                                selectedDateFromSideBarCalender: context
+                                    .watch<DateSelectionBloc>()
+                                    .state
+                                    .selectedDateFromSideBarCalender,
+                              );
+                            },
+                          );
+                        },
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  String _getMonthYearText(DateTime start, DateTime end) {
+    final startMonth = DateFormat('MMM').format(start);
+    final endMonth = DateFormat('MMM').format(end);
+    final year = start.year == end.year
+        ? start.year.toString()
+        : '${start.year}-${end.year}';
+
+    if (start.month == end.month) {
+      return '$startMonth $year';
+    } else {
+      return '$startMonth - $endMonth $year';
+    }
+  }
+}

lib/pages/access_management/booking_system/presentation/view/widgets/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/icon_text_button.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SvgTextButton extends StatelessWidget {
+  final String svgAsset;
+  final String label;
+  final VoidCallback onPressed;
+  final Color backgroundColor;
+  final Color svgColor;
+  final Color labelColor;
+  final double borderRadius;
+  final List<BoxShadow> boxShadow;
+  final double svgSize;
+
+  const SvgTextButton({
+    super.key,
+    required this.svgAsset,
+    required this.label,
+    required this.onPressed,
+    this.backgroundColor = ColorsManager.circleRolesBackground,
+    this.svgColor = const Color(0xFF496EFF),
+    this.labelColor = Colors.black,
+    this.borderRadius = 10.0,
+    this.boxShadow = const [
+      BoxShadow(
+        color: ColorsManager.lightGrayColor,
+        blurRadius: 4,
+        offset: Offset(0, 1),
+      ),
+    ],
+    this.svgSize = 24.0,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(borderRadius),
+        onTap: onPressed,
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+          decoration: BoxDecoration(
+            color: backgroundColor,
+            borderRadius: BorderRadius.circular(borderRadius),
+            boxShadow: boxShadow,
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SvgPicture.asset(
+                svgAsset,
+                width: svgSize,
+                height: svgSize,
+              ),
+              const SizedBox(width: 12),
+              Text(
+                label,
+                style: TextStyle(
+                  color: labelColor,
+                  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/weekly_calendar_page.dart

@@ -0,0 +1,292 @@
+import 'package:flutter/material.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:intl/intl.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;
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final double calendarWidth = constraints.maxWidth;
+        final double dayColumnWidth =
+            (calendarWidth - timeLineWidth) / totalDays - 0.1;
+
+        return Padding(
+          padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 25),
+          child: Stack(
+            children: [
+              WeekView(
+                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) {
+                  final index = weekDays.indexWhere((d) => isSameDay(d, date));
+                  final isSelectedDay = index == selectedDayIndex;
+                  return Column(
+                    children: [
+                      Text(
+                        DateFormat('EEE').format(date).toUpperCase(),
+                        style: TextStyle(
+                          fontWeight: FontWeight.w400,
+                          fontSize: 14,
+                          color: isSelectedDay ? Colors.blue : Colors.black,
+                        ),
+                      ),
+                      Text(
+                        DateFormat('d').format(date),
+                        style: TextStyle(
+                          fontWeight: FontWeight.w700,
+                          fontSize: 20,
+                          color: isSelectedDay
+                              ? ColorsManager.blue1
+                              : ColorsManager.blackColor,
+                        ),
+                      ),
+                    ],
+                  );
+                },
+                timeLineBuilder: (date) {
+                  int hour = date.hour == 0
+                      ? 12
+                      : (date.hour > 12 ? date.hour - 12 : date.hour);
+                  String period = date.hour >= 12 ? 'PM' : 'AM';
+                  return Container(
+                    height: 60,
+                    alignment: Alignment.center,
+                    child: RichText(
+                      text: TextSpan(
+                        children: [
+                          TextSpan(
+                            text: '$hour',
+                            style: const TextStyle(
+                              fontWeight: FontWeight.w700,
+                              fontSize: 24,
+                              color: ColorsManager.blackColor,
+                            ),
+                          ),
+                          WidgetSpan(
+                            child: Padding(
+                              padding: const EdgeInsets.only(left: 2, top: 6),
+                              child: Text(
+                                period,
+                                style: const TextStyle(
+                                  fontWeight: FontWeight.w400,
+                                  fontSize: 12,
+                                  color: ColorsManager.blackColor,
+                                  letterSpacing: 1,
+                                ),
+                              ),
+                            ),
+                            alignment: PlaceholderAlignment.baseline,
+                            baseline: TextBaseline.alphabetic,
+                          ),
+                        ],
+                      ),
+                    ),
+                  );
+                },
+                timeLineWidth: timeLineWidth,
+                weekPageHeaderBuilder: (start, end) => Container(),
+                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 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(),
+                    ),
+                  );
+                },
+              ),
+              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/view/access_management.dart

@@ -2,302 +2,86 @@ 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/bloc/access_state.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/booking_page.dart';
-import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/pages/access_management/view/access_overview_content.dart';
-import 'package:syncrow_web/pages/common/buttons/search_reset_buttons.dart';
-import 'package:syncrow_web/pages/common/custom_table.dart';
-import 'package:syncrow_web/pages/common/date_time_widget.dart';
-import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
-import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
 import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
-import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart';
-// import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/utils/constants/app_enum.dart';
-import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
-import 'package:syncrow_web/utils/style.dart';
 import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
 
-class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
+class AccessManagementPage extends StatefulWidget {
   const AccessManagementPage({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  State<AccessManagementPage> createState() => _AccessManagementPageState();
-    final isLargeScreen = isLargeScreenSize(context);
+}
-    final isSmallScreen = isSmallScreenSize(context);
-    final isHalfMediumScreen = isHafMediumScreenSize(context);
-    final padding =
-        isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15);
 
-    return WebScaffold(
+class _AccessManagementPageState extends State<AccessManagementPage>
+    with HelperResponsiveLayout {
+  final PageController _pageController = PageController(initialPage: 0);
+  int _currentPageIndex = 0;
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
+      child: WebScaffold(
         enableMenuSidebar: false,
         appBarTitle: Text(
           'Access Management',
           style: ResponsiveTextTheme.of(context).deviceManagementTitle,
         ),
-        rightBody: const NavigateHomeGridView(),
+        centerBody: Row(
-        scaffoldBody: BlocProvider(
-            create: (BuildContext context) =>
-                AccessBloc()..add(FetchTableData()),
-            child: BlocConsumer<AccessBloc, AccessState>(
-                listener: (context, state) {},
-                builder: (context, state) {
-                  final accessBloc = BlocProvider.of<AccessBloc>(context);
-                  final filteredData = accessBloc.filteredData;
-                  return state is AccessLoaded
-                      ? const Center(child: CircularProgressIndicator())
-                      : Container(
-                          padding: padding,
-                          height: MediaQuery.of(context).size.height,
-                          width: MediaQuery.of(context).size.width,
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              FilterWidget(
-                                size: MediaQuery.of(context).size,
-                                tabs: accessBloc.tabs,
-                                selectedIndex: accessBloc.selectedIndex,
-                                onTabChanged: (index) {
-                                  accessBloc.add(TabChangedEvent(index));
-                                },
-                              ),
-                              const SizedBox(height: 20),
-                              if (isSmallScreen || isHalfMediumScreen)
-                                _buildSmallSearchFilters(context, accessBloc)
-                              else
-                                _buildNormalSearchWidgets(context, accessBloc),
-                              const SizedBox(height: 20),
-                              _buildVisitorAdminPasswords(context, accessBloc),
-                              const SizedBox(height: 20),
-                              Expanded(
-                                  child: DynamicTable(
-                                tableName: 'AccessManagement',
-                                uuidIndex: 1,
-                                withSelectAll: true,
-                                isEmpty: filteredData.isEmpty,
-                                withCheckBox: false,
-                                size: MediaQuery.of(context).size,
-                                cellDecoration: containerDecoration,
-                                headers: const [
-                                  'Name',
-                                  'Access Type',
-                                  'Access Start',
-                                  'Access End',
-                                  'Accessible Device',
-                                  'Authorizer',
-                                  'Authorization Date & Time',
-                                  'Access Status'
-                                ],
-                                data: filteredData.map((item) {
-                                  return [
-                                    item.passwordName,
-                                    item.passwordType.value,
-                                    accessBloc
-                                        .timestampToDate(item.effectiveTime),
-                                    accessBloc
-                                        .timestampToDate(item.invalidTime),
-                                    item.deviceName.toString(),
-                                    item.authorizerEmail.toString(),
-                                    accessBloc
-                                        .timestampToDate(item.invalidTime),
-                                    item.passwordStatus.value,
-                                  ];
-                                }).toList(),
-                              )),
-                            ],
-                          ),
-                        );
-                })));
-  }
-
-  Wrap _buildVisitorAdminPasswords(
-      BuildContext context, AccessBloc accessBloc) {
-    return Wrap(
-      spacing: 10,
-      runSpacing: 10,
-      children: [
-        Container(
-          width: 205,
-          height: 42,
-          decoration: containerDecoration,
-          child: DefaultButton(
-              onPressed: () {
-                showDialog(
-                  context: context,
-                  barrierDismissible: false,
-                  builder: (BuildContext context) {
-                    return const VisitorPasswordDialog();
-                  },
-                ).then((v) {
-                  if (v != null) {
-                    accessBloc.add(FetchTableData());
-                  }
-                });
-              },
-              borderRadius: 8,
-              child: Text(
-                'Create Visitor Password ',
-                style: context.textTheme.titleSmall!
-                    .copyWith(color: Colors.white, fontSize: 12),
-              )),
-        ),
-        // Container(
-        //   width: 133,
-        //   height: 42,
-        //   decoration: containerDecoration,
-        //   child: DefaultButton(
-        //       borderRadius: 8,
-        //       backgroundColor: ColorsManager.whiteColors,
-        //       child: Text(
-        //         'Admin Password',
-        //         style: context.textTheme.titleSmall!
-        //             .copyWith(color: Colors.black, fontSize: 12),
-        //       )),
-        // ),
-      ],
-    );
-  }
-
-  Row _buildNormalSearchWidgets(BuildContext context, AccessBloc accessBloc) {
-    // TimeOfDay _selectedTime = TimeOfDay.now();
-
-    return Row(
           mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.end,
-      textBaseline: TextBaseline.ideographic,
           children: [
-        SizedBox(
+            TextButton(
-          width: 250,
+              onPressed: () => _switchPage(0),
-          child: CustomWebTextField(
+              child: Text(
-            controller: accessBloc.passwordName,
+                'Access Overview',
-            height: 43,
+                style: context.textTheme.titleMedium?.copyWith(
-            isRequired: false,
+                  color: _currentPageIndex == 0 ? Colors.white : Colors.grey,
-            textFieldName: 'Name',
+                  fontWeight: _currentPageIndex == 0
-            description: '',
+                      ? FontWeight.w700
-            onSubmitted: (value) {
+                      : FontWeight.w400,
-              accessBloc.add(FilterDataEvent(
-                  emailAuthorizer:
-                      accessBloc.emailAuthorizer.text.toLowerCase(),
-                  selectedTabIndex:
-                      BlocProvider.of<AccessBloc>(context).selectedIndex,
-                  passwordName: accessBloc.passwordName.text.toLowerCase(),
-                  startTime: accessBloc.effectiveTimeTimeStamp,
-                  endTime: accessBloc.expirationTimeTimeStamp));
-            },
                 ),
               ),
-        const SizedBox(width: 15),
+            ),
-        SizedBox(
+            TextButton(
-          width: 250,
+              onPressed: () => _switchPage(1),
-          child: CustomWebTextField(
+              child: Text(
-            controller: accessBloc.emailAuthorizer,
+                'Booking System',
-            height: 43,
+                style: context.textTheme.titleMedium?.copyWith(
-            isRequired: false,
+                  color: _currentPageIndex == 1 ? Colors.white : Colors.grey,
-            textFieldName: 'Authorizer',
+                  fontWeight: _currentPageIndex == 1
-            description: '',
+                      ? FontWeight.w700
-            onSubmitted: (value) {
+                      : FontWeight.w400,
-              accessBloc.add(FilterDataEvent(
-                  emailAuthorizer:
-                      accessBloc.emailAuthorizer.text.toLowerCase(),
-                  selectedTabIndex:
-                      BlocProvider.of<AccessBloc>(context).selectedIndex,
-                  passwordName: accessBloc.passwordName.text.toLowerCase(),
-                  startTime: accessBloc.effectiveTimeTimeStamp,
-                  endTime: accessBloc.expirationTimeTimeStamp));
-            },
                 ),
               ),
-        const SizedBox(width: 15),
-        SizedBox(
-          child: DateTimeWebWidget(
-            icon: Assets.calendarIcon,
-            isRequired: false,
-            title: 'Access Time',
-            size: MediaQuery.of(context).size,
-            endTime: () {
-              accessBloc.add(SelectTime(context: context, isStart: false));
-            },
-            startTime: () {
-              accessBloc.add(SelectTime(context: context, isStart: true));
-            },
-            firstString: BlocProvider.of<AccessBloc>(context).startTime,
-            secondString: BlocProvider.of<AccessBloc>(context).endTime,
-          ),
-        ),
-        const SizedBox(width: 15),
-        SearchResetButtons(
-          onSearch: () {
-            accessBloc.add(FilterDataEvent(
-                emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
-                selectedTabIndex:
-                    BlocProvider.of<AccessBloc>(context).selectedIndex,
-                passwordName: accessBloc.passwordName.text.toLowerCase(),
-                startTime: accessBloc.effectiveTimeTimeStamp,
-                endTime: accessBloc.expirationTimeTimeStamp));
-          },
-          onReset: () {
-            accessBloc.add(ResetSearch());
-          },
             ),
           ],
+        ),
+        rightBody: const NavigateHomeGridView(),
+        scaffoldBody: PageView(
+          controller: _pageController,
+          physics: const NeverScrollableScrollPhysics(),
+          children: const [
+            AccessOverviewContent(),
+            BookingPage(),
+          ],
+        ),
+      ),
     );
   }
 
-  Widget _buildSmallSearchFilters(BuildContext context, AccessBloc accessBloc) {
+  void _switchPage(int index) {
-    return Wrap(
+    setState(() => _currentPageIndex = index);
-      spacing: 20,
+    _pageController.jumpToPage(index);
-      runSpacing: 10,
-      children: [
-        SizedBox(
-          width: 300,
-          child: CustomWebTextField(
-              controller: accessBloc.passwordName,
-              isRequired: true,
-              height: 40,
-              textFieldName: 'Name',
-              description: '',
-              onSubmitted: (value) {
-                accessBloc.add(FilterDataEvent(
-                    emailAuthorizer:
-                        accessBloc.emailAuthorizer.text.toLowerCase(),
-                    selectedTabIndex:
-                        BlocProvider.of<AccessBloc>(context).selectedIndex,
-                    passwordName: accessBloc.passwordName.text.toLowerCase(),
-                    startTime: accessBloc.effectiveTimeTimeStamp,
-                    endTime: accessBloc.expirationTimeTimeStamp));
-              }),
-        ),
-        DateTimeWebWidget(
-          icon: Assets.calendarIcon,
-          isRequired: false,
-          title: 'Access Time',
-          size: MediaQuery.of(context).size,
-          endTime: () {
-            accessBloc.add(SelectTime(context: context, isStart: false));
-          },
-          startTime: () {
-            accessBloc.add(SelectTime(context: context, isStart: true));
-          },
-          firstString: BlocProvider.of<AccessBloc>(context).startTime,
-          secondString: BlocProvider.of<AccessBloc>(context).endTime,
-        ),
-        SearchResetButtons(
-          onSearch: () {
-            accessBloc.add(FilterDataEvent(
-                emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
-                selectedTabIndex:
-                    BlocProvider.of<AccessBloc>(context).selectedIndex,
-                passwordName: accessBloc.passwordName.text.toLowerCase(),
-                startTime: accessBloc.effectiveTimeTimeStamp,
-                endTime: accessBloc.expirationTimeTimeStamp));
-          },
-          onReset: () {
-            accessBloc.add(ResetSearch());
-          },
-        ),
-      ],
-    );
   }
 }

lib/pages/access_management/view/access_overview_content.dart

@@ -0,0 +1,289 @@
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/pages/common/buttons/search_reset_buttons.dart';
+import 'package:syncrow_web/pages/common/custom_table.dart';
+import 'package:syncrow_web/pages/common/date_time_widget.dart';
+import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
+import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
+import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart';
+import 'package:syncrow_web/utils/constants/app_enum.dart';
+import 'package:syncrow_web/utils/constants/assets.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/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class AccessOverviewContent extends StatelessWidget
+    with HelperResponsiveLayout {
+  const AccessOverviewContent({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final isLargeScreen = isLargeScreenSize(context);
+    final isSmallScreen = isSmallScreenSize(context);
+    final isHalfMediumScreen = isHafMediumScreenSize(context);
+    final padding =
+        isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15);
+
+    return BlocProvider(
+        create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
+        child: BlocConsumer<AccessBloc, AccessState>(
+            listener: (context, state) {},
+            builder: (context, state) {
+              final accessBloc = BlocProvider.of<AccessBloc>(context);
+              final filteredData = accessBloc.filteredData;
+              return state is AccessLoaded
+                  ? const Center(child: CircularProgressIndicator())
+                  : Container(
+                      padding: padding,
+                      height: MediaQuery.of(context).size.height,
+                      width: MediaQuery.of(context).size.width,
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          FilterWidget(
+                            size: MediaQuery.of(context).size,
+                            tabs: accessBloc.tabs,
+                            selectedIndex: accessBloc.selectedIndex,
+                            onTabChanged: (index) {
+                              accessBloc.add(TabChangedEvent(index));
+                            },
+                          ),
+                          const SizedBox(height: 20),
+                          if (isSmallScreen || isHalfMediumScreen)
+                            _buildSmallSearchFilters(context, accessBloc)
+                          else
+                            _buildNormalSearchWidgets(context, accessBloc),
+                          const SizedBox(height: 20),
+                          _buildVisitorAdminPasswords(context, accessBloc),
+                          const SizedBox(height: 20),
+                          Expanded(
+                              child: DynamicTable(
+                            tableName: 'AccessManagement',
+                            uuidIndex: 1,
+                            withSelectAll: true,
+                            isEmpty: filteredData.isEmpty,
+                            withCheckBox: false,
+                            size: MediaQuery.of(context).size,
+                            cellDecoration: containerDecoration,
+                            headers: const [
+                              'Name',
+                              'Access Type',
+                              'Access Start',
+                              'Access End',
+                              'Accessible Device',
+                              'Authorizer',
+                              'Authorization Date & Time',
+                              'Access Status'
+                            ],
+                            data: filteredData.map((item) {
+                              return [
+                                item.passwordName,
+                                item.passwordType.value,
+                                accessBloc.timestampToDate(item.effectiveTime),
+                                accessBloc.timestampToDate(item.invalidTime),
+                                item.deviceName.toString(),
+                                item.authorizerEmail.toString(),
+                                accessBloc.timestampToDate(item.invalidTime),
+                                item.passwordStatus.value,
+                              ];
+                            }).toList(),
+                          )),
+                        ],
+                      ),
+                    );
+            }));
+  }
+
+  Wrap _buildVisitorAdminPasswords(
+      BuildContext context, AccessBloc accessBloc) {
+    return Wrap(
+      spacing: 10,
+      runSpacing: 10,
+      children: [
+        Container(
+          width: 205,
+          height: 42,
+          decoration: containerDecoration,
+          child: DefaultButton(
+              onPressed: () {
+                showDialog(
+                  context: context,
+                  barrierDismissible: false,
+                  builder: (BuildContext context) {
+                    return const VisitorPasswordDialog();
+                  },
+                ).then((v) {
+                  if (v != null) {
+                    accessBloc.add(FetchTableData());
+                  }
+                });
+              },
+              borderRadius: 8,
+              child: Text(
+                'Create Visitor Password ',
+                style: context.textTheme.titleSmall!
+                    .copyWith(color: Colors.white, fontSize: 12),
+              )),
+        ),
+        // Container(
+        //   width: 133,
+        //   height: 42,
+        //   decoration: containerDecoration,
+        //   child: DefaultButton(
+        //       borderRadius: 8,
+        //       backgroundColor: ColorsManager.whiteColors,
+        //       child: Text(
+        //         'Admin Password',
+        //         style: context.textTheme.titleSmall!
+        //             .copyWith(color: Colors.black, fontSize: 12),
+        //       )),
+        // ),
+      ],
+    );
+  }
+
+  Row _buildNormalSearchWidgets(BuildContext context, AccessBloc accessBloc) {
+    // TimeOfDay _selectedTime = TimeOfDay.now();
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.end,
+      textBaseline: TextBaseline.ideographic,
+      children: [
+        SizedBox(
+          width: 250,
+          child: CustomWebTextField(
+            controller: accessBloc.passwordName,
+            height: 43,
+            isRequired: false,
+            textFieldName: 'Name',
+            description: '',
+            onSubmitted: (value) {
+              accessBloc.add(FilterDataEvent(
+                  emailAuthorizer:
+                      accessBloc.emailAuthorizer.text.toLowerCase(),
+                  selectedTabIndex:
+                      BlocProvider.of<AccessBloc>(context).selectedIndex,
+                  passwordName: accessBloc.passwordName.text.toLowerCase(),
+                  startTime: accessBloc.effectiveTimeTimeStamp,
+                  endTime: accessBloc.expirationTimeTimeStamp));
+            },
+          ),
+        ),
+        const SizedBox(width: 15),
+        SizedBox(
+          width: 250,
+          child: CustomWebTextField(
+            controller: accessBloc.emailAuthorizer,
+            height: 43,
+            isRequired: false,
+            textFieldName: 'Authorizer',
+            description: '',
+            onSubmitted: (value) {
+              accessBloc.add(FilterDataEvent(
+                  emailAuthorizer:
+                      accessBloc.emailAuthorizer.text.toLowerCase(),
+                  selectedTabIndex:
+                      BlocProvider.of<AccessBloc>(context).selectedIndex,
+                  passwordName: accessBloc.passwordName.text.toLowerCase(),
+                  startTime: accessBloc.effectiveTimeTimeStamp,
+                  endTime: accessBloc.expirationTimeTimeStamp));
+            },
+          ),
+        ),
+        const SizedBox(width: 15),
+        SizedBox(
+          child: DateTimeWebWidget(
+            icon: Assets.calendarIcon,
+            isRequired: false,
+            title: 'Access Time',
+            size: MediaQuery.of(context).size,
+            endTime: () {
+              accessBloc.add(SelectTime(context: context, isStart: false));
+            },
+            startTime: () {
+              accessBloc.add(SelectTime(context: context, isStart: true));
+            },
+            firstString: BlocProvider.of<AccessBloc>(context).startTime,
+            secondString: BlocProvider.of<AccessBloc>(context).endTime,
+          ),
+        ),
+        const SizedBox(width: 15),
+        SearchResetButtons(
+          onSearch: () {
+            accessBloc.add(FilterDataEvent(
+                emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
+                selectedTabIndex:
+                    BlocProvider.of<AccessBloc>(context).selectedIndex,
+                passwordName: accessBloc.passwordName.text.toLowerCase(),
+                startTime: accessBloc.effectiveTimeTimeStamp,
+                endTime: accessBloc.expirationTimeTimeStamp));
+          },
+          onReset: () {
+            accessBloc.add(ResetSearch());
+          },
+        ),
+      ],
+    );
+  }
+
+  Widget _buildSmallSearchFilters(BuildContext context, AccessBloc accessBloc) {
+    return Wrap(
+      spacing: 20,
+      runSpacing: 10,
+      children: [
+        SizedBox(
+          width: 300,
+          child: CustomWebTextField(
+              controller: accessBloc.passwordName,
+              isRequired: true,
+              height: 40,
+              textFieldName: 'Name',
+              description: '',
+              onSubmitted: (value) {
+                accessBloc.add(FilterDataEvent(
+                    emailAuthorizer:
+                        accessBloc.emailAuthorizer.text.toLowerCase(),
+                    selectedTabIndex:
+                        BlocProvider.of<AccessBloc>(context).selectedIndex,
+                    passwordName: accessBloc.passwordName.text.toLowerCase(),
+                    startTime: accessBloc.effectiveTimeTimeStamp,
+                    endTime: accessBloc.expirationTimeTimeStamp));
+              }),
+        ),
+        DateTimeWebWidget(
+          icon: Assets.calendarIcon,
+          isRequired: false,
+          title: 'Access Time',
+          size: MediaQuery.of(context).size,
+          endTime: () {
+            accessBloc.add(SelectTime(context: context, isStart: false));
+          },
+          startTime: () {
+            accessBloc.add(SelectTime(context: context, isStart: true));
+          },
+          firstString: BlocProvider.of<AccessBloc>(context).startTime,
+          secondString: BlocProvider.of<AccessBloc>(context).endTime,
+        ),
+        SearchResetButtons(
+          onSearch: () {
+            accessBloc.add(FilterDataEvent(
+                emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
+                selectedTabIndex:
+                    BlocProvider.of<AccessBloc>(context).selectedIndex,
+                passwordName: accessBloc.passwordName.text.toLowerCase(),
+                startTime: accessBloc.effectiveTimeTimeStamp,
+                endTime: accessBloc.expirationTimeTimeStamp));
+          },
+          onReset: () {
+            accessBloc.add(ResetSearch());
+          },
+        ),
+      ],
+    );
+  }
+}

lib/pages/common/custom_table.dart

@@ -50,6 +50,9 @@ class _DynamicTableState extends State<DynamicTable> {
   bool _selectAll = false;
   final ScrollController _verticalScrollController = ScrollController();
   final ScrollController _horizontalScrollController = ScrollController();
+  static const double _fixedRowHeight = 60;
+  static const double _checkboxColumnWidth = 50;
+  static const double _settingsColumnWidth = 100;
 
   @override
   void initState() {
@@ -67,7 +70,6 @@ class _DynamicTableState extends State<DynamicTable> {
 
   bool _compareListOfLists(
       List<List<dynamic>> oldList, List<List<dynamic>> newList) {
-    // Check if the old and new lists are the same
     if (oldList.length != newList.length) return false;
 
     for (int i = 0; i < oldList.length; i++) {
@@ -104,73 +106,130 @@ class _DynamicTableState extends State<DynamicTable> {
     context.read<DeviceManagementBloc>().add(UpdateSelection(_selectedRows));
   }
 
+  double get _totalTableWidth {
+    final hasSettings = widget.headers.contains('Settings');
+    final base = (widget.withCheckBox ? _checkboxColumnWidth : 0) +
+        (hasSettings ? _settingsColumnWidth : 0);
+    final regularCount = widget.headers.length - (hasSettings ? 1 : 0);
+    final regularWidth = (widget.size.width - base) / regularCount;
+    return base + regularCount * regularWidth;
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
+      width: widget.size.width,
+      height: widget.size.height,
       decoration: widget.cellDecoration,
+      child: ScrollConfiguration(
+        behavior: const ScrollBehavior().copyWith(scrollbars: false),
         child: Scrollbar(
-        controller: _verticalScrollController,
-        thumbVisibility: true,
-        trackVisibility: true,
-        child: Scrollbar(
-          //fixed the horizontal scrollbar issue
           controller: _horizontalScrollController,
           thumbVisibility: true,
           trackVisibility: true,
-          notificationPredicate: (notif) => notif.depth == 1,
+          notificationPredicate: (notif) =>
-          child: SingleChildScrollView(
+              notif.metrics.axis == Axis.horizontal,
-            controller: _verticalScrollController,
           child: SingleChildScrollView(
             controller: _horizontalScrollController,
             scrollDirection: Axis.horizontal,
             child: SizedBox(
-                width: widget.size.width,
+              width: _totalTableWidth,
               child: Column(
                 children: [
                   Container(
+                    height: _fixedRowHeight,
                     decoration: widget.headerDecoration ??
-                          const BoxDecoration(
+                        const BoxDecoration(color: ColorsManager.boxColor),
-                            color: ColorsManager.boxColor,
-                          ),
                     child: Row(
                       children: [
-                          if (widget.withCheckBox) _buildSelectAllCheckbox(),
+                        if (widget.withCheckBox)
-                          ...List.generate(widget.headers.length, (index) {
+                          _buildSelectAllCheckbox(_checkboxColumnWidth),
-                            return _buildTableHeaderCell(
+                        for (var i = 0; i < widget.headers.length; i++)
-                                widget.headers[index], index);
+                          _buildTableHeaderCell(
-                          })
+                            widget.headers[i],
-                          //...widget.headers.map((header) => _buildTableHeaderCell(header)),
+                            widget.headers[i] == 'Settings'
+                                ? _settingsColumnWidth
+                                : (_totalTableWidth -
+                                        (widget.withCheckBox
+                                            ? _checkboxColumnWidth
+                                            : 0) -
+                                        (widget.headers.contains('Settings')
+                                            ? _settingsColumnWidth
+                                            : 0)) /
+                                    (widget.headers.length -
+                                        (widget.headers.contains('Settings')
+                                            ? 1
+                                            : 0)),
+                          ),
                       ],
                     ),
                   ),
-                    SizedBox(
+
-                      width: widget.size.width,
+                  Expanded(
                     child: widget.isEmpty
                         ? _buildEmptyState()
-                          : Column(
+                        : Scrollbar(
-                              children:
+                            controller: _verticalScrollController,
-                                  List.generate(widget.data.length, (rowIndex) {
+                            thumbVisibility: true,
+                            trackVisibility: true,
+                            notificationPredicate: (notif) =>
+                                notif.metrics.axis == Axis.vertical,
+                            child: ListView.builder(
+                              controller: _verticalScrollController,
+                              itemCount: widget.data.length,
+                              itemBuilder: (_, rowIndex) {
                                 final row = widget.data[rowIndex];
-                                return Row(
+                                return SizedBox(
+                                  height: _fixedRowHeight,
+                                  child: Row(
                                     children: [
                                       if (widget.withCheckBox)
                                         _buildRowCheckbox(
-                                          rowIndex, widget.size.height * 0.08),
+                                          rowIndex,
-                                    ...row.asMap().entries.map((entry) {
+                                          _checkboxColumnWidth,
-                                      return _buildTableCell(
+                                        ),
-                                        entry.value.toString(),
+                                      for (var colIndex = 0;
-                                        widget.size.height * 0.08,
+                                          colIndex < row.length;
+                                          colIndex++)
+                                        widget.headers[colIndex] == 'Settings'
+                                            ? buildSettingsIcon(
+                                                width: _settingsColumnWidth,
+                                                onTap: () => widget
+                                                    .onSettingsPressed
+                                                    ?.call(rowIndex),
+                                              )
+                                            : _buildTableCell(
+                                                row[colIndex].toString(),
+                                                width: widget.headers[
+                                                            colIndex] ==
+                                                        'Settings'
+                                                    ? _settingsColumnWidth
+                                                    : (_totalTableWidth -
+                                                            (widget.withCheckBox
+                                                                ? _checkboxColumnWidth
+                                                                : 0) -
+                                                            (widget.headers
+                                                                    .contains(
+                                                                        'Settings')
+                                                                ? _settingsColumnWidth
+                                                                : 0)) /
+                                                        (widget.headers.length -
+                                                            (widget.headers
+                                                                    .contains(
+                                                                        'Settings')
+                                                                ? 1
+                                                                : 0)),
                                                 rowIndex: rowIndex,
-                                        columnIndex: entry.key,
+                                                columnIndex: colIndex,
-                                      );
-                                    }).toList(),
-                                  ],
-                                );
-                              }),
-                            ),
                                               ),
                                     ],
                                   ),
+                                );
+                              },
+                            ),
+                          ),
+                  ),
+                ],
               ),
             ),
           ),
@@ -210,9 +269,10 @@ class _DynamicTableState extends State<DynamicTable> {
           ],
         ),
       );
-  Widget _buildSelectAllCheckbox() {
+
+  Widget _buildSelectAllCheckbox(double width) {
     return Container(
-      width: 50,
+      width: width,
       decoration: const BoxDecoration(
         border: Border.symmetric(
           vertical: BorderSide(color: ColorsManager.boxDivider),
@@ -227,11 +287,11 @@ class _DynamicTableState extends State<DynamicTable> {
     );
   }
 
-  Widget _buildRowCheckbox(int index, double size) {
+  Widget _buildRowCheckbox(int index, double width) {
     return Container(
-      width: 50,
+      width: width,
       padding: const EdgeInsets.all(8.0),
-      height: size,
+      height: _fixedRowHeight,
       decoration: const BoxDecoration(
         border: Border(
           bottom: BorderSide(
@@ -253,20 +313,18 @@ class _DynamicTableState extends State<DynamicTable> {
     );
   }
 
-  Widget _buildTableHeaderCell(String title, int index) {
+  Widget _buildTableHeaderCell(String title, double width) {
-    return Expanded(
+    return Container(
-      child: Container(
+      width: width,
       decoration: const BoxDecoration(
         border: Border.symmetric(
           vertical: BorderSide(color: ColorsManager.boxDivider),
         ),
       ),
-        constraints: const BoxConstraints.expand(height: 40),
+      constraints: BoxConstraints(minHeight: 40, maxHeight: _fixedRowHeight),
       alignment: Alignment.centerLeft,
       child: Padding(
-          padding: EdgeInsets.symmetric(
+        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
-              horizontal: index == widget.headers.length - 1 ? 12 : 8.0,
-              vertical: 4),
         child: Text(
           title,
           style: context.textTheme.titleSmall!.copyWith(
@@ -275,28 +333,27 @@ class _DynamicTableState extends State<DynamicTable> {
             fontWeight: FontWeight.w400,
           ),
           maxLines: 2,
-          ),
+          overflow: TextOverflow.ellipsis,
         ),
       ),
     );
   }
 
-  Widget _buildTableCell(String content, double size,
+  Widget _buildTableCell(String content,
-      {required int rowIndex, required int columnIndex}) {
+      {required double width,
+      required int rowIndex,
+      required int columnIndex}) {
     bool isBatteryLevel = content.endsWith('%');
     double? batteryLevel;
 
     if (isBatteryLevel) {
       batteryLevel = double.tryParse(content.replaceAll('%', '').trim());
     }
+
     bool isSettingsColumn = widget.headers[columnIndex] == 'Settings';
     if (isSettingsColumn) {
       return buildSettingsIcon(
-        width: 120,
+          width: width, onTap: () => widget.onSettingsPressed?.call(rowIndex));
-        height: 60,
-        iconSize: 40,
-        onTap: () => widget.onSettingsPressed?.call(rowIndex),
-      );
     }
 
     Color? statusColor;
@@ -320,10 +377,10 @@ class _DynamicTableState extends State<DynamicTable> {
         statusColor = Colors.black;
     }
 
-    return Expanded(
+    return Container(
-      child: Container(
+      width: width,
-        height: size,
+      height: _fixedRowHeight,
-        padding: const EdgeInsets.all(5.0),
+      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
       decoration: const BoxDecoration(
         border: Border(
           bottom: BorderSide(
@@ -343,23 +400,19 @@ class _DynamicTableState extends State<DynamicTable> {
                   ? ColorsManager.green
                   : statusColor,
           fontSize: 13,
-              fontWeight: FontWeight.w400),
+          fontWeight: FontWeight.w400,
-          maxLines: 2,
         ),
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
       ),
     );
   }
 
-  Widget buildSettingsIcon(
+  Widget buildSettingsIcon({required double width, VoidCallback? onTap}) {
-      {double width = 120,
+    return Container(
-      double height = 60,
+      width: width,
-      double iconSize = 40,
+      height: _fixedRowHeight,
-      VoidCallback? onTap}) {
+      padding: const EdgeInsets.only(left: 15, top: 10, bottom: 10),
-    return Column(
-      children: [
-        Container(
-          padding: const EdgeInsets.only(top: 10, bottom: 15, left: 10),
-          margin: const EdgeInsets.only(right: 15),
       decoration: const BoxDecoration(
         color: ColorsManager.whiteColors,
         border: Border(
@@ -369,17 +422,13 @@ class _DynamicTableState extends State<DynamicTable> {
           ),
         ),
       ),
-          width: width,
+      child: Align(
-          child: Padding(
+        alignment: Alignment.centerLeft,
-            padding: const EdgeInsets.only(
-              right: 16.0,
-              left: 17.0,
-            ),
         child: Container(
           width: 50,
           decoration: BoxDecoration(
             color: const Color(0xFFF7F8FA),
-                borderRadius: BorderRadius.circular(height / 2),
+            borderRadius: BorderRadius.circular(20),
             boxShadow: [
               BoxShadow(
                 color: Colors.black.withOpacity(0.17),
@@ -391,12 +440,12 @@ class _DynamicTableState extends State<DynamicTable> {
           child: InkWell(
             onTap: onTap,
             child: Padding(
-                  padding: const EdgeInsets.all(8.0),
+              padding: EdgeInsets.all(8.0),
               child: Center(
                 child: SvgPicture.asset(
                   Assets.settings,
                   width: 40,
-                      height: 22,
+                  height: 20,
                   color: ColorsManager.primaryColor,
                 ),
               ),
@@ -404,8 +453,6 @@ class _DynamicTableState extends State<DynamicTable> {
           ),
         ),
       ),
-        ),
-      ],
     );
   }
 }

lib/pages/device_managment/ac/view/ac_device_batch_control.dart

@@ -15,7 +15,8 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
-class AcDeviceBatchControlView extends StatelessWidget with HelperResponsiveLayout {
+class AcDeviceBatchControlView extends StatelessWidget
+    with HelperResponsiveLayout {
   const AcDeviceBatchControlView({super.key, required this.devicesIds});
 
   final List<String> devicesIds;
@@ -51,7 +52,7 @@ class AcDeviceBatchControlView extends StatelessWidget with HelperResponsiveLayo
                   deviceId: devicesIds.first,
                   code: 'switch',
                   value: state.status.acSwitch,
-                  label: 'ThermoState',
+                  label: 'Thermostat',
                   icon: Assets.ac,
                   onChange: (value) {
                     context.read<AcBloc>().add(AcBatchControlEvent(
@@ -100,8 +101,8 @@ class AcDeviceBatchControlView extends StatelessWidget with HelperResponsiveLayo
                       ),
                       Text(
                         'h',
-                        style:
+                        style: context.textTheme.bodySmall!
-                            context.textTheme.bodySmall!.copyWith(color: ColorsManager.blackColor),
+                            .copyWith(color: ColorsManager.blackColor),
                       ),
                       Text(
                         '30',
@@ -148,7 +149,8 @@ class AcDeviceBatchControlView extends StatelessWidget with HelperResponsiveLayo
                   callFactoryReset: () {
                     context.read<AcBloc>().add(AcFactoryResetEvent(
                           deviceId: state.status.uuid,
-                          factoryResetModel: FactoryResetModel(devicesUuid: devicesIds),
+                          factoryResetModel:
+                              FactoryResetModel(devicesUuid: devicesIds),
                         ));
                   },
                 ),

lib/pages/device_managment/all_devices/widgets/device_managment_body.dart

@@ -68,6 +68,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
           children: [
             Expanded(child: SpaceTreeView(
               onSelect: () {
+                context.read<DeviceManagementBloc>().add(ResetFilters());
                 context.read<DeviceManagementBloc>().add(FetchDevices(context));
               },
             )),

lib/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart

@@ -17,6 +17,7 @@ class CalibrateCompletedDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
+      backgroundColor: ColorsManager.whiteColors,
       contentPadding: EdgeInsets.zero,
       content: SizedBox(
         height: 250,

lib/pages/device_managment/power_clamp/view/smart_power_device_control.dart

@@ -277,6 +277,32 @@ class SmartPowerDeviceControl extends StatelessWidget
                           totalConsumption: 10000,
                           date: blocProvider.formattedDate,
                         ),
+                        EnergyConsumptionPage(
+                          formattedDate:
+                              '${blocProvider.dateTime!.day}/${blocProvider.dateTime!.month}/${blocProvider.dateTime!.year} ${blocProvider.endChartDate}',
+                          onTap: () {
+                            blocProvider.add(SelectDateEvent(context: context));
+                          },
+                          widget: blocProvider.dateSwitcher(),
+                          chartData: blocProvider.energyDataList.isNotEmpty
+                              ? blocProvider.energyDataList
+                              : [
+                                  EnergyData('12:00 AM', 4.0),
+                                  EnergyData('01:00 AM', 6.5),
+                                  EnergyData('02:00 AM', 3.8),
+                                  EnergyData('03:00 AM', 3.2),
+                                  EnergyData('04:00 AM', 6.0),
+                                  EnergyData('05:00 AM', 3.4),
+                                  EnergyData('06:00 AM', 5.2),
+                                  EnergyData('07:00 AM', 3.5),
+                                  EnergyData('08:00 AM', 6.8),
+                                  EnergyData('09:00 AM', 5.6),
+                                  EnergyData('10:00 AM', 3.9),
+                                  EnergyData('11:00 AM', 4.0),
+                                ],
+                          totalConsumption: 10000,
+                          date: blocProvider.formattedDate,
+                        ),
                       ],
                     ),
                   ),

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

@@ -232,7 +232,6 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
           selectedDays: List.filled(7, false),
           functionOn: false,
           isEditing: false,
-          countdownRemaining: Duration.zero,
         ));
       } else {
         emit(ScheduleLoaded(

lib/pages/routines/create_new_routines/space_dropdown.dart

@@ -32,15 +32,12 @@ class SpaceDropdown extends StatelessWidget {
                   color: ColorsManager.blackColor,
                 ),
           ),
-          SizedBox(
+          DropdownButton2<String>(
-            child: Container(
-              height: 40,
-              decoration: BoxDecoration(
-                color: ColorsManager.whiteColors,
-                borderRadius: BorderRadius.circular(10),
-              ),
-              child: DropdownButton2<String>(
             underline: const SizedBox(),
+            buttonStyleData: ButtonStyleData(
+              decoration:
+                  BoxDecoration(borderRadius: BorderRadius.circular(12)),
+            ),
             value: selectedValue,
             items: spaces.map((space) {
               return DropdownMenuItem<String>(
@@ -51,17 +48,21 @@ class SpaceDropdown extends StatelessWidget {
                   children: [
                     Text(
                       '   ${space.name}',
-                          style:
+                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                              Theme.of(context).textTheme.bodyMedium!.copyWith(
+                            fontSize: 16,
-                                    fontSize: 12,
+                            fontWeight: FontWeight.bold,
-                                    color: ColorsManager.blackColor,
+                            color: selectedValue == space.uuid
+                                ? ColorsManager.dialogBlueTitle
+                                : ColorsManager.blackColor,
                           ),
                     ),
                     Text(
                       '   ${space.lastThreeParents}',
-                          style:
+                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                              Theme.of(context).textTheme.bodyMedium!.copyWith(
                             fontSize: 12,
+                            color: selectedValue == space.uuid
+                                ? ColorsManager.dialogBlueTitle
+                                : ColorsManager.blackColor,
                           ),
                     ),
                   ],
@@ -69,7 +70,10 @@ class SpaceDropdown extends StatelessWidget {
               );
             }).toList(),
             onChanged: onChanged,
-                style: TextStyle(color: Colors.black),
+            style: TextStyle(
+              color: Colors.black,
+              fontSize: 13,
+            ),
             hint: Padding(
               padding: const EdgeInsets.only(left: 10),
               child: Text(
@@ -80,10 +84,9 @@ class SpaceDropdown extends StatelessWidget {
               ),
             ),
             customButton: Container(
-                  height: 45,
+              height: 40,
               decoration: BoxDecoration(
-                    border:
+                border: Border.all(color: ColorsManager.textGray, width: 1.0),
-                        Border.all(color: ColorsManager.textGray, width: 1.0),
                 borderRadius: BorderRadius.circular(10),
               ),
               child: Row(
@@ -99,8 +102,8 @@ class SpaceDropdown extends StatelessWidget {
                                 .firstWhere((e) => e.uuid == selectedValue)
                                 .name
                             : hintMessage,
-                            style:
+                        style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                Theme.of(context).textTheme.bodySmall!.copyWith(
+                              fontSize: 13,
                               color: selectedValue != null
                                   ? Colors.black
                                   : ColorsManager.textGray,
@@ -139,8 +142,6 @@ class SpaceDropdown extends StatelessWidget {
               height: 60,
             ),
           ),
-            ),
-          ),
         ],
       ),
     );

lib/pages/routines/widgets/main_routine_view/routine_view_card.dart

@@ -121,7 +121,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                 child: SizedBox(
                                   width: 16,
                                   height: 16,
-                                  child: CircularProgressIndicator(strokeWidth: 2),
+                                  child:
+                                      CircularProgressIndicator(strokeWidth: 2),
                                 ),
                               ),
                             )
@@ -159,7 +160,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                       height: iconSize,
                                       width: iconSize,
                                       fit: BoxFit.contain,
-                                      errorBuilder: (context, error, stackTrace) =>
+                                      errorBuilder:
+                                          (context, error, stackTrace) =>
                                               Image.asset(
                                         Assets.logo,
                                         height: iconSize,
@@ -203,7 +205,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                             maxLines: 1,
                             style: context.textTheme.bodySmall?.copyWith(
                               color: ColorsManager.blackColor,
-                              fontSize: widget.isSmallScreenSize(context) ? 10 : 12,
+                              fontSize:
+                                  widget.isSmallScreenSize(context) ? 10 : 12,
                             ),
                           ),
                           if (widget.spaceName != '')
@@ -222,8 +225,9 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                   maxLines: 1,
                                   style: context.textTheme.bodySmall?.copyWith(
                                     color: ColorsManager.blackColor,
-                                    fontSize:
+                                    fontSize: widget.isSmallScreenSize(context)
-                                        widget.isSmallScreenSize(context) ? 10 : 12,
+                                        ? 10
+                                        : 12,
                                   ),
                                 ),
                               ],

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

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

lib/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart

@@ -1,24 +1,39 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_community/presentation/edit_community_dialog.dart';
 
 abstract final class SpaceManagementCommunityDialogHelper {
-  static void showCreateDialog(BuildContext context) {
+  static void showCreateDialog(BuildContext context) => showDialog<void>(
+        context: context,
+        builder: (_) => const CreateCommunityDialog(),
+      );
+
+  static void showEditDialog(
+    BuildContext context,
+    CommunityModel community,
+  ) {
     showDialog<void>(
       context: context,
-      builder: (_) => CreateCommunityDialog(
+      builder: (_) => EditCommunityDialog(
-        title: const SelectableText('Community Name'),
+        community: community,
-        onCreateCommunity: (community) {
+        parentContext: context,
-          context.read<CommunitiesBloc>().add(
-                InsertCommunity(community),
-              );
-          context.read<CommunitiesTreeSelectionBloc>().add(
-                SelectCommunityEvent(community: community),
-              );
-        },
       ),
     );
   }
+
+  static void showLoadingDialog(BuildContext context) => showDialog<void>(
+        context: context,
+        barrierDismissible: false,
+        builder: (context) => const Center(
+          child: CircularProgressIndicator(),
+        ),
+      );
+
+  static void showSuccessSnackBar(BuildContext context, String message) =>
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text(message),
+        ),
+      );
 }

lib/pages/space_management_v2/main_module/shared/widgets/community_dialog.dart

@@ -1,28 +1,29 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
 import 'package:syncrow_web/pages/common/buttons/default_button.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_name_text_field.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
-class CreateCommunityDialogWidget extends StatefulWidget {
+class CommunityDialog extends StatefulWidget {
   final String? initialName;
   final Widget title;
+  final void Function(String name) onSubmit;
+  final String? errorMessage;
 
-  const CreateCommunityDialogWidget({
+  const CommunityDialog({
-    super.key,
     required this.title,
+    required this.onSubmit,
     this.initialName,
+    this.errorMessage,
+    super.key,
   });
 
   @override
-  State<CreateCommunityDialogWidget> createState() =>
+  State<CommunityDialog> createState() => _CommunityDialogState();
-      _CreateCommunityDialogWidgetState();
 }
 
-class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidget> {
+class _CommunityDialogState extends State<CommunityDialog> {
   late final TextEditingController _nameController;
 
   @override
@@ -63,9 +64,7 @@ class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidge
         child: Form(
           key: _formKey,
           child: SingleChildScrollView(
-            child: BlocBuilder<CreateCommunityBloc, CreateCommunityState>(
+            child: Column(
-              builder: (context, state) {
-                return Column(
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
@@ -74,24 +73,11 @@ class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidge
                   child: widget.title,
                 ),
                 const SizedBox(height: 18),
-                    CreateCommunityNameTextField(
+                CreateCommunityNameTextField(nameController: _nameController),
-                      nameController: _nameController,
+                _buildErrorMessage(),
-                    ),
-                    if (state case CreateCommunityFailure(:final message))
-                      Padding(
-                        padding: const EdgeInsets.only(top: 18),
-                        child: SelectableText(
-                          '* $message',
-                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                                color: Theme.of(context).colorScheme.error,
-                              ),
-                        ),
-                      ),
                 const SizedBox(height: 24),
                 _buildActionButtons(context),
               ],
-                );
-              },
             ),
           ),
         ),
@@ -132,13 +118,22 @@ class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidge
 
   void _onSubmit(BuildContext context) {
     if (_formKey.currentState?.validate() ?? false) {
-      context.read<CreateCommunityBloc>().add(
+      widget.onSubmit.call(_nameController.text.trim());
-            CreateCommunity(
+    }
-              CreateCommunityParam(
+  }
-                name: _nameController.text.trim(),
+
+  Widget _buildErrorMessage() {
+    return Visibility(
+      visible: widget.errorMessage != null,
+      child: Padding(
+        padding: const EdgeInsetsDirectional.symmetric(vertical: 18),
+        child: SelectableText(
+          '* ${widget.errorMessage}',
+          style: context.textTheme.bodyMedium?.copyWith(
+            color: context.theme.colorScheme.error,
+          ),
         ),
       ),
     );
   }
 }
-}

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

@@ -7,32 +7,58 @@ import 'package:syncrow_web/pages/space_management_v2/modules/communities/data/s
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.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/products/data/services/remote_products_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/presentation/bloc/products_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/remote_space_details_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/unique_subspaces_decorator.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
 
-class SpaceManagementPage extends StatelessWidget {
+class SpaceManagementPage extends StatefulWidget {
   const SpaceManagementPage({super.key});
 
+  @override
+  State<SpaceManagementPage> createState() => _SpaceManagementPageState();
+}
+
+class _SpaceManagementPageState extends State<SpaceManagementPage> {
+  late final CommunitiesBloc communitiesBloc;
+
+  @override
+  void initState() {
+    communitiesBloc = CommunitiesBloc(
+      communitiesService: DebouncedCommunitiesService(
+        RemoteCommunitiesService(HTTPService()),
+      ),
+    )..add(const LoadCommunities(LoadCommunitiesParam()));
+
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return MultiBlocProvider(
       providers: [
+        BlocProvider.value(value: communitiesBloc),
         BlocProvider(
-          create: (context) => CommunitiesBloc(
+          create: (context) => CommunitiesTreeSelectionBloc(
-            communitiesService: DebouncedCommunitiesService(
+            communitiesBloc: communitiesBloc,
-              RemoteCommunitiesService(HTTPService()),
           ),
-          )..add(const LoadCommunities(LoadCommunitiesParam())),
         ),
-        BlocProvider(create: (context) => CommunitiesTreeSelectionBloc()),
         BlocProvider(
           create: (context) => SpaceDetailsBloc(
+            UniqueSubspacesDecorator(
               RemoteSpaceDetailsService(httpService: HTTPService()),
             ),
           ),
+        ),
+        BlocProvider(
+          create: (context) => ProductsBloc(
+            RemoteProductsService(HTTPService()),
+          ),
+        ),
       ],
       child: WebScaffold(
         appBarTitle: Text(

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

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

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

@@ -1,9 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_header_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
@@ -11,6 +14,26 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 class CommunityStructureHeader extends StatelessWidget {
   const CommunityStructureHeader({super.key});
 
+  List<SpaceModel> _updateRecursive(
+    List<SpaceModel> spaces,
+    SpaceDetailsModel updatedSpace,
+  ) {
+    return spaces.map((space) {
+      if (space.uuid == updatedSpace.uuid) {
+        return space.copyWith(
+          spaceName: updatedSpace.spaceName,
+          icon: updatedSpace.icon,
+        );
+      }
+      if (space.children.isNotEmpty) {
+        return space.copyWith(
+          children: _updateRecursive(space.children, updatedSpace),
+        );
+      }
+      return space;
+    }).toList();
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
@@ -44,18 +67,6 @@ class CommunityStructureHeader extends StatelessWidget {
     );
   }
 
-  void _showCreateCommunityDialog(BuildContext context) {
-    showDialog<void>(
-      context: context,
-      builder: (context) => CreateCommunityDialog(
-        title: const Text('Edit Community'),
-        onCreateCommunity: (community) {
-          // TODO(FarisArmoush): Implement
-        },
-      ),
-    );
-  }
-
   Widget _buildCommunityInfo(
       BuildContext context, ThemeData theme, double screenWidth) {
     final selectedCommunity =
@@ -67,8 +78,9 @@ class CommunityStructureHeader extends StatelessWidget {
       children: [
         Text(
           'Community Structure',
-          style: theme.textTheme.headlineLarge
+          style: theme.textTheme.headlineLarge?.copyWith(
-              ?.copyWith(color: ColorsManager.blackColor),
+            color: ColorsManager.blackColor,
+          ),
         ),
         if (selectedCommunity != null)
           Row(
@@ -79,14 +91,20 @@ class CommunityStructureHeader extends StatelessWidget {
                     Flexible(
                       child: SelectableText(
                         selectedCommunity.name,
-                        style: theme.textTheme.bodyLarge
+                        style: theme.textTheme.bodyLarge?.copyWith(
-                            ?.copyWith(color: ColorsManager.blackColor),
+                          color: ColorsManager.blackColor,
+                        ),
                         maxLines: 1,
                       ),
                     ),
                     const SizedBox(width: 2),
                     GestureDetector(
-                      onTap: () => _showCreateCommunityDialog(context),
+                      onTap: () {
+                        SpaceManagementCommunityDialogHelper.showEditDialog(
+                          context,
+                          selectedCommunity,
+                        );
+                      },
                       child: SvgPicture.asset(
                         Assets.iconEdit,
                         width: 16,
@@ -100,12 +118,24 @@ class CommunityStructureHeader extends StatelessWidget {
               CommunityStructureHeaderActionButtons(
                 onDelete: (space) {},
                 onDuplicate: (space) {},
-                onEdit: (space) {
+                onEdit: (space) => SpaceDetailsDialogHelper.showEdit(
-                  SpaceDetailsDialogHelper.showEdit(
                   context,
                   spaceModel: selectedSpace!,
+                  communityUuid: selectedCommunity.uuid,
+                  onSuccess: (updatedSpaceDetails) {
+                    final communitiesBloc = context.read<CommunitiesBloc>();
+                    final updatedSpaces = _updateRecursive(
+                      selectedCommunity.spaces,
+                      updatedSpaceDetails,
                     );
+
+                    final community = selectedCommunity.copyWith(
+                      spaces: updatedSpaces,
+                    );
+
+                    communitiesBloc.add(CommunitiesUpdateCommunity(community));
                   },
+                ),
                 selectedSpace: selectedSpace,
               ),
             ],

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

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

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

@@ -22,7 +22,6 @@ 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,
@@ -38,7 +37,6 @@ class _SpaceCardWidgetState extends State<SpaceCardWidget> {
             ),
         ],
       ),
-      ),
     );
   }
 }

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

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

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

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

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

@@ -39,6 +39,26 @@ class CommunityModel extends Equatable {
         .toList();
   }
 
+  CommunityModel copyWith({
+    String? uuid,
+    String? name,
+    DateTime? createdAt,
+    DateTime? updatedAt,
+    String? description,
+    String? externalId,
+    List<SpaceModel>? spaces,
+  }) {
+    return CommunityModel(
+      uuid: uuid ?? this.uuid,
+      name: name ?? this.name,
+      createdAt: createdAt ?? this.createdAt,
+      updatedAt: updatedAt ?? this.updatedAt,
+      description: description ?? this.description,
+      externalId: externalId ?? this.externalId,
+      spaces: spaces ?? this.spaces,
+    );
+  }
+
   @override
   List<Object?> get props => [uuid, name, spaces];
 }

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/bloc/communities_bloc.dart

@@ -16,6 +16,7 @@ class CommunitiesBloc extends Bloc<CommunitiesEvent, CommunitiesState> {
     on<LoadCommunities>(_onLoadCommunities);
     on<LoadMoreCommunities>(_onLoadMoreCommunities);
     on<InsertCommunity>(_onInsertCommunity);
+    on<CommunitiesUpdateCommunity>(_onCommunitiesUpdateCommunity);
   }
 
   final CommunitiesService _communitiesService;
@@ -114,4 +115,18 @@ class CommunitiesBloc extends Bloc<CommunitiesEvent, CommunitiesState> {
   ) {
     emit(state.copyWith(communities: [event.community, ...state.communities]));
   }
+
+  void _onCommunitiesUpdateCommunity(
+    CommunitiesUpdateCommunity event,
+    Emitter<CommunitiesState> emit,
+  ) {
+    final updatedCommunities = state.communities
+        .map((e) => e.uuid == event.community.uuid ? event.community : e)
+        .toList();
+    emit(
+      state.copyWith(
+        communities: updatedCommunities,
+      ),
+    );
+  }
 }

lib/pages/space_management_v2/modules/communities/presentation/bloc/communities_event.dart

@@ -31,3 +31,12 @@ final class InsertCommunity extends CommunitiesEvent {
   @override
   List<Object?> get props => [community];
 }
+
+final class CommunitiesUpdateCommunity extends CommunitiesEvent {
+  const CommunitiesUpdateCommunity(this.community);
+
+  final CommunityModel community;
+
+  @override
+  List<Object?> get props => [community];
+}

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

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

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

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

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

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

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

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

lib/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart

@@ -1,57 +1,58 @@
 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/main_module/shared/helpers/space_management_community_dialog_helper.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/widgets/community_dialog.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/create_community/data/services/remote_create_community_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog_widget.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 class CreateCommunityDialog extends StatelessWidget {
-  final void Function(CommunityModel community) onCreateCommunity;
+  const CreateCommunityDialog({super.key});
-  final String? initialName;
-  final Widget title;
-
-  const CreateCommunityDialog({
-    super.key,
-    required this.onCreateCommunity,
-    required this.title,
-    this.initialName,
-  });
 
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (_) => CreateCommunityBloc(RemoteCreateCommunityService(HTTPService())),
+      create: (_) => CreateCommunityBloc(
-      child: BlocListener<CreateCommunityBloc, CreateCommunityState>(
+        RemoteCreateCommunityService(HTTPService()),
+      ),
+      child: BlocConsumer<CreateCommunityBloc, CreateCommunityState>(
         listener: (context, state) {
           switch (state) {
-            case CreateCommunityLoading():
+            case CreateCommunityLoading() || CreateCommunityInitial():
-              showDialog<void>(
+              SpaceManagementCommunityDialogHelper.showLoadingDialog(context);
-                context: context,
-                builder: (context) => const Center(
-                  child: CircularProgressIndicator(),
-                ),
-              );
               break;
             case CreateCommunitySuccess(:final community):
               Navigator.of(context).pop();
               Navigator.of(context).pop();
-              ScaffoldMessenger.of(context).showSnackBar(
+              SpaceManagementCommunityDialogHelper.showSuccessSnackBar(
-                const SnackBar(content: Text('Community created successfully')),
+                context,
+                '${community.name} community created successfully',
+              );
+              context.read<CommunitiesBloc>().add(
+                    InsertCommunity(community),
+                  );
+              context.read<CommunitiesTreeSelectionBloc>().add(
+                    SelectCommunityEvent(community: community),
                   );
-              onCreateCommunity.call(community);
               break;
             case CreateCommunityFailure():
               Navigator.of(context).pop();
               break;
-            default:
-              break;
           }
         },
-        child: CreateCommunityDialogWidget(
+        builder: (BuildContext context, CreateCommunityState state) {
-          title: title,
+          return CommunityDialog(
-          initialName: initialName,
+            title: const Text('Create Community'),
+            initialName: null,
+            onSubmit: (name) => context.read<CreateCommunityBloc>().add(
+                  CreateCommunity(CreateCommunityParam(name: name)),
                 ),
+            errorMessage: state is CreateCommunityFailure ? state.message : null,
+          );
+        },
       ),
     );
   }

lib/pages/space_management_v2/modules/products/data/services/remote_products_service.dart

@@ -1,9 +1,9 @@
 import 'package:dio/dio.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/params/load_products_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/services/products_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 RemoteProductsService implements ProductsService {
   const RemoteProductsService(this._httpService);
@@ -13,17 +13,14 @@ class RemoteProductsService implements ProductsService {
   static const _defaultErrorMessage = 'Failed to load devices';
 
   @override
-  Future<List<Product>> getProducts(LoadProductsParam param) async {
+  Future<List<Product>> getProducts() async {
     try {
       final response = await _httpService.get(
-        path: 'devices',
+        path: ApiEndpoints.listProducts,
-        queryParameters: {
-          'spaceUuid': param.spaceUuid,
-          if (param.type != null) 'type': param.type,
-          if (param.status != null) 'status': param.status,
-        },
         expectedResponseModel: (data) {
-          return (data as List)
+          final json = data as Map<String, dynamic>;
+          final products = json['data'] as List<dynamic>;
+          return products
               .map((e) => Product.fromJson(e as Map<String, dynamic>))
               .toList();
         },

lib/pages/space_management_v2/modules/products/domain/models/product.dart

@@ -1,18 +1,24 @@
 import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 
 class Product extends Equatable {
-  final String uuid;
-  final String name;
-
   const Product({
     required this.uuid,
     required this.name,
+    required this.productType,
   });
 
+  final String uuid;
+  final String name;
+  final String productType;
+
+  String get icon => _mapIconToProduct(productType);
+
   factory Product.fromJson(Map<String, dynamic> json) {
     return Product(
-      uuid: json['uuid'] as String,
+      uuid: json['uuid'] as String? ?? '',
-      name: json['name'] as String,
+      name: json['name'] as String? ?? '',
+      productType: json['prodType'] as String? ?? '',
     );
   }
 
@@ -20,9 +26,37 @@ class Product extends Equatable {
     return {
       'uuid': uuid,
       'name': name,
+      'productType': productType,
     };
   }
 
+  static String _mapIconToProduct(String prodType) {
+    const iconMapping = {
+      '1G': Assets.Gang1SwitchIcon,
+      '1GT': Assets.oneTouchSwitch,
+      '2G': Assets.Gang2SwitchIcon,
+      '2GT': Assets.twoTouchSwitch,
+      '3G': Assets.Gang3SwitchIcon,
+      '3GT': Assets.threeTouchSwitch,
+      'CUR': Assets.curtain,
+      'CUR_2': Assets.curtain,
+      'GD': Assets.garageDoor,
+      'GW': Assets.SmartGatewayIcon,
+      'DL': Assets.DoorLockIcon,
+      'WL': Assets.waterLeakSensor,
+      'WH': Assets.waterHeater,
+      'WM': Assets.waterLeakSensor,
+      'SOS': Assets.sos,
+      'AC': Assets.ac,
+      'CPS': Assets.presenceSensor,
+      'PC': Assets.powerClamp,
+      'WPS': Assets.presenceSensor,
+      'DS': Assets.doorSensor
+    };
+
+    return iconMapping[prodType] ?? Assets.presenceSensor;
+  }
+
   @override
-  List<Object?> get props => [uuid, name];
+  List<Object?> get props => [uuid, name, productType];
 }

lib/pages/space_management_v2/modules/products/domain/params/load_products_param.dart

@@ -1,11 +0,0 @@
-class LoadProductsParam {
-  final String spaceUuid;
-  final String? type;
-  final String? status;
-
-  const LoadProductsParam({
-    required this.spaceUuid,
-    this.type,
-    this.status,
-  });
-}

lib/pages/space_management_v2/modules/products/domain/services/products_service.dart

@@ -1,6 +1,5 @@
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/params/load_products_param.dart';
 
 abstract class ProductsService {
-  Future<List<Product>> getProducts(LoadProductsParam param);
+  Future<List<Product>> getProducts();
 }

lib/pages/space_management_v2/modules/products/presentation/bloc/products_bloc.dart

@@ -1,7 +1,6 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/params/load_products_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/services/products_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 
@@ -9,20 +8,20 @@ part 'products_event.dart';
 part 'products_state.dart';
 
 class ProductsBloc extends Bloc<ProductsEvent, ProductsState> {
-  final ProductsService _deviceService;
+  ProductsBloc(this._productsService) : super(ProductsInitial()) {
-
-  ProductsBloc(this._deviceService) : super(ProductsInitial()) {
     on<LoadProducts>(_onLoadProducts);
   }
 
+  final ProductsService _productsService;
+
   Future<void> _onLoadProducts(
     LoadProducts event,
     Emitter<ProductsState> emit,
   ) async {
     emit(ProductsLoading());
     try {
-      final devices = await _deviceService.getProducts(event.param);
+      final products = await _productsService.getProducts();
-      emit(ProductsLoaded(devices));
+      emit(ProductsLoaded(products));
     } on APIException catch (e) {
       emit(ProductsFailure(e.message));
     } catch (e) {

lib/pages/space_management_v2/modules/products/presentation/bloc/products_event.dart

@@ -8,10 +8,5 @@ sealed class ProductsEvent extends Equatable {
 }
 
 final class LoadProducts extends ProductsEvent {
-  const LoadProducts(this.param);
+  const LoadProducts();
-
-  final LoadProductsParam param;
-
-  @override
-  List<Object> get props => [param];
 }

lib/pages/space_management_v2/modules/products/presentation/bloc/products_state.dart

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

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

@@ -0,0 +1,27 @@
+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/domain/services/space_details_service.dart';
+
+class UniqueSubspacesDecorator implements SpaceDetailsService {
+  final SpaceDetailsService _decoratee;
+
+  const UniqueSubspacesDecorator(this._decoratee);
+
+  @override
+  Future<SpaceDetailsModel> getSpaceDetails(LoadSpaceDetailsParam param) async {
+    final response = await _decoratee.getSpaceDetails(param);
+
+    final uniqueSubspaces = <String, Subspace>{};
+
+    for (final subspace in response.subspaces) {
+      final normalizedName = subspace.name.trim().toLowerCase();
+      if (!uniqueSubspaces.containsKey(normalizedName)) {
+        uniqueSubspaces[normalizedName] = subspace;
+      }
+    }
+
+    return response.copyWith(
+      subspaces: uniqueSubspaces.values.toList(),
+    );
+  }
+}

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

@@ -2,6 +2,7 @@ import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:uuid/uuid.dart';
 
 class SpaceDetailsModel extends Equatable {
   final String uuid;
@@ -21,7 +22,7 @@ class SpaceDetailsModel extends Equatable {
   factory SpaceDetailsModel.empty() => const SpaceDetailsModel(
         uuid: '',
         spaceName: '',
-        icon: Assets.villa,
+        icon: Assets.location,
         productAllocations: [],
         subspaces: [],
       );
@@ -39,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,
@@ -70,40 +61,38 @@ class SpaceDetailsModel extends Equatable {
 }
 
 class ProductAllocation extends Equatable {
+  final String uuid;
   final Product product;
   final Tag tag;
 
   const ProductAllocation({
+    required this.uuid,
     required this.product,
     required this.tag,
   });
 
   factory ProductAllocation.fromJson(Map<String, dynamic> json) {
     return ProductAllocation(
+      uuid: json['uuid'] as String? ?? const Uuid().v4(),
       product: Product.fromJson(json['product'] as Map<String, dynamic>),
       tag: Tag.fromJson(json['tag'] as Map<String, dynamic>),
     );
   }
 
-  Map<String, dynamic> toJson() {
-    return {
-      'product': product.toJson(),
-      'tag': tag.toJson(),
-    };
-  }
-
   ProductAllocation copyWith({
+    String? uuid,
     Product? product,
     Tag? tag,
   }) {
     return ProductAllocation(
+      uuid: uuid ?? this.uuid,
       product: product ?? this.product,
       tag: tag ?? this.tag,
     );
   }
 
   @override
-  List<Object?> get props => [product, tag];
+  List<Object?> get props => [uuid, product, tag];
 }
 
 class Subspace extends Equatable {
@@ -127,14 +116,6 @@ class Subspace extends Equatable {
     );
   }
 
-  Map<String, dynamic> toJson() {
-    return {
-      'uuid': uuid,
-      'name': name,
-      'productAllocations': productAllocations.map((e) => e.toJson()).toList(),
-    };
-  }
-
   Subspace copyWith({
     String? uuid,
     String? name,

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

@@ -2,23 +2,37 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/remote_space_details_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/data/services/remote_update_space_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/domain/params/update_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/update_space_bloc.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 abstract final class SpaceDetailsDialogHelper {
-  static void showCreate(BuildContext context) {
+  static void showCreate(
+    BuildContext context, {
+    required String communityUuid,
+  }) {
     showDialog<void>(
       context: context,
-      builder: (_) => BlocProvider(
+      builder: (_) => MultiBlocProvider(
+        providers: [
+          BlocProvider(
             create: (context) => SpaceDetailsBloc(
               RemoteSpaceDetailsService(httpService: HTTPService()),
             ),
-        child: SpaceDetailsDialog(
+          ),
+        ],
+        child: Builder(
+          builder: (context) => SpaceDetailsDialog(
             context: context,
-          title: const Text('Create Space'),
+            title: const SelectableText('Create Space'),
             spaceModel: SpaceModel.empty(),
-          onSave: print,
+            onSave: (space) {},
+            communityUuid: communityUuid,
+          ),
         ),
       ),
     );
@@ -27,20 +41,98 @@ abstract final class SpaceDetailsDialogHelper {
   static void showEdit(
     BuildContext context, {
     required SpaceModel spaceModel,
+    required String communityUuid,
+    required void Function(SpaceDetailsModel updatedSpaceDetails)? onSuccess,
   }) {
     showDialog<void>(
       context: context,
-      builder: (_) => BlocProvider(
+      builder: (_) => MultiBlocProvider(
+        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 Text('Edit Space'),
+              title: const SelectableText('Edit Space'),
               spaceModel: spaceModel,
-          onSave: (space) {},
+              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_action_buttons.dart

@@ -8,10 +8,14 @@ class SpaceDetailsActionButtons extends StatelessWidget {
     super.key,
     required this.onSave,
     required this.onCancel,
+    this.saveButtonLabel = 'OK',
+    this.cancelButtonLabel = 'Cancel',
   });
 
   final VoidCallback onCancel;
   final VoidCallback? onSave;
+  final String saveButtonLabel;
+  final String cancelButtonLabel;
 
   @override
   Widget build(BuildContext context) {
@@ -27,10 +31,7 @@ class SpaceDetailsActionButtons extends StatelessWidget {
   }
 
   Widget _buildCancelButton(BuildContext context) {
-    return CancelButton(
+    return CancelButton(onPressed: onCancel, label: cancelButtonLabel);
-      onPressed: onCancel,
-      label: 'Cancel',
-    );
   }
 
   Widget _buildSaveButton() {
@@ -39,7 +40,7 @@ class SpaceDetailsActionButtons extends StatelessWidget {
       borderRadius: 10,
       backgroundColor: ColorsManager.secondaryColor,
       foregroundColor: ColorsManager.whiteColors,
-      child: const Text('OK'),
+      child: Text(saveButtonLabel),
     );
   }
 }

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

@@ -1,9 +1,15 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/common/edit_chip.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/button_content_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/enum/device_types.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class SpaceDetailsDevicesBox extends StatelessWidget {
   const SpaceDetailsDevicesBox({
@@ -15,11 +21,18 @@ class SpaceDetailsDevicesBox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final productAllocations = space.productAllocations;
+    final allAllocations = [
-    final subspaces = space.subspaces;
+      ...space.productAllocations,
-    final isAnySubspaceHasProductAllocations =
+      ...space.subspaces.expand((s) => s.productAllocations),
-        subspaces.any((subspace) => subspace.productAllocations.isNotEmpty);
+    ];
-    if (productAllocations.isNotEmpty || isAnySubspaceHasProductAllocations) {
+
+    if (allAllocations.isNotEmpty) {
+      final productCounts = <String, int>{};
+      for (final allocation in allAllocations) {
+        final productType = allocation.product.productType;
+        productCounts[productType] = (productCounts[productType] ?? 0) + 1;
+      }
+
       return Container(
         width: double.infinity,
         padding: const EdgeInsets.all(8),
@@ -35,46 +48,40 @@ class SpaceDetailsDevicesBox extends StatelessWidget {
           spacing: 8.0,
           runSpacing: 8.0,
           children: [
-            // Combine tags from spaceModel and subspaces
+            ...productCounts.entries.map((entry) {
-            // ...TagHelper.groupTags([
+              final productType = entry.key;
-            //   ...?tags,
+              final count = entry.value;
-            //   ...?subspaces?.expand((subspace) => subspace.tags ?? [])
+              return Chip(
-            // ]).entries.map(
+                avatar: SizedBox(
-            //   (entry) => Chip(
+                  width: 24,
-            //     avatar: SizedBox(
+                  height: 24,
-            //       width: 24,
+                  child: SvgPicture.asset(
-            //       height: 24,
+                    _getDeviceIcon(productType),
-            //       child: SvgPicture.asset(
+                    fit: BoxFit.contain,
-            //         entry.key.icon ?? 'assets/icons/gateway.svg',
-            //         fit: BoxFit.contain,
-            //       ),
-            //     ),
-            //     label: Text(
-            //       'x${entry.value}',
-            //       style: Theme.of(context)
-            //           .textTheme
-            //           .bodySmall
-            //           ?.copyWith(color: ColorsManager.spaceColor),
-            //     ),
-            //     backgroundColor: ColorsManager.whiteColors,
-            //     shape: RoundedRectangleBorder(
-            //       borderRadius: BorderRadius.circular(16),
-            //       side: const BorderSide(
-            //         color: ColorsManager.spaceColor,
-            //       ),
-            //     ),
-            //   ),
-            // ),
-
-            EditChip(
-              onTap: () {},
                   ),
+                ),
+                label: Text(
+                  'x$count',
+                  style: context.textTheme.bodySmall?.copyWith(
+                    color: ColorsManager.spaceColor,
+                  ),
+                ),
+                backgroundColor: ColorsManager.whiteColors,
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(16),
+                  side: const BorderSide(
+                    color: ColorsManager.spaceColor,
+                  ),
+                ),
+              );
+            }),
+            EditChip(onTap: () => _showAssignTagsDialog(context)),
           ],
         ),
       );
     } else {
       return TextButton(
-        onPressed: () {},
+        onPressed: () => _showAssignTagsDialog(context),
         style: TextButton.styleFrom(
           padding: EdgeInsets.zero,
         ),
@@ -83,10 +90,50 @@ class SpaceDetailsDevicesBox extends StatelessWidget {
           child: ButtonContentWidget(
             svgAssets: Assets.addIcon,
             label: 'Add Devices',
-            // disabled: isTagsAndSubspaceModelDisabled,
           ),
         ),
       );
     }
   }
+
+  void _showAssignTagsDialog(BuildContext context) {
+    showDialog<SpaceDetailsModel>(
+      context: context,
+      builder: (context) => AssignTagsDialog(space: space),
+    ).then((resultSpace) {
+      if (resultSpace != null) {
+        if (context.mounted) {
+          context.read<SpaceDetailsModelBloc>().add(UpdateSpaceDetails(resultSpace));
+        }
+      }
+    });
+  }
+
+  String _getDeviceIcon(String productType) =>
+      switch (devicesTypesMap[productType]) {
+        DeviceType.LightBulb => Assets.lightBulb,
+        DeviceType.CeilingSensor => Assets.sensors,
+        DeviceType.AC => Assets.ac,
+        DeviceType.DoorLock => Assets.doorLock,
+        DeviceType.Curtain => Assets.curtain,
+        DeviceType.ThreeGang => Assets.gangSwitch,
+        DeviceType.Gateway => Assets.gateway,
+        DeviceType.OneGang => Assets.oneGang,
+        DeviceType.TwoGang => Assets.twoGang,
+        DeviceType.WH => Assets.waterHeater,
+        DeviceType.DoorSensor => Assets.openCloseDoor,
+        DeviceType.GarageDoor => Assets.openedDoor,
+        DeviceType.WaterLeak => Assets.waterLeakNormal,
+        DeviceType.Curtain2 => Assets.curtainIcon,
+        DeviceType.Blind => Assets.curtainIcon,
+        DeviceType.WallSensor => Assets.sensors,
+        DeviceType.DS => Assets.openCloseDoor,
+        DeviceType.OneTouch => Assets.gangSwitch,
+        DeviceType.TowTouch => Assets.gangSwitch,
+        DeviceType.ThreeTouch => Assets.gangSwitch,
+        DeviceType.NCPS => Assets.sensors,
+        DeviceType.PC => Assets.powerClamp,
+        DeviceType.Other => Assets.blackLogo,
+        null => Assets.blackLogo,
+      };
 }

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

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_space_details_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
@@ -15,6 +14,7 @@ class SpaceDetailsDialog extends StatefulWidget {
     required this.spaceModel,
     required this.onSave,
     required this.context,
+    required this.communityUuid,
     super.key,
   });
 
@@ -22,6 +22,7 @@ class SpaceDetailsDialog extends StatefulWidget {
   final SpaceModel spaceModel;
   final void Function(SpaceDetailsModel space) onSave;
   final BuildContext context;
+  final String communityUuid;
 
   @override
   State<SpaceDetailsDialog> createState() => _SpaceDetailsDialogState();
@@ -35,11 +36,7 @@ class _SpaceDetailsDialogState extends State<SpaceDetailsDialog> {
     if (!isCreateMode) {
       final param = LoadSpaceDetailsParam(
         spaceUuid: widget.spaceModel.uuid,
-        communityUuid: widget.context
+        communityUuid: widget.communityUuid,
-            .read<CommunitiesTreeSelectionBloc>()
-            .state
-            .selectedCommunity!
-            .uuid,
       );
       widget.context.read<SpaceDetailsBloc>().add(LoadSpaceDetails(param));
     }
@@ -78,7 +75,11 @@ class _SpaceDetailsDialogState extends State<SpaceDetailsDialog> {
     return AlertDialog(
       title: widget.title,
       backgroundColor: ColorsManager.whiteColors,
-      content: const Center(child: CircularProgressIndicator()),
+      content: SizedBox(
+        height: context.screenHeight * 0.3,
+        width: context.screenWidth * 0.5,
+        child: const Center(child: CircularProgressIndicator()),
+      ),
     );
   }
 

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

@@ -28,7 +28,7 @@ class SpaceDetailsForm extends StatelessWidget {
       create: (context) => SpaceDetailsModelBloc(initialState: space),
       child: BlocBuilder<SpaceDetailsModelBloc, SpaceDetailsModel>(
           buildWhen: (previous, current) => previous != current,
-          builder: (context, state) {
+          builder: (context, space) {
             return AlertDialog(
               title: title,
               backgroundColor: ColorsManager.whiteColors,
@@ -39,25 +39,24 @@ class SpaceDetailsForm extends StatelessWidget {
                   spacing: 20,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    Expanded(child: SpaceIconPicker(iconPath: state.icon)),
+                    Expanded(child: SpaceIconPicker(iconPath: space.icon)),
                     Expanded(
                       flex: 2,
-                      child: Column(
+                      child: ListView(
-                        mainAxisSize: MainAxisSize.min,
+                        shrinkWrap: true,
-                        crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
                           SpaceNameTextField(
-                            initialValue: state.spaceName,
+                            initialValue: space.spaceName,
-                            isNameFieldExist: (value) => state.subspaces.any(
+                            isNameFieldExist: (value) => space.subspaces.any(
                               (subspace) => subspace.name == value,
                             ),
                           ),
-                          const Spacer(),
+                          const SizedBox(height: 32),
                           SpaceSubSpacesBox(
-                            subspaces: state.subspaces,
+                            subspaces: space.subspaces,
                           ),
                           const SizedBox(height: 16),
-                          SpaceDetailsDevicesBox(space: state),
+                          SpaceDetailsDevicesBox(space: space),
                         ],
                       ),
                     ),
@@ -66,7 +65,7 @@ class SpaceDetailsForm extends StatelessWidget {
               ),
               actions: [
                 SpaceDetailsActionButtons(
-                  onSave: () => onSave(state),
+                  onSave: () => onSave(space),
                   onCancel: Navigator.of(context).pop,
                 ),
               ],

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 [],
         ),
       ];
@@ -56,8 +56,9 @@ class _SpaceSubSpacesDialogState extends State<SpaceSubSpacesDialog> {
   @override
   Widget build(BuildContext context) {
     return AlertDialog(
-      title: const Text('Create Sub Spaces'),
+      title: const SelectableText('Create Sub Spaces'),
       content: Column(
+        spacing: 12,
         mainAxisSize: MainAxisSize.min,
         children: [
           SubSpacesInput(
@@ -70,7 +71,7 @@ class _SpaceSubSpacesDialogState extends State<SpaceSubSpacesDialog> {
             child: Visibility(
               key: ValueKey(_hasDuplicateNames),
               visible: _hasDuplicateNames,
-              child: const Text(
+              child: const SelectableText(
                 'Error: Duplicate subspace names are not allowed.',
                 style: TextStyle(color: Colors.red),
               ),

lib/pages/space_management_v2/modules/tags/data/services/remote_tags_service.dart

@@ -1,10 +1,9 @@
 import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/params/load_tags_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/services/tags_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
-import 'package:syncrow_web/utils/constants/api_const.dart';
 
 final class RemoteTagsService implements TagsService {
   const RemoteTagsService(this._httpService);
@@ -14,17 +13,10 @@ final class RemoteTagsService implements TagsService {
   static const _defaultErrorMessage = 'Failed to load tags';
 
   @override
-  Future<List<Tag>> loadTags(LoadTagsParam param) async {
+  Future<List<Tag>> loadTags() async {
-    if (param.projectUuid == null) {
-      throw Exception('Project UUID is required');
-    }
-
     try {
       final response = await _httpService.get(
-        path: ApiEndpoints.listTags.replaceAll(
+        path: await _makeUrl(),
-          '{projectUuid}',
-          param.projectUuid!,
-        ),
         expectedResponseModel: (json) {
           final result = json as Map<String, dynamic>;
           final data = result['data'] as List<dynamic>;
@@ -46,4 +38,12 @@ final class RemoteTagsService implements TagsService {
       throw APIException(formattedErrorMessage);
     }
   }
+
+  Future<String> _makeUrl() async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null || projectUuid.isEmpty) {
+      throw APIException('Project UUID is required');
+    }
+    return '/projects/$projectUuid/tags';
+  }
 }

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

@@ -3,34 +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.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/domain/services/tags_service.dart

@@ -1,6 +1,5 @@
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/params/load_tags_param.dart';
 
 abstract interface class TagsService {
-  Future<List<Tag>> loadTags(LoadTagsParam param);
+  Future<List<Tag>> loadTags();
 }

lib/pages/space_management_v2/modules/tags/presentation/bloc/tags_bloc.dart

@@ -1,7 +1,6 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/params/load_tags_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/services/tags_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 
@@ -21,7 +20,7 @@ class TagsBloc extends Bloc<TagsEvent, TagsState> {
   ) async {
     emit(TagsLoading());
     try {
-      final tags = await _tagsService.loadTags(event.param);
+      final tags = await _tagsService.loadTags();
       emit(TagsLoaded(tags));
     } on APIException catch (e) {
       emit(TagsFailure(e.message));

lib/pages/space_management_v2/modules/tags/presentation/bloc/tags_event.dart

@@ -8,10 +8,5 @@ abstract class TagsEvent extends Equatable {
 }
 
 class LoadTags extends TagsEvent {
-  final LoadTagsParam param;
+  const LoadTags();
-
-  const LoadTags(this.param);
-
-  @override
-  List<Object?> get props => [param];
 }

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

@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/data/services/remote_products_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/presentation/bloc/products_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/products_grid.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 AddDeviceTypeWidget extends StatefulWidget {
+  const AddDeviceTypeWidget({super.key});
+
+  @override
+  State<AddDeviceTypeWidget> createState() => _AddDeviceTypeWidgetState();
+}
+
+class _AddDeviceTypeWidgetState extends State<AddDeviceTypeWidget> {
+  final Map<Product, int> _selectedProducts = {};
+
+  void _onIncrement(Product product) {
+    setState(() {
+      _selectedProducts[product] = (_selectedProducts[product] ?? 0) + 1;
+    });
+  }
+
+  void _onDecrement(Product product) {
+    setState(() {
+      if ((_selectedProducts[product] ?? 0) > 0) {
+        _selectedProducts[product] = _selectedProducts[product]! - 1;
+        if (_selectedProducts[product] == 0) {
+          _selectedProducts.remove(product);
+        }
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => ProductsBloc(RemoteProductsService(HTTPService()))
+        ..add(const LoadProducts()),
+      child: Builder(
+        builder: (context) => AlertDialog(
+          title: const SelectableText('Add Devices'),
+          backgroundColor: ColorsManager.whiteColors,
+          content: BlocBuilder<ProductsBloc, ProductsState>(
+            builder: (context, state) => switch (state) {
+              ProductsInitial() || ProductsLoading() => _buildLoading(context),
+              ProductsLoaded(:final products) => ProductsGrid(
+                  products: products,
+                  selectedProducts: _selectedProducts,
+                  onIncrement: _onIncrement,
+                  onDecrement: _onDecrement,
+                ),
+              ProductsFailure(:final errorMessage) => _buildFailure(
+                  context,
+                  errorMessage,
+                ),
+            },
+          ),
+          actions: [
+            SpaceDetailsActionButtons(
+              onSave: () {
+                final result = _selectedProducts.entries
+                    .expand((entry) => List.generate(entry.value, (_) => entry.key))
+                    .toList();
+                Navigator.of(context).pop(result);
+              },
+              onCancel: Navigator.of(context).pop,
+              saveButtonLabel: 'Next',
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildLoading(BuildContext context) => SizedBox(
+        width: context.screenWidth * 0.9,
+        height: context.screenHeight * 0.65,
+        child: const Center(child: CircularProgressIndicator()),
+      );
+
+  Widget _buildFailure(BuildContext context, String errorMessage) {
+    return SizedBox(
+      width: context.screenWidth * 0.9,
+      height: context.screenHeight * 0.65,
+      child: Center(
+        child: SelectableText(
+          errorMessage,
+          style: context.textTheme.bodyMedium?.copyWith(
+            color: context.theme.colorScheme.error,
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,234 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/add_device_type_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_error_messages.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_table.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:uuid/uuid.dart';
+
+class AssignTagsDialog extends StatefulWidget {
+  const AssignTagsDialog({required this.space, super.key});
+
+  final SpaceDetailsModel space;
+
+  @override
+  State<AssignTagsDialog> createState() => _AssignTagsDialogState();
+}
+
+class _AssignTagsDialogState extends State<AssignTagsDialog> {
+  late SpaceDetailsModel _space;
+  final Map<String, String> _validationErrors = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _space = widget.space.copyWith(
+      productAllocations:
+          widget.space.productAllocations.map((e) => e.copyWith()).toList(),
+      subspaces: widget.space.subspaces
+          .map(
+            (s) => s.copyWith(
+              productAllocations:
+                  s.productAllocations.map((e) => e.copyWith()).toList(),
+            ),
+          )
+          .toList(),
+    );
+    _validateAllTags();
+  }
+
+  void _validateAllTags() {
+    final newErrors = <String, String>{};
+    final allAllocations = [
+      ..._space.productAllocations,
+      ..._space.subspaces.expand((s) => s.productAllocations),
+    ];
+
+    final allocationsByProductType = <String, List<ProductAllocation>>{};
+    for (final allocation in allAllocations) {
+      (allocationsByProductType[allocation.product.productType] ??= [])
+          .add(allocation);
+    }
+
+    for (final productType in allocationsByProductType.keys) {
+      final allocations = allocationsByProductType[productType]!;
+      final tagCounts = <String, int>{};
+
+      for (final allocation in allocations) {
+        final tagName = allocation.tag.name.trim().toLowerCase();
+        if (tagName.isEmpty) {
+          newErrors[allocation.uuid] =
+              'Tag for ${allocation.product.name} cannot be empty.';
+        } else {
+          tagCounts[tagName] = (tagCounts[tagName] ?? 0) + 1;
+        }
+      }
+
+      for (final allocation in allocations) {
+        final tagName = allocation.tag.name.trim().toLowerCase();
+        if (tagName.isNotEmpty && (tagCounts[tagName] ?? 0) > 1) {
+          newErrors[allocation.uuid] =
+              'Tag "${allocation.tag.name}" is used by multiple $productType devices.';
+        }
+      }
+    }
+
+    setState(() {
+      _validationErrors
+        ..clear()
+        ..addAll(newErrors);
+    });
+  }
+
+  void _handleTagChange(String allocationUuid, Tag newTag) {
+    setState(() {
+      var index =
+          _space.productAllocations.indexWhere((pa) => pa.uuid == allocationUuid);
+      if (index != -1) {
+        final allocation = _space.productAllocations[index];
+        _space.productAllocations[index] = allocation.copyWith(tag: newTag);
+      } else {
+        for (final subspace in _space.subspaces) {
+          index = subspace.productAllocations
+              .indexWhere((pa) => pa.uuid == allocationUuid);
+          if (index != -1) {
+            final allocation = subspace.productAllocations[index];
+            subspace.productAllocations[index] = allocation.copyWith(tag: newTag);
+            break;
+          }
+        }
+      }
+    });
+    _validateAllTags();
+  }
+
+  void _handleLocationChange(String allocationUuid, String? newSubspaceUuid) {
+    setState(() {
+      ProductAllocation? allocationToMove;
+
+      var index =
+          _space.productAllocations.indexWhere((pa) => pa.uuid == allocationUuid);
+      if (index != -1) {
+        allocationToMove = _space.productAllocations.removeAt(index);
+      } else {
+        for (final subspace in _space.subspaces) {
+          index = subspace.productAllocations
+              .indexWhere((pa) => pa.uuid == allocationUuid);
+          if (index != -1) {
+            allocationToMove = subspace.productAllocations.removeAt(index);
+            break;
+          }
+        }
+      }
+
+      if (allocationToMove == null) return;
+
+      if (newSubspaceUuid == null) {
+        _space.productAllocations.add(allocationToMove);
+      } else {
+        _space.subspaces
+            .firstWhere((s) => s.uuid == newSubspaceUuid)
+            .productAllocations
+            .add(allocationToMove);
+      }
+    });
+  }
+
+  void _handleProductDelete(String allocationUuid) {
+    setState(() {
+      _space.productAllocations.removeWhere((pa) => pa.uuid == allocationUuid);
+
+      for (final subspace in _space.subspaces) {
+        subspace.productAllocations.removeWhere(
+          (pa) => pa.uuid == allocationUuid,
+        );
+      }
+    });
+    _validateAllTags();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final allProductAllocations = [
+      ..._space.productAllocations,
+      ..._space.subspaces.expand((s) => s.productAllocations),
+    ];
+
+    final productLocations = <String, String?>{};
+    for (final pa in _space.productAllocations) {
+      productLocations[pa.uuid] = null;
+    }
+    for (final subspace in _space.subspaces) {
+      for (final pa in subspace.productAllocations) {
+        productLocations[pa.uuid] = subspace.uuid;
+      }
+    }
+
+    final hasErrors = _validationErrors.isNotEmpty;
+
+    return AlertDialog(
+      title: const SelectableText('Assign Tags'),
+      content: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxWidth: context.screenWidth * 0.6,
+          minWidth: context.screenWidth * 0.6,
+          maxHeight: context.screenHeight * 0.8,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox(
+              width: double.infinity,
+              child: AssignTagsTable(
+                productAllocations: allProductAllocations,
+                subspaces: _space.subspaces,
+                productLocations: productLocations,
+                onTagSelected: _handleTagChange,
+                onLocationSelected: _handleLocationChange,
+                onProductDeleted: _handleProductDelete,
+              ),
+            ),
+            if (hasErrors)
+              AssignTagsErrorMessages(
+                errorMessages: _validationErrors.values.toSet().toList(),
+              ),
+          ],
+        ),
+      ),
+      actions: [
+        SpaceDetailsActionButtons(
+          onSave: hasErrors ? null : () => Navigator.of(context).pop(_space),
+          onCancel: () async {
+            final newProducts = await showDialog<List<Product>>(
+              context: context,
+              builder: (context) => const AddDeviceTypeWidget(),
+            );
+
+            if (newProducts == null || newProducts.isEmpty) return;
+
+            setState(() {
+              for (final product in newProducts) {
+                _space.productAllocations.add(
+                  ProductAllocation(
+                    uuid: '${const Uuid().v4()}-NewProductUuid',
+                    product: product,
+                    tag: Tag(
+                      uuid: '${const Uuid().v4()}-NewTag',
+                      name: '',
+                    ),
+                  ),
+                );
+              }
+            });
+            _validateAllTags();
+          },
+          cancelButtonLabel: 'Add New Device',
+        )
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AssignTagsErrorMessages extends StatelessWidget {
+  const AssignTagsErrorMessages({super.key, required this.errorMessages});
+
+  final List<String> errorMessages;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 16),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: errorMessages
+            .map(
+              (error) => Text(
+                '- $error',
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: context.theme.colorScheme.error,
+                ),
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,204 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/common/dialog_dropdown.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/data/services/remote_tags_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/bloc/tags_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/product_tag_field.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 AssignTagsTable extends StatelessWidget {
+  const AssignTagsTable({
+    required this.productAllocations,
+    required this.subspaces,
+    required this.productLocations,
+    required this.onTagSelected,
+    required this.onLocationSelected,
+    required this.onProductDeleted,
+    super.key,
+  });
+
+  final List<ProductAllocation> productAllocations;
+  final List<Subspace> subspaces;
+  final Map<String, String?> productLocations;
+  final void Function(String, Tag) onTagSelected;
+  final void Function(String, String?) onLocationSelected;
+  final void Function(String) onProductDeleted;
+
+  DataColumn _buildDataColumn(BuildContext context, String label) {
+    return DataColumn(
+      label: SelectableText(label, style: context.textTheme.bodyMedium),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<TagsBloc>(
+      create: (BuildContext context) => TagsBloc(
+        RemoteTagsService(HTTPService()),
+      )..add(const LoadTags()),
+      child: BlocBuilder<TagsBloc, TagsState>(
+        builder: (context, state) {
+          return switch (state) {
+            TagsLoading() || TagsInitial() => const Center(
+                child: CircularProgressIndicator(),
+              ),
+            TagsFailure(:final message) => Center(
+                child: Text(message),
+              ),
+            TagsLoaded(:final tags) => ClipRRect(
+                borderRadius: BorderRadius.circular(20),
+                child: DataTable(
+                  headingRowColor: WidgetStateProperty.all(
+                    ColorsManager.dataHeaderGrey,
+                  ),
+                  key: ValueKey(productAllocations.length),
+                  border: TableBorder.all(
+                    color: ColorsManager.dataHeaderGrey,
+                    width: 1,
+                    borderRadius: BorderRadius.circular(20),
+                  ),
+                  columns: [
+                    _buildDataColumn(context, '#'),
+                    _buildDataColumn(context, 'Device'),
+                    _buildDataColumn(context, 'Tag'),
+                    _buildDataColumn(context, 'Location'),
+                  ],
+                  rows: productAllocations.isEmpty
+                      ? [
+                          DataRow(
+                            cells: [
+                              DataCell(
+                                Center(
+                                  child: SelectableText(
+                                    'No Devices Available',
+                                    style: context.textTheme.bodyMedium?.copyWith(
+                                      color: ColorsManager.lightGrayColor,
+                                    ),
+                                  ),
+                                ),
+                              ),
+                              DataCell.empty,
+                              DataCell.empty,
+                              DataCell.empty,
+                            ],
+                          ),
+                        ]
+                      : List.generate(productAllocations.length, (index) {
+                          final productAllocation = productAllocations[index];
+                          final allocationUuid = productAllocation.uuid;
+
+                          final availableTags = tags
+                              .where(
+                                (tag) =>
+                                    !productAllocations
+                                        .where((p) =>
+                                            p.product.productType ==
+                                            productAllocation.product.productType)
+                                        .map((p) => p.tag.name.toLowerCase())
+                                        .contains(tag.name.toLowerCase()) ||
+                                    tag.uuid == productAllocation.tag.uuid,
+                              )
+                              .toList();
+
+                          final currentLocationUuid =
+                              productLocations[allocationUuid];
+                          final currentLocationName = currentLocationUuid == null
+                              ? 'Main Space'
+                              : subspaces
+                                  .firstWhere((s) => s.uuid == currentLocationUuid)
+                                  .name;
+
+                          return DataRow(
+                            key: ValueKey(allocationUuid),
+                            cells: [
+                              DataCell(Text((index + 1).toString())),
+                              DataCell(
+                                Row(
+                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                  children: [
+                                    Expanded(
+                                        child: Text(
+                                      productAllocation.product.name,
+                                      overflow: TextOverflow.ellipsis,
+                                    )),
+                                    const SizedBox(width: 10),
+                                    Container(
+                                      width: 20,
+                                      height: 20,
+                                      decoration: BoxDecoration(
+                                        shape: BoxShape.circle,
+                                        border: Border.all(
+                                          color: ColorsManager.lightGrayColor,
+                                          width: 1,
+                                        ),
+                                      ),
+                                      child: IconButton(
+                                        icon: const Icon(
+                                          Icons.close,
+                                          color: ColorsManager.lightGreyColor,
+                                          size: 16,
+                                        ),
+                                        onPressed: () {
+                                          onProductDeleted(allocationUuid);
+                                        },
+                                        tooltip: 'Delete Tag',
+                                        padding: EdgeInsets.zero,
+                                        constraints: const BoxConstraints(),
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                              DataCell(
+                                Container(
+                                  alignment: Alignment.centerLeft,
+                                  width: double.infinity,
+                                  child: ProductTagField(
+                                    key: ValueKey('dropdown_$allocationUuid'),
+                                    productName: productAllocation.product.uuid,
+                                    initialValue: productAllocation.tag,
+                                    onSelected: (newTag) {
+                                      onTagSelected(allocationUuid, newTag);
+                                    },
+                                    items: availableTags,
+                                  ),
+                                ),
+                              ),
+                              DataCell(
+                                SizedBox(
+                                    width: double.infinity,
+                                    child: DialogDropdown(
+                                      items: [
+                                        'Main Space',
+                                        ...subspaces.map((s) => s.name)
+                                      ],
+                                      selectedValue: currentLocationName,
+                                      onSelected: (newLocationName) {
+                                        final newSubspaceUuid = newLocationName ==
+                                                'Main Space'
+                                            ? null
+                                            : subspaces
+                                                .firstWhere(
+                                                    (s) => s.name == newLocationName)
+                                                .uuid;
+                                        onLocationSelected(
+                                            allocationUuid, newSubspaceUuid);
+                                      },
+                                    )),
+                              ),
+                            ],
+                          );
+                        }),
+                ),
+              ),
+            _ => const SizedBox.shrink(),
+          };
+        },
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,182 @@
+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;
+  final ValueChanged<Tag> onSelected;
+  final Tag? initialValue;
+  final String productName;
+
+  const ProductTagField({
+    super.key,
+    required this.items,
+    required this.onSelected,
+    this.initialValue,
+    required this.productName,
+  });
+
+  @override
+  State<ProductTagField> createState() => _ProductTagFieldState();
+}
+
+class _ProductTagFieldState extends State<ProductTagField> {
+  bool _isOpen = false;
+  OverlayEntry? _overlayEntry;
+  final TextEditingController _controller = TextEditingController();
+  final FocusNode _focusNode = FocusNode();
+
+  @override
+  void initState() {
+    super.initState();
+    _controller.text = widget.initialValue?.name ?? '';
+    _focusNode.addListener(_handleFocusChange);
+  }
+
+  @override
+  void dispose() {
+    _focusNode.removeListener(_handleFocusChange);
+    _controller.dispose();
+    _focusNode.dispose();
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+    super.dispose();
+  }
+
+  void _handleFocusChange() {
+    if (!_focusNode.hasFocus) {
+      _submit(_controller.text);
+    }
+  }
+
+  void _submit(String value) {
+    final lowerCaseValue = value.toLowerCase();
+    final selectedTag = widget.items.firstWhere(
+      (e) => e.name.toLowerCase() == lowerCaseValue,
+      orElse: () => Tag(uuid: '${const Uuid().v4()}-NewTag', name: value),
+    );
+    widget.onSelected(selectedTag);
+    _closeDropdown();
+  }
+
+  void _toggleDropdown() {
+    if (_isOpen) {
+      _closeDropdown();
+    } else {
+      _openDropdown();
+    }
+  }
+
+  void _openDropdown() {
+    _overlayEntry = _createOverlayEntry();
+    Overlay.of(context).insert(_overlayEntry!);
+    setState(() => _isOpen = true);
+  }
+
+  void _closeDropdown() {
+    if (_isOpen) {
+      _overlayEntry?.remove();
+      _overlayEntry = null;
+      setState(() => _isOpen = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () => FocusScope.of(context).unfocus(),
+      behavior: HitTestBehavior.opaque,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
+        decoration: BoxDecoration(
+          border: Border.all(color: ColorsManager.transparentColor),
+          borderRadius: BorderRadius.circular(8.0),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Expanded(
+              child: TextFormField(
+                controller: _controller,
+                focusNode: _focusNode,
+                onFieldSubmitted: _submit,
+                style: context.textTheme.bodyMedium,
+                decoration: const InputDecoration(
+                  hintText: 'Enter or Select a tag',
+                  border: InputBorder.none,
+                ),
+              ),
+            ),
+            GestureDetector(
+              onTap: _toggleDropdown,
+              child: const Icon(Icons.arrow_drop_down),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  OverlayEntry _createOverlayEntry() {
+    final renderBox = context.findRenderObject()! as RenderBox;
+    final size = renderBox.size;
+    final offset = renderBox.localToGlobal(Offset.zero);
+
+    return OverlayEntry(
+      builder: (context) {
+        return GestureDetector(
+          onTap: _closeDropdown,
+          behavior: HitTestBehavior.translucent,
+          child: Stack(
+            children: [
+              Positioned(
+                left: offset.dx,
+                top: offset.dy + size.height,
+                width: size.width,
+                child: Material(
+                  elevation: 4.0,
+                  child: Container(
+                    color: ColorsManager.whiteColors,
+                    constraints: const BoxConstraints(maxHeight: 200.0),
+                    child: ListView.builder(
+                      shrinkWrap: true,
+                      itemCount: widget.items.length,
+                      itemBuilder: (context, index) {
+                        final tag = widget.items[index];
+                        return Container(
+                          decoration: const BoxDecoration(
+                            border: Border(
+                              bottom: BorderSide(
+                                color: ColorsManager.lightGrayBorderColor,
+                                width: 1.0,
+                              ),
+                            ),
+                          ),
+                          child: ListTile(
+                            title: Text(
+                              tag.name,
+                              style: context.textTheme.bodyMedium?.copyWith(
+                                color: ColorsManager.textPrimaryColor,
+                              ),
+                            ),
+                            onTap: () {
+                              _controller.text = tag.name;
+                              _submit(tag.name);
+                              _closeDropdown();
+                            },
+                          ),
+                        );
+                      },
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/product_type_card_counter.dart';
+import 'package:syncrow_web/pages/spaces_management/tag_model/widgets/device_icon_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class ProductTypeCard extends StatelessWidget {
+  const ProductTypeCard({
+    required this.product,
+    required this.count,
+    required this.onIncrement,
+    required this.onDecrement,
+    super.key,
+  });
+
+  final Product product;
+  final int count;
+  final void Function() onIncrement;
+  final void Function() onDecrement;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 2,
+      color: ColorsManager.whiteColors,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(4),
+        child: Column(
+          spacing: 8,
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Expanded(child: DeviceIconWidget(icon: product.icon)),
+            _buildName(context, product.name),
+            ProductTypeCardCounter(
+              onIncrement: onIncrement,
+              onDecrement: onDecrement,
+              count: count,
+            ),
+            const SizedBox(height: 4),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildName(BuildContext context, String name) {
+    return Expanded(
+      child: SizedBox(
+        height: 35,
+        child: Text(
+          name,
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.blackColor,
+          ),
+          textAlign: TextAlign.center,
+          maxLines: 2,
+          overflow: TextOverflow.ellipsis,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class ProductTypeCardCounter extends StatelessWidget {
+  const ProductTypeCardCounter({
+    super.key,
+    required this.onIncrement,
+    required this.onDecrement,
+    required this.count,
+  });
+
+  final int count;
+  final void Function() onIncrement;
+  final void Function() onDecrement;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+      decoration: BoxDecoration(
+        color: ColorsManager.counterBackgroundColor,
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        spacing: 8,
+        children: [
+          _buildCounterButton(
+            Icons.remove,
+            onDecrement,
+          ),
+          Text(
+            count.toString(),
+            style: context.textTheme.bodyLarge?.copyWith(
+              color: ColorsManager.spaceColor,
+            ),
+          ),
+          _buildCounterButton(Icons.add, onIncrement),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildCounterButton(
+    IconData icon,
+    VoidCallback onPressed,
+  ) {
+    return GestureDetector(
+      onTap: onPressed,
+      child: Icon(
+        icon,
+        color: ColorsManager.spaceColor.withValues(alpha: 0.3),
+        size: 18,
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/product_type_card.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class ProductsGrid extends StatelessWidget {
+  const ProductsGrid({
+    required this.products,
+    required this.selectedProducts,
+    required this.onIncrement,
+    required this.onDecrement,
+    super.key,
+  });
+
+  final List<Product> products;
+  final Map<Product, int> selectedProducts;
+  final void Function(Product) onIncrement;
+  final void Function(Product) onDecrement;
+
+  @override
+  Widget build(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+    final crossAxisCount = switch (context.screenWidth) {
+      > 1200 => 8,
+      > 800 => 5,
+      _ => 3,
+    };
+    return SingleChildScrollView(
+      child: Container(
+        width: size.width * 0.9,
+        height: size.height * 0.65,
+        decoration: BoxDecoration(
+          color: ColorsManager.textFieldGreyColor,
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: GridView.builder(
+          padding: const EdgeInsets.symmetric(
+            horizontal: 20,
+          ),
+          shrinkWrap: true,
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: crossAxisCount,
+            mainAxisSpacing: 6,
+            crossAxisSpacing: 4,
+            childAspectRatio: 0.8,
+          ),
+          itemCount: products.length,
+          itemBuilder: (context, index) {
+            final product = products[index];
+            return ProductTypeCard(
+              product: product,
+              count: selectedProducts[product] ?? 0,
+              onIncrement: () => onIncrement(product),
+              onDecrement: () => onDecrement(product),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/update_community/data/services/remote_update_community_service.dart

@@ -1,6 +1,6 @@
 import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/update_community/domain/params/update_community_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/update_community/domain/services/update_community_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
@@ -13,15 +13,15 @@ class RemoteUpdateCommunityService implements UpdateCommunityService {
   static const _defaultErrorMessage = 'Failed to update community';
 
   @override
-  Future<CommunityModel> updateCommunity(UpdateCommunityParam param) async {
+  Future<CommunityModel> updateCommunity(CommunityModel param) async {
+    final endpoint = await _makeUrl(param.uuid);
     try {
-      final response = await _httpService.put(
+      await _httpService.put(
-        path: 'endpoint',
+        path: endpoint,
-        expectedResponseModel: (data) => CommunityModel.fromJson(
+        body: {'name': param.name},
-          data as Map<String, dynamic>,
+        expectedResponseModel: (data) => null,
-        ),
       );
-      return response;
+      return param;
     } on DioException catch (e) {
       final message = e.response?.data as Map<String, dynamic>?;
       final error = message?['error'] as Map<String, dynamic>?;
@@ -36,4 +36,12 @@ class RemoteUpdateCommunityService implements UpdateCommunityService {
       throw APIException(formattedErrorMessage);
     }
   }
+
+  Future<String> _makeUrl(String communityUuid) async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null) {
+      throw APIException('Project UUID is not set');
+    }
+    return '/projects/$projectUuid/communities/$communityUuid';
+  }
 }

lib/pages/space_management_v2/modules/update_community/domain/params/update_community_param.dart

@@ -1,10 +0,0 @@
-import 'package:equatable/equatable.dart';
-
-class UpdateCommunityParam extends Equatable {
-  const UpdateCommunityParam({required this.name});
-
-  final String name;
-
-  @override
-  List<Object> get props => [name];
-}

lib/pages/space_management_v2/modules/update_community/domain/services/update_community_service.dart

@@ -1,6 +1,5 @@
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/update_community/domain/params/update_community_param.dart';
 
 abstract class UpdateCommunityService {
-  Future<CommunityModel> updateCommunity(UpdateCommunityParam param);
+  Future<CommunityModel> updateCommunity(CommunityModel community);
 }