Prepared for aqi distribution API Integration.

Sp 1594 fe implement real time aqi data panel for selected sensor

.github/pull_request_template.md

@@ -0,0 +1,30 @@
+<!--
+  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
+<!-- Add your Jira ticket number as a link (e.g., [PROJ-123](https://jira.company.com/browse/PROJ-123)) -->
+
+## Status
+
+**READY/IN DEVELOPMENT/HOLD**
+
+## Description
+
+<!--- Describe your changes in detail -->
+
+## Type of Change
+
+<!--- Put an `x` in all the boxes that apply: -->
+
+- [ ] ✨ New feature (non-breaking change which adds functionality)
+- [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
+- [ ] ❌ Breaking change (fix or feature that would cause existing functionality to change)
+- [ ] 🧹 Code refactor
+- [ ] ✅ Build configuration change
+- [ ] 📝 Documentation
+- [ ] 🗑️ Chore 

lib/pages/analytics/models/air_quality_data_model.dart

@@ -0,0 +1,57 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class AirQualityDataModel extends Equatable {
+  const AirQualityDataModel({
+    required this.date,
+    required this.data,
+  });
+
+  final DateTime date;
+  final List<AirQualityPercentageData> data;
+
+  factory AirQualityDataModel.fromJson(Map<String, dynamic> json) {
+    return AirQualityDataModel(
+      date: DateTime.parse(json['date'] as String),
+      data: (json['data'] as List<dynamic>)
+          .map((e) => AirQualityPercentageData.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+
+  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': ColorsManager.unhealthyRed.withValues(alpha: 0.7),
+    'severe': ColorsManager.severePink.withValues(alpha: 0.7),
+    'hazardous': ColorsManager.hazardousPurple.withValues(alpha: 0.7),
+  };
+
+  @override
+  List<Object?> get props => [date, data];
+}
+
+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? ?? '',   
+      name: json['name'] as String? ?? '',
+      percentage: (json['percentage'] as num?)?.toDouble() ?? 0,
+    );
+  }
+
+  @override
+  List<Object?> get props => [type, name, percentage];
+}

lib/pages/analytics/models/range_of_aqi.dart

@@ -1,18 +1,49 @@
 import 'package:equatable/equatable.dart';
 
 class RangeOfAqi extends Equatable {
-  final double min;
-  final double avg;
-  final double max;
   final DateTime date;
+  final List<RangeOfAqiValue> data;
 
   const RangeOfAqi({
-    required this.min,
-    required this.avg,
-    required this.max,
+    required this.data,
     required this.date,
   });
 
+  factory RangeOfAqi.fromJson(Map<String, dynamic> json) {
+    return RangeOfAqi(
+      date: DateTime.parse(json['date'] as String),
+      data: (json['data'] as List<dynamic>)
+          .map((e) => RangeOfAqiValue.fromJson(e as Map<String, dynamic>))
+          .toList(),
+    );
+  }
+
   @override
-  List<Object?> get props => [min, avg, max, date];
+  List<Object?> get props => [data, date];
+}
+
+class RangeOfAqiValue extends Equatable {
+  final String type;
+  final double min;
+  final double average;
+  final double max;
+
+  const RangeOfAqiValue({
+    required this.type,
+    required this.min,
+    required this.average,
+    required this.max,
+  });
+
+  factory RangeOfAqiValue.fromJson(Map<String, dynamic> json) {
+    return RangeOfAqiValue(
+      type: json['type'] as String,
+      min: (json['min'] as num).toDouble(),
+      average: (json['average'] as num).toDouble(),
+      max: (json['max'] as num).toDouble(),
+    );
+  }
+
+  @override
+  List<Object?> get props => [type, min, average, max];
 }

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

@@ -0,0 +1,81 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+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';
+
+part 'air_quality_distribution_event.dart';
+part 'air_quality_distribution_state.dart';
+
+class AirQualityDistributionBloc
+    extends Bloc<AirQualityDistributionEvent, AirQualityDistributionState> {
+  final AirQualityDistributionService _aqiDistributionService;
+
+  AirQualityDistributionBloc(
+    this._aqiDistributionService,
+  ) : super(const AirQualityDistributionState()) {
+    on<LoadAirQualityDistribution>(_onLoadAirQualityDistribution);
+    on<ClearAirQualityDistribution>(_onClearAirQualityDistribution);
+    on<UpdateAqiTypeEvent>(_onUpdateAqiTypeEvent);
+  }
+
+  Future<void> _onLoadAirQualityDistribution(
+    LoadAirQualityDistribution event,
+    Emitter<AirQualityDistributionState> emit,
+  ) async {
+    try {
+      emit(state.copyWith(status: AirQualityDistributionStatus.loading));
+      final result = await _aqiDistributionService.getAirQualityDistribution(
+        event.param,
+      );
+      emit(
+        state.copyWith(
+          status: AirQualityDistributionStatus.success,
+          chartData: result,
+          filteredChartData: _arrangeChartDataByType(result, state.selectedAqiType),
+        ),
+      );
+    } catch (e) {
+      emit(
+        AirQualityDistributionState(
+          status: AirQualityDistributionStatus.failure,
+          errorMessage: e.toString(),
+          selectedAqiType: state.selectedAqiType,
+        ),
+      );
+    }
+  }
+
+  Future<void> _onClearAirQualityDistribution(
+    ClearAirQualityDistribution event,
+    Emitter<AirQualityDistributionState> emit,
+  ) async {
+    emit(const AirQualityDistributionState());
+  }
+
+  void _onUpdateAqiTypeEvent(
+    UpdateAqiTypeEvent event,
+    Emitter<AirQualityDistributionState> emit,
+  ) {
+    emit(
+      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_event.dart

@@ -0,0 +1,30 @@
+part of 'air_quality_distribution_bloc.dart';
+
+sealed class AirQualityDistributionEvent extends Equatable {
+  const AirQualityDistributionEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+final class LoadAirQualityDistribution extends AirQualityDistributionEvent {
+  final GetAirQualityDistributionParam param;
+
+  const LoadAirQualityDistribution(this.param);
+
+  @override
+  List<Object> get props => [param];
+}
+
+final class UpdateAqiTypeEvent extends AirQualityDistributionEvent {
+  const UpdateAqiTypeEvent(this.aqiType);
+
+  final AqiType aqiType;
+
+  @override
+  List<Object> get props => [aqiType];
+}
+
+final class ClearAirQualityDistribution extends AirQualityDistributionEvent {
+  const ClearAirQualityDistribution();
+}

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

@@ -0,0 +1,43 @@
+part of 'air_quality_distribution_bloc.dart';
+
+enum AirQualityDistributionStatus {
+  initial,
+  loading,
+  success,
+  failure,
+}
+
+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,
+    );
+  }
+
+  @override
+  List<Object?> get props => [status, chartData, errorMessage, selectedAqiType];
+}

lib/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart

@@ -1,6 +1,7 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 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';
 
@@ -11,6 +12,7 @@ class RangeOfAqiBloc extends Bloc<RangeOfAqiEvent, RangeOfAqiState> {
   RangeOfAqiBloc(this._rangeOfAqiService) : super(const RangeOfAqiState()) {
     on<LoadRangeOfAqiEvent>(_onLoadRangeOfAqiEvent);
     on<ClearRangeOfAqiEvent>(_onClearRangeOfAqiEvent);
+    on<UpdateAqiTypeEvent>(_onUpdateAqiTypeEvent);
   }
 
   final RangeOfAqiService _rangeOfAqiService;
@@ -20,19 +22,55 @@ class RangeOfAqiBloc extends Bloc<RangeOfAqiEvent, RangeOfAqiState> {
     Emitter<RangeOfAqiState> emit,
   ) async {
     emit(
-      RangeOfAqiState(
-        status: RangeOfAqiStatus.loading,
-        rangeOfAqi: state.rangeOfAqi,
-      ),
+      state.copyWith(status: RangeOfAqiStatus.loading),
     );
     try {
       final rangeOfAqi = await _rangeOfAqiService.load(event.param);
-      emit(RangeOfAqiState(status: RangeOfAqiStatus.loaded, rangeOfAqi: rangeOfAqi));
+      emit(
+        state.copyWith(
+          status: RangeOfAqiStatus.loaded,
+          rangeOfAqi: rangeOfAqi,
+          filteredRangeOfAqi: _arrangeChartDataByType(
+            rangeOfAqi,
+            state.selectedAqiType,
+          ),
+        ),
+      );
     } catch (e) {
-      emit(RangeOfAqiState(status: RangeOfAqiStatus.failure, errorMessage: '$e'));
+      emit(
+        state.copyWith(
+          status: RangeOfAqiStatus.failure,
+          errorMessage: '$e',
+        ),
+      );
     }
   }
 
+  void _onUpdateAqiTypeEvent(
+    UpdateAqiTypeEvent event,
+    Emitter<RangeOfAqiState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        selectedAqiType: event.aqiType,
+        filteredRangeOfAqi: _arrangeChartDataByType(state.rangeOfAqi, event.aqiType),
+      ),
+    );
+  }
+
+  List<RangeOfAqi> _arrangeChartDataByType(
+    List<RangeOfAqi> rangeOfAqi,
+    AqiType aqiType,
+  ) {
+    final filteredRangeOfAqi = rangeOfAqi.map(
+      (data) => RangeOfAqi(
+        date: data.date,
+        data: data.data.where((value) => value.type == aqiType.code).toList(),
+      ),
+    );
+    return filteredRangeOfAqi.toList();
+  }
+
   void _onClearRangeOfAqiEvent(
     ClearRangeOfAqiEvent event,
     Emitter<RangeOfAqiState> emit,

lib/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_event.dart

@@ -16,6 +16,15 @@ class LoadRangeOfAqiEvent extends RangeOfAqiEvent {
   List<Object> get props => [param];
 }
 
+class UpdateAqiTypeEvent extends RangeOfAqiEvent {
+  const UpdateAqiTypeEvent(this.aqiType);
+
+  final AqiType aqiType;
+
+  @override
+  List<Object> get props => [aqiType];
+}
+
 class ClearRangeOfAqiEvent extends RangeOfAqiEvent {
   const ClearRangeOfAqiEvent();
 }

lib/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_state.dart

@@ -5,14 +5,35 @@ enum RangeOfAqiStatus { initial, loading, loaded, failure }
 final class RangeOfAqiState extends Equatable {
   const RangeOfAqiState({
     this.rangeOfAqi = const [],
+    this.filteredRangeOfAqi = const [],
     this.status = RangeOfAqiStatus.initial,
     this.errorMessage,
+    this.selectedAqiType = AqiType.aqi,
   });
 
   final RangeOfAqiStatus status;
   final List<RangeOfAqi> rangeOfAqi;
+  final List<RangeOfAqi> filteredRangeOfAqi;
   final String? errorMessage;
+  final AqiType selectedAqiType;
+
+  RangeOfAqiState copyWith({
+    RangeOfAqiStatus? status,
+    List<RangeOfAqi>? rangeOfAqi,
+    List<RangeOfAqi>? filteredRangeOfAqi,
+    String? errorMessage,
+    AqiType? selectedAqiType,
+  }) {
+    return RangeOfAqiState(
+      status: status ?? this.status,
+      rangeOfAqi: rangeOfAqi ?? this.rangeOfAqi,
+      filteredRangeOfAqi: filteredRangeOfAqi ?? this.filteredRangeOfAqi,
+      errorMessage: errorMessage ?? this.errorMessage,
+      selectedAqiType: selectedAqiType ?? this.selectedAqiType,
+    );
+  }
 
   @override
-  List<Object?> get props => [status, rangeOfAqi, errorMessage];
+  List<Object?> get props =>
+      [status, rangeOfAqi, filteredRangeOfAqi, errorMessage, selectedAqiType];
 }

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

@@ -1,10 +1,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/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';
+import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
 import 'package:syncrow_web/pages/analytics/params/get_analytics_devices_param.dart';
 import 'package:syncrow_web/pages/analytics/params/get_range_of_aqi_param.dart';
 
@@ -13,8 +14,10 @@ abstract final class FetchAirQualityDataHelper {
 
   static void loadAirQualityData(
     BuildContext context, {
+    required DateTime date,
     required String communityUuid,
     required String spaceUuid,
+    bool shouldFetchAnalyticsDevices = true,
   }) {
     final date = context.read<AnalyticsDatePickerBloc>().state.monthlyDate;
     loadAnalyticsDevices(
@@ -26,7 +29,11 @@ abstract final class FetchAirQualityDataHelper {
       context,
       spaceUuid: spaceUuid,
       date: date,
-      aqiType: AqiType.aqi,
+    );
+    loadAirQualityDistribution(
+      context,
+      spaceUuid: spaceUuid,
+      date: date,
     );
   }
 
@@ -37,7 +44,9 @@ abstract final class FetchAirQualityDataHelper {
     context.read<RealtimeDeviceChangesBloc>().add(
           const RealtimeDeviceChangesClosed(),
         );
-
+    context.read<AirQualityDistributionBloc>().add(
+          const ClearAirQualityDistribution(),
+        );
     context.read<RangeOfAqiBloc>().add(const ClearRangeOfAqiEvent());
   }
 
@@ -67,16 +76,26 @@ abstract final class FetchAirQualityDataHelper {
     BuildContext context, {
     required String spaceUuid,
     required DateTime date,
-    required AqiType aqiType,
   }) {
     context.read<RangeOfAqiBloc>().add(
           LoadRangeOfAqiEvent(
             GetRangeOfAqiParam(
               date: date,
               spaceUuid: spaceUuid,
-              aqiType: aqiType,
             ),
           ),
         );
   }
+
+  static void loadAirQualityDistribution(
+    BuildContext context, {
+    required String spaceUuid,
+    required DateTime date,
+  }) {
+    context.read<AirQualityDistributionBloc>().add(
+          LoadAirQualityDistribution(
+            GetAirQualityDistributionParam(spaceUuid: spaceUuid, date: date),
+          ),
+        );
+  }
 }

lib/pages/analytics/modules/air_quality/views/air_quality_view.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/air_quality_end_side_widget.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_box.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart';
 
 class AirQualityView extends StatelessWidget {
@@ -23,8 +24,14 @@ class AirQualityView extends StatelessWidget {
                   height: height * 1.2,
                   child: const AirQualityEndSideWidget(),
                 ),
-                SizedBox(height: height * 0.5, child: const RangeOfAqiChartBox()),
-                SizedBox(height: height * 0.5, child: const Placeholder()),
+                SizedBox(
+                  height: height * 0.5,
+                  child: const RangeOfAqiChartBox(),
+                ),
+                SizedBox(
+                  height: height * 0.5,
+                  child: const AqiDistributionChartBox(),
+                ),
               ],
             ),
           );
@@ -46,7 +53,7 @@ class AirQualityView extends StatelessWidget {
                           spacing: 20,
                           children: [
                             Expanded(child: RangeOfAqiChartBox()),
-                            Expanded(child: Placeholder()),
+                            Expanded(child: AqiDistributionChartBox()),
                           ],
                         ),
                       ),

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

@@ -0,0 +1,174 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/pages/analytics/models/air_quality_data_model.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AqiDistributionChart extends StatelessWidget {
+  const AqiDistributionChart({super.key, required this.chartData});
+  final List<AirQualityDataModel> chartData;
+
+  static const _rodStackItemsSpacing = 0.4;
+  static const _barWidth = 13.0;
+  static final _barBorderRadius = BorderRadius.circular(22);
+
+  @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,
+        gridData: EnergyManagementChartsHelper.gridData(
+          horizontalInterval: 20,
+        ),
+        borderData: EnergyManagementChartsHelper.borderData(),
+        barTouchData: _barTouchData(context),
+        titlesData: _titlesData(context),
+        barGroups: _buildBarGroups(sortedData),
+      ),
+      duration: Duration.zero,
+    );
+  }
+
+  List<BarChartGroupData> _buildBarGroups(List<AirQualityDataModel> sortedData) {
+    return List.generate(sortedData.length, (index) {
+      final data = sortedData[index];
+      final stackItems = <BarChartRodData>[];
+      double currentY = 0;
+      bool isFirstElement = true;
+
+      // Sort data by type to ensure consistent order
+      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 ,
+            color: AirQualityDataModel.metricColors[percentageData.name]!,
+            borderRadius: isFirstElement
+                ? const BorderRadius.only(
+                    topLeft: Radius.circular(22),
+                    topRight: Radius.circular(22),
+                  )
+                : _barBorderRadius,
+            width: _barWidth,
+          ),
+        );
+        currentY += percentageData.percentage + _rodStackItemsSpacing;
+        isFirstElement = false;
+      }
+
+      return BarChartGroupData(
+        x: index,
+        barRods: stackItems,
+        groupVertically: true,
+      );
+    });
+  }
+
+  BarTouchData _barTouchData(BuildContext context) {
+    return BarTouchData(
+      touchTooltipData: BarTouchTooltipData(
+        getTooltipColor: (_) => ColorsManager.whiteColors,
+        tooltipBorder: const BorderSide(
+          color: ColorsManager.semiTransparentBlack,
+        ),
+        tooltipRoundedRadius: 16,
+        tooltipPadding: const EdgeInsets.all(8),
+        getTooltipItem: (group, groupIndex, rod, rodIndex) {
+          final data = chartData[group.x.toInt()];
+
+          final List<TextSpan> children = [];
+
+          final textStyle = context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.blackColor,
+            fontSize: 12,
+          );
+
+          // Sort data by type to ensure consistent order
+          final sortedPercentageData = List<AirQualityPercentageData>.from(data.data)
+            ..sort((a, b) => a.type.compareTo(b.type));
+
+          for (final percentageData in sortedPercentageData) {
+            children.add(TextSpan(
+              text:
+                  '\n${percentageData.type.toUpperCase()}: ${percentageData.percentage.toStringAsFixed(1)}%',
+              style: textStyle,
+            ));
+          }
+
+          return BarTooltipItem(
+            DateFormat('dd/MM/yyyy').format(data.date),
+            context.textTheme.bodyMedium!.copyWith(
+              color: ColorsManager.blackColor,
+              fontSize: 16,
+              fontWeight: FontWeight.w600,
+            ),
+            children: children,
+          );
+        },
+      ),
+    );
+  }
+
+  FlTitlesData _titlesData(BuildContext context) {
+    final titlesData = EnergyManagementChartsHelper.titlesData(
+      context,
+      leftTitlesInterval: 20,
+    );
+
+    final leftTitles = titlesData.leftTitles.copyWith(
+      sideTitles: titlesData.leftTitles.sideTitles.copyWith(
+        reservedSize: 70,
+        interval: 20,
+        maxIncluded: false,
+        minIncluded: true,
+        getTitlesWidget: (value, meta) => Padding(
+          padding: const EdgeInsetsDirectional.only(end: 12),
+          child: FittedBox(
+            alignment: AlignmentDirectional.centerStart,
+            fit: BoxFit.scaleDown,
+            child: Text(
+              '${value.toStringAsFixed(0)}%',
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 12,
+                color: ColorsManager.lightGreyColor,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final bottomTitles = AxisTitles(
+      sideTitles: SideTitles(
+        showTitles: true,
+        getTitlesWidget: (value, _) => FittedBox(
+          alignment: AlignmentDirectional.bottomCenter,
+          fit: BoxFit.scaleDown,
+          child: Text(
+            chartData[value.toInt()].date.day.toString(),
+            style: context.textTheme.bodySmall?.copyWith(
+              color: ColorsManager.lightGreyColor,
+              fontSize: 8,
+            ),
+          ),
+        ),
+        reservedSize: 36,
+      ),
+    );
+
+    return titlesData.copyWith(
+      leftTitles: leftTitles,
+      bottomTitles: bottomTitles,
+    );
+  }
+}

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

@@ -0,0 +1,44 @@
+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_distribution_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_title.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class AqiDistributionChartBox extends StatelessWidget {
+  const AqiDistributionChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<AirQualityDistributionBloc, AirQualityDistributionState>(
+      builder: (context, state) {
+        return Container(
+          padding: const EdgeInsetsDirectional.all(30),
+          decoration: subSectionContainerDecoration.copyWith(
+            borderRadius: BorderRadius.circular(30),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              if (state.errorMessage != null) ...[
+                AnalyticsErrorWidget(state.errorMessage),
+                const SizedBox(height: 10),
+              ],
+              AqiDistributionChartTitle(
+                isLoading: state.status == AirQualityDistributionStatus.loading,
+              ),
+              const SizedBox(height: 10),
+              const Divider(),
+              const SizedBox(height: 20),
+              Expanded(
+                child: AqiDistributionChart(chartData: state.filteredChartData),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,44 @@
+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/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
+
+class AqiDistributionChartTitle extends StatelessWidget {
+  const AqiDistributionChartTitle({required this.isLoading, super.key});
+
+  final bool isLoading;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        ChartsLoadingWidget(isLoading: isLoading),
+        const Expanded(
+          flex: 3,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            alignment: AlignmentDirectional.centerStart,
+            child: ChartTitle(
+              title: Text('Distribution over Air Quality Index'),
+            ),
+          ),
+        ),
+        FittedBox(
+          alignment: AlignmentDirectional.centerEnd,
+          fit: BoxFit.scaleDown,
+          child: AqiTypeDropdown(
+            onChanged: (value) {
+              if (value != null) {
+                context
+                    .read<AirQualityDistributionBloc>()
+                    .add(UpdateAqiTypeEvent(value));
+              }
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -3,17 +3,18 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 enum AqiType {
-  aqi('AQI', ''),
-  pm25('PM2.5', 'µg/m³'),
-  pm10('PM10', 'µg/m³'),
-  hcho('HCHO', 'mg/m³'),
-  tvoc('TVOC', 'µg/m³'),
-  co2('CO2', 'ppm');
+  aqi('AQI', '', 'aqi'),
+  pm25('PM2.5', 'µg/m³', 'pm25'),
+  pm10('PM10', 'µg/m³', 'pm10'),
+  hcho('HCHO', 'mg/m³', 'hcho'),
+  tvoc('TVOC', 'µg/m³', 'tvoc'),
+  co2('CO2', 'ppm', 'co2');
 
-  const AqiType(this.value, this.unit);
+  const AqiType(this.value, this.unit, this.code);
 
   final String value;
   final String unit;
+  final String code;
 }
 
 class AqiTypeDropdown extends StatefulWidget {

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

@@ -13,23 +13,37 @@ class RangeOfAqiChart extends StatelessWidget {
     required this.chartData,
   });
 
-  List<(List<double> values, Color color, Color? dotColor)> get _lines => [
-        (
-          chartData.map((e) => e.max).toList(),
-          ColorsManager.maxPurple,
-          ColorsManager.maxPurpleDot,
-        ),
-        (
-          chartData.map((e) => e.avg).toList(),
-          Colors.white,
-          null,
-        ),
-        (
-          chartData.map((e) => e.min).toList(),
-          ColorsManager.minBlue,
-          ColorsManager.minBlueDot,
-        ),
-      ];
+  List<(List<double> values, Color color, Color? dotColor)> get _lines {
+    final sortedData = List<RangeOfAqi>.from(chartData)
+      ..sort((a, b) => a.date.compareTo(b.date));
+
+    return [
+      (
+        sortedData.map((e) {
+          final value = e.data.firstOrNull;
+          return value?.max ?? 0;
+        }).toList(),
+        ColorsManager.maxPurple,
+        ColorsManager.maxPurpleDot,
+      ),
+      (
+        sortedData.map((e) {
+          final value = e.data.firstOrNull;
+          return value?.average ?? 0;
+        }).toList(),
+        Colors.white,
+        null,
+      ),
+      (
+        sortedData.map((e) {
+          final value = e.data.firstOrNull;
+          return value?.min ?? 0;
+        }).toList(),
+        ColorsManager.minBlue,
+        ColorsManager.minBlueDot,
+      ),
+    ];
+  }
 
   @override
   Widget build(BuildContext context) {

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

@@ -32,7 +32,7 @@ class RangeOfAqiChartBox extends StatelessWidget {
               const SizedBox(height: 10),
               const Divider(),
               const SizedBox(height: 20),
-              Expanded(child: RangeOfAqiChart(chartData: state.rangeOfAqi)),
+              Expanded(child: RangeOfAqiChart(chartData: state.filteredRangeOfAqi)),
             ],
           ),
         );

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

@@ -1,15 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.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/widgets/chart_informative_cell.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.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 RangeOfAqiChartTitle extends StatelessWidget {
-  const RangeOfAqiChartTitle({required this.isLoading, super.key});
+  const RangeOfAqiChartTitle({
+    required this.isLoading,
+    super.key,
+  });
+
   final bool isLoading;
 
   static const List<(Color color, String title, bool hasBorder)> _colors = [
@@ -66,12 +69,9 @@ class RangeOfAqiChartTitle extends StatelessWidget {
 
                 if (spaceUuid == null) return;
 
-                FetchAirQualityDataHelper.loadRangeOfAqi(
-                  context,
-                  spaceUuid: spaceUuid,
-                  date: context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
-                  aqiType: value ?? AqiType.aqi,
-                );
+                if (value != null) {
+                  context.read<RangeOfAqiBloc>().add(UpdateAqiTypeEvent(value));
+                }
               },
             ),
           ),

lib/pages/analytics/modules/analytics/strategies/air_quality_data_loading_strategy.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.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/strategies/analytics_data_loading_strategy.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
@@ -39,6 +40,7 @@ final class AirQualityDataLoadingStrategy implements AnalyticsDataLoadingStrateg
       context,
       communityUuid: community.uuid,
       spaceUuid: space.uuid ?? '',
+      date: context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
     );
   }
 

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

@@ -1,5 +1,6 @@
 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/blocs/range_of_aqi/range_of_aqi_bloc.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';
@@ -13,6 +14,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/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';
@@ -101,6 +103,11 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
             FakeRangeOfAqiService(),
           ),
         ),
+        BlocProvider(
+          create: (context) => AirQualityDistributionBloc(
+            FakeAirQualityDistributionService(),
+          ),
+        ),
       ],
       child: const AnalyticsPageForm(),
     );

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

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/fetch_air_quality_data_helper.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_tab/analytics_tab_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/enums/analytics_page_tab.dart';
@@ -56,33 +57,16 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
                   const Spacer(),
                   Visibility(
                     key: ValueKey(selectedTab),
-                    visible: selectedTab == AnalyticsPageTab.energyManagement,
+                    visible: selectedTab == AnalyticsPageTab.energyManagement ||
+                        selectedTab == AnalyticsPageTab.airQuality,
                     child: Expanded(
                       flex: 2,
                       child: FittedBox(
                         fit: BoxFit.scaleDown,
                         alignment: AlignmentDirectional.centerEnd,
                         child: AnalyticsDateFilterButton(
-                          onDateSelected: (DateTime value) {
-                            context.read<AnalyticsDatePickerBloc>().add(
-                                  UpdateAnalyticsDatePickerEvent(montlyDate: value),
-                                );
-
-                            final spaceTreeState =
-                                context.read<SpaceTreeBloc>().state;
-                            if (spaceTreeState.selectedSpaces.isNotEmpty) {
-                              FetchEnergyManagementDataHelper
-                                  .loadEnergyManagementData(
-                                context,
-                                shouldFetchAnalyticsDevices: false,
-                                selectedDate: value,
-                                communityId:
-                                    spaceTreeState.selectedCommunities.firstOrNull ??
-                                        '',
-                                spaceId:
-                                    spaceTreeState.selectedSpaces.firstOrNull ?? '',
-                              );
-                            }
+                          onDateSelected: (value) {
+                            _onDateChanged(context, value, selectedTab);
                           },
                           selectedDate: context
                               .watch<AnalyticsDatePickerBloc>()
@@ -112,4 +96,73 @@ class AnalyticsPageTabsAndChildren extends StatelessWidget {
       child: child,
     );
   }
+
+  void _onDateChanged(
+    BuildContext context,
+    DateTime date,
+    AnalyticsPageTab selectedTab,
+  ) {
+    context.read<AnalyticsDatePickerBloc>().add(
+          UpdateAnalyticsDatePickerEvent(montlyDate: date),
+        );
+
+    final spaceTreeState = context.read<SpaceTreeBloc>().state;
+    final communities = spaceTreeState.selectedCommunities;
+    final spaces = spaceTreeState.selectedSpaces;
+    if (spaceTreeState.selectedSpaces.isNotEmpty) {
+      switch (selectedTab) {
+        case AnalyticsPageTab.energyManagement:
+          _onEnergyManagementDateChanged(
+            context,
+            date: date,
+            communityUuid: communities.firstOrNull ?? '',
+            spaceUuid: spaces.firstOrNull ?? '',
+          );
+          break;
+        case AnalyticsPageTab.airQuality:
+          _onAirQualityDateChanged(
+            context,
+            date: date,
+            communityUuid: communities.firstOrNull ?? '',
+            spaceUuid: spaces.firstOrNull ?? '',
+          );
+        default:
+          break;
+      }
+    }
+  }
+
+  void _onEnergyManagementDateChanged(
+    BuildContext context, {
+    required DateTime date,
+    required String communityUuid,
+    required String spaceUuid,
+  }) {
+    context.read<AnalyticsDatePickerBloc>().add(
+          UpdateAnalyticsDatePickerEvent(montlyDate: date),
+        );
+
+    FetchEnergyManagementDataHelper.loadEnergyManagementData(
+      context,
+      shouldFetchAnalyticsDevices: false,
+      selectedDate: date,
+      communityId: communityUuid,
+      spaceId: spaceUuid,
+    );
+  }
+
+  void _onAirQualityDateChanged(
+    BuildContext context, {
+    required DateTime date,
+    required String communityUuid,
+    required String spaceUuid,
+  }) {
+    FetchAirQualityDataHelper.loadAirQualityData(
+      context,
+      date: date,
+      communityUuid: communityUuid,
+      spaceUuid: spaceUuid,
+      shouldFetchAnalyticsDevices: false,
+    );
+  }
 }

lib/pages/analytics/params/get_air_quality_distribution_param.dart

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

lib/pages/analytics/params/get_range_of_aqi_param.dart

@@ -1,16 +1,12 @@
 import 'package:equatable/equatable.dart';
-import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
 
 class GetRangeOfAqiParam extends Equatable {
   final DateTime date;
   final String spaceUuid;
-  final AqiType aqiType;
 
-  const GetRangeOfAqiParam(
-    {
+  const GetRangeOfAqiParam({
     required this.date,
     required this.spaceUuid,
-    required this.aqiType,
   });
 
   @override

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

@@ -0,0 +1,8 @@
+import 'package:syncrow_web/pages/analytics/models/air_quality_data_model.dart';
+import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
+
+abstract interface class AirQualityDistributionService {
+  Future<List<AirQualityDataModel>> getAirQualityDistribution(
+    GetAirQualityDistributionParam param,
+  );
+}

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

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

@@ -0,0 +1,36 @@
+import 'package:syncrow_web/pages/analytics/models/air_quality_data_model.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';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+class RemoteAirQualityDistributionService implements AirQualityDistributionService {
+  RemoteAirQualityDistributionService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<AirQualityDataModel>> getAirQualityDistribution(
+    GetAirQualityDistributionParam param,
+  ) async {
+    try {
+      final response = await _httpService.get(
+        path: 'endpoint',
+        queryParameters: {
+          'spaceUuid': param.spaceUuid,
+          'date': param.date.toIso8601String(),
+        },
+        expectedResponseModel: (data) {
+          final json = data as Map<String, dynamic>? ?? {};
+          final mappedData = json['data'] as List<dynamic>? ?? [];
+          return mappedData.map((e) {
+            final jsonData = e as Map<String, dynamic>;
+            return AirQualityDataModel.fromJson(jsonData);
+          }).toList();
+        },
+      );
+      return response;
+    } catch (e) {
+      throw Exception('Failed to load energy consumption per phase: $e');
+    }
+  }
+}

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

@@ -1,4 +1,5 @@
 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';
 
@@ -18,10 +19,15 @@ class FakeRangeOfAqiService implements RangeOfAqiService {
         final avg = (min + avgDelta).clamp(0.0, 301.0);
         final max = (avg + maxDelta).clamp(0.0, 301.0);
 
-        return RangeOfAqi(
-          min: min,
-          avg: avg,
-          max: max,
+        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

@@ -0,0 +1,34 @@
+import 'package:syncrow_web/pages/analytics/models/range_of_aqi.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';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+final class RemoteRangeOfAqiService implements RangeOfAqiService {
+  const RemoteRangeOfAqiService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<RangeOfAqi>> load(GetRangeOfAqiParam param) async {
+    try {
+      final response = await _httpService.get(
+        path: 'endpoint',
+        queryParameters: {
+          'spaceUuid': param.spaceUuid,
+          'date': param.date.toIso8601String(),
+        },
+        expectedResponseModel: (data) {
+          final json = data as Map<String, dynamic>? ?? {};
+          final mappedData = json['data'] as List<dynamic>? ?? [];
+          return mappedData.map((e) {
+            final jsonData = e as Map<String, dynamic>;
+            return RangeOfAqi.fromJson(jsonData);
+          }).toList();
+        },
+      );
+      return response;
+    } catch (e) {
+      throw Exception('Failed to load energy consumption per phase: $e');
+    }
+  }
+}

lib/pages/common/custom_table.dart

@@ -21,6 +21,7 @@ class DynamicTable extends StatefulWidget {
   final List<String>? initialSelectedIds;
   final int uuidIndex;
   final Function(dynamic selectedRows)? onSelectionChanged;
+  final Function(int rowIndex)? onSettingsPressed;
   const DynamicTable({
     super.key,
     required this.headers,
@@ -37,6 +38,7 @@ class DynamicTable extends StatefulWidget {
     this.initialSelectedIds,
     required this.uuidIndex,
     this.onSelectionChanged,
+    this.onSettingsPressed,
   });
 
   @override
@@ -48,11 +50,20 @@ class _DynamicTableState extends State<DynamicTable> {
   bool _selectAll = false;
   final ScrollController _verticalScrollController = ScrollController();
   final ScrollController _horizontalScrollController = ScrollController();
-
+  late ScrollController _horizontalHeaderScrollController;
+  late ScrollController _horizontalBodyScrollController;
   @override
   void initState() {
     super.initState();
     _initializeSelection();
+    _horizontalHeaderScrollController = ScrollController();
+    _horizontalBodyScrollController = ScrollController();
+
+    // Synchronize horizontal scrolling
+    _horizontalBodyScrollController.addListener(() {
+      _horizontalHeaderScrollController
+          .jumpTo(_horizontalBodyScrollController.offset);
+    });
   }
 
   @override
@@ -102,101 +113,87 @@ class _DynamicTableState extends State<DynamicTable> {
     context.read<DeviceManagementBloc>().add(UpdateSelection(_selectedRows));
   }
 
+  @override
+  void dispose() {
+    _horizontalHeaderScrollController.dispose();
+    _horizontalBodyScrollController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
       decoration: widget.cellDecoration,
-      child: Scrollbar(
-        controller: _verticalScrollController,
-        thumbVisibility: true,
-        trackVisibility: true,
-        child: Scrollbar(
-          controller: _horizontalScrollController,
-          thumbVisibility: true,
-          trackVisibility: true,
-          notificationPredicate: (notif) => notif.depth == 1,
-          child: SingleChildScrollView(
-            controller: _verticalScrollController,
+      child: Column(
+        children: [
+          Container(
+            decoration: widget.headerDecoration ??
+                const BoxDecoration(color: ColorsManager.boxColor),
             child: SingleChildScrollView(
-              controller: _horizontalScrollController,
               scrollDirection: Axis.horizontal,
+              physics: const NeverScrollableScrollPhysics(),
+              controller: _horizontalHeaderScrollController,
               child: SizedBox(
                 width: widget.size.width,
-                child: Column(
+                child: Row(
                   children: [
-                    Container(
-                      decoration: widget.headerDecoration ??
-                          const BoxDecoration(
-                            color: ColorsManager.boxColor,
-                          ),
-                      child: Row(
-                        children: [
-                          if (widget.withCheckBox) _buildSelectAllCheckbox(),
-                          ...List.generate(widget.headers.length, (index) {
-                            return _buildTableHeaderCell(
-                                widget.headers[index], index);
-                          })
-                          //...widget.headers.map((header) => _buildTableHeaderCell(header)),
-                        ],
-                      ),
-                    ),
-                    widget.isEmpty
-                        ? SizedBox(
-                            height: widget.size.height * 0.5,
-                            width: widget.size.width,
-                            child: Column(
-                              mainAxisAlignment: MainAxisAlignment.center,
-                              children: [
-                                Row(
-                                  crossAxisAlignment: CrossAxisAlignment.center,
-                                  mainAxisAlignment: MainAxisAlignment.center,
-                                  children: [
-                                    Column(
-                                      children: [
-                                        SvgPicture.asset(Assets.emptyTable),
-                                        const SizedBox(
-                                          height: 15,
-                                        ),
-                                        Text(
-                                          widget.tableName == 'AccessManagement'
-                                              ? 'No Password '
-                                              : 'No Devices',
-                                          style: Theme.of(context)
-                                              .textTheme
-                                              .bodySmall!
-                                              .copyWith(
-                                                  color:
-                                                      ColorsManager.grayColor),
-                                        )
-                                      ],
-                                    ),
-                                  ],
-                                ),
-                              ],
-                            ),
-                          )
-                        : Column(
-                            children:
-                                List.generate(widget.data.length, (index) {
-                              final row = widget.data[index];
-                              return Row(
-                                children: [
-                                  if (widget.withCheckBox)
-                                    _buildRowCheckbox(
-                                        index, widget.size.height * 0.08),
-                                  ...row.map((cell) => _buildTableCell(
-                                      cell.toString(),
-                                      widget.size.height * 0.08)),
-                                ],
-                              );
-                            }),
-                          ),
+                    if (widget.withCheckBox) _buildSelectAllCheckbox(),
+                    ...List.generate(widget.headers.length, (index) {
+                      return _buildTableHeaderCell(
+                          widget.headers[index], index);
+                    }),
                   ],
                 ),
               ),
             ),
           ),
-        ),
+          Expanded(
+            child: Scrollbar(
+              controller: _verticalScrollController,
+              thumbVisibility: true,
+              trackVisibility: true,
+              child: SingleChildScrollView(
+                controller: _verticalScrollController,
+                child: Scrollbar(
+                  controller: _horizontalBodyScrollController,
+                  thumbVisibility: false,
+                  trackVisibility: false,
+                  notificationPredicate: (notif) => notif.depth == 1,
+                  child: SingleChildScrollView(
+                    scrollDirection: Axis.horizontal,
+                    controller: _horizontalBodyScrollController,
+                    child: SizedBox(
+                      width: widget.size.width,
+                      child: widget.isEmpty
+                          ? _buildEmptyState()
+                          : Column(
+                              children:
+                                  List.generate(widget.data.length, (rowIndex) {
+                                final row = widget.data[rowIndex];
+                                return Row(
+                                  children: [
+                                    if (widget.withCheckBox)
+                                      _buildRowCheckbox(
+                                          rowIndex, widget.size.height * 0.08),
+                                    ...row.asMap().entries.map((entry) {
+                                      return _buildTableCell(
+                                        entry.value.toString(),
+                                        widget.size.height * 0.08,
+                                        rowIndex: rowIndex,
+                                        columnIndex: entry.key,
+                                      );
+                                    }).toList(),
+                                  ],
+                                );
+                              }),
+                            ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
       ),
     );
   }
@@ -218,6 +215,32 @@ class _DynamicTableState extends State<DynamicTable> {
     );
   }
 
+  Widget _buildEmptyState() => Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Column(
+                children: [
+                  SvgPicture.asset(Assets.emptyTable),
+                  const SizedBox(height: 15),
+                  Text(
+                    widget.tableName == 'AccessManagement'
+                        ? 'No Password '
+                        : 'No Devices',
+                    style: Theme.of(context)
+                        .textTheme
+                        .bodySmall!
+                        .copyWith(color: ColorsManager.grayColor),
+                  )
+                ],
+              ),
+            ],
+          ),
+        ],
+      );
   Widget _buildRowCheckbox(int index, double size) {
     return Container(
       width: 50,
@@ -272,13 +295,23 @@ class _DynamicTableState extends State<DynamicTable> {
     );
   }
 
-  Widget _buildTableCell(String content, double size) {
+  Widget _buildTableCell(
+    String content,
+    double size, {
+    required int rowIndex,
+    required int columnIndex,
+  }) {
     bool isBatteryLevel = content.endsWith('%');
     double? batteryLevel;
 
     if (isBatteryLevel) {
       batteryLevel = double.tryParse(content.replaceAll('%', '').trim());
     }
+    bool isSettingsColumn = widget.headers[columnIndex] == 'Settings';
+
+    if (isSettingsColumn) {
+      return _buildSettingsIcon(rowIndex, size);
+    }
 
     Color? statusColor;
     switch (content) {
@@ -330,4 +363,23 @@ class _DynamicTableState extends State<DynamicTable> {
       ),
     );
   }
+
+  Widget _buildSettingsIcon(int rowIndex, double size) {
+    return Container(
+      height: size,
+      width: 120,
+      padding: const EdgeInsets.all(5.0),
+      decoration: const BoxDecoration(
+        border: Border(
+          bottom: BorderSide(color: ColorsManager.boxDivider, width: 1.0),
+        ),
+        color: Colors.white,
+      ),
+      alignment: Alignment.center,
+      child: IconButton(
+        icon: SvgPicture.asset(Assets.settings),
+        onPressed: () => widget.onSettingsPressed?.call(rowIndex),
+      ),
+    );
+  }
 }

lib/pages/device_managment/garage_door/bloc/garage_door_bloc.dart

@@ -360,7 +360,7 @@ class GarageDoorBloc extends Bloc<GarageDoorEvent, GarageDoorState> {
           delay: deviceStatus.delay + Duration(minutes: 10));
       emit(GarageDoorLoadedState(status: deviceStatus));
       add(GarageDoorControlEvent(
-          deviceId: event.deviceId,
+          deviceId: deviceId,
           value: deviceStatus.delay.inSeconds,
           code: 'countdown_1'));
     } catch (e) {

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

@@ -5,7 +5,7 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 Future<void> showNameMenu({
   required BuildContext context,
   Function()? aToZTap,
-  Function()? zToaTap,
+  Function()? zToATap,
   String? isSelected,
 }) async {
   final RenderBox overlay =
@@ -46,7 +46,7 @@ Future<void> showNameMenu({
         ),
       ),
       PopupMenuItem(
-        onTap: zToaTap,
+        onTap: zToATap,
         child: ListTile(
           leading: Image.asset(
             Assets.ZtoAIcon,

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

@@ -95,7 +95,7 @@ class _TableRow extends StatelessWidget {
           ],
         ),
         if (!isLast)
-          Divider(
+          const Divider(
             height: 1,
             thickness: 1,
             color: ColorsManager.boxDivider,
@@ -110,12 +110,14 @@ class DynamicTableScreen extends StatefulWidget {
   final List<String> titles;
   final List<List<Widget>> rows;
   final void Function(int columnIndex)? onFilter;
+  final double tableSize;
 
   const DynamicTableScreen({
     required this.titles,
     required this.rows,
     required this.onFilter,
     Key? key,
+    required this.tableSize,
   }) : super(key: key);
 
   @override
@@ -205,7 +207,8 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
           bottomRight: Radius.circular(15),
         ),
       ),
-      child: Column(
+      child: ListView(
+        shrinkWrap: true,
         children: [
           for (int rowIndex = 0; rowIndex < widget.rows.length; rowIndex++)
             _TableRow(
@@ -253,7 +256,7 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 _buildHeader(),
-                _buildBody(),
+                Container(height: widget.tableSize - 37, child: _buildBody()),
               ],
             ),
           ),

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

@@ -27,7 +27,8 @@ class UsersPage extends StatelessWidget {
   Widget build(BuildContext context) {
     final TextEditingController searchController = TextEditingController();
 
-    Widget actionButton({bool isActive = false, required String title, Function()? onTap}) {
+    Widget actionButton(
+        {bool isActive = false, required String title, Function()? onTap}) {
       return InkWell(
         onTap: onTap,
         child: Padding(
@@ -60,7 +61,8 @@ class UsersPage extends StatelessWidget {
                     : ColorsManager.disabledPink.withOpacity(0.5),
           ),
           child: Padding(
-            padding: const EdgeInsets.only(left: 10, right: 10, bottom: 5, top: 5),
+            padding:
+                const EdgeInsets.only(left: 10, right: 10, bottom: 5, top: 5),
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.center,
               mainAxisAlignment: MainAxisAlignment.center,
@@ -84,12 +86,15 @@ class UsersPage extends StatelessWidget {
     }
 
     Widget changeIconStatus(
-        {required String userId, required String status, required Function()? onTap}) {
+        {required String userId,
+        required String status,
+        required Function()? onTap}) {
       return Center(
         child: InkWell(
           onTap: onTap,
           child: Padding(
-            padding: const EdgeInsets.only(left: 5, right: 5, bottom: 5, top: 5),
+            padding:
+                const EdgeInsets.only(left: 5, right: 5, bottom: 5, top: 5),
             child: SvgPicture.asset(
               status == "invited"
                   ? Assets.invitedIcon
@@ -114,8 +119,7 @@ class UsersPage extends StatelessWidget {
             padding: const EdgeInsets.all(20),
             child: Align(
               alignment: Alignment.topCenter,
-              child: ListView(
-                shrinkWrap: true,
+              child: Column(
                 children: [
                   Row(
                     children: [
@@ -188,292 +192,325 @@ class UsersPage extends StatelessWidget {
                       ),
                     ],
                   ),
-                  const SizedBox(height: 25),
-                  DynamicTableScreen(
-                    onFilter: (columnIndex) {
-                      if (columnIndex == 0) {
-                        showNameMenu(
-                          context: context,
-                          isSelected: _blocRole.currentSortOrder,
-                          aToZTap: () {
-                            context.read<UserTableBloc>().add(const SortUsersByNameAsc());
-                          },
-                          zToaTap: () {
-                            context.read<UserTableBloc>().add(const SortUsersByNameDesc());
-                          },
-                        );
-                      }
-                      if (columnIndex == 2) {
-                        final Map<String, bool> checkboxStates = {
-                          for (var item in _blocRole.jobTitle)
-                            item: _blocRole.selectedJobTitles.contains(item),
-                        };
-                        final RenderBox overlay =
-                            Overlay.of(context).context.findRenderObject() as RenderBox;
+                  const SizedBox(height: 20),
+                  Container(
+                    height: screenSize.height * 0.65,
+                    child: DynamicTableScreen(
+                      tableSize: screenSize.height * 0.65,
+                      onFilter: (columnIndex) {
+                        if (columnIndex == 0) {
+                          showNameMenu(
+                            context: context,
+                            isSelected: _blocRole.currentSortOrder,
+                            aToZTap: () {
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const SortUsersByNameAsc());
+                            },
+                            zToATap: () {
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const SortUsersByNameDesc());
+                            },
+                          );
+                        }
+                        if (columnIndex == 2) {
+                          final Map<String, bool> checkboxStates = {
+                            for (var item in _blocRole.jobTitle)
+                              item: _blocRole.selectedJobTitles.contains(item),
+                          };
+                          final RenderBox overlay = Overlay.of(context)
+                              .context
+                              .findRenderObject() as RenderBox;
 
-                        showPopUpFilterMenu(
-                          position: RelativeRect.fromLTRB(
-                            overlay.size.width / 5.3,
-                            240,
-                            overlay.size.width / 4,
-                            0,
-                          ),
-                          list: _blocRole.jobTitle,
-                          context: context,
-                          checkboxStates: checkboxStates,
-                          isSelected: _blocRole.currentSortJopTitle,
-                          onOkPressed: () {
-                            searchController.clear();
-                            _blocRole.add(FilterClearEvent());
-                            final selectedItems = checkboxStates.entries
-                                .where((entry) => entry.value)
-                                .map((entry) => entry.key)
-                                .toList();
-                            Navigator.of(context).pop();
-                            _blocRole.add(FilterUsersByJobEvent(
-                              selectedJob: selectedItems,
-                              sortOrder: _blocRole.currentSortJopTitle,
-                            ));
-                          },
-                          onSortAtoZ: (v) {
-                            _blocRole.currentSortJopTitle = v;
-                          },
-                          onSortZtoA: (v) {
-                            _blocRole.currentSortJopTitle = v;
-                          },
-                        );
-                      }
+                          showPopUpFilterMenu(
+                            position: RelativeRect.fromLTRB(
+                              overlay.size.width / 5.3,
+                              240,
+                              overlay.size.width / 4,
+                              0,
+                            ),
+                            list: _blocRole.jobTitle,
+                            context: context,
+                            checkboxStates: checkboxStates,
+                            isSelected: _blocRole.currentSortJopTitle,
+                            onOkPressed: () {
+                              searchController.clear();
+                              _blocRole.add(FilterClearEvent());
+                              final selectedItems = checkboxStates.entries
+                                  .where((entry) => entry.value)
+                                  .map((entry) => entry.key)
+                                  .toList();
+                              Navigator.of(context).pop();
+                              _blocRole.add(FilterUsersByJobEvent(
+                                selectedJob: selectedItems,
+                                sortOrder: _blocRole.currentSortJopTitle,
+                              ));
+                            },
+                            onSortAtoZ: (v) {
+                              _blocRole.currentSortJopTitle = v;
+                            },
+                            onSortZtoA: (v) {
+                              _blocRole.currentSortJopTitle = v;
+                            },
+                          );
+                        }
 
-                      if (columnIndex == 3) {
-                        final Map<String, bool> checkboxStates = {
-                          for (var item in _blocRole.roleTypes)
-                            item: _blocRole.selectedRoles.contains(item),
-                        };
-                        final RenderBox overlay =
-                            Overlay.of(context).context.findRenderObject() as RenderBox;
-                        showPopUpFilterMenu(
-                          position: RelativeRect.fromLTRB(
-                            overlay.size.width / 4,
-                            240,
-                            overlay.size.width / 4,
-                            0,
-                          ),
-                          list: _blocRole.roleTypes,
-                          context: context,
-                          checkboxStates: checkboxStates,
-                          isSelected: _blocRole.currentSortRole,
-                          onOkPressed: () {
-                            searchController.clear();
-                            _blocRole.add(FilterClearEvent());
-                            final selectedItems = checkboxStates.entries
-                                .where((entry) => entry.value)
-                                .map((entry) => entry.key)
-                                .toList();
-                            Navigator.of(context).pop();
-                            context.read<UserTableBloc>().add(FilterUsersByRoleEvent(
-                                selectedRoles: selectedItems,
-                                sortOrder: _blocRole.currentSortRole));
-                          },
-                          onSortAtoZ: (v) {
-                            _blocRole.currentSortRole = v;
-                          },
-                          onSortZtoA: (v) {
-                            _blocRole.currentSortRole = v;
-                          },
-                        );
-                      }
-                      if (columnIndex == 4) {
-                        showDateFilterMenu(
-                          context: context,
-                          isSelected: _blocRole.currentSortOrder,
-                          aToZTap: () {
-                            context.read<UserTableBloc>().add(const DateNewestToOldestEvent());
-                          },
-                          zToaTap: () {
-                            context.read<UserTableBloc>().add(const DateOldestToNewestEvent());
-                          },
-                        );
-                      }
-                      if (columnIndex == 6) {
-                        final Map<String, bool> checkboxStates = {
-                          for (var item in _blocRole.createdBy)
-                            item: _blocRole.selectedCreatedBy.contains(item),
-                        };
-                        final RenderBox overlay =
-                            Overlay.of(context).context.findRenderObject() as RenderBox;
-                        showPopUpFilterMenu(
-                          position: RelativeRect.fromLTRB(
-                            overlay.size.width / 1,
-                            240,
-                            overlay.size.width / 4,
-                            0,
-                          ),
-                          list: _blocRole.createdBy,
-                          context: context,
-                          checkboxStates: checkboxStates,
-                          isSelected: _blocRole.currentSortCreatedBy,
-                          onOkPressed: () {
-                            searchController.clear();
-                            _blocRole.add(FilterClearEvent());
-                            final selectedItems = checkboxStates.entries
-                                .where((entry) => entry.value)
-                                .map((entry) => entry.key)
-                                .toList();
-                            Navigator.of(context).pop();
-                            _blocRole.add(FilterUsersByCreatedEvent(
-                                selectedCreatedBy: selectedItems,
-                                sortOrder: _blocRole.currentSortCreatedBy));
-                          },
-                          onSortAtoZ: (v) {
-                            _blocRole.currentSortCreatedBy = v;
-                          },
-                          onSortZtoA: (v) {
-                            _blocRole.currentSortCreatedBy = v;
-                          },
-                        );
-                      }
-                      if (columnIndex == 7) {
-                        final Map<String, bool> checkboxStates = {
-                          for (var item in _blocRole.status)
-                            item: _blocRole.selectedStatuses.contains(item),
-                        };
+                        if (columnIndex == 3) {
+                          final Map<String, bool> checkboxStates = {
+                            for (var item in _blocRole.roleTypes)
+                              item: _blocRole.selectedRoles.contains(item),
+                          };
+                          final RenderBox overlay = Overlay.of(context)
+                              .context
+                              .findRenderObject() as RenderBox;
+                          showPopUpFilterMenu(
+                            position: RelativeRect.fromLTRB(
+                              overlay.size.width / 4,
+                              240,
+                              overlay.size.width / 4,
+                              0,
+                            ),
+                            list: _blocRole.roleTypes,
+                            context: context,
+                            checkboxStates: checkboxStates,
+                            isSelected: _blocRole.currentSortRole,
+                            onOkPressed: () {
+                              searchController.clear();
+                              _blocRole.add(FilterClearEvent());
+                              final selectedItems = checkboxStates.entries
+                                  .where((entry) => entry.value)
+                                  .map((entry) => entry.key)
+                                  .toList();
+                              Navigator.of(context).pop();
+                              context.read<UserTableBloc>().add(
+                                  FilterUsersByRoleEvent(
+                                      selectedRoles: selectedItems,
+                                      sortOrder: _blocRole.currentSortRole));
+                            },
+                            onSortAtoZ: (v) {
+                              _blocRole.currentSortRole = v;
+                            },
+                            onSortZtoA: (v) {
+                              _blocRole.currentSortRole = v;
+                            },
+                          );
+                        }
+                        if (columnIndex == 4) {
+                          showDateFilterMenu(
+                            context: context,
+                            isSelected: _blocRole.currentSortOrder,
+                            aToZTap: () {
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const DateNewestToOldestEvent());
+                            },
+                            zToaTap: () {
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const DateOldestToNewestEvent());
+                            },
+                          );
+                        }
+                        if (columnIndex == 6) {
+                          final Map<String, bool> checkboxStates = {
+                            for (var item in _blocRole.createdBy)
+                              item: _blocRole.selectedCreatedBy.contains(item),
+                          };
+                          final RenderBox overlay = Overlay.of(context)
+                              .context
+                              .findRenderObject() as RenderBox;
+                          showPopUpFilterMenu(
+                            position: RelativeRect.fromLTRB(
+                              overlay.size.width / 1,
+                              240,
+                              overlay.size.width / 4,
+                              0,
+                            ),
+                            list: _blocRole.createdBy,
+                            context: context,
+                            checkboxStates: checkboxStates,
+                            isSelected: _blocRole.currentSortCreatedBy,
+                            onOkPressed: () {
+                              searchController.clear();
+                              _blocRole.add(FilterClearEvent());
+                              final selectedItems = checkboxStates.entries
+                                  .where((entry) => entry.value)
+                                  .map((entry) => entry.key)
+                                  .toList();
+                              Navigator.of(context).pop();
+                              _blocRole.add(FilterUsersByCreatedEvent(
+                                  selectedCreatedBy: selectedItems,
+                                  sortOrder: _blocRole.currentSortCreatedBy));
+                            },
+                            onSortAtoZ: (v) {
+                              _blocRole.currentSortCreatedBy = v;
+                            },
+                            onSortZtoA: (v) {
+                              _blocRole.currentSortCreatedBy = v;
+                            },
+                          );
+                        }
+                        if (columnIndex == 7) {
+                          final Map<String, bool> checkboxStates = {
+                            for (var item in _blocRole.status)
+                              item: _blocRole.selectedStatuses.contains(item),
+                          };
 
-                        final RenderBox overlay =
-                            Overlay.of(context).context.findRenderObject() as RenderBox;
-                        showPopUpFilterMenu(
-                          position: RelativeRect.fromLTRB(
-                            overlay.size.width / 0,
-                            240,
-                            overlay.size.width / 5,
-                            0,
+                          final RenderBox overlay = Overlay.of(context)
+                              .context
+                              .findRenderObject() as RenderBox;
+                          showPopUpFilterMenu(
+                            position: RelativeRect.fromLTRB(
+                              overlay.size.width / 0,
+                              240,
+                              overlay.size.width / 5,
+                              0,
+                            ),
+                            list: _blocRole.status,
+                            context: context,
+                            checkboxStates: checkboxStates,
+                            isSelected: _blocRole.currentSortStatus,
+                            onOkPressed: () {
+                              searchController.clear();
+                              _blocRole.add(FilterClearEvent());
+                              final selectedItems = checkboxStates.entries
+                                  .where((entry) => entry.value)
+                                  .map((entry) => entry.key)
+                                  .toList();
+                              Navigator.of(context).pop();
+                              _blocRole.add(FilterUsersByDeActevateEvent(
+                                  selectedActivate: selectedItems,
+                                  sortOrder: _blocRole.currentSortStatus));
+                            },
+                            onSortAtoZ: (v) {
+                              _blocRole.currentSortStatus = v;
+                            },
+                            onSortZtoA: (v) {
+                              _blocRole.currentSortStatus = v;
+                            },
+                          );
+                        }
+                        if (columnIndex == 8) {
+                          showDeActivateFilterMenu(
+                            context: context,
+                            isSelected: _blocRole.currentSortOrderDate,
+                            aToZTap: () {
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const DateNewestToOldestEvent());
+                            },
+                            zToaTap: () {
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const DateOldestToNewestEvent());
+                            },
+                          );
+                        }
+                      },
+                      titles: const [
+                        "Full Name",
+                        "Email Address",
+                        "Job Title",
+                        "Role",
+                        "Creation Date",
+                        "Creation Time",
+                        "Created By",
+                        "Status",
+                        "De/Activate",
+                        "Action"
+                      ],
+                      rows: state.users.map((user) {
+                        return [
+                          Text('${user.firstName} ${user.lastName}'),
+                          Text(user.email),
+                          Text(user.jobTitle),
+                          Text(user.roleType ?? ''),
+                          Text(user.createdDate ?? ''),
+                          Text(user.createdTime ?? ''),
+                          Text(user.invitedBy),
+                          status(
+                            status: user.isEnabled == false
+                                ? 'disabled'
+                                : user.status,
                           ),
-                          list: _blocRole.status,
-                          context: context,
-                          checkboxStates: checkboxStates,
-                          isSelected: _blocRole.currentSortStatus,
-                          onOkPressed: () {
-                            searchController.clear();
-                            _blocRole.add(FilterClearEvent());
-                            final selectedItems = checkboxStates.entries
-                                .where((entry) => entry.value)
-                                .map((entry) => entry.key)
-                                .toList();
-                            Navigator.of(context).pop();
-                            _blocRole.add(FilterUsersByDeActevateEvent(
-                                selectedActivate: selectedItems,
-                                sortOrder: _blocRole.currentSortStatus));
-                          },
-                          onSortAtoZ: (v) {
-                            _blocRole.currentSortStatus = v;
-                          },
-                          onSortZtoA: (v) {
-                            _blocRole.currentSortStatus = v;
-                          },
-                        );
-                      }
-                      if (columnIndex == 8) {
-                        showDeActivateFilterMenu(
-                          context: context,
-                          isSelected: _blocRole.currentSortOrderDate,
-                          aToZTap: () {
-                            context.read<UserTableBloc>().add(const DateNewestToOldestEvent());
-                          },
-                          zToaTap: () {
-                            context.read<UserTableBloc>().add(const DateOldestToNewestEvent());
-                          },
-                        );
-                      }
-                    },
-                    titles: const [
-                      "Full Name",
-                      "Email Address",
-                      "Job Title",
-                      "Role",
-                      "Creation Date",
-                      "Creation Time",
-                      "Created By",
-                      "Status",
-                      "De/Activate",
-                      "Action"
-                    ],
-                    rows: state.users.map((user) {
-                      return [
-                        Text('${user.firstName} ${user.lastName}'),
-                        Text(user.email),
-                        Text(user.jobTitle),
-                        Text(user.roleType ?? ''),
-                        Text(user.createdDate ?? ''),
-                        Text(user.createdTime ?? ''),
-                        Text(user.invitedBy),
-                        status(
-                          status: user.isEnabled == false ? 'disabled' : user.status,
-                        ),
-                        changeIconStatus(
-                          status: user.isEnabled == false ? 'disabled' : user.status,
-                          userId: user.uuid,
-                          onTap: user.status != "invited"
-                              ? () {
-                                  context.read<UserTableBloc>().add(ChangeUserStatus(
-                                      userId: user.uuid,
-                                      newStatus:
-                                          user.isEnabled == false ? 'disabled' : user.status));
-                                }
-                              : null,
-                        ),
-                        Row(
-                          children: [
-                            user.isEnabled != false
-                                ? actionButton(
-                                    isActive: true,
-                                    title: "Edit",
-                                    onTap: () {
-                                      context.read<SpaceTreeBloc>().add(ClearCachedData());
-                                      showDialog(
-                                        context: context,
-                                        barrierDismissible: false,
-                                        builder: (BuildContext context) {
-                                          return EditUserDialog(userId: user.uuid);
-                                        },
-                                      ).then((v) {
-                                        if (v != null) {
+                          changeIconStatus(
+                            status: user.isEnabled == false
+                                ? 'disabled'
+                                : user.status,
+                            userId: user.uuid,
+                            onTap: user.status != "invited"
+                                ? () {
+                                    context.read<UserTableBloc>().add(
+                                        ChangeUserStatus(
+                                            userId: user.uuid,
+                                            newStatus: user.isEnabled == false
+                                                ? 'disabled'
+                                                : user.status));
+                                  }
+                                : null,
+                          ),
+                          Row(
+                            children: [
+                              user.isEnabled != false
+                                  ? actionButton(
+                                      isActive: true,
+                                      title: "Edit",
+                                      onTap: () {
+                                        context
+                                            .read<SpaceTreeBloc>()
+                                            .add(ClearCachedData());
+                                        showDialog(
+                                          context: context,
+                                          barrierDismissible: false,
+                                          builder: (BuildContext context) {
+                                            return EditUserDialog(
+                                                userId: user.uuid);
+                                          },
+                                        ).then((v) {
                                           if (v != null) {
-                                            _blocRole.add(const GetUsers());
+                                            if (v != null) {
+                                              _blocRole.add(const GetUsers());
+                                            }
                                           }
+                                        });
+                                      },
+                                    )
+                                  : actionButton(
+                                      title: "Edit",
+                                    ),
+                              actionButton(
+                                title: "Delete",
+                                onTap: () {
+                                  showDialog(
+                                    context: context,
+                                    barrierDismissible: false,
+                                    builder: (BuildContext context) {
+                                      return DeleteUserDialog(
+                                          onTapDelete: () async {
+                                        try {
+                                          _blocRole.add(DeleteUserEvent(
+                                              user.uuid, context));
+                                          await Future.delayed(
+                                              const Duration(seconds: 2));
+                                          return true;
+                                        } catch (e) {
+                                          return false;
                                         }
                                       });
                                     },
-                                  )
-                                : actionButton(
-                                    title: "Edit",
-                                  ),
-                            actionButton(
-                              title: "Delete",
-                              onTap: () {
-                                showDialog(
-                                  context: context,
-                                  barrierDismissible: false,
-                                  builder: (BuildContext context) {
-                                    return DeleteUserDialog(onTapDelete: () async {
-                                      try {
-                                        _blocRole.add(DeleteUserEvent(user.uuid, context));
-                                        await Future.delayed(const Duration(seconds: 2));
-                                        return true;
-                                      } catch (e) {
-                                        return false;
-                                      }
-                                    });
-                                  },
-                                ).then((v) {
-                                  if (v != null) {
-                                    _blocRole.add(const GetUsers());
-                                  }
-                                });
-                              },
-                            ),
-                          ],
-                        ),
-                      ];
-                    }).toList(),
+                                  ).then((v) {
+                                    if (v != null) {
+                                      _blocRole.add(const GetUsers());
+                                    }
+                                  });
+                                },
+                              ),
+                            ],
+                          ),
+                        ];
+                      }).toList(),
+                    ),
                   ),
                   Padding(
                     padding: const EdgeInsets.all(8.0),
@@ -486,14 +523,20 @@ class UsersPage extends StatelessWidget {
                             visiblePagesCount: 4,
                             buttonRadius: 10,
                             selectedButtonColor: ColorsManager.secondaryColor,
-                            buttonUnSelectedBorderColor: ColorsManager.grayBorder,
-                            lastPageIcon: const Icon(Icons.keyboard_double_arrow_right),
-                            firstPageIcon: const Icon(Icons.keyboard_double_arrow_left),
-                            totalPages:
-                                (_blocRole.totalUsersCount.length / _blocRole.itemsPerPage).ceil(),
+                            buttonUnSelectedBorderColor:
+                                ColorsManager.grayBorder,
+                            lastPageIcon:
+                                const Icon(Icons.keyboard_double_arrow_right),
+                            firstPageIcon:
+                                const Icon(Icons.keyboard_double_arrow_left),
+                            totalPages: (_blocRole.totalUsersCount.length /
+                                    _blocRole.itemsPerPage)
+                                .ceil(),
                             currentPage: _blocRole.currentPage,
                             onPageChanged: (int pageNumber) {
-                              context.read<UserTableBloc>().add(ChangePage(pageNumber));
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(ChangePage(pageNumber));
                             },
                           ),
                         ),