Update function names to follow consistent naming convention in name_filter.dart and users_page.dart

SP-1592-FE-Build-AQI-Breakdown-Percentage-Chart-with-Standard-Color-Codes

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

@@ -0,0 +1,18 @@
+import 'package:equatable/equatable.dart';
+
+class RangeOfAqi extends Equatable {
+  final double min;
+  final double avg;
+  final double max;
+  final DateTime date;
+
+  const RangeOfAqi({
+    required this.min,
+    required this.avg,
+    required this.max,
+    required this.date,
+  });
+
+  @override
+  List<Object?> get props => [min, avg, max, date];
+}

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

@@ -0,0 +1,42 @@
+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/params/get_range_of_aqi_param.dart';
+import 'package:syncrow_web/pages/analytics/services/range_of_aqi/range_of_aqi_service.dart';
+
+part 'range_of_aqi_event.dart';
+part 'range_of_aqi_state.dart';
+
+class RangeOfAqiBloc extends Bloc<RangeOfAqiEvent, RangeOfAqiState> {
+  RangeOfAqiBloc(this._rangeOfAqiService) : super(const RangeOfAqiState()) {
+    on<LoadRangeOfAqiEvent>(_onLoadRangeOfAqiEvent);
+    on<ClearRangeOfAqiEvent>(_onClearRangeOfAqiEvent);
+  }
+
+  final RangeOfAqiService _rangeOfAqiService;
+
+  Future<void> _onLoadRangeOfAqiEvent(
+    LoadRangeOfAqiEvent event,
+    Emitter<RangeOfAqiState> emit,
+  ) async {
+    emit(
+      RangeOfAqiState(
+        status: RangeOfAqiStatus.loading,
+        rangeOfAqi: state.rangeOfAqi,
+      ),
+    );
+    try {
+      final rangeOfAqi = await _rangeOfAqiService.load(event.param);
+      emit(RangeOfAqiState(status: RangeOfAqiStatus.loaded, rangeOfAqi: rangeOfAqi));
+    } catch (e) {
+      emit(RangeOfAqiState(status: RangeOfAqiStatus.failure, errorMessage: '$e'));
+    }
+  }
+
+  void _onClearRangeOfAqiEvent(
+    ClearRangeOfAqiEvent event,
+    Emitter<RangeOfAqiState> emit,
+  ) {
+    emit(const RangeOfAqiState());
+  }
+}

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

@@ -0,0 +1,21 @@
+part of 'range_of_aqi_bloc.dart';
+
+sealed class RangeOfAqiEvent extends Equatable {
+  const RangeOfAqiEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+class LoadRangeOfAqiEvent extends RangeOfAqiEvent {
+  const LoadRangeOfAqiEvent(this.param);
+
+  final GetRangeOfAqiParam param;
+
+  @override
+  List<Object> get props => [param];
+}
+
+class ClearRangeOfAqiEvent extends RangeOfAqiEvent {
+  const ClearRangeOfAqiEvent();
+}

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

@@ -0,0 +1,18 @@
+part of 'range_of_aqi_bloc.dart';
+
+enum RangeOfAqiStatus { initial, loading, loaded, failure }
+
+final class RangeOfAqiState extends Equatable {
+  const RangeOfAqiState({
+    this.rangeOfAqi = const [],
+    this.status = RangeOfAqiStatus.initial,
+    this.errorMessage,
+  });
+
+  final RangeOfAqiStatus status;
+  final List<RangeOfAqi> rangeOfAqi;
+  final String? errorMessage;
+
+  @override
+  List<Object?> get props => [status, rangeOfAqi, errorMessage];
+}

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

@@ -1,8 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_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_analytics_devices_param.dart';
+import 'package:syncrow_web/pages/analytics/params/get_range_of_aqi_param.dart';
 
 abstract final class FetchAirQualityDataHelper {
   const FetchAirQualityDataHelper._();
@@ -12,11 +16,18 @@ abstract final class FetchAirQualityDataHelper {
     required String communityUuid,
     required String spaceUuid,
   }) {
+    final date = context.read<AnalyticsDatePickerBloc>().state.monthlyDate;
     loadAnalyticsDevices(
       context,
       communityUuid: communityUuid,
       spaceUuid: spaceUuid,
     );
+    loadRangeOfAqi(
+      context,
+      spaceUuid: spaceUuid,
+      date: date,
+      aqiType: AqiType.aqi,
+    );
   }
 
   static void clearAllData(BuildContext context) {
@@ -26,6 +37,8 @@ abstract final class FetchAirQualityDataHelper {
     context.read<RealtimeDeviceChangesBloc>().add(
           const RealtimeDeviceChangesClosed(),
         );
+
+    context.read<RangeOfAqiBloc>().add(const ClearRangeOfAqiEvent());
   }
 
   static void loadAnalyticsDevices(
@@ -49,4 +62,21 @@ abstract final class FetchAirQualityDataHelper {
           ),
         );
   }
+
+  static void loadRangeOfAqi(
+    BuildContext context, {
+    required String spaceUuid,
+    required DateTime date,
+    required AqiType aqiType,
+  }) {
+    context.read<RangeOfAqiBloc>().add(
+          LoadRangeOfAqiEvent(
+            GetRangeOfAqiParam(
+              date: date,
+              spaceUuid: spaceUuid,
+              aqiType: aqiType,
+            ),
+          ),
+        );
+  }
 }

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

