Implemented PR notes by extracting widgets into their own classes.

<!--
  Thanks for contributing!

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

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

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

## Description

Created blocs, services, params, and models for those parts of the space
management module:

1. Communities
2. Update Community
3. Create Community
4. Products
5. Space Details
6. Tags
7. Update Community
8. Update Space

## Type of Change

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

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


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

.github/.github/dependabot.yaml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "pub"
+    directory: "/"
+    schedule:
+      interval: "daily"

analysis_options.yaml

@@ -25,3 +25,8 @@ linter:
     prefer_int_literals: false
     sort_constructors_first: false
     avoid_redundant_argument_values: false
+    always_put_required_named_parameters_first: false
+    unnecessary_breaks: false
+    avoid_catches_without_on_clauses: false
+    cascade_invocations: false
+    overridden_fields: false

lib/common/widgets/app_loading_indicator.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class AppLoadingIndicator extends StatelessWidget {
+  const AppLoadingIndicator({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(child: CircularProgressIndicator());
+  }
+}

lib/main.dart

@@ -7,7 +7,6 @@ import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/firebase_options_prod.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';
 import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
@@ -21,8 +20,10 @@ import 'package:syncrow_web/utils/theme/theme.dart';
 
 Future<void> main() async {
   try {
-    const environment =
+    const environment = String.fromEnvironment(
-        String.fromEnvironment('FLAVOR', defaultValue: 'production');
+      'FLAVOR',
+      defaultValue: 'production',
+    );
     await dotenv.load(fileName: '.env.$environment');
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
@@ -40,7 +41,7 @@ class MyApp extends StatelessWidget {
     initialLocation: RoutesConst.auth,
     routes: AppRoutes.getRoutes(),
     redirect: (context, state) async {
-      String checkToken = await AuthBloc.getTokenAndValidate();
+      final checkToken = await AuthBloc.getTokenAndValidate();
       final loggedIn = checkToken == 'Success';
       final goingToLogin = state.uri.toString() == RoutesConst.auth;
 
@@ -58,8 +59,7 @@ class MyApp extends StatelessWidget {
           BlocProvider<CreateRoutineBloc>(
             create: (context) => CreateRoutineBloc(),
           ),
-          BlocProvider(
+          BlocProvider(create: (context) => HomeBloc()),
-              create: (context) => HomeBloc()..add(const FetchUserInfo())),
           BlocProvider<VisitorPasswordBloc>(
             create: (context) => VisitorPasswordBloc(),
           ),

lib/main_dev.dart

@@ -7,7 +7,6 @@ import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/firebase_options_dev.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';
 import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
@@ -21,7 +20,10 @@ import 'package:syncrow_web/utils/theme/theme.dart';
 
 Future<void> main() async {
   try {
-    const environment = String.fromEnvironment('FLAVOR', defaultValue: 'development');
+    const environment = String.fromEnvironment(
+      'FLAVOR',
+      defaultValue: 'development',
+    );
     await dotenv.load(fileName: '.env.$environment');
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(
@@ -39,7 +41,7 @@ class MyApp extends StatelessWidget {
     initialLocation: RoutesConst.auth,
     routes: AppRoutes.getRoutes(),
     redirect: (context, state) async {
-      String checkToken = await AuthBloc.getTokenAndValidate();
+      final checkToken = await AuthBloc.getTokenAndValidate();
       final loggedIn = checkToken == 'Success';
       final goingToLogin = state.uri.toString() == RoutesConst.auth;
 
@@ -57,7 +59,7 @@ class MyApp extends StatelessWidget {
           BlocProvider<CreateRoutineBloc>(
             create: (context) => CreateRoutineBloc(),
           ),
-          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
+          BlocProvider(create: (context) => HomeBloc()),
           BlocProvider<VisitorPasswordBloc>(
             create: (context) => VisitorPasswordBloc(),
           ),

lib/main_staging.dart

@@ -7,7 +7,6 @@ import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/firebase_options_prod.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';
 import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
@@ -39,7 +38,7 @@ class MyApp extends StatelessWidget {
     initialLocation: RoutesConst.auth,
     routes: AppRoutes.getRoutes(),
     redirect: (context, state) async {
-      String checkToken = await AuthBloc.getTokenAndValidate();
+      final checkToken = await AuthBloc.getTokenAndValidate();
       final loggedIn = checkToken == 'Success';
       final goingToLogin = state.uri.toString() == RoutesConst.auth;
 
@@ -57,7 +56,7 @@ class MyApp extends StatelessWidget {
           BlocProvider<CreateRoutineBloc>(
             create: (context) => CreateRoutineBloc(),
           ),
-          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
+          BlocProvider(create: (context) => HomeBloc()),
           BlocProvider<VisitorPasswordBloc>(
             create: (context) => VisitorPasswordBloc(),
           ),

lib/pages/analytics/models/air_quality_data_model.dart

@@ -15,7 +15,9 @@ class AirQualityDataModel extends Equatable {
     return AirQualityDataModel(
       date: DateTime.parse(json['date'] as String),
       data: (json['data'] as List<dynamic>)
-          .map((e) => AirQualityPercentageData.fromJson(e as Map<String, dynamic>))
+          .map(
+            (e) => AirQualityPercentageData.fromJson(e as Map<String, dynamic>),
+          )
           .toList(),
     );
   }
@@ -23,9 +25,9 @@ class AirQualityDataModel extends Equatable {
   static final Map<String, Color> metricColors = {
     'good': ColorsManager.goodGreen.withValues(alpha: 0.7),
     'moderate': ColorsManager.moderateYellow.withValues(alpha: 0.7),
-    'poor': ColorsManager.poorOrange.withValues(alpha: 0.7),
+    'unhealthy_sensitive': ColorsManager.poorOrange.withValues(alpha: 0.7),
     'unhealthy': ColorsManager.unhealthyRed.withValues(alpha: 0.7),
-    'severe': ColorsManager.severePink.withValues(alpha: 0.7),
+    'very_unhealthy': ColorsManager.severePink.withValues(alpha: 0.7),
     'hazardous': ColorsManager.hazardousPurple.withValues(alpha: 0.7),
   };
 
@@ -36,22 +38,19 @@ class AirQualityDataModel extends Equatable {
 class AirQualityPercentageData extends Equatable {
   const AirQualityPercentageData({
     required this.type,
-    required this.name,
     required this.percentage,
   });
 
   final String type;
-  final String name;
   final double percentage;
 
   factory AirQualityPercentageData.fromJson(Map<String, dynamic> json) {
     return AirQualityPercentageData(
-      type: json['type'] as String? ?? '',   
+      type: json['type'] as String? ?? '',
-      name: json['name'] as String? ?? '',
       percentage: (json['percentage'] as num?)?.toDouble() ?? 0,
     );
   }
 
   @override
-  List<Object?> get props => [type, name, percentage];
+  List<Object?> get props => [type, percentage];
 }

lib/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart

@@ -33,7 +33,6 @@ class AirQualityDistributionBloc
         state.copyWith(
           status: AirQualityDistributionStatus.success,
           chartData: result,
-          filteredChartData: _arrangeChartDataByType(result, state.selectedAqiType),
         ),
       );
     } catch (e) {
@@ -58,24 +57,6 @@ class AirQualityDistributionBloc
     UpdateAqiTypeEvent event,
     Emitter<AirQualityDistributionState> emit,
   ) {
-    emit(
+    emit(state.copyWith(selectedAqiType: event.aqiType));
-      state.copyWith(
-        selectedAqiType: event.aqiType,
-        filteredChartData: _arrangeChartDataByType(state.chartData, event.aqiType),
-      ),
-    );
-  }
-
-  List<AirQualityDataModel> _arrangeChartDataByType(
-    List<AirQualityDataModel> data,
-    AqiType aqiType,
-  ) {
-    final filteredData = data.map(
-      (data) => AirQualityDataModel(
-        date: data.date,
-        data: data.data.where((value) => value.type == aqiType.code).toList(),
-      ),
-    );
-    return filteredData.toList();
   }
 }

lib/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_state.dart

@@ -11,28 +11,24 @@ class AirQualityDistributionState extends Equatable {
   const AirQualityDistributionState({
     this.status = AirQualityDistributionStatus.initial,
     this.chartData = const [],
-    this.filteredChartData = const [],
     this.errorMessage,
     this.selectedAqiType = AqiType.aqi,
   });
 
   final AirQualityDistributionStatus status;
   final List<AirQualityDataModel> chartData;
-  final List<AirQualityDataModel> filteredChartData;
   final String? errorMessage;
   final AqiType selectedAqiType;
 
   AirQualityDistributionState copyWith({
     AirQualityDistributionStatus? status,
     List<AirQualityDataModel>? chartData,
-    List<AirQualityDataModel>? filteredChartData,
     String? errorMessage,
     AqiType? selectedAqiType,
   }) {
     return AirQualityDistributionState(
       status: status ?? this.status,
       chartData: chartData ?? this.chartData,
-      filteredChartData: filteredChartData ?? this.filteredChartData,
       errorMessage: errorMessage ?? this.errorMessage,
       selectedAqiType: selectedAqiType ?? this.selectedAqiType,
     );

lib/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/device_location/device_location_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart';
@@ -22,6 +23,7 @@ abstract final class FetchAirQualityDataHelper {
     bool shouldFetchAnalyticsDevices = true,
   }) {
     final date = context.read<AnalyticsDatePickerBloc>().state.monthlyDate;
+    final aqiType = context.read<AirQualityDistributionBloc>().state.selectedAqiType;
     loadAnalyticsDevices(
       context,
       communityUuid: communityUuid,
@@ -36,6 +38,7 @@ abstract final class FetchAirQualityDataHelper {
       context,
       spaceUuid: spaceUuid,
       date: date,
+      aqiType: aqiType,
     );
   }
 
@@ -104,10 +107,15 @@ abstract final class FetchAirQualityDataHelper {
     BuildContext context, {
     required String spaceUuid,
     required DateTime date,
+    required AqiType aqiType,
   }) {
     context.read<AirQualityDistributionBloc>().add(
           LoadAirQualityDistribution(
-            GetAirQualityDistributionParam(spaceUuid: spaceUuid, date: date),
+            GetAirQualityDistributionParam(
+              spaceUuid: spaceUuid,
+              date: date,
+              aqiType: aqiType,
+            ),
           ),
         );
   }

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart

@@ -16,11 +16,6 @@ class AqiDistributionChart extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final sortedData = List<AirQualityDataModel>.from(chartData)
-      ..sort(
-        (a, b) => a.date.compareTo(b.date),
-      );
-
     return BarChart(
       BarChartData(
         maxY: 100.1,
@@ -30,29 +25,25 @@ class AqiDistributionChart extends StatelessWidget {
         borderData: EnergyManagementChartsHelper.borderData(),
         barTouchData: _barTouchData(context),
         titlesData: _titlesData(context),
-        barGroups: _buildBarGroups(sortedData),
+        barGroups: _buildBarGroups(),
       ),
       duration: Duration.zero,
     );
   }
 
-  List<BarChartGroupData> _buildBarGroups(List<AirQualityDataModel> sortedData) {
+  List<BarChartGroupData> _buildBarGroups() {
-    return List.generate(sortedData.length, (index) {
+    return List.generate(chartData.length, (index) {
-      final data = sortedData[index];
+      final data = chartData[index];
       final stackItems = <BarChartRodData>[];
       double currentY = 0;
-      bool isFirstElement = true;
+      var isFirstElement = true;
 
-      // Sort data by type to ensure consistent order
+      for (final percentageData in data.data) {
-      final sortedPercentageData = List<AirQualityPercentageData>.from(data.data)
-        ..sort((a, b) => a.type.compareTo(b.type));
-
-      for (final percentageData in sortedPercentageData) {
         stackItems.add(
           BarChartRodData(
             fromY: currentY,
-            toY: currentY + percentageData.percentage ,
+            toY: currentY + percentageData.percentage,
-            color: AirQualityDataModel.metricColors[percentageData.name]!,
+            color: AirQualityDataModel.metricColors[percentageData.type],
             borderRadius: isFirstElement
                 ? const BorderRadius.only(
                     topLeft: Radius.circular(22),
@@ -84,23 +75,21 @@ class AqiDistributionChart extends StatelessWidget {
         tooltipRoundedRadius: 16,
         tooltipPadding: const EdgeInsets.all(8),
         getTooltipItem: (group, groupIndex, rod, rodIndex) {
-          final data = chartData[group.x.toInt()];
+          final data = chartData[group.x];
 
-          final List<TextSpan> children = [];
+          final children = <TextSpan>[];
 
           final textStyle = context.textTheme.bodySmall?.copyWith(
             color: ColorsManager.blackColor,
-            fontSize: 12,
+            fontSize: 8,
           );
 
-          // Sort data by type to ensure consistent order
+          for (final percentageData in data.data) {
-          final sortedPercentageData = List<AirQualityPercentageData>.from(data.data)
+            final percentage = percentageData.percentage.toStringAsFixed(1);
-            ..sort((a, b) => a.type.compareTo(b.type));
+            final type = percentageData.type[0].toUpperCase() +
-
+                percentageData.type.substring(1).replaceAll('_', ' ');
-          for (final percentageData in sortedPercentageData) {
             children.add(TextSpan(
-              text:
+              text: '\n$type: $percentage%',
-                  '\n${percentageData.type.toUpperCase()}: ${percentageData.percentage.toStringAsFixed(1)}%',
               style: textStyle,
             ));
           }
@@ -109,9 +98,10 @@ class AqiDistributionChart extends StatelessWidget {
             DateFormat('dd/MM/yyyy').format(data.date),
             context.textTheme.bodyMedium!.copyWith(
               color: ColorsManager.blackColor,
-              fontSize: 16,
+              fontSize: 9,
               fontWeight: FontWeight.w600,
             ),
+            textAlign: TextAlign.start,
             children: children,
           );
         },

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_box.dart

@@ -33,7 +33,7 @@ class AqiDistributionChartBox extends StatelessWidget {
               const Divider(),
               const SizedBox(height: 20),
               Expanded(
-                child: AqiDistributionChart(chartData: state.filteredChartData),
+                child: AqiDistributionChart(chartData: state.chartData),
               ),
             ],
           ),

lib/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_title.dart

@@ -2,8 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
 import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 
 class AqiDistributionChartTitle extends StatelessWidget {
   const AqiDistributionChartTitle({required this.isLoading, super.key});
@@ -31,9 +34,15 @@ class AqiDistributionChartTitle extends StatelessWidget {
           child: AqiTypeDropdown(
             onChanged: (value) {
               if (value != null) {
-                context
+                final bloc = context.read<AirQualityDistributionBloc>();
-                    .read<AirQualityDistributionBloc>()
+                try {
-                    .add(UpdateAqiTypeEvent(value));
+                  final param = _makeLoadAqiDistributionParam(context, value);
+                  bloc.add(LoadAirQualityDistribution(param));
+                } catch (_) {
+                  return;
+                } finally {
+                  bloc.add(UpdateAqiTypeEvent(value));
+                }
               }
             },
           ),
@@ -41,4 +50,19 @@ class AqiDistributionChartTitle extends StatelessWidget {
       ],
     );
   }
+
+  GetAirQualityDistributionParam _makeLoadAqiDistributionParam(
+    BuildContext context,
+    AqiType aqiType,
+  ) {
+    final date = context.read<AnalyticsDatePickerBloc>().state.monthlyDate;
+    final spaceUuid =
+        context.read<SpaceTreeBloc>().state.selectedSpaces.firstOrNull ?? '';
+    if (spaceUuid.isEmpty) throw Exception('Space UUID is empty');
+    return GetAirQualityDistributionParam(
+      date: date,
+      spaceUuid: spaceUuid,
+      aqiType: aqiType,
+    );
+  }
 }

lib/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart

@@ -6,8 +6,8 @@ enum AqiType {
   aqi('AQI', '', 'aqi'),
   pm25('PM2.5', 'µg/m³', 'pm25'),
   pm10('PM10', 'µg/m³', 'pm10'),
-  hcho('HCHO', 'mg/m³', 'hcho'),
+  hcho('HCHO', 'mg/m³', 'cho2'),
-  tvoc('TVOC', 'µg/m³', 'tvoc'),
+  tvoc('TVOC', 'µg/m³', 'voc'),
   co2('CO2', 'ppm', 'co2');
 
   const AqiType(this.value, this.unit, this.code);

lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart

@@ -63,7 +63,7 @@ class RangeOfAqiChart extends StatelessWidget {
             gradient: LinearGradient(
               begin: Alignment.bottomCenter,
               end: Alignment.topCenter,
-              stops: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0],
+              stops: const [0.0, 0.2, 0.4, 0.6, 0.8, 1.0],
               colors: RangeOfAqiChartsHelper.gradientData.map((e) {
                 final (color, _) = e;
                 return color.withValues(alpha: 0.6);

lib/pages/analytics/modules/analytics/views/analytics_page.dart

@@ -16,7 +16,7 @@ import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/real
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/total_energy_consumption/total_energy_consumption_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_bloc.dart';
-import 'package:syncrow_web/pages/analytics/services/air_quality_distribution/fake_air_quality_distribution_service.dart';
+import 'package:syncrow_web/pages/analytics/services/air_quality_distribution/remote_air_quality_distribution_service.dart';
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/analytics_devices_service_delagate.dart';
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/remote_energy_management_analytics_devices_service.dart';
 import 'package:syncrow_web/pages/analytics/services/analytics_devices/remote_occupancy_analytics_devices_service.dart';
@@ -27,7 +27,7 @@ import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_devi
 import 'package:syncrow_web/pages/analytics/services/occupacy/remote_occupancy_service.dart';
 import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/remote_occupancy_heat_map_service.dart';
 import 'package:syncrow_web/pages/analytics/services/power_clamp_info/remote_power_clamp_info_service.dart';
-import 'package:syncrow_web/pages/analytics/services/range_of_aqi/fake_range_of_aqi_service.dart';
+import 'package:syncrow_web/pages/analytics/services/range_of_aqi/remote_range_of_aqi_service.dart';
 import 'package:syncrow_web/pages/analytics/services/realtime_device_service/firebase_realtime_device_service.dart';
 import 'package:syncrow_web/pages/analytics/services/total_energy_consumption/remote_total_energy_consumption_service.dart';
 import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
@@ -104,12 +104,12 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
         ),
         BlocProvider(
           create: (context) => RangeOfAqiBloc(
-            FakeRangeOfAqiService(),
+            RemoteRangeOfAqiService(_httpService),
           ),
         ),
         BlocProvider(
           create: (context) => AirQualityDistributionBloc(
-            FakeAirQualityDistributionService(),
+            RemoteAirQualityDistributionService(_httpService),
           ),
         ),
         BlocProvider(

lib/pages/analytics/modules/analytics/widgets/analytics_date_filter_button.dart

@@ -20,7 +20,7 @@ class AnalyticsDateFilterButton extends StatefulWidget {
   final void Function(DateTime)? onDateSelected;
   final DatePickerType datePickerType;
 
-  static final _color = ColorsManager.blackColor.withValues(alpha: 0.8);
+  static final Color _color = ColorsManager.blackColor.withValues(alpha: 0.8);
 
   @override
   State<AnalyticsDateFilterButton> createState() =>
@@ -60,23 +60,21 @@ class _AnalyticsDateFilterButtonState extends State<AnalyticsDateFilterButton> {
         ),
       ),
       onPressed: () {
-        showDialog(
+        showDialog<void>(
           context: context,
-          builder: (_) {
+          builder: (_) => switch (widget.datePickerType) {
-            return switch (widget.datePickerType) {
+            DatePickerType.month => MonthPickerWidget(
-              DatePickerType.month => MonthPickerWidget(
+                selectedDate: widget.selectedDate,
-                  selectedDate: widget.selectedDate,
+                onDateSelected: (value) {
-                  onDateSelected: (value) {
+                  widget.onDateSelected?.call(value);
-                    widget.onDateSelected?.call(value);
+                },
-                  },
+              ),
-                ),
+            DatePickerType.year => YearPickerWidget(
-              DatePickerType.year => YearPickerWidget(
+                selectedDate: widget.selectedDate,
-                  selectedDate: widget.selectedDate,
+                onDateSelected: (value) {
-                  onDateSelected: (value) {
+                  widget.onDateSelected?.call(value);
-                    widget.onDateSelected?.call(value);
+                },
-                  },
+              ),
-                ),
-            };
           },
         );
       },

lib/pages/analytics/modules/analytics/widgets/analytics_page_tabs_and_children.dart

@@ -118,7 +118,7 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
             communityUuid: communities.firstOrNull ?? '',
             spaceUuid: spaces.firstOrNull ?? '',
           );
-          break;
+          return;
         case AnalyticsPageTab.airQuality:
           _onAirQualityDateChanged(
             context,
@@ -126,8 +126,9 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
             communityUuid: communities.firstOrNull ?? '',
             spaceUuid: spaces.firstOrNull ?? '',
           );
+          return;
         default:
-          break;
+          return;
       }
     }
   }
@@ -157,6 +158,7 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
     required String communityUuid,
     required String spaceUuid,
   }) {
+    if (spaceUuid.isEmpty) return;
     FetchAirQualityDataHelper.loadAirQualityData(
       context,
       date: date,

lib/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart

@@ -38,7 +38,7 @@ abstract final class EnergyManagementChartsHelper {
         sideTitles: SideTitles(
           showTitles: true,
           maxIncluded: false,
-          minIncluded: true,
+          minIncluded: false,
           interval: leftTitlesInterval,
           reservedSize: 110,
           getTitlesWidget: (value, meta) => Padding(

lib/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_gradient.dart

@@ -34,8 +34,8 @@ class OccupancyHeatMapGradient extends StatelessWidget {
                 width: 1,
               ),
               gradient: LinearGradient(
-                begin: AlignmentDirectional.centerEnd,
+                begin: AlignmentDirectional.centerStart,
-                end: AlignmentDirectional.centerStart,
+                end: AlignmentDirectional.centerEnd,
                 colors: _heatMapColors(),
               ),
             ),

lib/pages/analytics/modules/occupancy/widgets/occupancy_painter.dart

@@ -28,11 +28,11 @@ class OccupancyPainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
-    final Paint fillPaint = Paint();
+    final fillPaint = Paint();
-    final Paint borderPaint = Paint()
+    final borderPaint = Paint()
       ..color = ColorsManager.grayBorder.withValues(alpha: 0.4)
       ..style = PaintingStyle.stroke;
-    final Paint hoveredBorderPaint = Paint()
+    final hoveredBorderPaint = Paint()
       ..color = Colors.black
       ..style = PaintingStyle.stroke
       ..strokeWidth = 1.5;
@@ -48,7 +48,6 @@ class OccupancyPainter extends CustomPainter {
       final rect = Rect.fromLTWH(x, y, cellSize, cellSize);
       canvas.drawRect(rect, fillPaint);
 
-      // Highlight the hovered item
       if (hoveredItem != null && hoveredItem!.index == item.index) {
         canvas.drawRect(rect, hoveredBorderPaint);
       } else {
@@ -73,16 +72,16 @@ class OccupancyPainter extends CustomPainter {
   }
 
   void _drawDashedLine(Canvas canvas, Offset start, Offset end, Paint paint) {
-    const double dashWidth = 2.0;
+    const dashWidth = 2.0;
-    const double dashSpace = 4.0;
+    const dashSpace = 4.0;
-    final double totalLength = (end - start).distance;
+    final totalLength = (end - start).distance;
-    final Offset direction = (end - start) / (end - start).distance;
+    final direction = (end - start) / (end - start).distance;
 
-    double currentLength = 0.0;
+    var currentLength = 0.0;
     while (currentLength < totalLength) {
-      final Offset dashStart = start + direction * currentLength;
+      final dashStart = start + direction * currentLength;
-      final double nextLength = currentLength + dashWidth;
+      final nextLength = currentLength + dashWidth;
-      final Offset dashEnd =
+      final dashEnd =
           start + direction * (nextLength < totalLength ? nextLength : totalLength);
       canvas.drawLine(dashStart, dashEnd, paint);
       currentLength = nextLength + dashSpace;
@@ -91,8 +90,9 @@ class OccupancyPainter extends CustomPainter {
 
   Color _getColor(int value) {
     if (maxValue == 0) return ColorsManager.vividBlue.withValues(alpha: 0);
-    final opacity = value.clamp(0, maxValue) / maxValue;
+    final clampedValue = 0.075 + (1 * value.clamp(0, maxValue) / maxValue);
-    return ColorsManager.vividBlue.withValues(alpha: opacity);
+    final opacity = value == 0 ? 0 : clampedValue;
+    return ColorsManager.vividBlue.withValues(alpha: opacity.toDouble());
   }
 
   @override

lib/pages/analytics/params/get_air_quality_distribution_param.dart

@@ -1,9 +1,14 @@
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
+
 class GetAirQualityDistributionParam {
   final DateTime date;
   final String spaceUuid;
+  final AqiType aqiType;
 
-  const GetAirQualityDistributionParam({
+  const GetAirQualityDistributionParam(
+ {
     required this.date,
     required this.spaceUuid,
+    required this.aqiType,
   });
 }

lib/pages/analytics/services/air_quality_distribution/fake_air_quality_distribution_service.dart

@@ -1,95 +0,0 @@
-import 'dart:math';
-
-import 'package:syncrow_web/pages/analytics/models/air_quality_data_model.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
-import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
-import 'package:syncrow_web/pages/analytics/services/air_quality_distribution/air_quality_distribution_service.dart';
-
-class FakeAirQualityDistributionService implements AirQualityDistributionService {
-  final _random = Random();
-
-  @override
-  Future<List<AirQualityDataModel>> getAirQualityDistribution(
-    GetAirQualityDistributionParam param,
-  ) async {
-    return Future.delayed(
-      const Duration(milliseconds: 400),
-      () => List.generate(30, (index) {
-        final date = DateTime(2025, 5, 1).add(Duration(days: index));
-
-        final values = _generateRandomPercentages();
-        final nullMask = List.generate(6, (_) => _shouldBeNull());
-
-        if (nullMask.every((isNull) => isNull)) {
-          nullMask[_random.nextInt(6)] = false;
-        }
-
-        final nonNullValues = _redistributePercentages(values, nullMask);
-
-        return AirQualityDataModel(
-          date: date,
-          data: [
-            AirQualityPercentageData(
-              type: AqiType.aqi.code,
-              percentage: nonNullValues[0],
-              name: 'good',
-            ),
-            AirQualityPercentageData(
-              name: 'moderate',
-              type: AqiType.co2.code,
-              percentage: nonNullValues[1],
-            ),
-            AirQualityPercentageData(
-              name: 'poor',
-              percentage: nonNullValues[2],
-              type: AqiType.hcho.code,
-
-            ),
-            AirQualityPercentageData(
-              name: 'unhealthy',
-              percentage: nonNullValues[3],
-              type: AqiType.pm10.code,
-            ),
-            AirQualityPercentageData(
-              name: 'severe',
-              type: AqiType.pm25.code,
-              percentage: nonNullValues[4],
-            ),
-            AirQualityPercentageData(
-              name: 'hazardous',
-              percentage: nonNullValues[5],
-              type: AqiType.co2.code,
-            ),
-          ],
-        );
-      }),
-    );
-  }
-
-  List<double> _redistributePercentages(
-    List<double> originalValues,
-    List<bool> nullMask,
-  ) {
-    double nonNullSum = 0;
-    for (int i = 0; i < originalValues.length; i++) {
-      if (!nullMask[i]) {
-        nonNullSum += originalValues[i];
-      }
-    }
-
-    return List.generate(originalValues.length, (i) {
-      if (nullMask[i]) return 0;
-      return (originalValues[i] / nonNullSum * 100).roundToDouble();
-    });
-  }
-
-  bool _shouldBeNull() => _random.nextDouble() < 0.6;
-
-  List<double> _generateRandomPercentages() {
-    final values = List.generate(6, (_) => _random.nextDouble());
-
-    final sum = values.reduce((a, b) => a + b);
-
-    return values.map((value) => (value / sum * 100).roundToDouble()).toList();
-  }
-}

lib/pages/analytics/services/air_quality_distribution/remote_air_quality_distribution_service.dart

@@ -3,7 +3,8 @@ import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_
 import 'package:syncrow_web/pages/analytics/services/air_quality_distribution/air_quality_distribution_service.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
-class RemoteAirQualityDistributionService implements AirQualityDistributionService {
+final class RemoteAirQualityDistributionService
+    implements AirQualityDistributionService {
   RemoteAirQualityDistributionService(this._httpService);
 
   final HTTPService _httpService;
@@ -14,10 +15,10 @@ class RemoteAirQualityDistributionService implements AirQualityDistributionServi
   ) async {
     try {
       final response = await _httpService.get(
-        path: 'endpoint',
+        path: '/aqi/distribution/space/${param.spaceUuid}',
         queryParameters: {
-          'spaceUuid': param.spaceUuid,
+          'monthDate': _formatDate(param.date),
-          'date': param.date.toIso8601String(),
+          'pollutantType': param.aqiType.code,
         },
         expectedResponseModel: (data) {
           final json = data as Map<String, dynamic>? ?? {};
@@ -33,4 +34,8 @@ class RemoteAirQualityDistributionService implements AirQualityDistributionServi
       throw Exception('Failed to load energy consumption per phase: $e');
     }
   }
+
+  static String _formatDate(DateTime date) {
+    return '${date.year}-${date.month.toString().padLeft(2, '0')}';
+  }
 }

lib/pages/analytics/services/device_location/device_location_details_service_decorator.dart

@@ -26,15 +26,15 @@ class DeviceLocationDetailsServiceDecorator implements DeviceLocationService {
       if (data != null) {
         final addressData = data['address'] as Map<String, dynamic>;
         return deviceLocationInfo.copyWith(
-          city: addressData['city'],
+          city: addressData['city'] as String?,
-          country: addressData['country_code'].toString().toUpperCase(),
+          country: addressData['country_code']?.toString().toUpperCase(),
-          address: addressData['state'],
+          address: addressData['state'] as String?,
         );
       }
 
       return deviceLocationInfo;
     } catch (e) {
-      throw Exception('Failed to load device location info: ${e.toString()}');
+      throw Exception('Failed to load device location info: $e');
     }
   }
 }

lib/pages/analytics/services/range_of_aqi/fake_range_of_aqi_service.dart

@@ -1,36 +0,0 @@
-import 'package:syncrow_web/pages/analytics/models/range_of_aqi.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
-import 'package:syncrow_web/pages/analytics/params/get_range_of_aqi_param.dart';
-import 'package:syncrow_web/pages/analytics/services/range_of_aqi/range_of_aqi_service.dart';
-
-class FakeRangeOfAqiService implements RangeOfAqiService {
-  @override
-  Future<List<RangeOfAqi>> load(GetRangeOfAqiParam param) async {
-    return await Future.delayed(const Duration(milliseconds: 800), () {
-      final random = DateTime.now().millisecondsSinceEpoch;
-
-      return List.generate(30, (index) {
-        final date = DateTime(2025, 5, 1).add(Duration(days: index));
-
-        final min = ((random + index * 17) % 200).toDouble();
-        final avgDelta = ((random + index * 23) % 50).toDouble() + 20;
-        final maxDelta = ((random + index * 31) % 50).toDouble() + 30;
-
-        final avg = (min + avgDelta).clamp(0.0, 301.0);
-        final max = (avg + maxDelta).clamp(0.0, 301.0);
-
-        return RangeOfAqi(  
-          data: [
-            RangeOfAqiValue(type: AqiType.aqi.code, min: min, average: avg, max: max),
-            RangeOfAqiValue(type: AqiType.pm25.code, min: min, average: avg, max: max),
-            RangeOfAqiValue(type: AqiType.pm10.code, min: min, average: avg, max: max),
-            RangeOfAqiValue(type: AqiType.hcho.code, min: min, average: avg, max: max),
-            RangeOfAqiValue(type: AqiType.tvoc.code, min: min, average: avg, max: max),
-            RangeOfAqiValue(type: AqiType.co2.code, min: min, average: avg, max: max),
-          ],
-          date: date,
-        );
-      });
-    });
-  }
-}

lib/pages/analytics/services/range_of_aqi/remote_range_of_aqi_service.dart

@@ -12,11 +12,8 @@ final class RemoteRangeOfAqiService implements RangeOfAqiService {
   Future<List<RangeOfAqi>> load(GetRangeOfAqiParam param) async {
     try {
       final response = await _httpService.get(
-        path: 'endpoint',
+        path: '/aqi/range/space/${param.spaceUuid}',
-        queryParameters: {
+        queryParameters: {'monthDate': _formatDate(param.date)},
-          'spaceUuid': param.spaceUuid,
-          'date': param.date.toIso8601String(),
-        },
         expectedResponseModel: (data) {
           final json = data as Map<String, dynamic>? ?? {};
           final mappedData = json['data'] as List<dynamic>? ?? [];
@@ -28,7 +25,11 @@ final class RemoteRangeOfAqiService implements RangeOfAqiService {
       );
       return response;
     } catch (e) {
-      throw Exception('Failed to load energy consumption per phase: $e');
+      throw Exception('Failed to load range of aqi: $e');
     }
   }
+
+  static String _formatDate(DateTime date) {
+    return '${date.year}-${date.month.toString().padLeft(2, '0')}';
+  }
 }

lib/pages/common/text_field/custom_web_textfield.dart

@@ -78,7 +78,7 @@ class CustomWebTextField extends StatelessWidget {
             controller: controller,
             style: const TextStyle(color: Colors.black),
             decoration: textBoxDecoration()!.copyWith(
-                errorStyle: const TextStyle(height: 0),
+                errorStyle: const TextStyle(height: 0.01),
                 hintStyle: context.textTheme.titleSmall!
                     .copyWith(color: Colors.grey, fontSize: 12),
                 hintText: hintText ?? 'Please enter'),

lib/pages/device_managment/device_setting/device_management_content.dart

@@ -1,7 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.dart';
@@ -66,14 +69,25 @@ class DeviceManagementContent extends StatelessWidget {
           Padding(
             padding: const EdgeInsets.all(10.0),
             child: InkWell(
-              onTap: () {
+              onTap: () async {
-                showSubSpaceDialog(
+                final selectedSubSpace = await showSubSpaceDialog(
                   context,
                   communityUuid: device.community!.uuid!,
                   spaceUuid: device.spaces!.first.uuid!,
                   subSpaces: subSpaces,
-                  selected: device.subspace!.uuid,
+                  selected: deviceInfo.subspace.uuid,
                 );
+                if (selectedSubSpace != null) {
+                  Future.delayed(const Duration(milliseconds: 500), () {
+                    context.read<SettingDeviceBloc>().add(
+                          SettingBlocAssignRoom(
+                            communityUuid: device.community!.uuid!,
+                            spaceUuid: device.spaces!.first.uuid!,
+                            subSpaceUuid: selectedSubSpace.id ?? '',
+                          ),
+                        );
+                  });
+                }
               },
               child: infoRow(
                   label: 'Sub-Space:',

lib/pages/device_managment/device_setting/sub_space_dialog.dart

@@ -9,13 +9,11 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
 class SubSpaceDialog extends StatefulWidget {
   final List<SubSpaceModel> subSpaces;
   final String? selected;
-  final void Function(SubSpaceModel?) onConfirmed;
 
   const SubSpaceDialog({
     Key? key,
     required this.subSpaces,
     this.selected,
-    required this.onConfirmed,
   }) : super(key: key);
 
   @override
@@ -86,30 +84,21 @@ class _SubSpaceDialogState extends State<SubSpaceDialog> {
   }
 }
 
-void showSubSpaceDialog(
+Future<SubSpaceModel?> showSubSpaceDialog(
   BuildContext context, {
   required List<SubSpaceModel> subSpaces,
   String? selected,
   required String communityUuid,
   required String spaceUuid,
 }) {
-  showDialog(
+  return showDialog<SubSpaceModel>(
     context: context,
-    barrierDismissible: true,
+    builder: (ctx) => BlocProvider.value(
-    builder: (ctx) => SubSpaceDialog(
+      value: BlocProvider.of<SettingDeviceBloc>(context),
-      subSpaces: subSpaces,
+      child: SubSpaceDialog(
-      selected: selected,
+        subSpaces: subSpaces,
-      onConfirmed: (selectedModel) {
+        selected: selected,
-        if (selectedModel != null) {
+      ),
-          context.read<SettingDeviceBloc>().add(
-                SettingBlocAssignRoom(
-                  communityUuid: communityUuid,
-                  spaceUuid: spaceUuid,
-                  subSpaceUuid: selectedModel.id ?? '',
-                ),
-              );
-        }
-      },
     ),
   );
 }

lib/pages/device_managment/device_setting/subspace_dialog_buttons.dart

@@ -1,6 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
@@ -62,11 +60,12 @@ class SubSpaceDialogButtons extends StatelessWidget {
                     ? null
                     : () {
                         final selectedModel = widget.subSpaces.firstWhere(
-                            (space) => space.id == _selectedId,
+                          (space) => space.id == _selectedId,
-                            orElse: () =>
+                          orElse: () =>
-                                SubSpaceModel(id: null, name: '', devices: []));
+                              SubSpaceModel(id: null, name: '', devices: []),
-                        widget.onConfirmed(selectedModel);
+                        );
-                        Navigator.of(context).pop();
+                        Navigator.of(context)
+                            .pop(selectedModel); 
                       },
                 child: Text(
                   'Confirm',
@@ -84,31 +83,3 @@ class SubSpaceDialogButtons extends StatelessWidget {
     );
   }
 }
-
-void showSubSpaceDialog(
-  BuildContext context, {
-  required List<SubSpaceModel> subSpaces,
-  String? selected,
-  required String communityUuid,
-  required String spaceUuid,
-}) {
-  showDialog(
-    context: context,
-    barrierDismissible: true,
-    builder: (ctx) => SubSpaceDialog(
-      subSpaces: subSpaces,
-      selected: selected,
-      onConfirmed: (selectedModel) {
-        if (selectedModel != null) {
-          context.read<SettingDeviceBloc>().add(
-                SettingBlocAssignRoom(
-                  communityUuid: communityUuid,
-                  spaceUuid: spaceUuid,
-                  subSpaceUuid: selectedModel.id ?? '',
-                ),
-              );
-        }
-      },
-    ),
-  );
-}

lib/pages/home/bloc/home_bloc.dart

@@ -13,30 +13,32 @@ import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
 import 'package:syncrow_web/services/home_api.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/constants/routes_const.dart';
-import 'package:syncrow_web/utils/navigation_service.dart';
 
 class HomeBloc extends Bloc<HomeEvent, HomeState> {
   UserModel? user;
   String terms = '';
   String policy = '';
 
-  HomeBloc() : super((HomeInitial())) {
+  HomeBloc() : super(HomeInitial()) {
-    // on<CreateNewNode>(_createNode);
     on<FetchUserInfo>(_fetchUserInfo);
     on<FetchTermEvent>(_fetchTerms);
     on<FetchPolicyEvent>(_fetchPolicy);
     on<ConfirmUserAgreementEvent>(_confirmUserAgreement);
   }
 
-  Future _fetchUserInfo(FetchUserInfo event, Emitter<HomeState> emit) async {
+  Future<void> _fetchUserInfo(
+    FetchUserInfo event,
+    Emitter<HomeState> emit,
+  ) async {
     try {
-      var uuid =
+      final uuid =
           await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
-      user = await HomeApi().fetchUserInfo(uuid);
+      if (uuid != null) {
+        user = await HomeApi().fetchUserInfo(uuid);
+      }
 
-      if (user != null && user!.project != null) {
+      if (user != null && user?.project != null) {
         await ProjectManager.setProjectUUID(user!.project!.uuid);
-
       }
       add(FetchTermEvent());
       add(FetchPolicyEvent());
@@ -47,7 +49,7 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
     }
   }
 
-  Future _fetchTerms(FetchTermEvent event, Emitter<HomeState> emit) async {
+  Future<void> _fetchTerms(FetchTermEvent event, Emitter<HomeState> emit) async {
     try {
       emit(LoadingHome());
       terms = await HomeApi().fetchTerms();
@@ -57,22 +59,22 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
     }
   }
 
-  Future _fetchPolicy(FetchPolicyEvent event, Emitter<HomeState> emit) async {
+  Future<void> _fetchPolicy(FetchPolicyEvent event, Emitter<HomeState> emit) async {
     try {
       emit(LoadingHome());
       policy = await HomeApi().fetchPolicy();
       emit(HomeInitial());
     } catch (e) {
-      debugPrint("Error fetching policy: $e");
+      debugPrint('Error fetching policy: $e');
       return;
     }
   }
 
-  Future _confirmUserAgreement(
+  Future<void> _confirmUserAgreement(
       ConfirmUserAgreementEvent event, Emitter<HomeState> emit) async {
     try {
       emit(LoadingHome());
-      var uuid =
+      final uuid =
           await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
       policy = await HomeApi().confirmUserAgreements(uuid);
       emit(PolicyAgreement());
@@ -81,7 +83,7 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
     }
   }
 
-  List<HomeItemModel> homeItems = [
+  final List<HomeItemModel> homeItems = [
     HomeItemModel(
       title: 'Access Management',
       icon: Assets.accessIcon,
@@ -126,41 +128,5 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
       },
       color: const Color(0xFF023DFE),
     ),
-
-    // HomeItemModel(
-    //   title: 'Move in',
-    //   icon: Assets.moveinIcon,
-    //   active: false,
-    //   onPress: (context) {},
-    //   color: ColorsManager.primaryColor,
-    // ),
-    // HomeItemModel(
-    //   title: 'Construction',
-    //   icon: Assets.constructionIcon,
-    //   active: false,
-    //   onPress: (context) {},
-    //   color: ColorsManager.primaryColor,
-    // ),
-    // HomeItemModel(
-    //   title: 'Energy',
-    //   icon: Assets.energyIcon,
-    //   active: false,
-    //   onPress: (context) {},
-    //   color: ColorsManager.slidingBlueColor.withOpacity(0.2),
-    // ),
-    // HomeItemModel(
-    //   title: 'Integrations',
-    //   icon: Assets.integrationsIcon,
-    //   active: false,
-    //   onPress: (context) {},
-    //   color: ColorsManager.slidingBlueColor.withOpacity(0.2),
-    // ),
-    // HomeItemModel(
-    //   title: 'Asset',
-    //   icon: Assets.assetIcon,
-    //   active: false,
-    //   onPress: (context) {},
-    //   color: ColorsManager.slidingBlueColor.withOpacity(0.2),
-    // ),
   ];
 }

lib/pages/home/view/home_card.dart

@@ -40,7 +40,7 @@ class HomeCard extends StatelessWidget {
                       child: Text(
                         name,
                         style: const TextStyle(
-                          fontSize: 20,
+                          fontSize: 30,
                           color: Colors.white,
                           fontWeight: FontWeight.bold,
                         ),

lib/pages/home/view/home_page.dart

@@ -1,11 +1,25 @@
 import 'package:flutter/cupertino.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
+import 'package:syncrow_web/pages/home/bloc/home_event.dart';
 import 'package:syncrow_web/pages/home/view/home_page_mobile.dart';
 import 'package:syncrow_web/pages/home/view/home_page_web.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
-class HomePage extends StatelessWidget with HelperResponsiveLayout {
+class HomePage extends StatefulWidget {
   const HomePage({super.key});
 
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage>  with HelperResponsiveLayout{
+
+  @override
+  void initState() {
+    context.read<HomeBloc>().add(const FetchUserInfo());
+    super.initState();
+  }
   @override
   Widget build(BuildContext context) {
     final isSmallScreen = isSmallScreenSize(context);

lib/pages/home/view/home_page_web.dart

@@ -97,7 +97,7 @@ class _HomeWebPageState extends State<HomeWebPage> {
                             itemCount: homeBloc.homeItems.length,
                             gridDelegate:
                                 const SliverGridDelegateWithFixedCrossAxisCount(
-                              crossAxisCount: 3, // Adjust as needed.
+                              crossAxisCount: 4, // Adjust as needed.
                               crossAxisSpacing: 20.0,
                               mainAxisSpacing: 20.0,
                               childAspectRatio: 1.5,

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

@@ -19,7 +19,6 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
-
 class UsersPage extends StatelessWidget {
   UsersPage({super.key});
 

lib/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart

@@ -11,7 +11,6 @@ class CreateRoutineBloc extends Bloc<CreateRoutineEvent, CreateRoutineState> {
     on<SpaceOnlyWithDevicesEvent>(_fetchSpaceOnlyWithDevices);
     on<SaveCommunityIdAndSpaceIdEvent>(saveSpaceIdCommunityId);
     on<ResetSelectedEvent>(resetSelected);
-    on<FetchCommunityEvent>(_fetchCommunity);
   }
 
   String selectedSpaceId = '';
@@ -50,18 +49,4 @@ class CreateRoutineBloc extends Bloc<CreateRoutineEvent, CreateRoutineState> {
     selectedCommunityId = '';
     emit(const ResetSelectedState());
   }
-
-  Future<void> _fetchCommunity(
-      FetchCommunityEvent event, Emitter<CreateRoutineState> emit) async {
-    emit(const CommunitiesLoadingState());
-
-    try {
-      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
-      communities =
-          await CommunitySpaceManagementApi().fetchCommunities(projectUuid);
-      emit(const CommunityLoadedState());
-    } catch (e) {
-      emit(SpaceTreeErrorState('Error loading communities $e'));
-    }
-  }
 }

lib/pages/routines/bloc/create_routine_bloc/create_routine_event.dart

@@ -43,9 +43,3 @@ class ResetSelectedEvent extends CreateRoutineEvent {
 }
 
 
-class FetchCommunityEvent extends CreateRoutineEvent {
-  const FetchCommunityEvent();
-
-  @override
-  List<Object> get props => [];
-}

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

@@ -4,8 +4,8 @@ import 'package:bloc/bloc.dart';
 import 'package:dio/dio.dart';
 import 'package:equatable/equatable.dart';
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
 import 'package:syncrow_web/pages/routines/bloc/automation_scene_trigger_bloc/automation_status_update.dart';
 import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
@@ -27,9 +27,6 @@ import 'package:uuid/uuid.dart';
 part 'routine_event.dart';
 part 'routine_state.dart';
 
-// String spaceId = '25c96044-fadf-44bb-93c7-3c079e527ce6';
-// String communityId = 'aff21a57-2f91-4e5c-b99b-0182c3ab65a9';
-
 class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
   RoutineBloc() : super(const RoutineState()) {
     on<AddToIfContainer>(_onAddToIfContainer);
@@ -173,45 +170,45 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  Future<void> _onLoadScenes(
+Future<void> _onLoadScenes(
-      LoadScenes event, Emitter<RoutineState> emit) async {
+    LoadScenes event, Emitter<RoutineState> emit) async {
-    emit(state.copyWith(isLoading: true, errorMessage: null));
+  emit(state.copyWith(isLoading: true, errorMessage: null));
-    List<ScenesModel> scenes = [];
+  List<ScenesModel> scenes = [];
-    try {
+  try {
-      BuildContext context = NavigationService.navigatorKey.currentContext!;
+    BuildContext context = NavigationService.navigatorKey.currentContext!;
-      var createRoutineBloc = context.read<CreateRoutineBloc>();
+    var createRoutineBloc = context.read<CreateRoutineBloc>();
-      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+    final projectUuid = await ProjectManager.getProjectUUID() ?? '';
-      if (createRoutineBloc.selectedSpaceId == '' &&
+    if (createRoutineBloc.selectedSpaceId == '' &&
-          createRoutineBloc.selectedCommunityId == '') {
+        createRoutineBloc.selectedCommunityId == '') {
-        var spaceBloc = context.read<SpaceTreeBloc>();
+      var spaceBloc = context.read<SpaceTreeBloc>();
-        for (var communityId in spaceBloc.state.selectedCommunities) {
+      for (var communityId in spaceBloc.state.selectedCommunities) {
-          List<String> spacesList =
+        List<String> spacesList =
-              spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+            spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
-          for (var spaceId in spacesList) {
+        for (var spaceId in spacesList) {
-            scenes.addAll(
+          scenes.addAll(
-                await SceneApi.getScenes(spaceId, communityId, projectUuid));
+              await SceneApi.getScenes(spaceId, communityId, projectUuid));
-          }
         }
-      } else {
-        scenes.addAll(await SceneApi.getScenes(
-            createRoutineBloc.selectedSpaceId,
-            createRoutineBloc.selectedCommunityId,
-            projectUuid));
       }
-
+    } else {
-      emit(state.copyWith(
+      scenes.addAll(await SceneApi.getScenes(
-        scenes: scenes,
+          createRoutineBloc.selectedSpaceId,
-        isLoading: false,
+          createRoutineBloc.selectedCommunityId,
-      ));
+          projectUuid));
-    } catch (e) {
-      emit(state.copyWith(
-          isLoading: false,
-          loadScenesErrorMessage: 'Failed to load scenes',
-          errorMessage: '',
-          loadAutomationErrorMessage: '',
-          scenes: scenes));
     }
+
+    emit(state.copyWith(
+      scenes: scenes,
+      isLoading: false,
+    ));
+  } catch (e) {
+    emit(state.copyWith(
+        isLoading: false,
+        loadScenesErrorMessage: 'Failed to load scenes',
+        errorMessage: '',
+        loadAutomationErrorMessage: '',
+        scenes: scenes));
   }
+} 
 
   Future<void> _onLoadAutomation(
       LoadAutomation event, Emitter<RoutineState> emit) async {
@@ -1163,8 +1160,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
 
       if (result['success']) {
         add(ResetRoutineState());
-        add(LoadAutomation());
+        add(const LoadAutomation());
-        add(LoadScenes());
+        add(const LoadScenes());
       } else {
         emit(state.copyWith(
           isLoading: false,

lib/pages/routines/create_new_routines/commu_dropdown.dart

@@ -1,13 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/routines/create_new_routines/dropdown_menu_content.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'space_tree_dropdown_bloc.dart';
 
-class SpaceTreeDropdown extends StatefulWidget {
+class SpaceTreeDropdown extends StatelessWidget {
   final String? selectedSpaceId;
   final Function(String?)? onChanged;
 
@@ -18,23 +16,33 @@ class SpaceTreeDropdown extends StatefulWidget {
   });
 
   @override
-  State<SpaceTreeDropdown> createState() => _SpaceTreeDropdownState();
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) {
+        final bloc = SpaceTreeDropdownBloc(selectedSpaceId);
+        bloc.add(FetchSpacesEvent());
+        return bloc;
+      },
+      child: _DropdownContent(onChanged: onChanged),
+    );
+  }
 }
 
-class _SpaceTreeDropdownState extends State<SpaceTreeDropdown> {
+class _DropdownContent extends StatefulWidget {
-  late SpaceTreeDropdownBloc _dropdownBloc;
+  final Function(String?)? onChanged;
+
+  const _DropdownContent({this.onChanged});
+
+  @override
+  State<_DropdownContent> createState() => _DropdownContentState();
+}
+
+class _DropdownContentState extends State<_DropdownContent> {
   final LayerLink _layerLink = LayerLink();
   OverlayEntry? _overlayEntry;
 
-  @override
-  void initState() {
-    super.initState();
-    _dropdownBloc = SpaceTreeDropdownBloc(widget.selectedSpaceId);
-  }
-
   @override
   void dispose() {
-    _dropdownBloc.close();
     _removeOverlay();
     super.dispose();
   }
@@ -46,100 +54,120 @@ class _SpaceTreeDropdownState extends State<SpaceTreeDropdown> {
 
   @override
   Widget build(BuildContext context) {
-    return BlocProvider.value(
+    return Column(
-      value: _dropdownBloc,
+      crossAxisAlignment: CrossAxisAlignment.start,
-      child: BlocBuilder<SpaceTreeBloc, SpaceTreeState>(
+      mainAxisAlignment: MainAxisAlignment.start,
-        builder: (context, spaceTreeState) {
+      children: [
-          final communities = spaceTreeState.searchQuery.isNotEmpty
+        Padding(
-              ? spaceTreeState.filteredCommunity
+          padding: const EdgeInsets.symmetric(horizontal: 10),
-              : spaceTreeState.communityList;
+          child: Text(
+            "Community",
+            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                  fontWeight: FontWeight.w400,
+                  fontSize: 13,
+                  color: ColorsManager.blackColor,
+                ),
+          ),
+        ),
+        CompositedTransformTarget(
+          link: _layerLink,
+          child: GestureDetector(
+            onTap: () => _toggleDropdown(context),
+            child: BlocBuilder<SpaceTreeDropdownBloc, SpaceTreeDropdownState>(
+              builder: (context, state) {
+                return _buildDropdownTrigger(state);
+              },
+            ),
+          ),
+        ),
+      ],
+    );
+  }
 
-          return BlocBuilder<SpaceTreeDropdownBloc, SpaceTreeDropdownState>(
+  Widget _buildDropdownTrigger(SpaceTreeDropdownState state) {
-            builder: (context, dropdownState) {
+    if (state.status == SpaceTreeDropdownStatus.loading) {
-              final selectedCommunity = _findCommunity(
+      return Container(
-                communities,
+        height: 46,
-                dropdownState.selectedSpaceId,
+        decoration: BoxDecoration(
-              );
+          border: Border.all(color: Colors.grey.shade300),
+          borderRadius: BorderRadius.circular(12),
+        ),
+        margin: const EdgeInsets.symmetric(horizontal: 10),
+        child: const Center(child: CircularProgressIndicator()),
+      );
+    }
 
-              return Column(
+    if (state.status == SpaceTreeDropdownStatus.failure) {
-                crossAxisAlignment: CrossAxisAlignment.start,
+      return Container(
-                mainAxisAlignment: MainAxisAlignment.start,
+        height: 46,
-                children: [
+        decoration: BoxDecoration(
-                  Padding(
+          border: Border.all(color: Colors.grey.shade300),
-                    padding: const EdgeInsets.symmetric(horizontal: 10),
+          borderRadius: BorderRadius.circular(12),
-                    child: Text(
+        ),
-                      "Community",
+        margin: const EdgeInsets.symmetric(horizontal: 10),
-                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+        child: Center(
-                            fontWeight: FontWeight.w400,
+          child: Text(
-                            fontSize: 13,
+            'Error: ${state.errorMessage}',
-                            color: ColorsManager.blackColor,
+            style: const TextStyle(color: Colors.red),
-                          ),
+          ),
-                    ),
+        ),
-                  ),
+      );
-                  CompositedTransformTarget(
+    }
-                    link: _layerLink,
+
-                    child: GestureDetector(
+    final selectedCommunity = _findCommunity(state, state.selectedSpaceId);
-                      onTap: () => _toggleDropdown(context, communities),
+
-                      child: Container(
+    return Container(
-                        height: 46,
+      height: 46,
-                        decoration: BoxDecoration(
+      decoration: BoxDecoration(
-                          border: Border.all(color: Colors.grey.shade300),
+        border: Border.all(color: Colors.grey.shade300),
-                          borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(12),
-                        ),
+      ),
-                        margin: const EdgeInsets.symmetric(horizontal: 10),
+      margin: const EdgeInsets.symmetric(horizontal: 10),
-                        child: Row(
+      child: Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          children: [
+        children: [
-                            Padding(
+          Padding(
-                              padding:
+            padding: const EdgeInsets.symmetric(horizontal: 10),
-                                  const EdgeInsets.symmetric(horizontal: 10),
+            child: Text(
-                              child: Text(
+              selectedCommunity?.name ?? 'Please Select',
-                                selectedCommunity?.name ?? 'Please Select',
+              style: TextStyle(
-                                style: TextStyle(
+                color: selectedCommunity != null
-                                  color: selectedCommunity != null
+                    ? ColorsManager.blackColor
-                                      ? ColorsManager.blackColor
+                    : ColorsManager.textGray,
-                                      : ColorsManager.textGray,
+                overflow: TextOverflow.ellipsis,
-                                  overflow: TextOverflow.ellipsis,
+                fontWeight: FontWeight.w400,
-                                  fontWeight: FontWeight.w400,
+                fontSize: 13,
-                                  fontSize: 13,
+              ),
-                                ),
+            ),
-                              ),
+          ),
-                            ),
+          Container(
-                            Container(
+            decoration: BoxDecoration(
-                              decoration: BoxDecoration(
+              color: Colors.grey[200],
-                                color: Colors.grey[200],
+              borderRadius: const BorderRadius.only(
-                                borderRadius: const BorderRadius.only(
+                topRight: Radius.circular(10),
-                                  topRight: Radius.circular(10),
+                bottomRight: Radius.circular(10),
-                                  bottomRight: Radius.circular(10),
+              ),
-                                ),
+            ),
-                              ),
+            height: 45,
-                              height: 45,
+            width: 33,
-                              width: 33,
+            child: const Icon(
-                              child: const Icon(
+              Icons.keyboard_arrow_down,
-                                Icons.keyboard_arrow_down,
+              color: ColorsManager.textGray,
-                                color: ColorsManager.textGray,
+            ),
-                              ),
+          ),
-                            ),
+        ],
-                          ],
-                        ),
-                      ),
-                    ),
-                  ),
-                ],
-              );
-            },
-          );
-        },
       ),
     );
   }
 
-  void _toggleDropdown(BuildContext context, List<CommunityModel> communities) {
+  void _toggleDropdown(BuildContext context) {
     if (_overlayEntry != null) {
       _removeOverlay();
       return;
     }
 
+    final bloc = context.read<SpaceTreeDropdownBloc>();
+
     _overlayEntry = OverlayEntry(
       builder: (context) => Positioned(
         width: 300,
@@ -148,18 +176,22 @@ class _SpaceTreeDropdownState extends State<SpaceTreeDropdown> {
           showWhenUnlinked: false,
           offset: const Offset(0, 48),
           child: Material(
+            color: ColorsManager.whiteColors,
             elevation: 8,
             borderRadius: BorderRadius.circular(12),
-            child: DropdownMenuContent(
+            child: BlocProvider.value(
-              selectedSpaceId: _dropdownBloc.state.selectedSpaceId,
+              value: bloc,
-              onChanged: (id) {
+              child: DropdownMenuContent(
-                if (id != null && mounted) {
+                selectedSpaceId: bloc.state.selectedSpaceId,
-                  _dropdownBloc.add(SpaceTreeDropdownSelectEvent(id));
+                onChanged: (id) {
-                  widget.onChanged?.call(id);
+                  if (id != null && mounted) {
-                  _removeOverlay();
+                    bloc.add(SpaceTreeDropdownSelectEvent(id));
-                }
+                    widget.onChanged?.call(id);
-              },
+                    _removeOverlay();
-              onClose: _removeOverlay,
+                  }
+                },
+                onClose: _removeOverlay,
+              ),
             ),
           ),
         ),
@@ -170,10 +202,13 @@ class _SpaceTreeDropdownState extends State<SpaceTreeDropdown> {
   }
 
   CommunityModel? _findCommunity(
-      List<CommunityModel> communities, String? communityId) {
+      SpaceTreeDropdownState state, String? communityId) {
     if (communityId == null) return null;
     try {
-      return communities.firstWhere((c) => c.uuid == communityId);
+      return state.filteredCommunities.firstWhere((c) => c.uuid == communityId);
+    } catch (_) {}
+    try {
+      return state.communities.firstWhere((c) => c.uuid == communityId);
     } catch (e) {
       return null;
     }

lib/pages/routines/create_new_routines/create_new_routines.dart

@@ -23,8 +23,7 @@ class _CreateNewRoutinesDialogState extends State<CreateNewRoutinesDialog> {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-        create: (BuildContext context) =>
+        create: (BuildContext context) => CreateRoutineBloc(),
-            CreateRoutineBloc()..add(const FetchCommunityEvent()),
         child: BlocBuilder<CreateRoutineBloc, CreateRoutineState>(
           builder: (context, state) {
             final _bloc = BlocProvider.of<CreateRoutineBloc>(context);

lib/pages/routines/create_new_routines/dropdown_menu_content.dart

@@ -1,12 +1,7 @@
-
+import 'dart:async';
-
-
-
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'space_tree_dropdown_bloc.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
 
 class DropdownMenuContent extends StatefulWidget {
   final String? selectedSpaceId;
@@ -14,6 +9,7 @@ class DropdownMenuContent extends StatefulWidget {
   final VoidCallback onClose;
 
   const DropdownMenuContent({
+    super.key,
     required this.selectedSpaceId,
     required this.onChanged,
     required this.onClose,
@@ -26,6 +22,7 @@ class DropdownMenuContent extends StatefulWidget {
 class _DropdownMenuContentState extends State<DropdownMenuContent> {
   final ScrollController _scrollController = ScrollController();
   final TextEditingController _searchController = TextEditingController();
+  Timer? _debounceTimer;
 
   @override
   void initState() {
@@ -35,43 +32,49 @@ class _DropdownMenuContentState extends State<DropdownMenuContent> {
 
   @override
   void dispose() {
+    _debounceTimer?.cancel();
     _scrollController.dispose();
     _searchController.dispose();
     super.dispose();
   }
 
   void _onScroll() {
-    final bloc = context.read<SpaceTreeBloc>();
+    final bloc = context.read<SpaceTreeDropdownBloc>();
     final state = bloc.state;
     if (_scrollController.position.pixels >=
         _scrollController.position.maxScrollExtent - 30) {
-      if (state is SpaceTreeState && !state.paginationIsLoading) {
+      if (state.paginationModel?.hasNext == true &&
-        bloc.add(PaginationEvent(state.paginationModel, state.communityList));
+          !state.paginationIsLoading) {
+        bloc.add(PaginationEvent());
       }
     }
   }
 
+  void _handleSearch(String query) {
+    _debounceTimer?.cancel();
+    _debounceTimer = Timer(const Duration(milliseconds: 500), () {
+      context.read<SpaceTreeDropdownBloc>().add(SearchQueryEvent(query));
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return ConstrainedBox(
       constraints: const BoxConstraints(maxHeight: 300),
-      child: BlocBuilder<SpaceTreeBloc, SpaceTreeState>(
+      child: BlocBuilder<SpaceTreeDropdownBloc, SpaceTreeDropdownState>(
         builder: (context, state) {
           final communities = state.searchQuery.isNotEmpty
-              ? state.filteredCommunity
+              ? state.filteredCommunities
-              : state.communityList;
+              : state.communities;
 
           return Column(
             mainAxisSize: MainAxisSize.min,
             children: [
-              // Search bar
               Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: TextFormField(
                   controller: _searchController,
-                  onChanged: (query) {
+                  onChanged: _handleSearch,
-                    context.read<SpaceTreeBloc>().add(SearchQueryEvent(query));
-                  },
                   style: const TextStyle(fontSize: 14, color: Colors.black),
                   decoration: InputDecoration(
                     hintText: 'Search for space...',
@@ -85,7 +88,6 @@ class _DropdownMenuContentState extends State<DropdownMenuContent> {
                   ),
                 ),
               ),
-              // Community list
               Expanded(
                 child: ListView.builder(
                   controller: _scrollController,
@@ -121,19 +123,12 @@ class _DropdownMenuContentState extends State<DropdownMenuContent> {
                         ),
                       ),
                       onTap: () {
-                        setState(() {
+                        context
-                          _searchController.clear();
+                            .read<SpaceTreeDropdownBloc>()
-                          _searchController.text.isEmpty
+                            .add(SearchQueryEvent(''));
-                              ? context
+
-                                  .read<SpaceTreeBloc>()
-                                  .add(SearchQueryEvent(''))
-                              : context.read<SpaceTreeBloc>().add(
-                                  SearchQueryEvent(_searchController.text));
-                        });
-                        // Future.delayed(const Duration(seconds: 1), () {
                         widget.onChanged(community.uuid);
                         widget.onClose();
-                        // });
                       },
                     );
                   },

lib/pages/routines/create_new_routines/space_tree_dropdown_bloc.dart

@@ -1,5 +1,9 @@
+import 'dart:async';
 import 'package:flutter_bloc/flutter_bloc.dart';
-
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:syncrow_web/pages/space_tree/model/pagination_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/services/space_mana_api.dart';
 part 'space_tree_dropdown_event.dart';
 part 'space_tree_dropdown_state.dart';
 
@@ -9,19 +13,158 @@ class SpaceTreeDropdownBloc
       : super(SpaceTreeDropdownState(selectedSpaceId: initialId)) {
     on<SpaceTreeDropdownSelectEvent>(_onSelect);
     on<SpaceTreeDropdownResetEvent>(_onReset);
+    on<FetchSpacesEvent>(_fetchSpaces);
+    on<SearchQueryEvent>(_onSearch);
+    on<PaginationEvent>(_onPagination);
+    on<DebouncedSearchEvent>(_onDebouncedSearch);
   }
+  Timer? _debounceTimer;
 
   void _onSelect(
     SpaceTreeDropdownSelectEvent event,
     Emitter<SpaceTreeDropdownState> emit,
   ) {
-    emit(SpaceTreeDropdownState(selectedSpaceId: event.spaceId));
+    final exists = state.communities.any((c) => c.uuid == event.spaceId);
+
+    if (!exists) {
+      final community = state.filteredCommunities.firstWhere(
+        (c) => c.uuid == event.spaceId,
+        orElse: () => CommunityModel(
+            uuid: event.spaceId!,
+            name: 'Loading...',
+            createdAt: DateTime.now(),
+            updatedAt: DateTime.now(),
+            spaces: [],
+            description: ''),
+      );
+
+      emit(state.copyWith(
+        selectedSpaceId: event.spaceId,
+        communities: [...state.communities, community],
+      ));
+    } else {
+      emit(state.copyWith(selectedSpaceId: event.spaceId));
+    }
   }
 
   void _onReset(
     SpaceTreeDropdownResetEvent event,
     Emitter<SpaceTreeDropdownState> emit,
   ) {
-    emit(SpaceTreeDropdownState(selectedSpaceId: event.initialId));
+    emit(state.copyWith(selectedSpaceId: event.initialId));
   }
-}
+
+  Future<void> _fetchSpaces(
+    FetchSpacesEvent event,
+    Emitter<SpaceTreeDropdownState> emit,
+  ) async {
+    if (state.status != SpaceTreeDropdownStatus.initial) return;
+    emit(state.copyWith(status: SpaceTreeDropdownStatus.loading));
+    try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      final paginationModel = await CommunitySpaceManagementApi()
+          .fetchCommunitiesAndSpaces(projectId: projectUuid, page: 1);
+
+      emit(state.copyWith(
+        status: SpaceTreeDropdownStatus.success,
+        communities: paginationModel.communities,
+        filteredCommunities: paginationModel.communities,
+        paginationModel: paginationModel,
+      ));
+    } catch (e) {
+      emit(state.copyWith(
+        status: SpaceTreeDropdownStatus.failure,
+        errorMessage: 'Error loading communities: $e',
+      ));
+    }
+  }
+
+  void _onSearch(
+    SearchQueryEvent event,
+    Emitter<SpaceTreeDropdownState> emit,
+  ) {
+    _debounceTimer?.cancel();
+    _debounceTimer = Timer(const Duration(seconds: 1), () {
+      add(DebouncedSearchEvent(event.searchQuery));
+    });
+  }
+
+  Future<void> _onDebouncedSearch(
+    DebouncedSearchEvent event,
+    Emitter<SpaceTreeDropdownState> emit,
+  ) async {
+    emit(state.copyWith(isSearching: true));
+
+    try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      final paginationModel =
+          await CommunitySpaceManagementApi().fetchCommunitiesAndSpaces(
+        projectId: projectUuid,
+        page: 1,
+        search: event.searchQuery,
+      );
+
+      emit(state.copyWith(
+        filteredCommunities: paginationModel.communities,
+        isSearching: false,
+        searchQuery: event.searchQuery,
+        paginationModel: paginationModel,
+      ));
+    } catch (e) {
+      emit(state.copyWith(
+        isSearching: false,
+        errorMessage: 'Error searching communities: $e',
+      ));
+    }
+  }
+
+  @override
+  Future<void> close() {
+    _debounceTimer?.cancel();
+    return super.close();
+  }
+
+  Future<void> _onPagination(
+    PaginationEvent event,
+    Emitter<SpaceTreeDropdownState> emit,
+  ) async {
+    if (state.paginationIsLoading || state.paginationModel?.hasNext != true) {
+      return;
+    }
+
+    emit(state.copyWith(paginationIsLoading: true));
+
+    try {
+      final nextPage = state.paginationModel!.pageNum;
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      final newPagination = await CommunitySpaceManagementApi()
+          .fetchCommunitiesAndSpaces(projectId: projectUuid, page: nextPage);
+
+      final combinedCommunities = [
+        ...state.communities,
+        ...newPagination.communities
+      ];
+      List<CommunityModel> filteredCommunities;
+      if (state.searchQuery.isNotEmpty) {
+        final query = state.searchQuery.toLowerCase();
+        filteredCommunities = combinedCommunities.where((community) {
+          return community.name.toLowerCase().contains(query);
+        }).toList();
+      } else {
+        filteredCommunities = combinedCommunities;
+      }
+
+      emit(state.copyWith(
+        communities: combinedCommunities,
+        filteredCommunities: filteredCommunities,
+        paginationModel: newPagination,
+        paginationIsLoading: false,
+      ));
+    } catch (e) {
+      emit(state.copyWith(
+        paginationIsLoading: false,
+        errorMessage: 'Error loading more communities: $e',
+      ));
+    }
+  }
+}

lib/pages/routines/create_new_routines/space_tree_dropdown_event.dart

@@ -12,4 +12,20 @@ class SpaceTreeDropdownResetEvent extends SpaceTreeDropdownEvent {
   final String? initialId;
 
   SpaceTreeDropdownResetEvent(this.initialId);
-}
+}
+
+class FetchSpacesEvent extends SpaceTreeDropdownEvent {}
+
+class SearchQueryEvent extends SpaceTreeDropdownEvent {
+  final String searchQuery;
+
+  SearchQueryEvent(this.searchQuery);
+}
+
+class DebouncedSearchEvent extends SpaceTreeDropdownEvent {
+  final String searchQuery;
+
+  DebouncedSearchEvent(this.searchQuery);
+}
+
+class PaginationEvent extends SpaceTreeDropdownEvent {}

lib/pages/routines/create_new_routines/space_tree_dropdown_state.dart

@@ -1,7 +1,51 @@
 part of 'space_tree_dropdown_bloc.dart';
 
+enum SpaceTreeDropdownStatus { initial, loading, success, failure }
+
 class SpaceTreeDropdownState {
   final String? selectedSpaceId;
+  final List<CommunityModel> communities;
+  final List<CommunityModel> filteredCommunities;
+  final SpaceTreeDropdownStatus status;
+  final String? errorMessage;
+  final String searchQuery;
+  final bool paginationIsLoading;
+  final PaginationModel? paginationModel;
+  final bool isSearching;
 
-  SpaceTreeDropdownState({this.selectedSpaceId});
+  SpaceTreeDropdownState({
+    this.selectedSpaceId,
+    this.communities = const [],
+    this.filteredCommunities = const [],
+    this.status = SpaceTreeDropdownStatus.initial,
+    this.errorMessage,
+    this.searchQuery = '',
+    this.paginationIsLoading = false,
+    this.paginationModel,
+    this.isSearching = false,
+  });
+
+  SpaceTreeDropdownState copyWith({
+    String? selectedSpaceId,
+    List<CommunityModel>? communities,
+    List<CommunityModel>? filteredCommunities,
+    SpaceTreeDropdownStatus? status,
+    String? errorMessage,
+    String? searchQuery,
+    bool? paginationIsLoading,
+    PaginationModel? paginationModel,
+    bool? isSearching,
+  }) {
+    return SpaceTreeDropdownState(
+      selectedSpaceId: selectedSpaceId ?? this.selectedSpaceId,
+      communities: communities ?? this.communities,
+      filteredCommunities: filteredCommunities ?? this.filteredCommunities,
+      status: status ?? this.status,
+      errorMessage: errorMessage ?? this.errorMessage,
+      searchQuery: searchQuery ?? this.searchQuery,
+      paginationIsLoading: paginationIsLoading ?? this.paginationIsLoading,
+      paginationModel: paginationModel ?? this.paginationModel,
+      isSearching: isSearching ?? this.isSearching,
+    );
+  }
 }

lib/pages/routines/helper/dialog_helper/device_dialog_helper.dart

@@ -118,6 +118,7 @@ class DeviceDialogHelper {
           uniqueCustomId: data['uniqueCustomId'],
           deviceSelectedFunctions: deviceSelectedFunctions,
           device: data['device'],
+          dialogType: dialogType,
         );
       case 'NCPS':
         return FlushPresenceSensor.showFlushFunctionsDialog(

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

@@ -65,7 +65,9 @@ class ACHelper {
                   child: Column(
                     mainAxisSize: MainAxisSize.min,
                     children: [
-                      const DialogHeader('AC Functions'),
+                      DialogHeader(dialogType == 'THEN'
+                          ? 'AC Functions'
+                          : 'AC Conditions'),
                       Expanded(
                         child: Row(
                           crossAxisAlignment: CrossAxisAlignment.stretch,

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

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

lib/pages/routines/widgets/routine_dialogs/gateway/gateway_dialog.dart

@@ -16,9 +16,10 @@ class GatewayDialog extends StatefulWidget {
     required this.functions,
     required this.deviceSelectedFunctions,
     required this.device,
+    required this.dialogType,
     super.key,
   });
-
+  final String dialogType;
   final String? uniqueCustomId;
   final List<DeviceFunction> functions;
   final List<DeviceFunctionData> deviceSelectedFunctions;
@@ -55,7 +56,9 @@ class _GatewayDialogState extends State<GatewayDialog> {
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                const DialogHeader('Gateway Conditions'),
+                DialogHeader(widget.dialogType == 'THEN'
+                    ? 'Gateway Functions'
+                    : 'Gateway Conditions'),
                 Expanded(child: _buildMainContent(context, state)),
                 _buildDialogFooter(context, state),
               ],

lib/pages/routines/widgets/routine_dialogs/gateway/gateway_helper.dart

@@ -14,6 +14,7 @@ abstract final class GatewayHelper {
     required String? uniqueCustomId,
     required List<DeviceFunctionData> deviceSelectedFunctions,
     required AllDevicesModel? device,
+    required String dialogType,
   }) async {
     return showDialog(
       context: context,
@@ -27,6 +28,7 @@ abstract final class GatewayHelper {
           functions: functions,
           deviceSelectedFunctions: deviceSelectedFunctions,
           device: device,
+          dialogType:dialogType,
         ),
       ),
     );

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

@@ -59,7 +59,9 @@ class OneGangSwitchHelper {
                     child: Column(
                       mainAxisSize: MainAxisSize.min,
                       children: [
-                        const DialogHeader('1 Gang Light Switch Condition'),
+                        DialogHeader(dialogType == 'THEN'
+                            ? '1 Gang Light Switch Functions'
+                            : '1 Gang Light Switch Condition'),
                         Expanded(
                           child: Row(
                             children: [
@@ -246,9 +248,9 @@ class OneGangSwitchHelper {
       withSpecialChar: false,
       currentCondition: selectedFunctionData?.condition,
       dialogType: dialogType,
-      sliderRange: (0, 43200), 
+      sliderRange: (0, 43200),
       displayedValue: (initialValue ?? 0).toString(),
-      initialValue: (initialValue ?? 0).toString(), 
+      initialValue: (initialValue ?? 0).toString(),
       onConditionChanged: (condition) {
         context.read<FunctionBloc>().add(
               AddFunction(

lib/pages/routines/widgets/routine_dialogs/power_clamp_enargy/energy_clamp_dialog.dart

@@ -98,7 +98,9 @@ class _EnergyClampDialogState extends State<EnergyClampDialog> {
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                const DialogHeader('Energy Clamp Conditions'),
+                DialogHeader(widget.dialogType == 'THEN'
+                    ? 'Energy Clamp Functions'
+                    : 'Energy Clamp Conditions'),
                 Expanded(
                     child: Visibility(
                   visible: _functions.isNotEmpty,

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

@@ -58,7 +58,9 @@ class ThreeGangSwitchHelper {
                     child: Column(
                       mainAxisSize: MainAxisSize.min,
                       children: [
-                        const DialogHeader('3 Gangs Light Switch Condition'),
+                        DialogHeader(dialogType == 'THEN'
+                            ? '3 Gangs Light Switch Functions'
+                            : '3 Gangs Light Switch Condition'),
                         Expanded(
                           child: Row(
                             children: [

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

@@ -59,7 +59,9 @@ class TwoGangSwitchHelper {
                     child: Column(
                       mainAxisSize: MainAxisSize.min,
                       children: [
-                        const DialogHeader('2 Gangs Light Switch Condition'),
+                        DialogHeader(dialogType == 'THEN'
+                            ? '2 Gangs Light Switch Functions'
+                            : '2 Gangs Light Switch Condition'),
                         Expanded(
                           child: Row(
                             children: [

lib/pages/routines/widgets/routine_dialogs/wall_sensor/wall_presence_sensor.dart

@@ -63,7 +63,8 @@ class _WallPresenceSensorState extends State<WallPresenceSensor> {
   @override
   void initState() {
     super.initState();
-    _wpsFunctions = widget.functions.whereType<WpsFunctions>().where((function) {
+    _wpsFunctions =
+        widget.functions.whereType<WpsFunctions>().where((function) {
       if (widget.dialogType == 'THEN') {
         return function.type == 'THEN' || function.type == 'BOTH';
       }
@@ -97,7 +98,9 @@ class _WallPresenceSensorState extends State<WallPresenceSensor> {
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                const DialogHeader('Presence Sensor Condition'),
+                DialogHeader(widget.dialogType == 'THEN'
+                    ? 'Presence Sensor Functions'
+                    : 'Presence Sensor Condition'),
                 Expanded(child: _buildMainContent(context, state)),
                 _buildDialogFooter(context, state),
               ],

lib/pages/routines/widgets/routine_dialogs/water_heater/water_heater_presence_sensor.dart

@@ -93,7 +93,9 @@ class _WaterHeaterDialogRoutinesState extends State<WaterHeaterDialogRoutines> {
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                const DialogHeader('Water Heater Condition'),
+                DialogHeader(widget.dialogType == 'THEN'
+                    ? 'Water Heater Funtions'
+                    : 'Water Heater Condition'),
                 Expanded(child: _buildMainContent(context, state)),
                 _buildDialogFooter(context, state),
               ],

lib/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart

@@ -0,0 +1,43 @@
+import 'package:equatable/equatable.dart';
+
+class PaginatedDataModel<T> extends Equatable {
+  const PaginatedDataModel({
+    required this.data,
+    required this.page,
+    required this.size,
+    required this.hasNext,
+    required this.totalItems,
+    required this.totalPages,
+  });
+
+  final List<T> data;
+  final int page;
+  final int size;
+  final bool hasNext;
+  final int totalItems;
+  final int totalPages;
+
+  factory PaginatedDataModel.fromJson(
+    Map<String, dynamic> json,
+    List<T> Function(List<dynamic>) fromJsonList,
+  ) {
+    return PaginatedDataModel<T>(
+      data: fromJsonList(json['data'] as List<dynamic>),
+      page: json['page'] as int? ?? 1,
+      size: json['size'] as int? ?? 25,
+      hasNext: json['hasNext'] as bool? ?? false,
+      totalItems: json['totalItem'] as int? ?? 0,
+      totalPages: json['totalPage'] as int? ?? 0,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+        data,
+        page,
+        size,
+        hasNext,
+        totalItems,
+        totalPages,
+      ];
+}

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

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_management_body.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/data/services/debounced_communities_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/data/services/remote_communities_service.dart';
+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/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 {
+  const SpaceManagementPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(
+          create: (context) => CommunitiesBloc(
+            communitiesService: DebouncedCommunitiesService(
+              RemoteCommunitiesService(HTTPService()),
+            ),
+          )..add(const LoadCommunities(LoadCommunitiesParam())),
+        ),
+        BlocProvider(create: (context) => CommunitiesTreeSelectionBloc()),
+      ],
+      child: WebScaffold(
+        appBarTitle: Text(
+          'Space Management',
+          style: ResponsiveTextTheme.of(context).deviceManagementTitle,
+        ),
+        enableMenuSidebar: false,
+        centerBody: Text(
+          'Community Structure',
+          style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                fontWeight: FontWeight.bold,
+              ),
+        ),
+        rightBody: const NavigateHomeGridView(),
+        scaffoldBody: const SpaceManagementBody(),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree.dart';
+
+class SpaceManagementBody extends StatelessWidget {
+  const SpaceManagementBody({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Row(
+      children: [
+        SpaceManagementCommunitiesTree(),
+      ],
+    );
+  }
+}

lib/pages/space_management_v2/modules/communities/data/services/debounced_communities_service.dart

@@ -0,0 +1,42 @@
+import 'dart:async';
+
+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/domain/services/communities_service.dart';
+
+final class DebouncedCommunitiesService implements CommunitiesService {
+  DebouncedCommunitiesService(
+    this._decoratee, {
+    this.debounceDuration = const Duration(milliseconds: 500),
+  });
+
+  final CommunitiesService _decoratee;
+  final Duration debounceDuration;
+
+  Timer? _debounceTimer;
+  late Completer<CommunitiesPaginationModel>? _completer;
+
+  @override
+  Future<CommunitiesPaginationModel> getCommunity(
+    LoadCommunitiesParam param,
+  ) async {
+    _debounceTimer?.cancel();
+
+    _completer = Completer<CommunitiesPaginationModel>();
+    final currentCompleter = _completer!;
+
+    _debounceTimer = Timer(debounceDuration, () async {
+      try {
+        final result = await _decoratee.getCommunity(param);
+        if (!currentCompleter.isCompleted) {
+          currentCompleter.complete(result);
+        }
+      } catch (error) {
+        if (!currentCompleter.isCompleted) {
+          currentCompleter.completeError(error);
+        }
+      }
+    });
+
+    return currentCompleter.future;
+  }
+}

lib/pages/space_management_v2/modules/communities/data/services/remote_communities_service.dart

@@ -0,0 +1,57 @@
+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/communities/domain/params/load_communities_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/services/communities_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 RemoteCommunitiesService implements CommunitiesService {
+  const RemoteCommunitiesService(this._httpService);
+
+  final HTTPService _httpService;
+
+  static const _defaultErrorMessage = 'Failed to load communities';
+
+  @override
+  Future<CommunitiesPaginationModel> getCommunity(
+    LoadCommunitiesParam param,
+  ) async {
+    try {
+      final response = await _httpService.get(
+        path: await _makeUrl(),
+        queryParameters: {
+          'page': param.page,
+          'size': param.size,
+          'includeSpaces': param.includeSpaces,
+          if (param.search.isNotEmpty && param.search != 'null')
+            'search': param.search,
+        },
+        expectedResponseModel: (json) => CommunitiesPaginationModel.fromJson(
+          json as Map<String, dynamic>,
+          CommunityModel.fromJsonList,
+        ),
+      );
+
+      return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      throw APIException(errorMessage);
+    } catch (e) {
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
+    }
+  }
+
+  Future<String> _makeUrl() async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null) throw APIException('Project UUID is required');
+    return ApiEndpoints.getCommunityListv2.replaceAll(
+      '{projectId}',
+      projectUuid,
+    );
+  }
+}

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

@@ -0,0 +1,44 @@
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+
+class CommunityModel extends Equatable {
+  final String uuid;
+  final String name;
+  final DateTime createdAt;
+  final DateTime updatedAt;
+  final String description;
+  final String externalId;
+  final List<SpaceModel> spaces;
+
+  const CommunityModel({
+    required this.uuid,
+    required this.name,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.description,
+    required this.externalId,
+    required this.spaces,
+  });
+
+  factory CommunityModel.fromJson(Map<String, dynamic> json) {
+    return CommunityModel(
+      uuid: json['uuid'] as String,
+      name: json['name'] as String,
+      createdAt: DateTime.parse(json['createdAt'] as String),
+      updatedAt: DateTime.parse(json['updatedAt'] as String),
+      description: json['description'] as String,
+      externalId: json['externalId']?.toString() ?? '',
+      spaces: (json['spaces'] as List<dynamic>? ?? <dynamic>[])
+          .map((e) => SpaceModel.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+  static List<CommunityModel> fromJsonList(List<dynamic> json) {
+    return json
+        .map((e) => CommunityModel.fromJson(e as Map<String, dynamic>))
+        .toList();
+  }
+
+  @override
+  List<Object?> get props => [uuid, name, spaces];
+}

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

@@ -0,0 +1,41 @@
+import 'package:equatable/equatable.dart';
+
+class SpaceModel extends Equatable {
+  final String uuid;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+  final String spaceName;
+  final String icon;
+  final List<SpaceModel> children;
+  final SpaceModel? parent;
+
+  const SpaceModel({
+    required this.uuid,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.spaceName,
+    required this.icon,
+    required this.children,
+    required this.parent,
+  });
+
+  factory SpaceModel.fromJson(Map<String, dynamic> json) {
+    return SpaceModel(
+      uuid: json['uuid'] as String? ?? '',
+      createdAt: DateTime.tryParse(json['createdAt'] as String? ?? ''),
+      updatedAt: DateTime.tryParse(json['updatedAt'] as String? ?? ''),
+      spaceName: json['spaceName'] as String? ?? '',
+      icon: json['icon'] as String? ?? 'assets/icons/location_icon.svg',
+      children: (json['children'] as List<dynamic>?)
+              ?.map((e) => SpaceModel.fromJson(e as Map<String, dynamic>))
+              .toList() ??
+          [],
+      parent: json['parent'] != null
+          ? SpaceModel.fromJson(json['parent'] as Map<String, dynamic>)
+          : null,
+    );
+  }
+
+  @override
+  List<Object?> get props => [uuid, spaceName, icon, children];
+}

lib/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart

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

lib/pages/space_management_v2/modules/communities/domain/services/communities_service.dart

@@ -0,0 +1,9 @@
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.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/params/load_communities_param.dart';
+
+typedef CommunitiesPaginationModel = PaginatedDataModel<CommunityModel>;
+
+abstract class CommunitiesService {
+  Future<CommunitiesPaginationModel> getCommunity(LoadCommunitiesParam param);
+}

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

@@ -0,0 +1,117 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/services/communities_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+
+part 'communities_event.dart';
+part 'communities_state.dart';
+
+class CommunitiesBloc extends Bloc<CommunitiesEvent, CommunitiesState> {
+  CommunitiesBloc({
+    required CommunitiesService communitiesService,
+  })  : _communitiesService = communitiesService,
+        super(const CommunitiesState()) {
+    on<LoadCommunities>(_onLoadCommunities);
+    on<LoadMoreCommunities>(_onLoadMoreCommunities);
+    on<InsertCommunity>(_onInsertCommunity);
+  }
+
+  final CommunitiesService _communitiesService;
+
+  Future<void> _onLoadCommunities(
+    LoadCommunities event,
+    Emitter<CommunitiesState> emit,
+  ) async {
+    try {
+      emit(
+        state.copyWith(status: CommunitiesStatus.loading),
+      );
+
+      final paginationResponse = await _communitiesService.getCommunity(
+        event.param,
+      );
+
+      emit(
+        CommunitiesState(
+          status: CommunitiesStatus.success,
+          communities: paginationResponse.data,
+          hasNext: paginationResponse.hasNext,
+          currentPage: paginationResponse.page,
+          searchQuery: event.param.search,
+          isLoadingMore: false,
+        ),
+      );
+    } on APIException catch (e) {
+      _onApiException(e, emit);
+    } catch (e) {
+      _onError(e, emit);
+    }
+  }
+
+  Future<void> _onLoadMoreCommunities(
+    LoadMoreCommunities event,
+    Emitter<CommunitiesState> emit,
+  ) async {
+    if (!state.hasNext || state.isLoadingMore) return;
+
+    try {
+      emit(state.copyWith(isLoadingMore: true));
+
+      final param = LoadCommunitiesParam(
+        page: state.currentPage + 1,
+        search: state.searchQuery,
+      );
+
+      final paginationResponse = await _communitiesService.getCommunity(param);
+
+      final updatedCommunities = List<CommunityModel>.from(state.communities)
+        ..addAll(paginationResponse.data);
+
+      emit(
+        state.copyWith(
+          status: CommunitiesStatus.success,
+          communities: updatedCommunities,
+          hasNext: paginationResponse.hasNext,
+          currentPage: paginationResponse.page,
+          isLoadingMore: false,
+        ),
+      );
+    } on APIException catch (e) {
+      _onApiException(e, emit);
+    } catch (e) {
+      _onError(e, emit);
+    }
+  }
+
+  void _onApiException(
+    APIException e,
+    Emitter<CommunitiesState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        status: CommunitiesStatus.failure,
+        isLoadingMore: false,
+        errorMessage: e.message,
+      ),
+    );
+  }
+
+  void _onError(Object e, Emitter<CommunitiesState> emit) {
+    emit(
+      state.copyWith(
+        status: CommunitiesStatus.failure,
+        isLoadingMore: false,
+        errorMessage: e.toString(),
+      ),
+    );
+  }
+
+  void _onInsertCommunity(
+    InsertCommunity event,
+    Emitter<CommunitiesState> emit,
+  ) {
+    emit(state.copyWith(communities: [event.community, ...state.communities]));
+  }
+}

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

@@ -0,0 +1,33 @@
+part of 'communities_bloc.dart';
+
+sealed class CommunitiesEvent extends Equatable {
+  const CommunitiesEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class LoadCommunities extends CommunitiesEvent {
+  const LoadCommunities(this.param);
+
+  final LoadCommunitiesParam param;
+
+  @override
+  List<Object?> get props => [param];
+}
+
+class LoadMoreCommunities extends CommunitiesEvent {
+  const LoadMoreCommunities();
+
+  @override
+  List<Object?> get props => [];
+}
+
+final class InsertCommunity extends CommunitiesEvent {
+  const InsertCommunity(this.community);
+
+  final CommunityModel community;
+
+  @override
+  List<Object?> get props => [community];
+}

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

@@ -0,0 +1,54 @@
+part of 'communities_bloc.dart';
+
+enum CommunitiesStatus { initial, loading, success, failure }
+
+final class CommunitiesState extends Equatable {
+  const CommunitiesState({
+    this.status = CommunitiesStatus.initial,
+    this.communities = const [],
+    this.errorMessage,
+    this.isLoadingMore = false,
+    this.hasNext = false,
+    this.currentPage = 1,
+    this.searchQuery = '',
+  });
+
+  final CommunitiesStatus status;
+  final List<CommunityModel> communities;
+  final String? errorMessage;
+  final bool isLoadingMore;
+  final bool hasNext;
+  final int currentPage;
+  final String searchQuery;
+
+  CommunitiesState copyWith({
+    CommunitiesStatus? status,
+    List<CommunityModel>? communities,
+    String? errorMessage,
+    bool? isLoadingMore,
+    bool? hasNext,
+    int? currentPage,
+    String? searchQuery,
+  }) {
+    return CommunitiesState(
+      status: status ?? this.status,
+      communities: communities ?? this.communities,
+      errorMessage: errorMessage ?? this.errorMessage,
+      isLoadingMore: isLoadingMore ?? this.isLoadingMore,
+      hasNext: hasNext ?? this.hasNext,
+      currentPage: currentPage ?? this.currentPage,
+      searchQuery: searchQuery ?? this.searchQuery,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+        status,
+        communities,
+        errorMessage,
+        isLoadingMore,
+        hasNext,
+        currentPage,
+        searchQuery,
+      ];
+}

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

@@ -0,0 +1,47 @@
+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';
+
+part 'communities_tree_selection_event.dart';
+part 'communities_tree_selection_state.dart';
+
+class CommunitiesTreeSelectionBloc
+    extends Bloc<CommunitiesTreeSelectionEvent, CommunitiesTreeSelectionState> {
+  CommunitiesTreeSelectionBloc() : super(const CommunitiesTreeSelectionState()) {
+    on<SelectCommunityEvent>(_onSelectCommunity);
+    on<SelectSpaceEvent>(_onSelectSpace);
+    on<ClearCommunitiesTreeSelectionEvent>(_onClearSelection);
+  }
+
+  void _onSelectCommunity(
+    SelectCommunityEvent event,
+    Emitter<CommunitiesTreeSelectionState> emit,
+  ) {
+    emit(
+      CommunitiesTreeSelectionState(
+        selectedCommunity: event.community,
+        selectedSpace: null,
+      ),
+    );
+  }
+
+  void _onSelectSpace(
+    SelectSpaceEvent event,
+    Emitter<CommunitiesTreeSelectionState> emit,
+  ) {
+    emit(
+      CommunitiesTreeSelectionState(
+        selectedCommunity: null,
+        selectedSpace: event.space,
+      ),
+    );
+  }
+
+  void _onClearSelection(
+    ClearCommunitiesTreeSelectionEvent event,
+    Emitter<CommunitiesTreeSelectionState> emit,
+  ) {
+    emit(const CommunitiesTreeSelectionState());
+  }
+}

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

@@ -0,0 +1,30 @@
+part of 'communities_tree_selection_bloc.dart';
+
+sealed class CommunitiesTreeSelectionEvent extends Equatable {
+  const CommunitiesTreeSelectionEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+final class SelectCommunityEvent extends CommunitiesTreeSelectionEvent {
+  final CommunityModel? community;
+
+  const SelectCommunityEvent({required this.community});
+  @override
+  List<Object?> get props => [community];
+}
+
+final class SelectSpaceEvent extends CommunitiesTreeSelectionEvent {
+  final SpaceModel? space;
+
+  const SelectSpaceEvent({required this.space});
+
+  @override
+  List<Object?> get props => [space];
+}
+
+final class ClearCommunitiesTreeSelectionEvent
+    extends CommunitiesTreeSelectionEvent {
+  const ClearCommunitiesTreeSelectionEvent();
+}

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

@@ -0,0 +1,29 @@
+part of 'communities_tree_selection_bloc.dart';
+
+final class CommunitiesTreeSelectionState extends Equatable {
+  const CommunitiesTreeSelectionState({
+    this.selectedCommunity,
+    this.selectedSpace,
+  });
+
+  final CommunityModel? selectedCommunity;
+  final SpaceModel? selectedSpace;
+
+  CommunitiesTreeSelectionState copyWith({
+    CommunityModel? selectedCommunity,
+    SpaceModel? selectedSpace,
+    List<CommunityModel>? expandedCommunities,
+    List<SpaceModel>? expandedSpaces,
+  }) {
+    return CommunitiesTreeSelectionState(
+      selectedCommunity: selectedCommunity ?? this.selectedCommunity,
+      selectedSpace: selectedSpace ?? this.selectedSpace,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+        selectedCommunity,
+        selectedSpace,
+      ];
+  }

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

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+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';
+
+class CommunitiesTreeFailureWidget extends StatelessWidget {
+  const CommunitiesTreeFailureWidget({super.key, this.errorMessage});
+
+  final String? errorMessage;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              errorMessage ?? 'Something went wrong',
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: () => context.read<CommunitiesBloc>().add(
+                    LoadCommunities(
+                      LoadCommunitiesParam(
+                        search: context.read<CommunitiesBloc>().state.searchQuery,
+                      ),
+                    ),
+                  ),
+              child: const Text('Retry'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/common/widgets/custom_expansion_tile.dart';
+
+class CommunityTile extends StatelessWidget {
+  final String title;
+  final List<Widget>? children;
+  final bool isExpanded;
+  final bool isSelected;
+  final void Function(String, bool isExpanded) onExpansionChanged;
+  final void Function() onItemSelected;
+
+  const CommunityTile({
+    super.key,
+    required this.title,
+    required this.isExpanded,
+    required this.onExpansionChanged,
+    required this.onItemSelected,
+    required this.isSelected,
+    this.children,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: CustomExpansionTile(
+          title: title,
+          initiallyExpanded: isExpanded,
+          isSelected: isSelected,
+          onExpansionChanged: (bool expanded) {
+            onExpansionChanged(title, expanded);
+          },
+          onItemSelected: onItemSelected,
+          children: children ?? [],
+        ));
+  }
+}

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

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class EmptyCommunitiesTreeSearchResultWidget extends StatelessWidget {
+  const EmptyCommunitiesTreeSearchResultWidget({
+    required this.searchQuery,
+    super.key,
+  });
+
+  final String searchQuery;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text(
+        searchQuery.isEmpty
+            ? 'No communities found'
+            : 'No communities found for "$searchQuery"',
+        textAlign: TextAlign.center,
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,112 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/common/widgets/app_loading_indicator.dart';
+import 'package:syncrow_web/common/widgets/search_bar.dart';
+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/widgets/communities_tree_failure_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/empty_communities_tree_search_result_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree_community_tile.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_communities_list.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_header.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class SpaceManagementCommunitiesTree extends StatefulWidget {
+  const SpaceManagementCommunitiesTree({super.key});
+
+  @override
+  State<SpaceManagementCommunitiesTree> createState() =>
+      _SpaceManagementCommunitiesTreeState();
+}
+
+class _SpaceManagementCommunitiesTreeState
+    extends State<SpaceManagementCommunitiesTree> {
+  @override
+  void initState() {
+    context.read<CommunitiesBloc>().add(
+          const LoadCommunities(LoadCommunitiesParam()),
+        );
+    super.initState();
+  }
+
+  void _onSearchChanged(String searchQuery) {
+    context
+        .read<CommunitiesBloc>()
+        .add(LoadCommunities(LoadCommunitiesParam(search: searchQuery.trim())));
+  }
+
+  void _onLoadMore() {
+    context.read<CommunitiesBloc>().add(const LoadMoreCommunities());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<CommunitiesBloc, CommunitiesState>(
+      builder: (context, state) => Container(
+        width: 320,
+        decoration: subSectionContainerDecoration,
+        child: Column(
+          children: [
+            const SpaceManagementSidebarHeader(),
+            CustomSearchBar(
+              onSearchChanged: _onSearchChanged,
+            ),
+            const SizedBox(height: 16),
+            switch (state.status) {
+              CommunitiesStatus.initial => const AppLoadingIndicator(),
+              CommunitiesStatus.loading => state.communities.isEmpty
+                  ? const AppLoadingIndicator()
+                  : _buildCommunitiesTree(context, state),
+              CommunitiesStatus.success => _buildCommunitiesTree(context, state),
+              CommunitiesStatus.failure => CommunitiesTreeFailureWidget(
+                  errorMessage: state.errorMessage,
+                ),
+            },
+            Visibility(
+              visible: state.isLoadingMore,
+              child: const AppLoadingIndicator(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildCommunitiesTree(
+    BuildContext context,
+    CommunitiesState state,
+  ) {
+    final communitiesIsEmpty = state.communities.isEmpty;
+    final statusIsSuccess = state.status == CommunitiesStatus.success;
+
+    return Expanded(
+      child: Visibility(
+        visible: statusIsSuccess && communitiesIsEmpty,
+        replacement: Stack(
+          children: [
+            SpaceManagementSidebarCommunitiesList(
+              communities: state.communities,
+              onLoadMore: state.hasNext ? _onLoadMore : null,
+              isLoadingMore: state.isLoadingMore,
+              hasNext: state.hasNext,
+              itemBuilder: (context, index) {
+                return SpaceManagementCommunitiesTreeCommunityTile(
+                  community: state.communities[index],
+                );
+              },
+            ),
+            if (state.status == CommunitiesStatus.loading &&
+                state.communities.isNotEmpty)
+              ColoredBox(
+                color: Colors.white.withValues(alpha: 0.7),
+                child: const AppLoadingIndicator(),
+              ),
+          ],
+        ),
+        child: EmptyCommunitiesTreeSearchResultWidget(
+          searchQuery: state.searchQuery,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,45 @@
+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/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/community_tile.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree_space_tile.dart';
+
+class SpaceManagementCommunitiesTreeCommunityTile extends StatelessWidget {
+  const SpaceManagementCommunitiesTreeCommunityTile({
+    required this.community,
+    super.key,
+  });
+
+  final CommunityModel community;
+
+  @override
+  Widget build(BuildContext context) {
+    final spaces = community.spaces
+        .map(
+          (space) => SpaceManagementCommunitiesTreeSpaceTile(
+            space: space,
+            community: community,
+          ),
+        )
+        .toList();
+    return CommunityTile(
+      title: community.name,
+      key: ValueKey(community.uuid),
+      isSelected: context
+              .watch<CommunitiesTreeSelectionBloc>()
+              .state
+              .selectedCommunity
+              ?.uuid ==
+          community.uuid,
+      isExpanded: false,
+      onItemSelected: () {
+        context.read<CommunitiesTreeSelectionBloc>().add(
+              SelectCommunityEvent(community: community),
+            );
+      },
+      onExpansionChanged: (title, expanded) {},
+      children: spaces,
+    );
+  }
+}

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

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_tile.dart';
+
+class SpaceManagementCommunitiesTreeSpaceTile extends StatelessWidget {
+  const SpaceManagementCommunitiesTreeSpaceTile({
+    required this.space,
+    required this.community,
+    super.key,
+  });
+
+  final SpaceModel space;
+  final CommunityModel community;
+
+  @override
+  Widget build(BuildContext context) {
+    final spaceIsExpanded = _isSpaceOrChildSelected(context, space);
+    final isSelected =
+        context.watch<CommunitiesTreeSelectionBloc>().state.selectedSpace?.uuid ==
+            space.uuid;
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(start: 16.0),
+      child: SpaceTile(
+        title: space.spaceName,
+        key: ValueKey(space.uuid),
+        isSelected: isSelected,
+        initiallyExpanded: spaceIsExpanded,
+        onExpansionChanged: (expanded) {},
+        onItemSelected: () => context.read<CommunitiesTreeSelectionBloc>().add(
+              SelectSpaceEvent(space: space),
+            ),
+        children: space.children
+            .map(
+              (childSpace) => SpaceManagementCommunitiesTreeSpaceTile(
+                space: childSpace,
+                community: community,
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+
+  bool _isSpaceOrChildSelected(BuildContext context, SpaceModel space) {
+    final selectedSpace =
+        context.read<CommunitiesTreeSelectionBloc>().state.selectedSpace;
+    final isSpaceSelected = selectedSpace?.uuid == space.uuid;
+    final anySubSpaceIsSelected = space.children.any(
+      (child) => _isSpaceOrChildSelected(context, child),
+    );
+    return isSpaceSelected || anySubSpaceIsSelected;
+  }
+}

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

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class SpaceManagementSidebarAddCommunityButton extends StatelessWidget {
+  const SpaceManagementSidebarAddCommunityButton({
+    required this.onTap,
+    super.key,
+  });
+
+  final void Function() onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox.square(
+      dimension: 30,
+      child: IconButton(
+        style: IconButton.styleFrom(
+          iconSize: 20,
+          backgroundColor: ColorsManager.circleImageBackground,
+          shape: const CircleBorder(
+            side: BorderSide(
+              color: ColorsManager.lightGrayBorderColor,
+              width: 3,
+            ),
+          ),
+        ),
+        onPressed: onTap,
+        icon: SvgPicture.asset(Assets.addIcon),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SpaceManagementSidebarCommunitiesList extends StatefulWidget {
+  const SpaceManagementSidebarCommunitiesList({
+    required this.communities,
+    required this.itemBuilder,
+    this.onLoadMore,
+    this.isLoadingMore = false,
+    this.hasNext = false,
+    super.key,
+  });
+
+  final List<CommunityModel> communities;
+  final Widget Function(BuildContext context, int index) itemBuilder;
+  final VoidCallback? onLoadMore;
+  final bool isLoadingMore;
+  final bool hasNext;
+
+  @override
+  State<SpaceManagementSidebarCommunitiesList> createState() =>
+      _SpaceManagementSidebarCommunitiesListState();
+}
+
+class _SpaceManagementSidebarCommunitiesListState
+    extends State<SpaceManagementSidebarCommunitiesList> {
+  late final ScrollController _scrollController;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController = ScrollController();
+    _scrollController.addListener(_onScroll);
+  }
+
+  void _onScroll() {
+    if (_scrollController.position.pixels >=
+        _scrollController.position.maxScrollExtent - 100) {
+      if (widget.hasNext && !widget.isLoadingMore && widget.onLoadMore != null) {
+        widget.onLoadMore!();
+      }
+    }
+  }
+
+  bool _onNotification(ScrollEndNotification notification) {
+    final hasReachedEnd = notification.metrics.extentAfter == 0;
+    if (hasReachedEnd &&
+        widget.hasNext &&
+        !widget.isLoadingMore &&
+        widget.onLoadMore != null) {
+      widget.onLoadMore!();
+      return true;
+    }
+
+    return false;
+  }
+
+  @override
+  void dispose() {
+    _scrollController
+      ..removeListener(_onScroll)
+      ..dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final itemCount = widget.communities.length + (widget.isLoadingMore ? 1 : 0);
+
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: SizedBox(
+        width: context.screenWidth * 0.5,
+        child: Scrollbar(
+          scrollbarOrientation: ScrollbarOrientation.left,
+          thumbVisibility: true,
+          controller: _scrollController,
+          child: NotificationListener<ScrollEndNotification>(
+            onNotification: _onNotification,
+            child: ListView.builder(
+              shrinkWrap: true,
+              padding: const EdgeInsetsDirectional.only(start: 16),
+              itemCount: itemCount,
+              controller: _scrollController,
+              itemBuilder: (context, index) {
+                if (index == widget.communities.length) {
+                  return const Padding(
+                    padding: EdgeInsets.all(16.0),
+                    child: Center(
+                      child: CircularProgressIndicator(),
+                    ),
+                  );
+                }
+
+                return widget.itemBuilder(context, index);
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.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/communities/presentation/widgets/space_management_sidebar_add_community_button.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class SpaceManagementSidebarHeader extends StatelessWidget {
+  const SpaceManagementSidebarHeader({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: subSectionContainerDecoration,
+      padding: const EdgeInsets.all(16),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            'Communities',
+            style: context.textTheme.titleMedium?.copyWith(
+              color: ColorsManager.blackColor,
+            ),
+          ),
+          SpaceManagementSidebarAddCommunityButton(
+            onTap: () => _onAddCommunity(context),
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _onAddCommunity(BuildContext context) {
+    final bloc = context.read<CommunitiesTreeSelectionBloc>();
+    final selectedCommunity = bloc.state.selectedCommunity;
+    final isSelected = selectedCommunity?.uuid.isNotEmpty ?? false;
+
+    if (isSelected) {
+      _clearSelection(context);
+    } else {
+      _showCreateCommunityDialog(context);
+    }
+  }
+
+  void _clearSelection(BuildContext context) {
+    context.read<CommunitiesTreeSelectionBloc>().add(
+          const ClearCommunitiesTreeSelectionEvent(),
+        );
+  }
+
+  void _showCreateCommunityDialog(BuildContext context) => showDialog<void>(
+        context: context,
+        builder: (_) => CreateCommunityDialog(
+          title: const Text('Community Name'),
+          onCreateCommunity: (community) {
+            context.read<CommunitiesBloc>().add(
+                  InsertCommunity(community),
+                );
+            context.read<CommunitiesTreeSelectionBloc>().add(
+                  SelectCommunityEvent(community: community),
+                );
+          },
+        ),
+      );
+}

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

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/common/widgets/custom_expansion_tile.dart';
+
+class SpaceTile extends StatefulWidget {
+  final String title;
+  final bool isSelected;
+  final bool initiallyExpanded;
+  final ValueChanged<bool> onExpansionChanged;
+  final List<Widget>? children;
+  final void Function() onItemSelected;
+
+  const SpaceTile({
+    super.key,
+    required this.title,
+    required this.initiallyExpanded,
+    required this.onExpansionChanged,
+    required this.onItemSelected,
+    required this.isSelected,
+    this.children,
+  });
+
+  @override
+  State<SpaceTile> createState() => _SpaceTileState();
+}
+
+class _SpaceTileState extends State<SpaceTile> {
+  late bool _isExpanded;
+
+  @override
+  void initState() {
+    super.initState();
+    _isExpanded = widget.initiallyExpanded;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
+      child: CustomExpansionTile(
+        isSelected: widget.isSelected,
+        title: widget.title,
+        initiallyExpanded: _isExpanded,
+        onItemSelected: widget.onItemSelected,
+        onExpansionChanged: (bool expanded) {
+          setState(() {
+            _isExpanded = expanded;
+          });
+          widget.onExpansionChanged(expanded);
+        },
+        children: widget.children ?? [],
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/create_community/data/services/remote_create_community_service.dart

@@ -0,0 +1,67 @@
+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/create_community/domain/param/create_community_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/services/create_community_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+class RemoteCreateCommunityService implements CreateCommunityService {
+  const RemoteCreateCommunityService(this._httpService);
+
+  final HTTPService _httpService;
+
+  static const _defaultErrorMessage = 'Failed to create community';
+
+  @override
+  Future<CommunityModel> createCommunity(CreateCommunityParam param) async {
+    try {
+      final response = await _httpService.post(
+        path: await _makeUrl(),
+        body: {
+          'name': param.name,
+          'description': param.description,
+        },
+        expectedResponseModel: (data) {
+          final json = data as Map<String, dynamic>;
+          if (json['success'] == true) {
+            return CommunityModel.fromJson(
+              json['data'] as Map<String, dynamic>,
+            );
+          }
+          return null;
+        },
+      );
+
+      if (response == null) {
+        throw APIException(
+          _getErrorMessageFromBody(response as Map<String, dynamic>?),
+        );
+      }
+      return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      throw APIException(_getErrorMessageFromBody(message));
+    } catch (e) {
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
+    }
+  }
+
+  String _getErrorMessageFromBody(Map<String, dynamic>? body) {
+    if (body == null) {
+      return _defaultErrorMessage;
+    }
+    final error = body['error'] as Map<String, dynamic>?;
+    final errorMessage = error?['error'] as String? ?? '';
+    return errorMessage;
+  }
+
+  Future<String> _makeUrl() async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null) {
+      throw APIException('Project UUID is not set');
+    }
+    return '/projects/$projectUuid/communities';
+  }
+}

lib/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart

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

lib/pages/space_management_v2/modules/create_community/domain/services/create_community_service.dart

@@ -0,0 +1,6 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart';
+
+abstract class CreateCommunityService {
+  Future<CommunityModel> createCommunity(CreateCommunityParam param);
+}

lib/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_bloc.dart

@@ -0,0 +1,36 @@
+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/create_community/domain/param/create_community_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/services/create_community_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+
+part 'create_community_event.dart';
+part 'create_community_state.dart';
+
+class CreateCommunityBloc extends Bloc<CreateCommunityEvent, CreateCommunityState> {
+  final CreateCommunityService _createCommunityService;
+
+  CreateCommunityBloc(
+    this._createCommunityService,
+  ) : super(CreateCommunityInitial()) {
+    on<CreateCommunity>(_onCreateCommunity);
+  }
+
+  Future<void> _onCreateCommunity(
+    CreateCommunity event,
+    Emitter<CreateCommunityState> emit,
+  ) async {
+    emit(CreateCommunityLoading());
+    try {
+      final createdCommunity = await _createCommunityService.createCommunity(
+        event.param,
+      );
+      emit(CreateCommunitySuccess(createdCommunity));
+    } on APIException catch (e) {
+      emit(CreateCommunityFailure(e.message));
+    } catch (e) {
+      emit(CreateCommunityFailure(e.toString()));
+    }
+  }
+}

lib/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_event.dart

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

lib/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_state.dart

@@ -0,0 +1,30 @@
+part of 'create_community_bloc.dart';
+
+sealed class CreateCommunityState extends Equatable {
+  const CreateCommunityState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class CreateCommunityInitial extends CreateCommunityState {}
+
+final class CreateCommunityLoading extends CreateCommunityState {}
+
+final class CreateCommunitySuccess extends CreateCommunityState {
+  const CreateCommunitySuccess(this.community);
+
+  final CommunityModel community;
+
+  @override
+  List<Object> get props => [community];
+}
+
+final class CreateCommunityFailure extends CreateCommunityState {
+  final String message;
+
+  const CreateCommunityFailure(this.message);
+
+  @override
+  List<Object> get props => [message];
+}

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

@@ -0,0 +1,61 @@
+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/create_community/data/services/remote_create_community_service.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;
+  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())),
+      child: BlocListener<CreateCommunityBloc, CreateCommunityState>(
+        listener: (context, state) {
+          switch (state) {
+            case CreateCommunityLoading():
+              showDialog<void>(
+                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(
+                const SnackBar(content: Text('Community created successfully')),
+              );
+              onCreateCommunity.call(community);
+              break;
+            case CreateCommunityFailure(:final message):
+              Navigator.of(context).pop();
+              ScaffoldMessenger.of(context).showSnackBar(
+                SnackBar(content: Text(message)),
+              );
+              break;
+            default:
+              break;
+          }
+        },
+        child: CreateCommunityDialogWidget(
+          title: title,
+          initialName: initialName,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,144 @@
+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';
+
+class CreateCommunityDialogWidget extends StatefulWidget {
+  final String? initialName;
+  final Widget title;
+
+  const CreateCommunityDialogWidget({
+    super.key,
+    required this.title,
+    this.initialName,
+  });
+
+  @override
+  State<CreateCommunityDialogWidget> createState() =>
+      _CreateCommunityDialogWidgetState();
+}
+
+class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidget> {
+  late final TextEditingController _nameController;
+
+  @override
+  void initState() {
+    _nameController = TextEditingController(text: widget.initialName ?? '');
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    super.dispose();
+  }
+
+  final _formKey = GlobalKey<FormState>();
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(20),
+      ),
+      backgroundColor: ColorsManager.transparentColor,
+      child: Container(
+        width: MediaQuery.of(context).size.width * 0.3,
+        padding: const EdgeInsets.all(20),
+        decoration: BoxDecoration(
+          color: ColorsManager.whiteColors,
+          borderRadius: BorderRadius.circular(20),
+          boxShadow: [
+            BoxShadow(
+              color: ColorsManager.blackColor.withValues(alpha: 0.25),
+              blurRadius: 20,
+              spreadRadius: 5,
+              offset: const Offset(0, 5),
+            ),
+          ],
+        ),
+        child: Form(
+          key: _formKey,
+          child: SingleChildScrollView(
+            child: BlocBuilder<CreateCommunityBloc, CreateCommunityState>(
+              builder: (context, state) {
+                return Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    DefaultTextStyle(
+                      style: Theme.of(context).textTheme.headlineMedium!,
+                      child: widget.title,
+                    ),
+                    const SizedBox(height: 18),
+                    CreateCommunityNameTextField(
+                      nameController: _nameController,
+                    ),
+                    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),
+                  ],
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildActionButtons(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Expanded(
+          child: CancelButton(
+            label: 'Cancel',
+            onPressed: () => Navigator.of(context).pop(),
+          ),
+        ),
+        const SizedBox(width: 16),
+        _buildCreateCommunityButton(context),
+      ],
+    );
+  }
+
+  Widget _buildCreateCommunityButton(BuildContext context) {
+    return Expanded(
+      child: DefaultButton(
+        onPressed: () {
+          if (_formKey.currentState?.validate() ?? false) {
+            _onSubmit(context);
+          }
+        },
+        borderRadius: 10,
+        foregroundColor: ColorsManager.whiteColors,
+        child: const Text('OK'),
+      ),
+    );
+  }
+
+  void _onSubmit(BuildContext context) {
+    if (_formKey.currentState?.validate() ?? false) {
+      context.read<CreateCommunityBloc>().add(
+            CreateCommunity(
+              CreateCommunityParam(
+                name: _nameController.text.trim(),
+              ),
+            ),
+          );
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class CreateCommunityNameTextField extends StatelessWidget {
+  const CreateCommunityNameTextField({
+    required this.nameController,
+    super.key,
+  });
+
+  final TextEditingController nameController;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      controller: nameController,
+      validator: _validator,
+      style: context.textTheme.bodyMedium,
+      decoration: InputDecoration(
+        hintText: 'Please enter the community name',
+        filled: true,
+        fillColor: ColorsManager.boxColor,
+        enabledBorder: _buildBorder(ColorsManager.boxColor),
+        focusedBorder: _buildBorder(),
+        focusedErrorBorder: _buildBorder(Theme.of(context).colorScheme.error),
+        errorBorder: _buildBorder(Theme.of(context).colorScheme.error),
+      ),
+    );
+  }
+
+  String? _validator(String? value) {
+    if (value == null || value.isEmpty) {
+      return '*Name should not be empty.';
+    }
+
+    return null;
+  }
+
+  InputBorder _buildBorder([Color? color]) {
+    return OutlineInputBorder(
+      borderRadius: BorderRadius.circular(10),
+      borderSide: BorderSide(
+        color: color ?? ColorsManager.vividBlue.withValues(alpha: 0.5),
+        width: 1,
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,46 @@
+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';
+
+class RemoteProductsService implements ProductsService {
+  const RemoteProductsService(this._httpService);
+
+  final HTTPService _httpService;
+
+  static const _defaultErrorMessage = 'Failed to load devices';
+
+  @override
+  Future<List<Product>> getProducts(LoadProductsParam param) async {
+    try {
+      final response = await _httpService.get(
+        path: 'devices',
+        queryParameters: {
+          'spaceUuid': param.spaceUuid,
+          if (param.type != null) 'type': param.type,
+          if (param.status != null) 'status': param.status,
+        },
+        expectedResponseModel: (data) {
+          return (data as List)
+              .map((e) => Product.fromJson(e as Map<String, dynamic>))
+              .toList();
+        },
+      );
+      return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [
+        _defaultErrorMessage,
+        errorMessage,
+      ].join(': ');
+      throw APIException(formattedErrorMessage);
+    } catch (e) {
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,32 @@
+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';
+
+part 'products_event.dart';
+part 'products_state.dart';
+
+class ProductsBloc extends Bloc<ProductsEvent, ProductsState> {
+  final ProductsService _deviceService;
+
+  ProductsBloc(this._deviceService) : super(ProductsInitial()) {
+    on<LoadProducts>(_onLoadProducts);
+  }
+
+  Future<void> _onLoadProducts(
+    LoadProducts event,
+    Emitter<ProductsState> emit,
+  ) async {
+    emit(ProductsLoading());
+    try {
+      final devices = await _deviceService.getProducts(event.param);
+      emit(ProductsLoaded(devices));
+    } on APIException catch (e) {
+      emit(ProductsFailure(e.message));
+    } catch (e) {
+      emit(ProductsFailure(e.toString()));
+    }
+  }
+}

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

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

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

@@ -0,0 +1,30 @@
+part of 'products_bloc.dart';
+
+sealed class ProductsState extends Equatable {
+  const ProductsState();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class ProductsInitial extends ProductsState {}
+
+final class ProductsLoading extends ProductsState {}
+
+final class ProductsLoaded extends ProductsState {
+  final List<Product> products;
+
+  const ProductsLoaded(this.products);
+
+  @override
+  List<Object> get props => [products];
+}
+
+final class ProductsFailure extends ProductsState {
+  final String message;
+
+  const ProductsFailure(this.message);
+
+  @override
+  List<Object> get props => [message];
+}

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

@@ -0,0 +1,40 @@
+import 'package:dio/dio.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_spaces_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/services/space_details_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+class RemoteSpaceDetailsService implements SpaceDetailsService {
+  final HTTPService _httpService;
+
+  RemoteSpaceDetailsService({
+    required HTTPService httpService,
+  }) : _httpService = httpService;
+
+  static const _defaultErrorMessage = 'Failed to load space details';
+
+  @override
+  Future<SpaceDetailsModel> getSpaceDetails(LoadSpacesParam param) async {
+    try {
+      final response = await _httpService.get(
+        path: 'endpoint',
+        expectedResponseModel: (data) {
+          return SpaceDetailsModel.fromJson(data as Map<String, dynamic>);
+        },
+      );
+      return response;
+    } on DioException catch (e) {
+      final message = e.response?.data as Map<String, dynamic>?;
+      final error = message?['error'] as Map<String, dynamic>?;
+      final errorMessage = error?['error'] as String? ?? '';
+      final formattedErrorMessage = [_defaultErrorMessage, errorMessage].join(
+        ': ',
+      );
+      throw APIException(formattedErrorMessage);
+    } catch (e) {
+      final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
+      throw APIException(formattedErrorMessage);
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+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';
+
+class SpaceDetailsModel extends Equatable {
+  final String uuid;
+  final String spaceName;
+  final String icon;
+  final List<ProductAllocation> productAllocations;
+  final List<Subspace> subspaces;
+
+  const SpaceDetailsModel({
+    required this.uuid,
+    required this.spaceName,
+    required this.icon,
+    required this.productAllocations,
+    required this.subspaces,
+  });
+
+  factory SpaceDetailsModel.fromJson(Map<String, dynamic> json) {
+    return SpaceDetailsModel(
+      uuid: json['uuid'] as String,
+      spaceName: json['spaceName'] as String,
+      icon: json['icon'] as String,
+      productAllocations: (json['productAllocations'] as List)
+          .map((e) => ProductAllocation.fromJson(e as Map<String, dynamic>))
+          .toList(),
+      subspaces: (json['subspaces'] as List)
+          .map((e) => Subspace.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+
+  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(),
+    };
+  }
+
+  @override
+  List<Object?> get props => [uuid, spaceName, icon, productAllocations, subspaces];
+}
+
+class ProductAllocation extends Equatable {
+  final Product product;
+  final Tag tag;
+  final String? location;
+
+  const ProductAllocation({
+    required this.product,
+    required this.tag,
+    this.location,
+  });
+
+  factory ProductAllocation.fromJson(Map<String, dynamic> json) {
+    return ProductAllocation(
+      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(),
+    };
+  }
+
+  @override
+  List<Object?> get props => [product, tag];
+}
+
+class Subspace extends Equatable {
+  final String uuid;
+  final String name;
+  final List<ProductAllocation> productAllocations;
+
+  const Subspace({
+    required this.uuid,
+    required this.name,
+    required this.productAllocations,
+  });
+
+  factory Subspace.fromJson(Map<String, dynamic> json) {
+    return Subspace(
+      uuid: json['uuid'] as String,
+      name: json['name'] as String,
+      productAllocations: (json['productAllocations'] as List)
+          .map((e) => ProductAllocation.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'uuid': uuid,
+      'name': name,
+      'productAllocations': productAllocations.map((e) => e.toJson()).toList(),
+    };
+  }
+
+  @override
+  List<Object?> get props => [uuid, name, productAllocations];
+}

lib/pages/space_management_v2/modules/space_details/domain/params/load_spaces_param.dart

@@ -0,0 +1,3 @@
+class LoadSpacesParam {
+  const LoadSpacesParam();
+}