@@ -0,0 +1,115 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/pages/analytics/models/range_of_aqi.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';
+
+abstract final class RangeOfAqiChartsHelper {
+  const RangeOfAqiChartsHelper._();
+
+  static const gradientData = <(Color color, String label)>[
+    (ColorsManager.goodGreen, 'Good'),
+    (ColorsManager.moderateYellow, 'Moderate'),
+    (ColorsManager.poorOrange, 'Poor'),
+    (ColorsManager.unhealthyRed, 'Unhealthy'),
+    (ColorsManager.severePink, 'Severe'),
+    (ColorsManager.hazardousPurple, 'Hazardous'),
+  ];
+
+  static FlTitlesData titlesData(BuildContext context, List<RangeOfAqi> data) {
+    final titlesData = EnergyManagementChartsHelper.titlesData(context);
+    return titlesData.copyWith(
+      bottomTitles: titlesData.bottomTitles.copyWith(
+        sideTitles: titlesData.bottomTitles.sideTitles.copyWith(
+          getTitlesWidget: (value, meta) => Padding(
+            padding: const EdgeInsetsDirectional.only(top: 20.0),
+            child: Text(
+              data.isNotEmpty ? data[value.toInt()].date.day.toString() : '',
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 12,
+                color: ColorsManager.lightGreyColor,
+              ),
+            ),
+          ),
+        ),
+      ),
+      leftTitles: titlesData.leftTitles.copyWith(
+        sideTitles: titlesData.leftTitles.sideTitles.copyWith(
+          reservedSize: 70,
+          interval: 50,
+          maxIncluded: false,
+          getTitlesWidget: (value, meta) {
+            final text = value >= 300 ? '301+' : value.toInt().toString();
+            return Padding(
+              padding: const EdgeInsetsDirectional.only(end: 12),
+              child: FittedBox(
+                alignment: AlignmentDirectional.centerStart,
+                fit: BoxFit.scaleDown,
+                child: Text(
+                  text,
+                  style: context.textTheme.bodySmall?.copyWith(
+                    fontSize: 12,
+                    color: ColorsManager.lightGreyColor,
+                  ),
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  static List<LineTooltipItem?> getTooltipItems(
+    List<LineBarSpot> touchedSpots,
+    List<RangeOfAqi> chartData,
+  ) {
+    return touchedSpots.asMap().entries.map((entry) {
+      final index = entry.key;
+      final spot = entry.value;
+
+      final label = switch (spot.barIndex) {
+        0 => 'Max',
+        1 => 'Avg',
+        2 => 'Min',
+        _ => '',
+      };
+
+      final date = DateFormat('dd/MM').format(chartData[spot.x.toInt()].date);
+
+      return LineTooltipItem(
+        index == 0 ? '$date\n' : '',
+        const TextStyle(
+          color: ColorsManager.textPrimaryColor,
+          fontWeight: FontWeight.w600,
+          fontSize: 12,
+        ),
+        children: [
+          TextSpan(text: '$label: ${spot.y.toStringAsFixed(0)}'),
+        ],
+      );
+    }).toList();
+  }
+
+  static LineTouchData lineTouchData(
+    List<RangeOfAqi> chartData,
+  ) {
+    return LineTouchData(
+      touchTooltipData: LineTouchTooltipData(
+        getTooltipColor: (touchTooltipItem) => ColorsManager.whiteColors,
+        tooltipBorder: const BorderSide(
+          color: ColorsManager.semiTransparentBlack,
+        ),
+        tooltipRoundedRadius: 16,
+        showOnTopOfTheChartBoxArea: false,
+        tooltipPadding: const EdgeInsets.all(8),
+        getTooltipItems: (touchedSpots) => RangeOfAqiChartsHelper.getTooltipItems(
+          touchedSpots,
+          chartData,
+        ),
+      ),
+    );
+  }
+}

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/range_of_aqi_chart_box.dart';
 
 class AirQualityView extends StatelessWidget {
   const AirQualityView({super.key});
@@ -22,7 +23,7 @@ class AirQualityView extends StatelessWidget {
                   height: height * 1.2,
                   child: const AirQualityEndSideWidget(),
                 ),
-                SizedBox(height: height * 0.5, child: const Placeholder()),
+                SizedBox(height: height * 0.5, child: const RangeOfAqiChartBox()),
                 SizedBox(height: height * 0.5, child: const Placeholder()),
               ],
             ),
@@ -40,16 +41,16 @@ class AirQualityView extends StatelessWidget {
                     spacing: 32,
                     children: [
                       Expanded(
-                        flex: 2,
+                        flex: 5,
                         child: Column(
                           spacing: 20,
                           children: [
-                            Expanded(child: Placeholder()),
+                            Expanded(child: RangeOfAqiChartBox()),
                             Expanded(child: Placeholder()),
                           ],
                         ),
                       ),
-                      Expanded(child: AirQualityEndSideWidget()),
+                      Expanded(flex: 2, child: AirQualityEndSideWidget()),
                     ],
                   ),
                 ),

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

@@ -51,7 +51,6 @@ class AirQualityEndSideWidget extends StatelessWidget {
         Expanded(
           flex: 3,
           child: FittedBox(
-            fit: BoxFit.scaleDown,
             alignment: AlignmentDirectional.centerStart,
             child: SelectableText(
               'AQI Sensor',
@@ -65,9 +64,8 @@ class AirQualityEndSideWidget extends StatelessWidget {
         ),
         const Spacer(),
         Expanded(
-          flex: 2,
+          flex: 4,
           child: FittedBox(
-            fit: BoxFit.scaleDown,
             alignment: AlignmentDirectional.centerEnd,
             child: AnalyticsDeviceDropdown(
               onChanged: (value) {

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

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+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'),
+  pm10('PM10'),
+  hcho('HCHO'),
+  tvoc('TVOC'),
+  co2('CO2'),
+  c6h6('C6H6');
+
+  final String value;
+  const AqiType(this.value);
+}
+
+class AqiTypeDropdown extends StatefulWidget {
+  const AqiTypeDropdown({super.key, required this.onChanged});
+
+  final ValueChanged<AqiType?> onChanged;
+
+  @override
+  State<AqiTypeDropdown> createState() => _AqiTypeDropdownState();
+}
+
+class _AqiTypeDropdownState extends State<AqiTypeDropdown> {
+  AqiType? _selectedItem = AqiType.aqi;
+
+  void _updateSelectedItem(AqiType? item) => setState(() => _selectedItem = item);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(
+          color: ColorsManager.greyColor,
+          width: 1,
+        ),
+      ),
+      child: DropdownButton<AqiType?>(
+        value: _selectedItem,
+        isDense: true,
+        borderRadius: BorderRadius.circular(16),
+        dropdownColor: ColorsManager.whiteColors,
+        underline: const SizedBox.shrink(),
+        icon: const RotatedBox(
+          quarterTurns: 1,
+          child: Icon(Icons.chevron_right, size: 24),
+        ),
+        style: _getTextStyle(context),
+        padding: const EdgeInsetsDirectional.symmetric(
+          horizontal: 12,
+          vertical: 2,
+        ),
+        items: AqiType.values
+            .map((e) => DropdownMenuItem(value: e, child: Text(e.value)))
+            .toList(),
+        onChanged: (value) {
+          _updateSelectedItem(value);
+          widget.onChanged(value);
+        },
+      ),
+    );
+  }
+
+  TextStyle? _getTextStyle(BuildContext context) {
+    return context.textTheme.labelSmall?.copyWith(
+      color: ColorsManager.textPrimaryColor,
+      fontWeight: FontWeight.w700,
+      fontSize: 12,
+    );
+  }
+}

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

@@ -0,0 +1,97 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/models/range_of_aqi.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/range_of_aqi_charts_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class RangeOfAqiChart extends StatelessWidget {
+  final List<RangeOfAqi> chartData;
+
+  const RangeOfAqiChart({
+    super.key,
+    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,
+        ),
+      ];
+
+  @override
+  Widget build(BuildContext context) {
+    return LineChart(
+      LineChartData(
+        minY: 0,
+        maxY: 301,
+        clipData: const FlClipData.vertical(),
+        gridData: EnergyManagementChartsHelper.gridData(horizontalInterval: 50),
+        titlesData: RangeOfAqiChartsHelper.titlesData(context, chartData),
+        borderData: EnergyManagementChartsHelper.borderData(),
+        lineTouchData: RangeOfAqiChartsHelper.lineTouchData(chartData),
+        betweenBarsData: [
+          BetweenBarsData(
+            fromIndex: 0,
+            toIndex: 2,
+            gradient: LinearGradient(
+              begin: Alignment.bottomCenter,
+              end: Alignment.topCenter,
+              stops: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0],
+              colors: RangeOfAqiChartsHelper.gradientData.map((e) {
+                final (color, _) = e;
+                return color.withValues(alpha: 0.6);
+              }).toList(),
+            ),
+          ),
+        ],
+        lineBarsData: _lines.map((e) {
+          final (values, color, dotColor) = e;
+          return _buildLine(values: values, color: color, dotColor: dotColor);
+        }).toList(),
+      ),
+      duration: Duration.zero,
+    );
+  }
+
+  FlDotData _buildDotData(Color color) {
+    return FlDotData(
+      show: true,
+      getDotPainter: (_, __, ___, ____) => FlDotCirclePainter(
+        radius: 2,
+        color: ColorsManager.whiteColors,
+        strokeWidth: 2,
+        strokeColor: color,
+      ),
+    );
+  }
+
+  LineChartBarData _buildLine({
+    required List<double> values,
+    required Color color,
+    Color? dotColor,
+  }) {
+    const invisibleDot = FlDotData(show: false);
+    return LineChartBarData(
+      spots: List.generate(values.length, (i) => FlSpot(i.toDouble(), values[i])),
+      isCurved: true,
+      color: color,
+      barWidth: 4,
+      isStrokeCapRound: true,
+      dotData: dotColor != null ? _buildDotData(dotColor) : invisibleDot,
+      belowBarData: BarAreaData(show: false),
+    );
+  }
+}

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

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_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/range_of_aqi_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_title.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class RangeOfAqiChartBox extends StatelessWidget {
+  const RangeOfAqiChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<RangeOfAqiBloc, RangeOfAqiState>(
+      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),
+              ],
+              RangeOfAqiChartTitle(
+                isLoading: state.status == RangeOfAqiStatus.loading,
+              ),
+              const SizedBox(height: 10),
+              const Divider(),
+              const SizedBox(height: 20),
+              Expanded(child: RangeOfAqiChart(chartData: state.rangeOfAqi)),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,82 @@
+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/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});
+  final bool isLoading;
+
+  static const List<(Color color, String title, bool hasBorder)> _colors = [
+    (Color(0xFF962DFF), 'Max', false),
+    (Color(0xFF93AAFD), 'Min', false),
+    (Colors.transparent, 'Avg', true),
+  ];
+
+  @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('Range of AQI')),
+          ),
+        ),
+        const Spacer(flex: 3),
+        ..._colors.map(
+          (e) {
+            final (color, title, hasBorder) = e;
+            return Expanded(
+              child: IntrinsicHeight(
+                child: FittedBox(
+                  fit: BoxFit.fitWidth,
+                  alignment: AlignmentDirectional.centerStart,
+                  child: Padding(
+                    padding: const EdgeInsetsDirectional.only(end: 16),
+                    child: ChartInformativeCell(
+                      title: Text(title),
+                      color: color,
+                      hasBorder: hasBorder,
+                    ),
+                  ),
+                ),
+              ),
+            );
+          },
+        ),
+        const Spacer(),
+        Expanded(
+          flex: 2,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            alignment: AlignmentDirectional.centerEnd,
+            child: AqiTypeDropdown(
+              onChanged: (value) {
+                final spaceTreeState = context.read<SpaceTreeBloc>().state;
+                final spaceUuid = spaceTreeState.selectedSpaces.firstOrNull;
+
+                if (spaceUuid == null) return;
+
+                FetchAirQualityDataHelper.loadRangeOfAqi(
+                  context,
+                  spaceUuid: spaceUuid,
+                  date: context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
+                  aqiType: value ?? AqiType.aqi,
+                );
+              },
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

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/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';
 import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_tab/analytics_tab_bloc.dart';
@@ -20,6 +21,7 @@ import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_devi
 import 'package:syncrow_web/pages/analytics/services/occupacy/remote_occupancy_service.dart';
 import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/remote_occupancy_heat_map_service.dart';
 import 'package:syncrow_web/pages/analytics/services/power_clamp_info/remote_power_clamp_info_service.dart';
+import 'package:syncrow_web/pages/analytics/services/range_of_aqi/fake_range_of_aqi_service.dart';
 import 'package:syncrow_web/pages/analytics/services/realtime_device_service/firebase_realtime_device_service.dart';
 import 'package:syncrow_web/pages/analytics/services/total_energy_consumption/remote_total_energy_consumption_service.dart';
 import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
@@ -94,6 +96,11 @@ class _AnalyticsPageState extends State<AnalyticsPage> {
             ),
           ),
         ),
+        BlocProvider(
+          create: (context) => RangeOfAqiBloc(
+            FakeRangeOfAqiService(),
+          ),
+        ),
       ],
       child: const AnalyticsPageForm(),
     );

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

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class ChartInformativeCell extends StatelessWidget {
+  const ChartInformativeCell({
+    super.key,
+    required this.title,
+    required this.color,
+    this.hasBorder = false,
+  });
+
+  final Widget title;
+  final Color color;
+  final bool hasBorder;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: MediaQuery.sizeOf(context).height * 0.0385,
+      padding: const EdgeInsetsDirectional.symmetric(
+        vertical: 8,
+        horizontal: 12,
+      ),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadiusDirectional.circular(8),
+        border: Border.all(
+          color: ColorsManager.greyColor,
+          width: 1,
+        ),
+      ),
+      child: FittedBox(
+        fit: BoxFit.scaleDown,
+        alignment: Alignment.center,
+        child: Row(
+          spacing: 6,
+          children: [
+            Container(
+              height: 8,
+              width: 8,
+              decoration: BoxDecoration(
+                color: color,
+                border: Border.all(color: ColorsManager.grayBorder),
+                shape: BoxShape.circle,
+              ),
+            ),
+            DefaultTextStyle(
+              style: const TextStyle(
+                color: ColorsManager.blackColor,
+                fontWeight: FontWeight.w400,
+                fontSize: 14,
+              ),
+              child: title,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -93,12 +93,14 @@ abstract final class EnergyManagementChartsHelper {
     );
   }
 
-  static FlGridData gridData() {
+  static FlGridData gridData({
+    double horizontalInterval = 250,
+  }) {
     return FlGridData(
       show: true,
       drawVerticalLine: false,
       drawHorizontalLine: true,
-      horizontalInterval: 250,
+      horizontalInterval: horizontalInterval,
       getDrawingHorizontalLine: (value) {
         return FlLine(
           color: ColorsManager.greyColor,

lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart

@@ -18,6 +18,7 @@ class EnergyConsumptionByPhasesChart extends StatelessWidget {
   Widget build(BuildContext context) {
     return BarChart(
       BarChartData(
+
         gridData: EnergyManagementChartsHelper.gridData().copyWith(
           checkToShowHorizontalLine: (value) => true,
           horizontalInterval: 250,

lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart

@@ -12,6 +12,7 @@ class EnergyConsumptionPerDeviceChart extends StatelessWidget {
   Widget build(BuildContext context) {
     return LineChart(
       LineChartData(
+        clipData: const FlClipData.vertical(),
         titlesData: EnergyManagementChartsHelper.titlesData(
           context,
           leftTitlesInterval: 250,

lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
 import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
 
 class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
   const EnergyConsumptionPerDeviceDevicesList({
@@ -42,42 +42,7 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
 
     return Tooltip(
       message: '${device.name}\n${device.productDevice?.uuid ?? ''}',
-      child: Container(
-        height: MediaQuery.sizeOf(context).height * 0.0365,
-        padding: const EdgeInsetsDirectional.symmetric(
-          vertical: 8,
-          horizontal: 12,
-        ),
-        decoration: BoxDecoration(
-          borderRadius: BorderRadiusDirectional.circular(8),
-          border: Border.all(
-            color: ColorsManager.greyColor,
-            width: 1,
-          ),
-        ),
-        child: FittedBox(
-          fit: BoxFit.scaleDown,
-          alignment: Alignment.center,
-          child: Row(
-            spacing: 6,
-            children: [
-              CircleAvatar(
-                radius: 4,
-                backgroundColor: deviceColor,
-              ),
-              Text(
-                device.name,
-                textAlign: TextAlign.center,
-                style: const TextStyle(
-                  color: ColorsManager.blackColor,
-                  fontWeight: FontWeight.w400,
-                  fontSize: 14,
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
+      child: ChartInformativeCell(title: Text(device.name), color: deviceColor),
     );
   }
 }

lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart

@@ -14,6 +14,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
     return Expanded(
       child: LineChart(
         LineChartData(
+          clipData: const FlClipData.vertical(),
           titlesData: EnergyManagementChartsHelper.titlesData(
             context,
             leftTitlesInterval: 250,
@@ -28,6 +29,7 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
         ),
         duration: Duration.zero,
         curve: Curves.easeIn,
+        
       ),
     );
   }
@@ -35,9 +37,6 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
   List<LineChartBarData> get _lineBarsData {
     return [
       LineChartBarData(
-        preventCurveOvershootingThreshold: 0.1,
-        curveSmoothness: 0.55,
-        preventCurveOverShooting: true,
         spots: chartData
             .asMap()
             .entries

lib/pages/analytics/params/get_range_of_aqi_param.dart

@@ -0,0 +1,18 @@
+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(
+    {
+    required this.date,
+    required this.spaceUuid,
+    required this.aqiType,
+  });
+
+  @override
+  List<Object?> get props => [date, spaceUuid];
+}

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

@@ -0,0 +1,30 @@
+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';
+
+class FakeRangeOfAqiService implements RangeOfAqiService {
+  @override
+  Future<List<RangeOfAqi>> load(GetRangeOfAqiParam param) async {
+    return await Future.delayed(const Duration(milliseconds: 800), () {
+      final random = DateTime.now().millisecondsSinceEpoch;
+
+      return List.generate(30, (index) {
+        final date = DateTime(2025, 5, 1).add(Duration(days: index));
+
+        final min = ((random + index * 17) % 200).toDouble();
+        final avgDelta = ((random + index * 23) % 50).toDouble() + 20;
+        final maxDelta = ((random + index * 31) % 50).toDouble() + 30;
+
+        final avg = (min + avgDelta).clamp(0.0, 301.0);
+        final max = (avg + maxDelta).clamp(0.0, 301.0);
+
+        return RangeOfAqi(
+          min: min,
+          avg: avg,
+          max: max,
+          date: date,
+        );
+      });
+    });
+  }
+}

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

@@ -0,0 +1,6 @@
+import 'package:syncrow_web/pages/analytics/models/range_of_aqi.dart';
+import 'package:syncrow_web/pages/analytics/params/get_range_of_aqi_param.dart';
+
+abstract interface class RangeOfAqiService {
+  Future<List<RangeOfAqi>> load(GetRangeOfAqiParam param);
+}

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/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));
                             },
                           ),
                         ),

lib/utils/color_manager.dart

@@ -73,4 +73,14 @@ abstract class ColorsManager {
   static const Color vividBlue = Color(0xFF023DFE);
   static const Color semiTransparentRed = Color(0x99FF0000);
   static const Color grey700 = Color(0xFF2D3748);
+  static const Color goodGreen = Color(0xFF0CEC16);
+  static const Color moderateYellow = Color(0xFFFAC96C);
+  static const Color poorOrange = Color(0xFFEC7400);
+  static const Color unhealthyRed = Color(0xFFD40000);
+  static const Color severePink = Color(0xFFD40094);
+  static const Color hazardousPurple = Color(0xFFBA01FD);
+  static const Color maxPurple = Color(0xFF962DFF);
+  static const Color maxPurpleDot = Color(0xFF5F00BD);
+  static const Color minBlue = Color(0xFF93AAFD);
+  static const Color minBlueDot = Color(0xFF023DFE);
 }