Update TotalEnergyConsumptionChart to adjust Y-axis limits and intervals for better data representation (#302)

<!--
  Thanks for contributing!

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

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

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

## 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/analytics_device.dart

@@ -25,8 +25,8 @@ class AnalyticsDevice {
 
   factory AnalyticsDevice.fromJson(Map<String, dynamic> json) {
     return AnalyticsDevice(
-      uuid: json['uuid'] as String,
-      name: json['name'] as String,
+      uuid: json['uuid'] as String? ?? '',
+      name: json['name'] as String? ?? '',
       createdAt: json['createdAt'] != null
           ? DateTime.parse(json['createdAt'] as String)
           : null,
@@ -39,8 +39,8 @@ class AnalyticsDevice {
           ? ProductDevice.fromJson(json['productDevice'] as Map<String, dynamic>)
           : null,
       spaceUuid: json['spaceUuid'] as String?,
-      latitude: json['lat'] != null ? double.parse(json['lat'] as String) : null,
-      longitude: json['lon'] != null ? double.parse(json['lon'] as String) : null,
+      latitude: json['lat'] != null ? double.parse(json['lat'] as String? ?? '0.0') : null,
+      longitude: json['lon'] != null ? double.parse(json['lon'] as String? ?? '0.0') : null,
     );
   }
 }

lib/pages/analytics/models/occupancy_heat_map_model.dart

@@ -14,12 +14,21 @@ class OccupancyHeatMapModel extends Equatable {
   });
 
   factory OccupancyHeatMapModel.fromJson(Map<String, dynamic> json) {
+    final eventDate = json['event_date'] as String?;
+    final year = eventDate?.split('-')[0];
+    final month = eventDate?.split('-')[1];
+    final day = eventDate?.split('-')[2];
+
     return OccupancyHeatMapModel(
       uuid: json['uuid'] as String? ?? '',
-      eventDate: DateTime.parse(
-        json['event_date'] as String? ?? '${DateTime.now()}',
-      ),
-      countTotalPresenceDetected: json['count_total_presence_detected'] as int? ?? 0,
+      eventDate: DateTime(
+        int.parse(year ?? '2025'),
+        int.parse(month ?? '1'),
+        int.parse(day ?? '1'),
+      ).toUtc(),
+      countTotalPresenceDetected: num.parse(
+        json['count_total_presence_detected']?.toString() ?? '0',
+      ).toInt(),
     );
   }
 

lib/pages/analytics/models/range_of_aqi.dart

@@ -38,9 +38,9 @@ class RangeOfAqiValue extends Equatable {
   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(),
+      min: (json['min'] as num? ?? 0).toDouble(),
+      average: (json['average'] as num? ?? 0).toDouble(),
+      max: (json['max'] as num? ?? 0).toDouble(),
     );
   }
 

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

@@ -4,7 +4,6 @@ import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/air_qualit
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/device_location/device_location_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_type_dropdown.dart';
-import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_devices/analytics_devices_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart';
 import 'package:syncrow_web/pages/analytics/params/get_air_quality_distribution_param.dart';
@@ -22,13 +21,14 @@ abstract final class FetchAirQualityDataHelper {
     required String spaceUuid,
     bool shouldFetchAnalyticsDevices = true,
   }) {
-    final date = context.read<AnalyticsDatePickerBloc>().state.monthlyDate;
     final aqiType = context.read<AirQualityDistributionBloc>().state.selectedAqiType;
-    loadAnalyticsDevices(
-      context,
-      communityUuid: communityUuid,
-      spaceUuid: spaceUuid,
-    );
+    if (shouldFetchAnalyticsDevices) {
+      loadAnalyticsDevices(
+        context,
+        communityUuid: communityUuid,
+        spaceUuid: spaceUuid,
+      );
+    }
     loadRangeOfAqi(
       context,
       spaceUuid: spaceUuid,

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

@@ -18,11 +18,16 @@ abstract final class RangeOfAqiChartsHelper {
     (ColorsManager.hazardousPurple, 'Hazardous'),
   ];
 
-  static FlTitlesData titlesData(BuildContext context, List<RangeOfAqi> data) {
+  static FlTitlesData titlesData(
+    BuildContext context,
+    List<RangeOfAqi> data, {
+    double leftSideInterval = 50,
+  }) {
     final titlesData = EnergyManagementChartsHelper.titlesData(context);
     return titlesData.copyWith(
       bottomTitles: titlesData.bottomTitles.copyWith(
         sideTitles: titlesData.bottomTitles.sideTitles.copyWith(
+          reservedSize: 36,
           getTitlesWidget: (value, meta) => Padding(
             padding: const EdgeInsetsDirectional.only(top: 20.0),
             child: Text(
@@ -38,10 +43,11 @@ abstract final class RangeOfAqiChartsHelper {
       leftTitles: titlesData.leftTitles.copyWith(
         sideTitles: titlesData.leftTitles.sideTitles.copyWith(
           reservedSize: 70,
-          interval: 50,
+          interval: leftSideInterval,
           maxIncluded: false,
+          minIncluded: true,
           getTitlesWidget: (value, meta) {
-            final text = value >= 300 ? '301+' : value.toInt().toString();
+            final text = value.toInt().toString();
             return Padding(
               padding: const EdgeInsetsDirectional.only(end: 12),
               child: FittedBox(

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

@@ -1,6 +1,7 @@
 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/aqi_legend.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart';
 
 class AirQualityView extends StatelessWidget {
@@ -20,6 +21,10 @@ class AirQualityView extends StatelessWidget {
             child: Column(
               spacing: 32,
               children: [
+                SizedBox(
+                  height: height * 0.1,
+                  child: const AqiLegend(),
+                ),
                 SizedBox(
                   height: height * 1.2,
                   child: const AirQualityEndSideWidget(),
@@ -40,7 +45,7 @@ class AirQualityView extends StatelessWidget {
         return SingleChildScrollView(
           child: Container(
             padding: _padding,
-            height: height * 1.1,
+            height: height * 1.2,
             child: const Column(
               children: [
                 Expanded(
@@ -52,8 +57,9 @@ class AirQualityView extends StatelessWidget {
                         child: Column(
                           spacing: 20,
                           children: [
-                            Expanded(child: RangeOfAqiChartBox()),
-                            Expanded(child: AqiDistributionChartBox()),
+                            Expanded(flex: 2, child: AqiLegend()),
+                            Expanded(flex: 12, child: RangeOfAqiChartBox()),
+                            Expanded(flex: 12, child: AqiDistributionChartBox()),
                           ],
                         ),
                       ),

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

@@ -65,7 +65,7 @@ class AqiDeviceInfo extends StatelessWidget {
         );
         final tvocValue = _getValueForStatus(
           status,
-          'tvoc_value',
+          'voc_value',
           formatter: (value) => (value / 100).toStringAsFixed(2),
         );
 

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

@@ -3,6 +3,7 @@ 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/pages/analytics/widgets/charts_x_axis_title.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
@@ -32,8 +33,13 @@ class AqiDistributionChart extends StatelessWidget {
   }
 
   List<BarChartGroupData> _buildBarGroups() {
-    return List.generate(chartData.length, (index) {
-      final data = chartData[index];
+    final groups = <BarChartGroupData>[];
+    for (var i = 0; i < chartData.length; i++) {
+      final data = chartData[i];
+      final isAllZero = data.data.every((d) => d.percentage == 0);
+      if (isAllZero) {
+        continue;
+      }
       final stackItems = <BarChartRodData>[];
       double currentY = 0;
       var isFirstElement = true;
@@ -56,13 +62,15 @@ class AqiDistributionChart extends StatelessWidget {
         currentY += percentageData.percentage + _rodStackItemsSpacing;
         isFirstElement = false;
       }
-
-      return BarChartGroupData(
-        x: index,
-        barRods: stackItems,
-        groupVertically: true,
+      groups.add(
+        BarChartGroupData(
+          x: i,
+          barRods: stackItems,
+          groupVertically: true,
+        ),
       );
-    });
+    }
+    return groups;
   }
 
   BarTouchData _barTouchData(BuildContext context) {
@@ -73,6 +81,7 @@ class AqiDistributionChart extends StatelessWidget {
           color: ColorsManager.semiTransparentBlack,
         ),
         tooltipRoundedRadius: 16,
+        maxContentWidth: 500,
         tooltipPadding: const EdgeInsets.all(8),
         getTooltipItem: (group, groupIndex, rod, rodIndex) {
           final data = chartData[group.x];
@@ -81,10 +90,13 @@ class AqiDistributionChart extends StatelessWidget {
 
           final textStyle = context.textTheme.bodySmall?.copyWith(
             color: ColorsManager.blackColor,
-            fontSize: 8,
+            fontSize: 11,
           );
 
           for (final percentageData in data.data) {
+            if (percentageData.percentage == 0) {
+              continue;
+            }
             final percentage = percentageData.percentage.toStringAsFixed(1);
             final type = percentageData.type[0].toUpperCase() +
                 percentageData.type.substring(1).replaceAll('_', ' ');
@@ -98,7 +110,7 @@ class AqiDistributionChart extends StatelessWidget {
             DateFormat('dd/MM/yyyy').format(data.date),
             context.textTheme.bodyMedium!.copyWith(
               color: ColorsManager.blackColor,
-              fontSize: 9,
+              fontSize: 12,
               fontWeight: FontWeight.w600,
             ),
             textAlign: TextAlign.start,
@@ -118,7 +130,6 @@ class AqiDistributionChart extends StatelessWidget {
     final leftTitles = titlesData.leftTitles.copyWith(
       sideTitles: titlesData.leftTitles.sideTitles.copyWith(
         reservedSize: 70,
-        interval: 20,
         maxIncluded: false,
         minIncluded: true,
         getTitlesWidget: (value, meta) => Padding(
@@ -139,8 +150,9 @@ class AqiDistributionChart extends StatelessWidget {
     );
 
     final bottomTitles = AxisTitles(
+      axisNameWidget: const ChartsXAxisTitle(),
       sideTitles: SideTitles(
-        showTitles: true,
+        showTitles: chartData.isNotEmpty,
         getTitlesWidget: (value, _) => FittedBox(
           alignment: AlignmentDirectional.bottomCenter,
           fit: BoxFit.scaleDown,
@@ -148,7 +160,7 @@ class AqiDistributionChart extends StatelessWidget {
             chartData[value.toInt()].date.day.toString(),
             style: context.textTheme.bodySmall?.copyWith(
               color: ColorsManager.lightGreyColor,
-              fontSize: 8,
+              fontSize: 12,
             ),
           ),
         ),

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

@@ -19,7 +19,7 @@ class AqiDistributionChartTitle extends StatelessWidget {
       children: [
         ChartsLoadingWidget(isLoading: isLoading),
         const Expanded(
-          flex: 3,
+          flex: 4,
           child: FittedBox(
             fit: BoxFit.scaleDown,
             alignment: AlignmentDirectional.centerStart,
@@ -28,23 +28,26 @@ class AqiDistributionChartTitle extends StatelessWidget {
             ),
           ),
         ),
-        FittedBox(
-          alignment: AlignmentDirectional.centerEnd,
-          fit: BoxFit.scaleDown,
-          child: AqiTypeDropdown(
-            onChanged: (value) {
-              if (value != null) {
-                final bloc = context.read<AirQualityDistributionBloc>();
-                try {
-                  final param = _makeLoadAqiDistributionParam(context, value);
-                  bloc.add(LoadAirQualityDistribution(param));
-                } catch (_) {
-                  return;
-                } finally {
-                  bloc.add(UpdateAqiTypeEvent(value));
+        Expanded(
+          flex: 2,
+          child: FittedBox(
+            alignment: AlignmentDirectional.centerEnd,
+            fit: BoxFit.scaleDown,
+            child: AqiTypeDropdown(
+              onChanged: (value) {
+                if (value != null) {
+                  final bloc = context.read<AirQualityDistributionBloc>();
+                  try {
+                    final param = _makeLoadAqiDistributionParam(context, value);
+                    bloc.add(LoadAirQualityDistribution(param));
+                  } catch (_) {
+                    return;
+                  } finally {
+                    bloc.add(UpdateAqiTypeEvent(value));
+                  }
                 }
-              }
-            },
+              },
+            ),
           ),
         ),
       ],

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

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/helpers/range_of_aqi_charts_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class AqiLegend extends StatelessWidget {
+  const AqiLegend({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsetsDirectional.all(20),
+      decoration: subSectionContainerDecoration.copyWith(
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        spacing: 16,
+        children: RangeOfAqiChartsHelper.gradientData.map((e) {
+          return Flexible(
+            flex: 4,
+            child: FittedBox(
+              fit: BoxFit.fill,
+              child: ChartInformativeCell(
+                color: e.$1,
+                title: FittedBox(
+                  fit: BoxFit.fill,
+                  child: Text(e.$2),
+                ),
+                height: null,
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}

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

@@ -47,36 +47,37 @@ class AqiLocationInfoCell extends StatelessWidget {
               ),
             ),
             Align(
-              alignment: AlignmentDirectional.bottomEnd,
-              child: Padding(
-                padding: const EdgeInsetsDirectional.all(10),
-                child: SizedBox(
-                  height: 40,
-                  width: 120,
-                  child: FittedBox(
-                    fit: BoxFit.scaleDown,
-                    alignment: AlignmentDirectional.bottomEnd,
-                    child: Text(
-                      value,
-                      style: context.textTheme.bodySmall?.copyWith(
-                        color: ColorsManager.vividBlue.withValues(alpha: 0.7),
-                        fontWeight: FontWeight.w700,
-                        fontSize: 24,
+              alignment: AlignmentDirectional.bottomCenter,
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.end,
+                children: [
+                  Expanded(
+                    child: SvgPicture.asset(
+                      svgPath,
+                      fit: BoxFit.scaleDown,
+                      alignment: AlignmentDirectional.bottomStart,
+                    ),
+                  ),
+                  Expanded(
+                    child: FittedBox(
+                      fit: BoxFit.scaleDown,
+                      alignment: AlignmentDirectional.bottomEnd,
+                      child: Padding(
+                        padding: const EdgeInsetsDirectional.all(10),
+                        child: Text(
+                          value,
+                          style: context.textTheme.bodySmall?.copyWith(
+                            color: ColorsManager.vividBlue.withValues(
+                              alpha: 0.7,
+                            ),
+                            fontWeight: FontWeight.w700,
+                            fontSize: 24,
+                          ),
+                        ),
                       ),
                     ),
                   ),
-                ),
-              ),
-            ),
-            Align(
-              alignment: AlignmentDirectional.bottomStart,
-              child: SizedBox.square(
-                dimension: MediaQuery.sizeOf(context).width * 0.45,
-                child: FittedBox(
-                  fit: BoxFit.scaleDown,
-                  alignment: AlignmentDirectional.bottomStart,
-                  child: SvgPicture.asset(svgPath),
-                ),
+                ],
               ),
             ),
           ],

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

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

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

@@ -2,15 +2,18 @@ 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/air_quality/widgets/aqi_type_dropdown.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;
+  final AqiType selectedAqiType;
 
   const RangeOfAqiChart({
     super.key,
     required this.chartData,
+    required this.selectedAqiType,
   });
 
   List<(List<double> values, Color color, Color? dotColor)> get _lines {
@@ -45,15 +48,34 @@ class RangeOfAqiChart extends StatelessWidget {
     ];
   }
 
+  (double maxY, double interval) get _maxYForAqiType {
+    const aqiMaxValues = <AqiType, (double maxY, double interval)>{
+      AqiType.aqi: (401, 100),
+      AqiType.pm25: (351, 50),
+      AqiType.pm10: (501, 100),
+      AqiType.hcho: (301, 50),
+      AqiType.tvoc: (501, 50),
+      AqiType.co2: (1251, 250),
+    };
+
+    return aqiMaxValues[selectedAqiType]!;
+  }
+
   @override
   Widget build(BuildContext context) {
     return LineChart(
       LineChartData(
         minY: 0,
-        maxY: 301,
+        maxY: _maxYForAqiType.$1,
         clipData: const FlClipData.vertical(),
-        gridData: EnergyManagementChartsHelper.gridData(horizontalInterval: 50),
-        titlesData: RangeOfAqiChartsHelper.titlesData(context, chartData),
+        gridData: EnergyManagementChartsHelper.gridData(
+          horizontalInterval: _maxYForAqiType.$2,
+        ),
+        titlesData: RangeOfAqiChartsHelper.titlesData(
+          context,
+          chartData,
+          leftSideInterval: _maxYForAqiType.$2,
+        ),
         borderData: EnergyManagementChartsHelper.borderData(),
         lineTouchData: RangeOfAqiChartsHelper.lineTouchData(chartData),
         betweenBarsData: [

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

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

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

@@ -7,16 +7,18 @@ class ChartInformativeCell extends StatelessWidget {
     required this.title,
     required this.color,
     this.hasBorder = false,
+    this.height,
   });
 
   final Widget title;
   final Color color;
   final bool hasBorder;
+  final double? height;
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: MediaQuery.sizeOf(context).height * 0.0385,
+      height: height ?? MediaQuery.sizeOf(context).height * 0.0385,
       padding: const EdgeInsetsDirectional.symmetric(
         vertical: 8,
         horizontal: 12,

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

@@ -1,6 +1,7 @@
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/helpers/format_number_to_kwh.dart';
+import 'package:syncrow_web/pages/analytics/widgets/charts_x_axis_title.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
@@ -15,6 +16,7 @@ abstract final class EnergyManagementChartsHelper {
     return FlTitlesData(
       show: true,
       bottomTitles: AxisTitles(
+        axisNameWidget: const ChartsXAxisTitle(),
         drawBelowEverything: true,
         sideTitles: SideTitles(
           interval: 1,
@@ -62,17 +64,12 @@ abstract final class EnergyManagementChartsHelper {
     );
   }
 
-  static String getToolTipLabel(num month, double value) {
-    final monthLabel = month.toString();
-    final valueLabel = value.formatNumberToKwh;
-    final labels = [monthLabel, valueLabel];
-    return labels.where((element) => element.isNotEmpty).join(', ');
-  }
+  static String getToolTipLabel(double value) => value.formatNumberToKwh;
 
   static List<LineTooltipItem?> getTooltipItems(List<LineBarSpot> touchedSpots) {
     return touchedSpots.map((spot) {
       return LineTooltipItem(
-        getToolTipLabel(spot.x, spot.y),
+        getToolTipLabel(spot.y),
         const TextStyle(
           color: ColorsManager.textPrimaryColor,
           fontWeight: FontWeight.w600,

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

@@ -28,15 +28,29 @@ class AnalyticsDeviceDropdown extends StatelessWidget {
             ),
           ),
           child: Visibility(
-            visible: state.devices.isNotEmpty,
-            replacement: _buildNoDevicesFound(context),
-            child: _buildDevicesDropdown(context, state),
+            visible: state.status != AnalyticsDevicesStatus.loading,
+            replacement: _buildLoadingIndicator(),
+            child: Visibility(
+              visible: state.devices.isNotEmpty,
+              replacement: _buildNoDevicesFound(context),
+              child: _buildDevicesDropdown(context, state),
+            ),
           ),
         );
       },
     );
   }
 
+  Widget _buildLoadingIndicator() {
+    return const Center(
+      child: SizedBox(
+        width: 24,
+        height: 24,
+        child: CircularProgressIndicator(strokeWidth: 3),
+      ),
+    );
+  }
+
   static const _defaultPadding = EdgeInsetsDirectional.symmetric(
     horizontal: 20,
     vertical: 2,

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

@@ -37,7 +37,7 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
                       fit: BoxFit.scaleDown,
                       alignment: AlignmentDirectional.centerStart,
                       child: ChartTitle(
-                        title: Text('Energy Consumption per Device'),
+                        title: Text('Device energy consumed'),
                       ),
                     ),
                   ),

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

@@ -14,14 +14,17 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
     return Expanded(
       child: LineChart(
         LineChartData(
+          maxY: chartData.isEmpty
+              ? null
+              : chartData.map((e) => e.value).reduce((a, b) => a > b ? a : b) + 250,
           clipData: const FlClipData.vertical(),
           titlesData: EnergyManagementChartsHelper.titlesData(
             context,
-            leftTitlesInterval: 250,
+            leftTitlesInterval: 500,
           ),
           gridData: EnergyManagementChartsHelper.gridData().copyWith(
             checkToShowHorizontalLine: (value) => true,
-            horizontalInterval: 250,
+            horizontalInterval: 500,
           ),
           borderData: EnergyManagementChartsHelper.borderData(),
           lineTouchData: EnergyManagementChartsHelper.lineTouchData(),
@@ -29,7 +32,6 @@ class TotalEnergyConsumptionChart extends StatelessWidget {
         ),
         duration: Duration.zero,
         curve: Curves.easeIn,
-        
       ),
     );
   }

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

@@ -32,7 +32,7 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
                   child: FittedBox(
                     alignment: AlignmentDirectional.centerStart,
                     fit: BoxFit.scaleDown,
-                    child: ChartTitle(title: Text('Total Energy Consumption')),
+                    child: ChartTitle(title: Text('Space energy consumed')),
                   ),
                 ),
                 const Spacer(flex: 4),

lib/pages/analytics/modules/occupancy/helpers/fetch_occupancy_data_helper.dart

@@ -81,7 +81,7 @@ abstract final class FetchOccupancyDataHelper {
             param: GetAnalyticsDevicesParam(
               communityUuid: communityUuid,
               spaceUuid: spaceUuid,
-              deviceTypes: ['WPS', 'CPS'],
+              deviceTypes: ['WPS', 'CPS', 'NCPS'],
               requestType: AnalyticsDeviceRequestType.occupancy,
             ),
             onSuccess: (device) {

lib/pages/analytics/modules/occupancy/views/analytics_occupancy_view.dart

@@ -20,7 +20,7 @@ class AnalyticsOccupancyView extends StatelessWidget {
             child: Column(
               spacing: 32,
               children: [
-                SizedBox(height: height * 0.46, child: const OccupancyEndSideBar()),
+                SizedBox(height: height * 0.8, child: const OccupancyEndSideBar()),
                 SizedBox(height: height * 0.5, child: const OccupancyChartBox()),
                 SizedBox(height: height * 0.5, child: const OccupancyHeatMapBox()),
               ],

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

@@ -39,7 +39,7 @@ class HeatMapTooltip extends StatelessWidget {
             ),
             const Divider(height: 2, thickness: 1),
             Text(
-              '$value Occupants',
+              'Occupancy detected: $value',
               style: context.textTheme.bodySmall?.copyWith(
                 fontSize: 10,
                 fontWeight: FontWeight.w500,

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

@@ -52,7 +52,7 @@ class _InteractiveHeatMapState extends State<InteractiveHeatMap> {
             color: Colors.transparent,
             child: Transform.translate(
               offset: Offset(-(widget.cellSize * 2.5), -50),
-              child: HeatMapTooltip(date: item.date, value: item.value),
+              child: HeatMapTooltip(date: item.date.toUtc(), value: item.value),
             ),
           ),
         ),

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

@@ -2,6 +2,7 @@ import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/models/occupacy.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
+import 'package:syncrow_web/pages/analytics/widgets/charts_x_axis_title.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
@@ -88,8 +89,8 @@ class OccupancyChart extends StatelessWidget {
   }) {
     final data = chartData;
 
-    final occupancyValue = double.parse(data[group.x.toInt()].occupancy);
-    final percentage = '${(occupancyValue).toStringAsFixed(0)}%';
+    final occupancyValue = double.parse(data[group.x].occupancy);
+    final percentage = '${occupancyValue.toStringAsFixed(0)}%';
 
     return BarTooltipItem(
       percentage,
@@ -116,7 +117,7 @@ class OccupancyChart extends StatelessWidget {
             alignment: AlignmentDirectional.centerStart,
             fit: BoxFit.scaleDown,
             child: Text(
-              '${(value).toStringAsFixed(0)}%',
+              '${value.toStringAsFixed(0)}%',
               style: context.textTheme.bodySmall?.copyWith(
                 fontSize: 12,
                 color: ColorsManager.greyColor,
@@ -128,6 +129,7 @@ class OccupancyChart extends StatelessWidget {
     );
 
     final bottomTitles = AxisTitles(
+      axisNameWidget: const ChartsXAxisTitle(),
       sideTitles: SideTitles(
         showTitles: true,
         getTitlesWidget: (value, _) => FittedBox(

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

@@ -23,10 +23,9 @@ class OccupancyEndSideBar extends StatelessWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              const AnalyticsSidebarHeader(title: 'Presnce Sensor'),
+              const AnalyticsSidebarHeader(title: 'Presence Sensor'),
               Expanded(
                 child: SizedBox(
-                  // height: MediaQuery.sizeOf(context).height * 0.2,
                   child: PowerClampEnergyStatusWidget(
                     status: [
                       PowerClampEnergyStatus(

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

@@ -20,14 +20,14 @@ class OccupancyHeatMap extends StatelessWidget {
       : 0;
 
   DateTime _getStartingDate() {
-    final jan1 = DateTime(DateTime.now().year, 1, 1);
+    final jan1 = DateTime(DateTime.now().year, 1, 1).toUtc();
     final startOfWeek = jan1.subtract(Duration(days: jan1.weekday - 1));
     return startOfWeek;
   }
 
   List<OccupancyPaintItem> _generatePaintItems(DateTime startDate) {
     return List.generate(_totalWeeks * 7, (index) {
-      final date = startDate.add(Duration(days: index));
+      final date = startDate.toUtc().add(Duration(days: index));
       final value = heatMapData[date] ?? 0;
       return OccupancyPaintItem(index: index, value: value, date: date);
     });

lib/pages/analytics/widgets/charts_x_axis_title.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class ChartsXAxisTitle extends StatelessWidget {
+  const ChartsXAxisTitle({
+    this.label = 'Day of month',
+    super.key,
+  });
+
+  final String label;
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      label,
+      style: context.textTheme.bodySmall?.copyWith(
+        color: ColorsManager.lightGreyColor,
+        fontSize: 8,
+      ),
+    );
+  }
+}

lib/pages/auth/bloc/auth_bloc.dart

@@ -36,7 +36,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
 
   ////////////////////////////// forget password //////////////////////////////////
   final TextEditingController forgetEmailController = TextEditingController();
-  final TextEditingController forgetPasswordController = TextEditingController();
+  final TextEditingController forgetPasswordController =
+      TextEditingController();
   final TextEditingController forgetOtp = TextEditingController();
   final forgetFormKey = GlobalKey<FormState>();
   final forgetEmailKey = GlobalKey<FormState>();
@@ -53,7 +54,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
       return;
     }
     _remainingTime = 1;
-    add(UpdateTimerEvent(remainingTime: _remainingTime, isButtonEnabled: false));
+    add(UpdateTimerEvent(
+        remainingTime: _remainingTime, isButtonEnabled: false));
     try {
       forgetEmailValidate = '';
       _remainingTime = (await AuthenticationAPI.sendOtp(
@@ -90,7 +92,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
         _timer?.cancel();
         add(const UpdateTimerEvent(remainingTime: 0, isButtonEnabled: true));
       } else {
-        add(UpdateTimerEvent(remainingTime: _remainingTime, isButtonEnabled: false));
+        add(UpdateTimerEvent(
+            remainingTime: _remainingTime, isButtonEnabled: false));
       }
     });
   }
@@ -100,7 +103,7 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
     emit(const TimerState(isButtonEnabled: true, remainingTime: 0));
   }
 
-Future<void> changePassword(
+  Future<void> changePassword(
       ChangePasswordEvent event, Emitter<AuthState> emit) async {
     emit(LoadingForgetState());
     try {
@@ -122,7 +125,6 @@ Future<void> changePassword(
     }
   }
 
-
   String? validateCode(String? value) {
     if (value == null || value.isEmpty) {
       return 'Code is required';
@@ -131,7 +133,9 @@ Future<void> changePassword(
   }
 
   void _onUpdateTimer(UpdateTimerEvent event, Emitter<AuthState> emit) {
-    emit(TimerState(isButtonEnabled: event.isButtonEnabled, remainingTime: event.remainingTime));
+    emit(TimerState(
+        isButtonEnabled: event.isButtonEnabled,
+        remainingTime: event.remainingTime));
   }
 
   /////////////////////////////////////  login  /////////////////////////////////////
@@ -151,7 +155,6 @@ Future<void> changePassword(
   static UserModel? user;
   bool showValidationMessage = false;
 
- 
   void _login(LoginButtonPressed event, Emitter<AuthState> emit) async {
     emit(AuthLoading());
     if (isChecked) {
@@ -170,11 +173,11 @@ Future<void> changePassword(
         );
       } on APIException catch (e) {
         validate = e.message;
-        emit(LoginInitial());
+        emit(LoginFailure(error: validate));
         return;
       } catch (e) {
         validate = 'Something went wrong';
-        emit(LoginInitial());
+        emit(LoginFailure(error: validate));
         return;
       }
 
@@ -197,7 +200,6 @@ Future<void> changePassword(
     }
   }
 
-
   checkBoxToggle(
     CheckBoxEvent event,
     Emitter<AuthState> emit,
@@ -339,12 +341,14 @@ Future<void> changePassword(
   static Future<String> getTokenAndValidate() async {
     try {
       const storage = FlutterSecureStorage();
-      final firstLaunch =
-          await SharedPreferencesHelper.readBoolFromSP(StringsManager.firstLaunch) ?? true;
+      final firstLaunch = await SharedPreferencesHelper.readBoolFromSP(
+              StringsManager.firstLaunch) ??
+          true;
       if (firstLaunch) {
         storage.deleteAll();
       }
-      await SharedPreferencesHelper.saveBoolToSP(StringsManager.firstLaunch, false);
+      await SharedPreferencesHelper.saveBoolToSP(
+          StringsManager.firstLaunch, false);
       final value = await storage.read(key: Token.loginAccessTokenKey) ?? '';
       if (value.isEmpty) {
         return 'Token not found';
@@ -397,7 +401,9 @@ Future<void> changePassword(
     final String formattedTime = [
       if (days > 0) '${days}d', // Append 'd' for days
       if (days > 0 || hours > 0)
-        hours.toString().padLeft(2, '0'), // Show hours if there are days or hours
+        hours
+            .toString()
+            .padLeft(2, '0'), // Show hours if there are days or hours
       minutes.toString().padLeft(2, '0'),
       seconds.toString().padLeft(2, '0'),
     ].join(':');

lib/pages/common/custom_table.dart

@@ -179,31 +179,36 @@ 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 _buildEmptyState() => Container(
+        height: widget.size.height,
+        color: ColorsManager.whiteColors,
+        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),
+                    )
+                  ],
+                ),
+              ],
+            ),
+            SizedBox(height: widget.size.height * 0.5),
+          ],
+        ),
       );
   Widget _buildSelectAllCheckbox() {
     return Container(

lib/pages/device_managment/ac/bloc/ac_bloc.dart

@@ -45,7 +45,8 @@ class AcBloc extends Bloc<AcsEvent, AcsState> {
   ) async {
     emit(AcsLoadingState());
     try {
-      final status = await DevicesManagementApi().getDeviceStatus(event.deviceId);
+      final status =
+          await DevicesManagementApi().getDeviceStatus(event.deviceId);
       deviceStatus = AcStatusModel.fromJson(event.deviceId, status.status);
       if (deviceStatus.countdown1 != 0) {
         final totalMinutes = deviceStatus.countdown1 * 6;
@@ -68,12 +69,13 @@ class AcBloc extends Bloc<AcsEvent, AcsState> {
     }
   }
 
-  void _listenToChanges(deviceId) {
+  StreamSubscription<DatabaseEvent>? _deviceStatusSubscription;
+
+  void _listenToChanges(String deviceId) {
     try {
       final ref = FirebaseDatabase.instance.ref('device-status/$deviceId');
-      final stream = ref.onValue;
-
-      stream.listen((DatabaseEvent event) async {
+      _deviceStatusSubscription =
+          ref.onValue.listen((DatabaseEvent event) async {
         if (event.snapshot.value == null) return;
 
         Map<dynamic, dynamic> usersMap =
@@ -82,10 +84,14 @@ class AcBloc extends Bloc<AcsEvent, AcsState> {
         List<Status> statusList = [];
 
         usersMap['status'].forEach((element) {
-          statusList.add(Status(code: element['code'], value: element['value']));
+          statusList
+              .add(Status(code: element['code'], value: element['value']));
         });
 
-        deviceStatus = AcStatusModel.fromJson(usersMap['productUuid'], statusList);
+        deviceStatus =
+            AcStatusModel.fromJson(usersMap['productUuid'], statusList);
+        print('Device status updated: ${deviceStatus.acSwitch}');
+
         if (!isClosed) {
           add(AcStatusUpdated(deviceStatus));
         }
@@ -106,15 +112,14 @@ class AcBloc extends Bloc<AcsEvent, AcsState> {
     Emitter<AcsState> emit,
   ) async {
     emit(AcsLoadingState());
-    _updateDeviceFunctionFromCode(event.code, event.value);
-    emit(ACStatusLoaded(status: deviceStatus));
 
     try {
       final success = await controlDeviceService.controlDevice(
         deviceUuid: event.deviceId,
         status: Status(code: event.code, value: event.value),
       );
-
+      _updateDeviceFunctionFromCode(event.code, event.value);
+      emit(ACStatusLoaded(status: deviceStatus));
       if (!success) {
         emit(const AcsFailedState(error: 'Failed to control device'));
       }
@@ -129,8 +134,10 @@ class AcBloc extends Bloc<AcsEvent, AcsState> {
   ) async {
     emit(AcsLoadingState());
     try {
-      final status = await DevicesManagementApi().getBatchStatus(event.devicesIds);
-      deviceStatus = AcStatusModel.fromJson(event.devicesIds.first, status.status);
+      final status =
+          await DevicesManagementApi().getBatchStatus(event.devicesIds);
+      deviceStatus =
+          AcStatusModel.fromJson(event.devicesIds.first, status.status);
       emit(ACStatusLoaded(status: deviceStatus));
     } catch (e) {
       emit(AcsFailedState(error: e.toString()));
@@ -293,13 +300,17 @@ class AcBloc extends Bloc<AcsEvent, AcsState> {
         totalSeconds--;
         scheduledHours = totalSeconds ~/ 3600;
         scheduledMinutes = (totalSeconds % 3600) ~/ 60;
-        add(UpdateTimerEvent());
+        if (!isClosed) {
+          add(UpdateTimerEvent());
+        }
       } else {
         _countdownTimer?.cancel();
         timerActive = false;
         scheduledHours = 0;
         scheduledMinutes = 0;
-        add(TimerCompletedEvent());
+        if (!isClosed) {
+          add(TimerCompletedEvent());
+        }
       }
     });
   }
@@ -326,7 +337,9 @@ class AcBloc extends Bloc<AcsEvent, AcsState> {
       _startCountdownTimer(
         emit,
       );
-      add(UpdateTimerEvent());
+      if (!isClosed) {
+        add(UpdateTimerEvent());
+      }
     }
   }
 
@@ -370,6 +383,8 @@ class AcBloc extends Bloc<AcsEvent, AcsState> {
   @override
   Future<void> close() {
     add(OnClose());
+    _countdownTimer?.cancel();
+    _deviceStatusSubscription?.cancel();
     return super.close();
   }
 }

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

@@ -62,7 +62,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
 
         final buttonLabel =
             (selectedDevices.length > 1) ? 'Batch Control' : 'Control';
-
+        final isAnyDeviceOffline =
+            selectedDevices.any((element) => !(element.online ?? false));
         return Row(
           children: [
             Expanded(child: SpaceTreeView(
@@ -103,8 +104,26 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                 decoration: containerDecoration,
                                 child: Center(
                                   child: DefaultButton(
+                                    backgroundColor: isAnyDeviceOffline
+                                        ? ColorsManager.primaryColor
+                                            .withValues(alpha: 0.1)
+                                        : null,
                                     onPressed: isControlButtonEnabled
                                         ? () {
+                                            if (isAnyDeviceOffline) {
+                                              ScaffoldMessenger.of(context)
+                                                  .showSnackBar(
+                                                const SnackBar(
+                                                  content: Text(
+                                                    'This Device is Offline',
+                                                  ),
+                                                  duration:
+                                                      Duration(seconds: 2),
+                                                ),
+                                              );
+                                              return;
+                                            }
+
                                             if (selectedDevices.length == 1) {
                                               showDialog(
                                                 context: context,

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

@@ -12,7 +12,8 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
 //Smart Power Clamp
-class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayout {
+class SmartPowerDeviceControl extends StatelessWidget
+    with HelperResponsiveLayout {
   final String deviceId;
 
   const SmartPowerDeviceControl({super.key, required this.deviceId});
@@ -145,13 +146,16 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                       children: [
                         IconButton(
                           icon: const Icon(Icons.arrow_left),
-                          onPressed: () {
-                            blocProvider.add(SmartPowerArrowPressedEvent(-1));
-                            pageController.previousPage(
-                              duration: const Duration(milliseconds: 300),
-                              curve: Curves.easeInOut,
-                            );
-                          },
+                          onPressed: blocProvider.currentPage <= 0
+                              ? null
+                              : () {
+                                  blocProvider
+                                      .add(SmartPowerArrowPressedEvent(-1));
+                                  pageController.previousPage(
+                                    duration: const Duration(milliseconds: 300),
+                                    curve: Curves.easeInOut,
+                                  );
+                                },
                         ),
                         Text(
                           currentPage == 0
@@ -165,13 +169,16 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                         ),
                         IconButton(
                           icon: const Icon(Icons.arrow_right),
-                          onPressed: () {
-                            blocProvider.add(SmartPowerArrowPressedEvent(1));
-                            pageController.nextPage(
-                              duration: const Duration(milliseconds: 300),
-                              curve: Curves.easeInOut,
-                            );
-                          },
+                          onPressed: blocProvider.currentPage >= 3
+                              ? null
+                              : () {
+                                  blocProvider
+                                      .add(SmartPowerArrowPressedEvent(1));
+                                  pageController.nextPage(
+                                    duration: const Duration(milliseconds: 300),
+                                    curve: Curves.easeInOut,
+                                  );
+                                },
                         ),
                       ],
                     ),
@@ -195,8 +202,8 @@ class SmartPowerDeviceControl extends StatelessWidget with HelperResponsiveLayou
                             blocProvider.add(SelectDateEvent(context: context));
                             blocProvider.add(FilterRecordsByDateEvent(
                                 selectedDate: blocProvider.dateTime!,
-                                viewType:
-                                    blocProvider.views[blocProvider.currentIndex]));
+                                viewType: blocProvider
+                                    .views[blocProvider.currentIndex]));
                           },
                           widget: blocProvider.dateSwitcher(),
                           chartData: blocProvider.energyDataList.isNotEmpty

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

@@ -83,6 +83,12 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
       emit(currentState.copyWith(
         scheduleMode: event.scheduleMode,
         countdownRemaining: Duration.zero,
+        countdownHours: 0,
+        countdownMinutes: 0,
+        inchingHours: 0,
+        inchingMinutes: 0,
+        isCountdownActive: false,
+        isInchingActive: false,
       ));
     }
   }
@@ -94,6 +100,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
     if (state is ScheduleLoaded) {
       final currentState = state as ScheduleLoaded;
       emit(currentState.copyWith(
+        countdownSeconds: event.seconds,
         countdownHours: event.hours,
         countdownMinutes: event.minutes,
         inchingHours: 0,
@@ -113,6 +120,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
         inchingHours: event.hours,
         inchingMinutes: event.minutes,
         countdownRemaining: Duration.zero,
+        inchingSeconds: 0, // Add this
       ));
     }
   }
@@ -424,6 +432,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
               countdownMinutes: countdownDuration.inMinutes % 60,
               countdownRemaining: countdownDuration,
               isCountdownActive: true,
+              countdownSeconds: countdownDuration.inSeconds,
             ),
           );
 
@@ -437,6 +446,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
                 countdownMinutes: 0,
                 countdownRemaining: Duration.zero,
                 isCountdownActive: false,
+                countdownSeconds: 0,
               ),
             );
           }
@@ -448,6 +458,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
               inchingMinutes: inchingDuration.inMinutes % 60,
               isInchingActive: true,
               countdownRemaining: inchingDuration,
+              countdownSeconds: inchingDuration.inSeconds,
             ),
           );
         }
@@ -574,8 +585,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
   }
 
   String extractTime(String isoDateTime) {
-    // Example input: "2025-06-19T15:45:00.000"
-    return isoDateTime.split('T')[1].split('.')[0]; // gives "15:45:00"
+    return isoDateTime.split('T')[1].split('.')[0];
   }
 
   int? getTimeStampWithoutSeconds(DateTime? dateTime) {

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

@@ -146,14 +146,16 @@ class UpdateScheduleModeEvent extends ScheduleEvent {
 class UpdateCountdownTimeEvent extends ScheduleEvent {
   final int hours;
   final int minutes;
+  final int seconds;
 
   const UpdateCountdownTimeEvent({
     required this.hours,
     required this.minutes,
+    required this.seconds,
   });
 
   @override
-  List<Object> get props => [hours, minutes];
+  List<Object> get props => [hours, minutes, seconds];
 }
 
 class UpdateInchingTimeEvent extends ScheduleEvent {

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

@@ -26,11 +26,15 @@ class ScheduleLoaded extends ScheduleState {
   final bool isCountdownActive;
   final int inchingHours;
   final int inchingMinutes;
+  final int inchingSeconds;
   final bool isInchingActive;
   final ScheduleModes scheduleMode;
   final Duration? countdownRemaining;
+  final int? countdownSeconds;
 
   const ScheduleLoaded({
+    this.countdownSeconds = 0,
+    this.inchingSeconds = 0,
     required this.schedules,
     this.selectedTime,
     required this.selectedDays,
@@ -61,6 +65,9 @@ class ScheduleLoaded extends ScheduleState {
     bool? isInchingActive,
     ScheduleModes? scheduleMode,
     Duration? countdownRemaining,
+    String? deviceId,
+    int? countdownSeconds,
+    int? inchingSeconds,
   }) {
     return ScheduleLoaded(
       schedules: schedules ?? this.schedules,
@@ -68,7 +75,7 @@ class ScheduleLoaded extends ScheduleState {
       selectedDays: selectedDays ?? this.selectedDays,
       functionOn: functionOn ?? this.functionOn,
       isEditing: isEditing ?? this.isEditing,
-      deviceId: deviceId,
+      deviceId: deviceId ?? this.deviceId,
       countdownHours: countdownHours ?? this.countdownHours,
       countdownMinutes: countdownMinutes ?? this.countdownMinutes,
       isCountdownActive: isCountdownActive ?? this.isCountdownActive,
@@ -77,6 +84,8 @@ class ScheduleLoaded extends ScheduleState {
       isInchingActive: isInchingActive ?? this.isInchingActive,
       scheduleMode: scheduleMode ?? this.scheduleMode,
       countdownRemaining: countdownRemaining ?? this.countdownRemaining,
+      countdownSeconds: countdownSeconds ?? this.countdownSeconds,
+      inchingSeconds: inchingSeconds ?? this.inchingSeconds,
     );
   }
 
@@ -96,6 +105,8 @@ class ScheduleLoaded extends ScheduleState {
         isInchingActive,
         scheduleMode,
         countdownRemaining,
+        countdownSeconds,
+        inchingSeconds,
       ];
 }
 

lib/pages/device_managment/schedule_device/schedule_widgets/count_down_inching_view.dart

@@ -6,7 +6,8 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class CountdownInchingView extends StatefulWidget {
-  const CountdownInchingView({super.key});
+  final String deviceId;
+  const CountdownInchingView({super.key, required this.deviceId});
 
   @override
   State<CountdownInchingView> createState() => _CountdownInchingViewState();
@@ -15,25 +16,30 @@ class CountdownInchingView extends StatefulWidget {
 class _CountdownInchingViewState extends State<CountdownInchingView> {
   late FixedExtentScrollController _hoursController;
   late FixedExtentScrollController _minutesController;
+  late FixedExtentScrollController _secondsController;
 
   int _lastHours = -1;
   int _lastMinutes = -1;
+  int _lastSeconds = -1;
 
   @override
   void initState() {
     super.initState();
     _hoursController = FixedExtentScrollController();
     _minutesController = FixedExtentScrollController();
+    _secondsController = FixedExtentScrollController();
   }
 
   @override
   void dispose() {
     _hoursController.dispose();
     _minutesController.dispose();
+    _secondsController.dispose();
     super.dispose();
   }
 
-  void _updateControllers(int displayHours, int displayMinutes) {
+  void _updateControllers(
+      int displayHours, int displayMinutes, int displaySeconds) {
     if (_lastHours != displayHours) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         if (_hoursController.hasClients) {
@@ -50,6 +56,15 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
       });
       _lastMinutes = displayMinutes;
     }
+    // Update seconds controller
+    if (_lastSeconds != displaySeconds) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (_secondsController.hasClients) {
+          _secondsController.jumpToItem(displaySeconds);
+        }
+      });
+      _lastSeconds = displaySeconds;
+    }
   }
 
   @override
@@ -57,7 +72,6 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
     return BlocBuilder<ScheduleBloc, ScheduleState>(
       builder: (context, state) {
         if (state is! ScheduleLoaded) return const SizedBox.shrink();
-
         final isCountDown = state.scheduleMode == ScheduleModes.countdown;
         final isActive =
             isCountDown ? state.isCountdownActive : state.isInchingActive;
@@ -67,8 +81,21 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
         final displayMinutes = isActive && state.countdownRemaining != null
             ? state.countdownRemaining!.inMinutes.remainder(60)
             : (isCountDown ? state.countdownMinutes : state.inchingMinutes);
+        final displaySeconds = isActive && state.countdownRemaining != null
+            ? state.countdownRemaining!.inSeconds.remainder(60)
+            : (isCountDown ? state.countdownSeconds : state.inchingSeconds);
+
+        _updateControllers(displayHours, displayMinutes, displaySeconds!);
+
+        if (displayHours == 0 && displayMinutes == 0 && displaySeconds == 0) {
+          context.read<ScheduleBloc>().add(
+                StopScheduleEvent(
+                  mode: ScheduleModes.countdown,
+                  deviceId: widget.deviceId,
+                ),
+              );
+        }
 
-        _updateControllers(displayHours, displayMinutes);
         return Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -100,7 +127,10 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
                   (value) {
                     if (!isActive) {
                       context.read<ScheduleBloc>().add(UpdateCountdownTimeEvent(
-                          hours: value, minutes: displayMinutes));
+                            hours: value,
+                            minutes: displayMinutes,
+                            seconds: displaySeconds,
+                          ));
                     }
                   },
                   isActive: isActive,
@@ -115,11 +145,35 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
                   (value) {
                     if (!isActive) {
                       context.read<ScheduleBloc>().add(UpdateCountdownTimeEvent(
-                          hours: displayHours, minutes: value));
+                            hours: displayHours,
+                            minutes: value,
+                            seconds: displaySeconds,
+                          ));
                     }
                   },
                   isActive: isActive,
                 ),
+                const SizedBox(width: 10),
+                if (isActive)
+                  _buildPickerColumn(
+                    context,
+                    's',
+                    displaySeconds,
+                    60,
+                    _secondsController,
+                    (value) {
+                      if (!isActive) {
+                        context
+                            .read<ScheduleBloc>()
+                            .add(UpdateCountdownTimeEvent(
+                              hours: displayHours,
+                              minutes: displayMinutes,
+                              seconds: value,
+                            ));
+                      }
+                    },
+                    isActive: isActive,
+                  ),
               ],
             ),
           ],

lib/pages/device_managment/schedule_device/schedule_widgets/schedual_view.dart

@@ -74,7 +74,9 @@ class BuildScheduleView extends StatelessWidget {
                           ),
                         if (state.scheduleMode == ScheduleModes.countdown ||
                             state.scheduleMode == ScheduleModes.inching)
-                          const CountdownInchingView(),
+                           CountdownInchingView(
+                            deviceId: deviceUuid,
+                          ),
                         const SizedBox(height: 20),
                         if (state.scheduleMode == ScheduleModes.countdown)
                           CountdownModeButtons(

lib/pages/device_managment/shared/device_control_dialog.dart

@@ -79,6 +79,7 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
   }
 
   Widget _buildDeviceInfoSection() {
+    final isOnlineDevice = device.online != null && device.online!;
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 50),
       child: Table(
@@ -107,7 +108,7 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
                 'Installation Date and Time:',
                 formatDateTime(
                   DateTime.fromMillisecondsSinceEpoch(
-                    ((device.createTime ?? 0) * 1000),
+                    (device.createTime ?? 0) * 1000,
                   ),
                 ),
               ),
@@ -126,12 +127,16 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
           ),
           TableRow(
             children: [
-              _buildInfoRow('Status:', 'Online', statusColor: Colors.green),
+              _buildInfoRow(
+                'Status:',
+                isOnlineDevice ? 'Online' : 'offline',
+                statusColor: isOnlineDevice ? Colors.green : Colors.red,
+              ),
               _buildInfoRow(
                 'Last Offline Date and Time:',
                 formatDateTime(
                   DateTime.fromMillisecondsSinceEpoch(
-                    ((device.updateTime ?? 0) * 1000),
+                    (device.updateTime ?? 0) * 1000,
                   ),
                 ),
               ),

lib/pages/roles_and_permission/users_page/add_user_dialog/view/edit_user_dialog.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/auth/model/user_model.dart';
 import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:syncrow_web/pages/roles_and_permission/model/roles_user_model.dart';
 import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_bloc.dart';
 import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_event.dart';
 import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_status.dart';
@@ -12,8 +14,11 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class EditUserDialog extends StatefulWidget {
-  final String? userId;
-  const EditUserDialog({super.key, this.userId});
+  final RolesUserModel? user;
+  const EditUserDialog({
+    super.key,
+    this.user,
+  });
 
   @override
   _EditUserDialogState createState() => _EditUserDialogState();
@@ -28,10 +33,11 @@ class _EditUserDialogState extends State<EditUserDialog> {
         create: (BuildContext context) => UsersBloc()
           // ..add(const LoadCommunityAndSpacesEvent())
           ..add(const RoleEvent())
-          ..add(GetUserByIdEvent(uuid: widget.userId)),
+          ..add(GetUserByIdEvent(uuid: widget.user!.uuid)),
         child: BlocConsumer<UsersBloc, UsersState>(listener: (context, state) {
           if (state is SpacesLoadedState) {
-            BlocProvider.of<UsersBloc>(context).add(GetUserByIdEvent(uuid: widget.userId));
+            BlocProvider.of<UsersBloc>(context)
+                .add(GetUserByIdEvent(uuid: widget.user!.uuid));
           }
         }, builder: (context, state) {
           final _blocRole = BlocProvider.of<UsersBloc>(context);
@@ -39,7 +45,8 @@ class _EditUserDialogState extends State<EditUserDialog> {
           return Dialog(
               child: Container(
             decoration: const BoxDecoration(
-                color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20))),
+                color: Colors.white,
+                borderRadius: BorderRadius.all(Radius.circular(20))),
             width: 900,
             child: Column(
               children: [
@@ -68,7 +75,8 @@ class _EditUserDialogState extends State<EditUserDialog> {
                             children: [
                               _buildStep1Indicator(1, "Basics", _blocRole),
                               _buildStep2Indicator(2, "Spaces", _blocRole),
-                              _buildStep3Indicator(3, "Role & Permissions", _blocRole),
+                              _buildStep3Indicator(
+                                  3, "Role & Permissions", _blocRole),
                             ],
                           ),
                         ),
@@ -86,7 +94,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
                             children: [
                               const SizedBox(height: 10),
                               Expanded(
-                                child: _getFormContent(widget.userId),
+                                child: _getFormContent(widget.user!),
                               ),
                               const SizedBox(height: 20),
                             ],
@@ -116,13 +124,14 @@ class _EditUserDialogState extends State<EditUserDialog> {
                             if (currentStep < 3) {
                               currentStep++;
                               if (currentStep == 2) {
-                                _blocRole.add(CheckStepStatus(isEditUser: true));
+                                _blocRole
+                                    .add(CheckStepStatus(isEditUser: true));
                               } else if (currentStep == 3) {
                                 _blocRole.add(const CheckSpacesStepStatus());
                               }
                             } else {
-                              _blocRole
-                                  .add(EditInviteUsers(context: context, userId: widget.userId!));
+                              _blocRole.add(EditInviteUsers(
+                                  context: context, userId: widget.user!.uuid));
                             }
                           });
                         },
@@ -131,7 +140,8 @@ class _EditUserDialogState extends State<EditUserDialog> {
                           style: TextStyle(
                               color: (_blocRole.isCompleteSpaces == false ||
                                           _blocRole.isCompleteBasics == false ||
-                                          _blocRole.isCompleteRolePermissions == false) &&
+                                          _blocRole.isCompleteRolePermissions ==
+                                              false) &&
                                       currentStep == 3
                                   ? ColorsManager.grayColor
                                   : ColorsManager.secondaryColor),
@@ -146,15 +156,15 @@ class _EditUserDialogState extends State<EditUserDialog> {
         }));
   }
 
-  Widget _getFormContent(userid) {
+  Widget _getFormContent(RolesUserModel user) {
     switch (currentStep) {
       case 1:
         return BasicsView(
-          userId: userid,
+          userId: user.uuid,
         );
       case 2:
         return SpacesAccessView(
-          userId: userid,
+          userId: user.uuid,
         );
       case 3:
         return const RolesAndPermission();
@@ -166,6 +176,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
   int step3 = 0;
 
   Widget _buildStep1Indicator(int step, String label, UsersBloc bloc) {
+    final isCurrentStep = currentStep == step;
     return GestureDetector(
       onTap: () {
         setState(() {
@@ -189,7 +200,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
             child: Row(
               children: [
                 SvgPicture.asset(
-                  currentStep == step
+                  isCurrentStep
                       ? Assets.currentProcessIcon
                       : bloc.isCompleteBasics == false
                           ? Assets.wrongProcessIcon
@@ -204,8 +215,11 @@ class _EditUserDialogState extends State<EditUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
+                    color: isCurrentStep
+                        ? ColorsManager.blackColor
+                        : ColorsManager.greyColor,
+                    fontWeight:
+                        isCurrentStep ? FontWeight.bold : FontWeight.normal,
                   ),
                 ),
               ],
@@ -229,6 +243,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
   }
 
   Widget _buildStep2Indicator(int step, String label, UsersBloc bloc) {
+    final isCurrentStep = currentStep == step;
     return GestureDetector(
       onTap: () {
         setState(() {
@@ -248,7 +263,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
             child: Row(
               children: [
                 SvgPicture.asset(
-                  currentStep == step
+                  isCurrentStep
                       ? Assets.currentProcessIcon
                       : bloc.isCompleteSpaces == false
                           ? Assets.wrongProcessIcon
@@ -263,8 +278,11 @@ class _EditUserDialogState extends State<EditUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
+                    color: isCurrentStep
+                        ? ColorsManager.blackColor
+                        : ColorsManager.greyColor,
+                    fontWeight:
+                        isCurrentStep ? FontWeight.bold : FontWeight.normal,
                   ),
                 ),
               ],
@@ -288,6 +306,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
   }
 
   Widget _buildStep3Indicator(int step, String label, UsersBloc bloc) {
+    final isCurrentStep = currentStep == step;
     return GestureDetector(
       onTap: () {
         setState(() {
@@ -306,7 +325,7 @@ class _EditUserDialogState extends State<EditUserDialog> {
             child: Row(
               children: [
                 SvgPicture.asset(
-                  currentStep == step
+                  isCurrentStep
                       ? Assets.currentProcessIcon
                       : bloc.isCompleteRolePermissions == false
                           ? Assets.wrongProcessIcon
@@ -321,8 +340,11 @@ class _EditUserDialogState extends State<EditUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
+                    color: isCurrentStep
+                        ? ColorsManager.blackColor
+                        : ColorsManager.greyColor,
+                    fontWeight:
+                        isCurrentStep ? FontWeight.bold : FontWeight.normal,
                   ),
                 ),
               ],

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

@@ -19,6 +19,7 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
+
 class UsersPage extends StatelessWidget {
   UsersPage({super.key});
 
@@ -451,33 +452,31 @@ class UsersPage extends StatelessWidget {
                           ),
                           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) {
-                                            if (v != null) {
-                                              _blocRole.add(const GetUsers());
-                                            }
-                                          }
-                                        });
+                              if (user.isEnabled != false)
+                                actionButton(
+                                  isActive: true,
+                                  title: "Edit",
+                                  onTap: () {
+                                    context
+                                        .read<SpaceTreeBloc>()
+                                        .add(ClearCachedData());
+                                    showDialog(
+                                      context: context,
+                                      barrierDismissible: false,
+                                      builder: (BuildContext context) {
+                                        return EditUserDialog(user: user);
                                       },
-                                    )
-                                  : actionButton(
-                                      title: "Edit",
-                                    ),
+                                    ).then((v) {
+                                      if (v != null) {
+                                        _blocRole.add(const GetUsers());
+                                      }
+                                    });
+                                  },
+                                )
+                              else
+                                actionButton(
+                                  title: "Edit",
+                                ),
                               actionButton(
                                 title: "Delete",
                                 onTap: () {

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

@@ -7,21 +7,22 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
   final Map<String, Offset> positions;
   final double cardWidth = 150.0;
   final double cardHeight = 90.0;
-  final String? selectedSpaceUuid;
+  final Set<String> highlightedUuids;
 
   SpacesConnectionsArrowPainter({
     required this.connections,
     required this.positions,
-    this.selectedSpaceUuid,
+    required this.highlightedUuids,
   });
 
   @override
   void paint(Canvas canvas, Size size) {
     for (final connection in connections) {
-      final isSelected = connection.to == selectedSpaceUuid;
+      final isSelected = highlightedUuids.contains(connection.from) ||
+          highlightedUuids.contains(connection.to);
       final paint = Paint()
         ..color = isSelected
-            ? ColorsManager.primaryColor
+            ? ColorsManager.blackColor
             : ColorsManager.blackColor.withValues(alpha: 0.5)
         ..strokeWidth = 2.0
         ..style = PaintingStyle.stroke;
@@ -36,7 +37,7 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
 
         final path = Path()..moveTo(startPoint.dx, startPoint.dy);
 
-        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 60);
+        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 20);
         final controlPoint2 = Offset(endPoint.dx, endPoint.dy - 60);
 
         path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
@@ -46,7 +47,7 @@ class SpacesConnectionsArrowPainter extends CustomPainter {
 
         final circlePaint = Paint()
           ..color = isSelected
-              ? ColorsManager.primaryColor
+              ? ColorsManager.blackColor
               : ColorsManager.blackColor.withValues(alpha: 0.5)
           ..style = PaintingStyle.fill
           ..blendMode = BlendMode.srcIn;

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

@@ -1,21 +1,26 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_connection_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_card_widget.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_cell.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
 
 class CommunityStructureCanvas extends StatefulWidget {
   const CommunityStructureCanvas({
     required this.community,
+    required this.selectedSpace,
     super.key,
   });
 
   final CommunityModel community;
+  final SpaceModel? selectedSpace;
 
   @override
-  State<CommunityStructureCanvas> createState() =>_CommunityStructureCanvasState();  
+  State<CommunityStructureCanvas> createState() => _CommunityStructureCanvasState();
 }
 
 class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
@@ -25,19 +30,30 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
   final double _cardHeight = 90.0;
   final double _horizontalSpacing = 150.0;
   final double _verticalSpacing = 120.0;
-  String? _selectedSpaceUuid;
 
   late TransformationController _transformationController;
   late AnimationController _animationController;
 
   @override
   void initState() {
-    super.initState();
     _transformationController = TransformationController();
     _animationController = AnimationController(
       vsync: this,
-      duration: const Duration(milliseconds: 100),
+      duration: const Duration(milliseconds: 150),
     );
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(covariant CommunityStructureCanvas oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.selectedSpace?.uuid != oldWidget.selectedSpace?.uuid) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) {
+          _animateToSpace(widget.selectedSpace);
+        }
+      });
+    }
   }
 
   @override
@@ -47,6 +63,15 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     super.dispose();
   }
 
+  Set<String> _getAllDescendantUuids(SpaceModel space) {
+    final uuids = <String>{};
+    for (final child in space.children) {
+      uuids.add(child.uuid);
+      uuids.addAll(_getAllDescendantUuids(child));
+    }
+    return uuids;
+  }
+
   void _runAnimation(Matrix4 target) {
     final animation = Matrix4Tween(
       begin: _transformationController.value,
@@ -63,15 +88,16 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     });
   }
 
-  void _onSpaceTapped(String spaceUuid) {
-    setState(() {
-      _selectedSpaceUuid = spaceUuid;
-    });
+  void _animateToSpace(SpaceModel? space) {
+    if (space == null) {
+      _runAnimation(Matrix4.identity());
+      return;
+    }
 
-    final position = _positions[spaceUuid];
+    final position = _positions[space.uuid];
     if (position == null) return;
 
-    const scale = 2.0;
+    const scale = 1.5;
     final viewSize = context.size;
     if (viewSize == null) return;
 
@@ -86,11 +112,19 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     _runAnimation(matrix);
   }
 
+  void _onSpaceTapped(SpaceModel? space) {
+    context.read<CommunitiesTreeSelectionBloc>().add(
+          SelectSpaceEvent(community: widget.community, space: space),
+        );
+  }
+
   void _resetSelectionAndZoom() {
-    setState(() {
-      _selectedSpaceUuid = null;
-    });
-    _runAnimation(Matrix4.identity());
+    context.read<CommunitiesTreeSelectionBloc>().add(
+          SelectSpaceEvent(
+            community: widget.community,
+            space: null,
+          ),
+        );
   }
 
   void _calculateLayout(
@@ -150,16 +184,23 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
 
     _calculateLayout(community.spaces, 0, {});
 
+    final selectedSpace = widget.selectedSpace;
+    final highlightedUuids = <String>{};
+    if (selectedSpace != null) {
+      highlightedUuids.add(selectedSpace.uuid);
+      highlightedUuids.addAll(_getAllDescendantUuids(selectedSpace));
+    }
+
     final widgets = <Widget>[];
     final connections = <SpaceConnectionModel>[];
-    _generateWidgets(community.spaces, widgets, connections);
+    _generateWidgets(community.spaces, widgets, connections, highlightedUuids);
 
     return [
       CustomPaint(
         painter: SpacesConnectionsArrowPainter(
           connections: connections,
           positions: _positions,
-          selectedSpaceUuid: _selectedSpaceUuid,
+          highlightedUuids: highlightedUuids,
         ),
         child: Stack(alignment: AlignmentDirectional.center, children: widgets),
       ),
@@ -170,11 +211,15 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     List<SpaceModel> spaces,
     List<Widget> widgets,
     List<SpaceConnectionModel> connections,
+    Set<String> highlightedUuids,
   ) {
     for (final space in spaces) {
       final position = _positions[space.uuid];
       if (position == null) continue;
 
+      final isHighlighted = highlightedUuids.contains(space.uuid);
+      final hasNoSelectedSpace = widget.selectedSpace == null;
+
       widgets.add(
         Positioned(
           left: position.dx,
@@ -182,32 +227,31 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
           width: _cardWidth,
           height: _cardHeight,
           child: SpaceCardWidget(
-            index: spaces.indexOf(space),
-            onPositionChanged: (newPosition) {},
-            buildSpaceContainer: (index) {
+            buildSpaceContainer: () {
               return Opacity(
-                opacity: 1.0,
-                child: SpaceCell(
-                  index: index,
-                  onTap: () => _onSpaceTapped(space.uuid),
-                  icon: space.icon,
-                  name: space.spaceName,
+                opacity: hasNoSelectedSpace || isHighlighted ? 1.0 : 0.5,
+                child: Tooltip(
+                  message: space.spaceName,
+                  preferBelow: false,
+                  child: SpaceCell(
+                    onTap: () => _onSpaceTapped(space),
+                    icon: space.icon,
+                    name: space.spaceName,
+                  ),
                 ),
               );
             },
-            screenSize: MediaQuery.sizeOf(context),
-            position: position,
-            isHovered: false,
-            onHoverChanged: (int index, bool isHovered) {},
-            onButtonTap: (int index, Offset newPosition) {},
+            onTap: () => SpaceDetailsDialogHelper.showCreate(context),
           ),
         ),
       );
 
       for (final child in space.children) {
-        connections.add(SpaceConnectionModel(from: space.uuid, to: child.uuid));
+        connections.add(
+          SpaceConnectionModel(from: space.uuid, to: child.uuid),
+        );
       }
-      _generateWidgets(space.children, widgets, connections);
+      _generateWidgets(space.children, widgets, connections, highlightedUuids);
     }
   }
 
@@ -218,7 +262,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
       transformationController: _transformationController,
       boundaryMargin: EdgeInsets.symmetric(
         horizontal: MediaQuery.sizeOf(context).width * 0.3,
-        vertical: MediaQuery.sizeOf(context).height * 0.2,
+        vertical: MediaQuery.sizeOf(context).height * 0.3,
       ),
       minScale: 0.5,
       maxScale: 3.0,
@@ -226,8 +270,8 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
       child: GestureDetector(
         onTap: _resetSelectionAndZoom,
         child: SizedBox(
-          width: MediaQuery.sizeOf(context).width * 2,
-          height: MediaQuery.sizeOf(context).height * 2,
+          width: MediaQuery.sizeOf(context).width * 5,
+          height: MediaQuery.sizeOf(context).height * 5,
           child: Stack(children: treeWidgets),
         ),
       ),

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

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class CreateSpaceButton extends StatelessWidget {
@@ -7,7 +8,7 @@ class CreateSpaceButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: () {},
+      onTap: () => SpaceDetailsDialogHelper.showCreate(context),
       child: Container(
         height: 60,
         decoration: BoxDecoration(

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

@@ -2,15 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class PlusButtonWidget extends StatelessWidget {
-  final int index;
-  final String direction;
   final Offset offset;
-  final void Function(int index, Offset newPosition) onButtonTap;
+  final void Function() onButtonTap;
 
   const PlusButtonWidget({
     super.key,
-    required this.index,
-    required this.direction,
     required this.offset,
     required this.onButtonTap,
   });
@@ -18,13 +14,7 @@ class PlusButtonWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: () {
-        if (direction == 'down') {
-          onButtonTap(index, const Offset(0, 150));
-        } else {
-          onButtonTap(index, const Offset(150, 0));
-        }
-      },
+      onTap: onButtonTap,
       child: Container(
         width: 30,
         height: 30,

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

@@ -1,60 +1,39 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/plus_button_widget.dart';
 
-class SpaceCardWidget extends StatelessWidget {
-  final int index;
-  final Size screenSize;
-  final Offset position;
-  final bool isHovered;
-  final void Function(int index, bool isHovered) onHoverChanged;
-  final void Function(int index, Offset newPosition) onButtonTap;
-  final Widget Function(int index) buildSpaceContainer;
-  final ValueChanged<Offset> onPositionChanged;
+class SpaceCardWidget extends StatefulWidget {
+  final void Function() onTap;
+  final Widget Function() buildSpaceContainer;
 
   const SpaceCardWidget({
-    super.key,
-    required this.index,
-    required this.onPositionChanged,
-    required this.screenSize,
-    required this.position,
-    required this.isHovered,
-    required this.onHoverChanged,
-    required this.onButtonTap,
+    required this.onTap,
     required this.buildSpaceContainer,
+    super.key,
   });
 
+  @override
+  State<SpaceCardWidget> createState() => _SpaceCardWidgetState();
+}
+
+class _SpaceCardWidgetState extends State<SpaceCardWidget> {
+  bool isHovered = false;
   @override
   Widget build(BuildContext context) {
     return MouseRegion(
-      onEnter: (_) => onHoverChanged(index, true),
-      onExit: (_) => onHoverChanged(index, false),
+      onEnter: (_) => setState(() => isHovered = true),
+      onExit: (_) => setState(() => isHovered = false),
       child: SizedBox(
-        width: 150,
-        height: 90,
         child: Stack(
           clipBehavior: Clip.none,
           alignment: Alignment.center,
           children: [
-            buildSpaceContainer(index),
-
+            widget.buildSpaceContainer(),
             if (isHovered)
               Positioned(
                 bottom: 0,
                 child: PlusButtonWidget(
-                  index: index,
-                  direction: 'down',
                   offset: Offset.zero,
-                  onButtonTap: onButtonTap,
-                ),
-              ),
-            if (isHovered)
-              Positioned(
-                right: -15,
-                child: PlusButtonWidget(
-                  index: index,
-                  direction: 'right',
-                  offset: Offset.zero,
-                  onButtonTap: onButtonTap,
+                  onButtonTap: widget.onTap,
                 ),
               ),
           ],

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

@@ -1,29 +1,23 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class SpaceCell extends StatelessWidget {
-  final int index;
   final String icon;
   final String name;
-  final VoidCallback? onDoubleTap;
   final VoidCallback? onTap;
 
   const SpaceCell({
     super.key,
-    required this.index,
     required this.icon,
     required this.name,
-    this.onTap,
-    this.onDoubleTap,
+    required this.onTap,
   });
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-
     return GestureDetector(
-      onDoubleTap: onDoubleTap,
       onTap: onTap,
       child: Container(
         width: 150,
@@ -36,7 +30,7 @@ class SpaceCell extends StatelessWidget {
             Expanded(
               child: Text(
                 name,
-                style: theme.textTheme.bodyLarge?.copyWith(
+                style: context.textTheme.bodyLarge?.copyWith(
                   fontWeight: FontWeight.bold,
                   color: ColorsManager.blackColor,
                 ),
@@ -63,7 +57,10 @@ class SpaceCell extends StatelessWidget {
       child: Center(
         child: SvgPicture.asset(
           icon,
-          color: ColorsManager.whiteColors,
+          colorFilter: const ColorFilter.mode(
+            ColorsManager.whiteColors,
+            BlendMode.srcIn,
+          ),
           width: 24,
           height: 24,
         ),

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

@@ -9,14 +9,19 @@ class SpaceManagementCommunityStructure extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final selectedCommunity =
-        context.watch<CommunitiesTreeSelectionBloc>().state.selectedCommunity!;
+    final selectionBloc = context.watch<CommunitiesTreeSelectionBloc>().state;
+    final selectedCommunity = selectionBloc.selectedCommunity;
+    final selectedSpace = selectionBloc.selectedSpace;
     const spacer = Spacer(flex: 10);
     return Visibility(
-      visible: selectedCommunity.spaces.isNotEmpty,
+      visible: selectedCommunity!.spaces.isNotEmpty,
       replacement: const Row(
-          children: [spacer, Expanded(child: CreateSpaceButton()), spacer]),
-      child: CommunityStructureCanvas(community: selectedCommunity),
+        children: [spacer, Expanded(child: CreateSpaceButton()), spacer],
+      ),
+      child: CommunityStructureCanvas(
+        community: selectedCommunity,
+        selectedSpace: selectedSpace,
+      ),
     );
   }
 }

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

@@ -7,26 +7,24 @@ class SpaceManagementTemplatesView extends StatelessWidget {
   const SpaceManagementTemplatesView({super.key});
   @override
   Widget build(BuildContext context) {
-    return Expanded(
-      child: ColoredBox(
-        color: ColorsManager.whiteColors,
-        child: GridView.builder(
-          padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
-          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-            maxCrossAxisExtent: 400,
-            mainAxisSpacing: 10,
-            crossAxisSpacing: 10,
-            childAspectRatio: 2.0,
-          ),
-          itemCount: _gridItems(context).length,
-          itemBuilder: (context, index) {
-            final model = _gridItems(context)[index];
-            return CommunityTemplateCell(
-              onTap: model.onTap,
-              title: model.title,
-            );
-          },
+    return ColoredBox(
+      color: ColorsManager.whiteColors,
+      child: GridView.builder(
+        padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
+        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+          maxCrossAxisExtent: 400,
+          mainAxisSpacing: 10,
+          crossAxisSpacing: 10,
+          childAspectRatio: 2.0,
         ),
+        itemCount: _gridItems(context).length,
+        itemBuilder: (context, index) {
+          final model = _gridItems(context)[index];
+          return CommunityTemplateCell(
+            onTap: model.onTap,
+            title: model.title,
+          );
+        },
       ),
     );
   }

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

@@ -16,7 +16,7 @@ final class SelectCommunityEvent extends CommunitiesTreeSelectionEvent {
 }
 
 final class SelectSpaceEvent extends CommunitiesTreeSelectionEvent {
-  final SpaceModel space;
+  final SpaceModel? space;
   final CommunityModel community;
 
   const SelectSpaceEvent({required this.space, required this.community});

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

@@ -0,0 +1,11 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_dialog.dart';
+
+abstract final class SpaceDetailsDialogHelper {
+  static void showCreate(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      builder: (context) => const SpaceDetailsDialog(),
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class SpaceDetailsDialog extends StatelessWidget {
+  const SpaceDetailsDialog({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Dialog(
+      child: Text('Create Space'),
+    );
+  }
+}

lib/pages/space_tree/bloc/space_tree_bloc.dart

@@ -289,7 +289,6 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
           selectedSpaces: updatedSelectedSpaces,
           soldCheck: updatedSoldChecks,
           selectedCommunityAndSpaces: communityAndSpaces));
-      emit(state.copyWith(selectedSpaces: updatedSelectedSpaces));
     } catch (e) {
       emit(const SpaceTreeErrorState('Something went wrong'));
     }
@@ -445,10 +444,12 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
 
   List<String> _getThePathToChild(String communityId, String selectedSpaceId) {
     List<String> ids = [];
-    for (var community in state.communityList) {
+    final communityDataSource =
+        state.searchQuery.isNotEmpty ? state.filteredCommunity : state.communityList;
+    for (final community in communityDataSource) {
       if (community.uuid == communityId) {
-        for (var space in community.spaces) {
-          List<String> list = [];
+        for (final space in community.spaces) {
+          final list = <String>[];
           list.add(space.uuid!);
           ids = _getAllParentsIds(space, selectedSpaceId, List.from(list));
           if (ids.isNotEmpty) {

lib/pages/visitor_password/bloc/visitor_password_bloc.dart

@@ -68,7 +68,7 @@ class VisitorPasswordBloc
   DateTime? startTime = DateTime.now();
   DateTime? endTime;
 
-  String startTimeAccess = 'Start Time';
+  String startTimeAccess = DateTime.now().toString().split('.').first;
   String endTimeAccess = 'End Time';
   PasswordStatus? passwordStatus;
   selectAccessType(
@@ -136,6 +136,27 @@ class VisitorPasswordBloc
             );
             return;
           }
+          if(selectedTimestamp < DateTime.now().millisecondsSinceEpoch ~/ 1000) {
+            if(selectedTimestamp < DateTime.now().millisecondsSinceEpoch ~/ 1000) {
+              await showDialog<void>(
+                context: event.context,
+                builder: (context) => AlertDialog(
+                  title: const Text('Effective Time cannot be earlier than current time.'),
+                  actionsAlignment: MainAxisAlignment.center,
+                  content: 
+                    FilledButton(
+                      onPressed: () {
+                        Navigator.of(event.context).pop();
+                        add(SelectTimeVisitorPassword(context: event.context, isStart: true, isRepeat: false));
+                      },
+                      child: const Text('OK'),
+                    ),
+                  
+                ),
+              );
+            }
+            return;
+          }
           effectiveTimeTimeStamp = selectedTimestamp;
           startTimeAccess = selectedDateTime.toString().split('.').first;
         } else {

lib/pages/visitor_password/model/failed_operation.dart

@@ -2,11 +2,13 @@ class FailedOperation {
   final bool success;
   final dynamic deviceUuid;
   final dynamic error;
+  final String deviceName;
 
   FailedOperation({
     required this.success,
     required this.deviceUuid,
     required this.error,
+    required this.deviceName,
   });
 
   factory FailedOperation.fromJson(Map<String, dynamic> json) {
@@ -14,6 +16,7 @@ class FailedOperation {
       success: json['success'],
       deviceUuid: json['deviceUuid'],
       error: json['error'],
+      deviceName: json['deviceName'] as String? ?? '',
     );
   }
 
@@ -22,21 +25,22 @@ class FailedOperation {
       'success': success,
       'deviceUuid': deviceUuid,
       'error': error,
+      'deviceName': deviceName,
     };
   }
 }
 
-
-
 class SuccessOperation {
   final bool success;
   // final Result result;
   final String deviceUuid;
+  final String deviceName;
 
   SuccessOperation({
     required this.success,
     // required this.result,
     required this.deviceUuid,
+    required this.deviceName,
   });
 
   factory SuccessOperation.fromJson(Map<String, dynamic> json) {
@@ -44,6 +48,7 @@ class SuccessOperation {
       success: json['success'],
       // result: Result.fromJson(json['result']),
       deviceUuid: json['deviceUuid'],
+      deviceName: json['deviceName'] as String? ?? '',
     );
   }
 
@@ -52,6 +57,7 @@ class SuccessOperation {
       'success': success,
       // 'result': result.toJson(),
       'deviceUuid': deviceUuid,
+      'deviceName': deviceName,
     };
   }
 }
@@ -92,8 +98,6 @@ class SuccessOperation {
 //   }
 // }
 
-
-
 class PasswordStatus {
   final List<SuccessOperation> successOperations;
   final List<FailedOperation> failedOperations;
@@ -121,4 +125,3 @@ class PasswordStatus {
     };
   }
 }
-

lib/pages/visitor_password/view/access_type_radio_group.dart

@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_bloc.dart';
+
+class AccessTypeRadioGroup extends StatelessWidget {
+  final String? selectedType;
+  final String? accessTypeSelected;
+  final Function(String) onTypeSelected;
+  final VisitorPasswordBloc visitorBloc;
+
+  const AccessTypeRadioGroup({
+    super.key,
+    required this.selectedType,
+    required this.accessTypeSelected,
+    required this.onTypeSelected,
+    required this.visitorBloc,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    final text = Theme.of(context)
+        .textTheme
+        .bodySmall!
+        .copyWith(color: Colors.black, fontSize: 13);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Text(
+              '* ',
+              style: Theme.of(context)
+                  .textTheme
+                  .bodyMedium!
+                  .copyWith(color: Colors.red),
+            ),
+            Text('Access Type', style: text),
+          ],
+        ),
+        const SizedBox(height: 8),
+        if (size.width < 800)
+          Column(
+            children: [
+              _buildRadioTile(
+                context,
+                'Online Password',
+                selectedType ?? accessTypeSelected,
+                onTypeSelected,
+              ),
+              const SizedBox(height: 8),
+              _buildRadioTile(
+                context,
+                'Offline Password',
+                selectedType ?? accessTypeSelected,
+                onTypeSelected,
+              ),
+            ],
+          )
+        else
+          Row(
+            children: [
+              Expanded(
+                flex: 2,
+                child: Row(
+                  children: [
+                    _buildRadioTile(
+                      context,
+                      'Online Password',
+                      selectedType ?? accessTypeSelected,
+                      onTypeSelected,
+                      width: size.width * 0.12,
+                    ),
+                    _buildRadioTile(
+                      context,
+                      'Offline Password',
+                      selectedType ?? accessTypeSelected,
+                      onTypeSelected,
+                      width: size.width * 0.12,
+                    ),
+                  ],
+                ),
+              ),
+              const Spacer(flex: 2),
+            ],
+          ),
+      ],
+    );
+  }
+
+  Widget _buildRadioTile(
+    BuildContext context,
+    String value,
+    String? groupValue,
+    Function(String) onChanged, {
+    double? width,
+  }) {
+    return SizedBox(
+      width: width,
+      child: RadioListTile<String>(
+        contentPadding: EdgeInsets.zero,
+        title: Text(value,
+            style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                  color: Colors.black,
+                  fontSize: 13,
+                )),
+        value: value,
+        groupValue: groupValue,
+        onChanged: (value) {
+          if (value != null) {
+            onChanged(value);
+            if (value == 'Dynamic Password') {
+              visitorBloc.usageFrequencySelected = '';
+            }
+          }
+        },
+      ),
+    );
+  }
+}

lib/pages/visitor_password/view/responsive_fields_row.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
+
+class NameAndEmailFields extends StatelessWidget {
+  final TextEditingController nameController;
+  final TextEditingController emailController;
+  final String? Function(String?)? nameValidator;
+  final String? Function(String?)? emailValidator;
+
+  const NameAndEmailFields({
+    super.key,
+    required this.nameController,
+    required this.emailController,
+    required this.nameValidator,
+    required this.emailValidator,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    return Container(
+      width: size.width,
+      child: size.width < 800
+          ? Column(
+              children: [
+                CustomWebTextField(
+                  validator: nameValidator,
+                  controller: nameController,
+                  isRequired: true,
+                  textFieldName: 'Name',
+                  description: '',
+                ),
+                const SizedBox(height: 15),
+                CustomWebTextField(
+                  validator: emailValidator,
+                  controller: emailController,
+                  isRequired: true,
+                  textFieldName: 'Email Address',
+                  description:
+                      'The password will be sent to the visitor’s email address.',
+                ),
+              ],
+            )
+          : Row(
+              children: [
+                Expanded(
+                  flex: 2,
+                  child: CustomWebTextField(
+                    validator: nameValidator,
+                    controller: nameController,
+                    isRequired: true,
+                    textFieldName: 'Name',
+                    description: '',
+                  ),
+                ),
+                const Spacer(),
+                Expanded(
+                  flex: 2,
+                  child: CustomWebTextField(
+                    validator: emailValidator,
+                    controller: emailController,
+                    isRequired: true,
+                    textFieldName: 'Email Address',
+                    description:
+                        'The password will be sent to the visitor’s email address.',
+                  ),
+                ),
+                const Spacer(),
+              ],
+            ),
+    );
+  }
+}

lib/pages/visitor_password/view/usage_frequency_radio_group.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+
+class UsageFrequencyRadioGroup extends StatelessWidget {
+  final String? selectedFrequency;
+  final String? usageFrequencySelected;
+  final Function(String) onFrequencySelected;
+
+  const UsageFrequencyRadioGroup({
+    super.key,
+    required this.selectedFrequency,
+    required this.usageFrequencySelected,
+    required this.onFrequencySelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    final text = Theme.of(context)
+        .textTheme
+        .bodySmall!
+        .copyWith(color: Colors.black, fontSize: 13);
+
+    return size.width < 600
+        ? Column(
+            children: [
+              _buildRadioTile(
+                context,
+                'One-Time',
+                selectedFrequency ?? usageFrequencySelected,
+                onFrequencySelected,
+                text: text,
+                fullWidth: true,
+              ),
+              const SizedBox(height: 8),
+              _buildRadioTile(
+                context,
+                'Periodic',
+                selectedFrequency ?? usageFrequencySelected,
+                onFrequencySelected,
+                text: text,
+                fullWidth: true,
+              ),
+            ],
+          )
+        : Row(
+            children: [
+              _buildRadioTile(
+                context,
+                'One-Time',
+                selectedFrequency ?? usageFrequencySelected,
+                onFrequencySelected,
+                width: size.width * 0.12,
+                text: text,
+              ),
+              _buildRadioTile(
+                context,
+                'Periodic',
+                selectedFrequency ?? usageFrequencySelected,
+                onFrequencySelected,
+                width: size.width * 0.12,
+                text: text,
+              ),
+            ],
+          );
+  }
+
+  Widget _buildRadioTile(
+    BuildContext context,
+    String value,
+    String? groupValue,
+    Function(String) onChanged, {
+    double? width,
+    required TextStyle text,
+    bool fullWidth = false,
+  }) {
+    return SizedBox(
+      width: fullWidth ? double.infinity : width,
+      child: RadioListTile<String>(
+        contentPadding: EdgeInsets.zero,
+        title: Text(value, style: text),
+        value: value,
+        groupValue: groupValue,
+        onChanged: (String? value) {
+          if (value != null) {
+            onChanged(value);
+          }
+        },
+      ),
+    );
+  }
+}

lib/pages/visitor_password/view/visitor_password_dialog.dart

@@ -9,8 +9,11 @@ import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
 import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_bloc.dart';
 import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_event.dart';
 import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_state.dart';
+import 'package:syncrow_web/pages/visitor_password/view/access_type_radio_group.dart';
 import 'package:syncrow_web/pages/visitor_password/view/add_device_dialog.dart';
 import 'package:syncrow_web/pages/visitor_password/view/repeat_widget.dart';
+import 'package:syncrow_web/pages/visitor_password/view/responsive_fields_row.dart';
+import 'package:syncrow_web/pages/visitor_password/view/usage_frequency_radio_group.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -21,7 +24,10 @@ class VisitorPasswordDialog extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     Size size = MediaQuery.of(context).size;
-    var text = Theme.of(context).textTheme.bodySmall!.copyWith(color: Colors.black, fontSize: 13);
+    var text = Theme.of(context)
+        .textTheme
+        .bodySmall!
+        .copyWith(color: Colors.black, fontSize: 13);
     return BlocProvider(
       create: (context) => VisitorPasswordBloc(),
       child: BlocListener<VisitorPasswordBloc, VisitorPasswordState>(
@@ -35,7 +41,8 @@ class VisitorPasswordDialog extends StatelessWidget {
                     title: 'Sent Successfully',
                     widgeta: Column(
                       children: [
-                        if (visitorBloc.passwordStatus!.failedOperations.isNotEmpty)
+                        if (visitorBloc
+                            .passwordStatus!.failedOperations.isNotEmpty)
                           Column(
                             children: [
                               const Text('Failed Devices'),
@@ -45,7 +52,8 @@ class VisitorPasswordDialog extends StatelessWidget {
                                 child: ListView.builder(
                                   scrollDirection: Axis.horizontal,
                                   shrinkWrap: true,
-                                  itemCount: visitorBloc.passwordStatus!.failedOperations.length,
+                                  itemCount: visitorBloc
+                                      .passwordStatus!.failedOperations.length,
                                   itemBuilder: (context, index) {
                                     return Container(
                                       margin: EdgeInsets.all(5),
@@ -53,14 +61,17 @@ class VisitorPasswordDialog extends StatelessWidget {
                                       height: 45,
                                       child: Center(
                                           child: Text(visitorBloc
-                                              .passwordStatus!.failedOperations[index].deviceUuid)),
+                                              .passwordStatus!
+                                              .failedOperations[index]
+                                              .deviceName)),
                                     );
                                   },
                                 ),
                               ),
                             ],
                           ),
-                        if (visitorBloc.passwordStatus!.successOperations.isNotEmpty)
+                        if (visitorBloc
+                            .passwordStatus!.successOperations.isNotEmpty)
                           Column(
                             children: [
                               const Text('Success Devices'),
@@ -70,15 +81,18 @@ class VisitorPasswordDialog extends StatelessWidget {
                                 child: ListView.builder(
                                   scrollDirection: Axis.horizontal,
                                   shrinkWrap: true,
-                                  itemCount: visitorBloc.passwordStatus!.successOperations.length,
+                                  itemCount: visitorBloc
+                                      .passwordStatus!.successOperations.length,
                                   itemBuilder: (context, index) {
                                     return Container(
                                       margin: EdgeInsets.all(5),
                                       decoration: containerDecoration,
                                       height: 45,
                                       child: Center(
-                                          child: Text(visitorBloc.passwordStatus!
-                                              .successOperations[index].deviceUuid)),
+                                          child: Text(visitorBloc
+                                              .passwordStatus!
+                                              .successOperations[index]
+                                              .deviceName)),
                                     );
                                   },
                                 ),
@@ -88,8 +102,7 @@ class VisitorPasswordDialog extends StatelessWidget {
                       ],
                     ))
                 .then((v) {
-              Navigator.of(context).pop(true);
-
+              Navigator.of(context).pop(v);
             });
           } else if (state is FailedState) {
             visitorBloc.stateDialog(
@@ -102,15 +115,16 @@ class VisitorPasswordDialog extends StatelessWidget {
         child: BlocBuilder<VisitorPasswordBloc, VisitorPasswordState>(
           builder: (BuildContext context, VisitorPasswordState state) {
             final visitorBloc = BlocProvider.of<VisitorPasswordBloc>(context);
-            bool isRepeat = state is IsRepeatState ? state.repeat : visitorBloc.repeat;
+            bool isRepeat =
+                state is IsRepeatState ? state.repeat : visitorBloc.repeat;
             return AlertDialog(
               backgroundColor: Colors.white,
               title: Text(
                 'Create visitor password',
-                style: Theme.of(context)
-                    .textTheme
-                    .headlineLarge!
-                    .copyWith(fontWeight: FontWeight.w400, fontSize: 24, color: Colors.black),
+                style: Theme.of(context).textTheme.headlineLarge!.copyWith(
+                    fontWeight: FontWeight.w400,
+                    fontSize: 24,
+                    color: Colors.black),
               ),
               content: state is LoadingInitialState
                   ? const Center(child: CircularProgressIndicator())
@@ -121,34 +135,11 @@ class VisitorPasswordDialog extends StatelessWidget {
                           padding: const EdgeInsets.all(5.0),
                           child: ListBody(
                             children: <Widget>[
-                              Container(
-                                child: Row(
-                                  children: [
-                                    Expanded(
-                                      flex: 2,
-                                      child: CustomWebTextField(
-                                        validator: visitorBloc.validate,
-                                        controller: visitorBloc.userNameController,
-                                        isRequired: true,
-                                        textFieldName: 'Name',
-                                        description: '',
-                                      ),
-                                    ),
-                                    const Spacer(),
-                                    Expanded(
-                                      flex: 2,
-                                      child: CustomWebTextField(
-                                        validator: visitorBloc.validateEmail,
-                                        controller: visitorBloc.emailController,
-                                        isRequired: true,
-                                        textFieldName: 'Email Address',
-                                        description:
-                                            'The password will be sent to the visitor’s email address.',
-                                      ),
-                                    ),
-                                    const Spacer(),
-                                  ],
-                                ),
+                              NameAndEmailFields(
+                                nameController: visitorBloc.userNameController,
+                                emailController: visitorBloc.emailController,
+                                nameValidator: visitorBloc.validate,
+                                emailValidator: visitorBloc.validateEmail,
                               ),
                               const SizedBox(
                                 height: 15,
@@ -156,107 +147,43 @@ class VisitorPasswordDialog extends StatelessWidget {
                               Column(
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
-                                  Row(
-                                    children: [
-                                      Text(
-                                        '* ',
-                                        style: Theme.of(context)
-                                            .textTheme
-                                            .bodyMedium!
-                                            .copyWith(color: Colors.red),
-                                      ),
-                                      Text('Access Type', style: text),
-                                    ],
+                                  AccessTypeRadioGroup(
+                                    selectedType: state is PasswordTypeSelected
+                                        ? state.selectedType
+                                        : null,
+                                    accessTypeSelected:
+                                        visitorBloc.accessTypeSelected,
+                                    onTypeSelected: (value) {
+                                      context
+                                          .read<VisitorPasswordBloc>()
+                                          .add(SelectPasswordType(value));
+                                    },
+                                    visitorBloc: visitorBloc,
                                   ),
-                                  Row(
-                                    children: <Widget>[
-                                      Expanded(
-                                          flex: 2,
-                                          child: Row(
-                                            children: [
-                                              SizedBox(
-                                                width: size.width * 0.12,
-                                                child: RadioListTile<String>(
-                                                  contentPadding: EdgeInsets.zero,
-                                                  title: Text(
-                                                    'Online Password',
-                                                    style: text,
-                                                  ),
-                                                  value: 'Online Password',
-                                                  groupValue: (state is PasswordTypeSelected)
-                                                      ? state.selectedType
-                                                      : visitorBloc.accessTypeSelected,
-                                                  onChanged: (String? value) {
-                                                    if (value != null) {
-                                                      context
-                                                          .read<VisitorPasswordBloc>()
-                                                          .add(SelectPasswordType(value));
-                                                    }
-                                                  },
-                                                ),
-                                              ),
-                                              SizedBox(
-                                                width: size.width * 0.12,
-                                                child: RadioListTile<String>(
-                                                  contentPadding: EdgeInsets.zero,
-                                                  title: Text('Offline Password', style: text),
-                                                  value: 'Offline Password',
-                                                  groupValue: (state is PasswordTypeSelected)
-                                                      ? state.selectedType
-                                                      : visitorBloc.accessTypeSelected,
-                                                  onChanged: (String? value) {
-                                                    if (value != null) {
-                                                      context
-                                                          .read<VisitorPasswordBloc>()
-                                                          .add(SelectPasswordType(value));
-                                                    }
-                                                  },
-                                                ),
-                                              ),
-                                              // SizedBox(
-                                              //   width: size.width * 0.12,
-                                              //   child: RadioListTile<String>(
-                                              //     contentPadding: EdgeInsets.zero,
-                                              //     title: Text(
-                                              //       'Dynamic Password',
-                                              //       style: text,
-                                              //     ),
-                                              //     value: 'Dynamic Password',
-                                              //     groupValue: (state is PasswordTypeSelected)
-                                              //         ? state.selectedType
-                                              //         : visitorBloc.accessTypeSelected,
-                                              //     onChanged: (String? value) {
-                                              //       if (value != null) {
-                                              //         context
-                                              //             .read<VisitorPasswordBloc>()
-                                              //             .add(SelectPasswordType(value));
-                                              //         visitorBloc.usageFrequencySelected = '';
-                                              //       }
-                                              //     },
-                                              //   ),
-                                              // ),
-                                            ],
-                                          )),
-                                      const Spacer(
-                                        flex: 2,
-                                      ),
-                                    ],
-                                  ),
-                                  if (visitorBloc.accessTypeSelected == 'Online Password')
+
+                                  if (visitorBloc.accessTypeSelected ==
+                                      'Online Password')
                                     Text(
                                       'Only currently online devices can be selected. It is recommended to use when the device network is stable, and the system randomly generates a digital password',
-                                      style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                          fontWeight: FontWeight.w400,
-                                          color: ColorsManager.grayColor,
-                                          fontSize: 9),
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .bodySmall!
+                                          .copyWith(
+                                              fontWeight: FontWeight.w400,
+                                              color: ColorsManager.grayColor,
+                                              fontSize: 9),
                                     ),
-                                  if (visitorBloc.accessTypeSelected == 'Offline Password')
+                                  if (visitorBloc.accessTypeSelected ==
+                                      'Offline Password')
                                     Text(
                                       'Unaffected by the online status of the device, you can select online or offline device, and the system randomly generates a digital password',
-                                      style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                          fontWeight: FontWeight.w400,
-                                          color: ColorsManager.grayColor,
-                                          fontSize: 9),
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .bodySmall!
+                                          .copyWith(
+                                              fontWeight: FontWeight.w400,
+                                              color: ColorsManager.grayColor,
+                                              fontSize: 9),
                                     ),
                                   // if (visitorBloc.accessTypeSelected == 'Dynamic Password')
                                   //   Text(
@@ -271,143 +198,170 @@ class VisitorPasswordDialog extends StatelessWidget {
                                   )
                                 ],
                               ),
-                              visitorBloc.accessTypeSelected == 'Dynamic Password'
-                                  ? const SizedBox()
-                                  : Column(
-                                      crossAxisAlignment: CrossAxisAlignment.start,
+                              if (visitorBloc.accessTypeSelected ==
+                                  'Dynamic Password')
+                                const SizedBox()
+                              else
+                                Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Row(
                                       children: [
-                                        Row(
-                                          children: [
-                                            Text(
-                                              '* ',
-                                              style: Theme.of(context)
-                                                  .textTheme
-                                                  .bodyMedium!
-                                                  .copyWith(color: Colors.red),
-                                            ),
-                                            Text(
-                                              'Usage Frequency',
-                                              style: text,
-                                            ),
-                                          ],
+                                        Text(
+                                          '* ',
+                                          style: Theme.of(context)
+                                              .textTheme
+                                              .bodyMedium!
+                                              .copyWith(color: Colors.red),
                                         ),
-                                        Row(
-                                          children: <Widget>[
-                                            SizedBox(
-                                              width: size.width * 0.12,
-                                              child: RadioListTile<String>(
-                                                contentPadding: EdgeInsets.zero,
-                                                title: Text(
-                                                  'One-Time',
-                                                  style: text,
-                                                ),
-                                                value: 'One-Time',
-                                                groupValue: (state is UsageFrequencySelected)
-                                                    ? state.selectedFrequency
-                                                    : visitorBloc.usageFrequencySelected,
-                                                onChanged: (String? value) {
-                                                  if (value != null) {
-                                                    context
-                                                        .read<VisitorPasswordBloc>()
-                                                        .add(SelectUsageFrequency(value));
-                                                  }
-                                                },
-                                              ),
-                                            ),
-                                            SizedBox(
-                                              width: size.width * 0.12,
-                                              child: RadioListTile<String>(
-                                                contentPadding: EdgeInsets.zero,
-                                                title: Text('Periodic', style: text),
-                                                value: 'Periodic',
-                                                groupValue: (state is UsageFrequencySelected)
-                                                    ? state.selectedFrequency
-                                                    : visitorBloc.usageFrequencySelected,
-                                                onChanged: (String? value) {
-                                                  if (value != null) {
-                                                    context.read<VisitorPasswordBloc>()
-                                                        .add(SelectUsageFrequency(value));
-                                                  }
-                                                },
-                                              ),
-                                            ),
-                                          ],
+                                        Text(
+                                          'Usage Frequency',
+                                          style: text,
                                         ),
-
-                                        //One-Time
-                                        if (visitorBloc.usageFrequencySelected == 'One-Time' &&
-                                            visitorBloc.accessTypeSelected == 'Online Password')
-                                          Text(
-                                            'Within the validity period, each device can be unlocked only once.',
-                                            style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                                color: ColorsManager.grayColor, fontSize: 9),
-                                          ),
-                                        if (visitorBloc.usageFrequencySelected == 'One-Time' &&
-                                            visitorBloc.accessTypeSelected == 'Offline Password')
-                                          Text(
-                                            'Within the validity period, each device can be unlocked only once, and the maximum validity period is 6 hours',
-                                            style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                                color: ColorsManager.grayColor, fontSize: 9),
-                                          ),
-
-                                        // Periodic
-                                        if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                                            visitorBloc.accessTypeSelected == 'Offline Password')
-                                          Text(
-                                            'Within the validity period, there is no limit to the number of times each device can be unlocked, and it should be used at least once within 24 hours after the entry into force.',
-                                            style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                                color: ColorsManager.grayColor, fontSize: 9),
-                                          ),
-
-                                        if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                                            visitorBloc.accessTypeSelected == 'Online Password')
-                                          Text(
-                                            'Within the validity period, there is no limit to the number of times each device can be unlocked.',
-                                            style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                                color: ColorsManager.grayColor, fontSize: 9),
-                                          ),
                                       ],
                                     ),
+                                    UsageFrequencyRadioGroup(
+                                      selectedFrequency:
+                                          state is UsageFrequencySelected
+                                              ? state.selectedFrequency
+                                              : null,
+                                      usageFrequencySelected:
+                                          visitorBloc.usageFrequencySelected,
+                                      onFrequencySelected: (value) {
+                                        context
+                                            .read<VisitorPasswordBloc>()
+                                            .add(SelectUsageFrequency(value));
+                                      },
+                                    ),
+
+                                    //One-Time
+                                    if (visitorBloc.usageFrequencySelected ==
+                                            'One-Time' &&
+                                        visitorBloc.accessTypeSelected ==
+                                            'Online Password')
+                                      Text(
+                                        'Within the validity period, each device can be unlocked only once.',
+                                        style: Theme.of(context)
+                                            .textTheme
+                                            .bodySmall!
+                                            .copyWith(
+                                                color: ColorsManager.grayColor,
+                                                fontSize: 9),
+                                      ),
+                                    if (visitorBloc.usageFrequencySelected ==
+                                            'One-Time' &&
+                                        visitorBloc.accessTypeSelected ==
+                                            'Offline Password')
+                                      Text(
+                                        'Within the validity period, each device can be unlocked only once, and the maximum validity period is 6 hours',
+                                        style: Theme.of(context)
+                                            .textTheme
+                                            .bodySmall!
+                                            .copyWith(
+                                                color: ColorsManager.grayColor,
+                                                fontSize: 9),
+                                      ),
+
+                                    // Periodic
+                                    if (visitorBloc.usageFrequencySelected ==
+                                            'Periodic' &&
+                                        visitorBloc.accessTypeSelected ==
+                                            'Offline Password')
+                                      Text(
+                                        'Within the validity period, there is no limit to the number of times each device can be unlocked, and it should be used at least once within 24 hours after the entry into force.',
+                                        style: Theme.of(context)
+                                            .textTheme
+                                            .bodySmall!
+                                            .copyWith(
+                                                color: ColorsManager.grayColor,
+                                                fontSize: 9),
+                                      ),
+
+                                    if (visitorBloc.usageFrequencySelected ==
+                                            'Periodic' &&
+                                        visitorBloc.accessTypeSelected ==
+                                            'Online Password')
+                                      Text(
+                                        'Within the validity period, there is no limit to the number of times each device can be unlocked.',
+                                        style: Theme.of(context)
+                                            .textTheme
+                                            .bodySmall!
+                                            .copyWith(
+                                                color: ColorsManager.grayColor,
+                                                fontSize: 9),
+                                      ),
+                                  ],
+                                ),
                               const SizedBox(
                                 height: 20,
                               ),
-                              if ((visitorBloc.usageFrequencySelected != 'One-Time' ||
-                                      visitorBloc.accessTypeSelected != 'Offline Password') &&
+                              if ((visitorBloc.usageFrequencySelected !=
+                                          'One-Time' ||
+                                      visitorBloc.accessTypeSelected !=
+                                          'Offline Password') &&
                                   (visitorBloc.usageFrequencySelected != ''))
                                 DateTimeWebWidget(
                                     isRequired: true,
                                     title: 'Access Period',
                                     size: size,
                                     endTime: () {
-                                      if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                                          visitorBloc.accessTypeSelected == 'Offline Password') {
-                                        visitorBloc.add(SelectTimeEvent(context: context, isEffective: false));
+                                      if (visitorBloc.usageFrequencySelected ==
+                                              'Periodic' &&
+                                          visitorBloc.accessTypeSelected ==
+                                              'Offline Password') {
+                                        visitorBloc.add(SelectTimeEvent(
+                                            context: context,
+                                            isEffective: false));
                                       } else {
-                                        visitorBloc.add(SelectTimeVisitorPassword(context: context, isStart: false, isRepeat: false));
+                                        visitorBloc.add(
+                                            SelectTimeVisitorPassword(
+                                                context: context,
+                                                isStart: false,
+                                                isRepeat: false));
                                       }
                                     },
                                     startTime: () {
-                                      if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                                          visitorBloc.accessTypeSelected == 'Offline Password') {
-                                        visitorBloc.add(
-                                            SelectTimeEvent(context: context, isEffective: true));
+                                      if (visitorBloc.usageFrequencySelected ==
+                                              'Periodic' &&
+                                          visitorBloc.accessTypeSelected ==
+                                              'Offline Password') {
+                                        visitorBloc.add(SelectTimeEvent(
+                                            context: context,
+                                            isEffective: true));
                                       } else {
-                                        visitorBloc.add(SelectTimeVisitorPassword(
-                                            context: context, isStart: true, isRepeat: false));
+                                        visitorBloc.add(
+                                            SelectTimeVisitorPassword(
+                                                context: context,
+                                                isStart: true,
+                                                isRepeat: false));
                                       }
                                     },
-                                    firstString: (visitorBloc.usageFrequencySelected ==
-                                                'Periodic' && visitorBloc.accessTypeSelected == 'Offline Password')
+                                    firstString: (visitorBloc
+                                                    .usageFrequencySelected ==
+                                                'Periodic' &&
+                                            visitorBloc.accessTypeSelected ==
+                                                'Offline Password')
                                         ? visitorBloc.effectiveTime
-                                        : visitorBloc.startTimeAccess.toString(),
-                                    secondString: (visitorBloc.usageFrequencySelected ==
-                                                'Periodic' && visitorBloc.accessTypeSelected == 'Offline Password')
+                                        : visitorBloc.startTimeAccess
+                                            .toString(),
+                                    secondString: (visitorBloc
+                                                    .usageFrequencySelected ==
+                                                'Periodic' &&
+                                            visitorBloc.accessTypeSelected ==
+                                                'Offline Password')
                                         ? visitorBloc.expirationTime
                                         : visitorBloc.endTimeAccess.toString(),
                                     icon: Assets.calendarIcon),
-                              const SizedBox(height: 10,),
-                              Text(visitorBloc.accessPeriodValidate,
-                                style: Theme.of(context).textTheme.bodyMedium!.copyWith(color: ColorsManager.red),),
+                              const SizedBox(
+                                height: 10,
+                              ),
+                              Text(
+                                visitorBloc.accessPeriodValidate,
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .bodyMedium!
+                                    .copyWith(color: ColorsManager.red),
+                              ),
                               const SizedBox(
                                 height: 20,
                               ),
@@ -431,16 +385,21 @@ class VisitorPasswordDialog extends StatelessWidget {
                                   ),
                                   Text(
                                     'Within the validity period, each device can be unlocked only once.',
-                                    style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                        fontWeight: FontWeight.w400,
-                                        color: ColorsManager.grayColor,
-                                        fontSize: 9),
+                                    style: Theme.of(context)
+                                        .textTheme
+                                        .bodySmall!
+                                        .copyWith(
+                                            fontWeight: FontWeight.w400,
+                                            color: ColorsManager.grayColor,
+                                            fontSize: 9),
                                   ),
                                   const SizedBox(
                                     height: 20,
                                   ),
-                                  if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                                      visitorBloc.accessTypeSelected == 'Online Password')
+                                  if (visitorBloc.usageFrequencySelected ==
+                                          'Periodic' &&
+                                      visitorBloc.accessTypeSelected ==
+                                          'Online Password')
                                     SizedBox(
                                       width: 100,
                                       child: Column(
@@ -451,7 +410,8 @@ class VisitorPasswordDialog extends StatelessWidget {
                                             child: CupertinoSwitch(
                                               value: visitorBloc.repeat,
                                               onChanged: (value) {
-                                                visitorBloc.add(ToggleRepeatEvent());
+                                                visitorBloc
+                                                    .add(ToggleRepeatEvent());
                                               },
                                               applyTheme: true,
                                             ),
@@ -459,12 +419,16 @@ class VisitorPasswordDialog extends StatelessWidget {
                                         ],
                                       ),
                                     ),
-                                  if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                                      visitorBloc.accessTypeSelected == 'Online Password')
-                                    isRepeat ? const RepeatWidget() : const SizedBox(),
+                                  if (visitorBloc.usageFrequencySelected ==
+                                          'Periodic' &&
+                                      visitorBloc.accessTypeSelected ==
+                                          'Online Password')
+                                    isRepeat
+                                        ? const RepeatWidget()
+                                        : const SizedBox(),
                                   Container(
                                     decoration: containerDecoration,
-                                    width: size.width / 9,
+                                    width: size.width / 6,
                                     child: DefaultButton(
                                       onPressed: () {
                                         showDialog(
@@ -472,22 +436,28 @@ class VisitorPasswordDialog extends StatelessWidget {
                                           barrierDismissible: false,
                                           builder: (BuildContext context) {
                                             return AddDeviceDialog(
-                                              selectedDeviceIds: visitorBloc.selectedDevices,
+                                              selectedDeviceIds:
+                                                  visitorBloc.selectedDevices,
                                             );
                                           },
                                         ).then((listDevice) {
                                           if (listDevice != null) {
-                                            visitorBloc.selectedDevices = listDevice;
+                                            visitorBloc.selectedDevices =
+                                                listDevice;
                                           }
                                         });
                                       },
                                       borderRadius: 8,
                                       child: Text(
                                         '+ Add Device',
-                                        style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                                            fontWeight: FontWeight.w400,
-                                            color: ColorsManager.whiteColors,
-                                            fontSize: 12),
+                                        style: Theme.of(context)
+                                            .textTheme
+                                            .bodySmall!
+                                            .copyWith(
+                                                fontWeight: FontWeight.w400,
+                                                color:
+                                                    ColorsManager.whiteColors,
+                                                fontSize: 12),
                                       ),
                                     ),
                                   ),
@@ -506,7 +476,7 @@ class VisitorPasswordDialog extends StatelessWidget {
                   child: DefaultButton(
                     borderRadius: 8,
                     onPressed: () {
-                      Navigator.of(context).pop(true);
+                      Navigator.of(context).pop(null);
                     },
                     backgroundColor: Colors.white,
                     child: Text(
@@ -525,30 +495,37 @@ class VisitorPasswordDialog extends StatelessWidget {
                     onPressed: () {
                       if (visitorBloc.forgetFormKey.currentState!.validate()) {
                         if (visitorBloc.selectedDevices.isNotEmpty) {
-                          if (visitorBloc.usageFrequencySelected == 'One-Time' &&
-                              visitorBloc.accessTypeSelected == 'Offline Password') {
+                          if (visitorBloc.usageFrequencySelected ==
+                                  'One-Time' &&
+                              visitorBloc.accessTypeSelected ==
+                                  'Offline Password') {
                             setPasswordFunction(context, size, visitorBloc);
-                          } else if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                          visitorBloc.accessTypeSelected == 'Offline Password') {
+                          } else if (visitorBloc.usageFrequencySelected ==
+                                  'Periodic' &&
+                              visitorBloc.accessTypeSelected ==
+                                  'Offline Password') {
                             if (visitorBloc.expirationTime != 'End Time' &&
-                                visitorBloc.effectiveTime != 'Start Time' ) {
+                                visitorBloc.effectiveTime != 'Start Time') {
                               setPasswordFunction(context, size, visitorBloc);
-                            }else{
+                            } else {
                               visitorBloc.stateDialog(
                                   context: context,
-                                  message: 'Please select Access Period to continue',
+                                  message:
+                                      'Please select Access Period to continue',
                                   title: 'Access Period');
                             }
-                          } else if(
-                          visitorBloc.endTimeAccess.toString()!='End Time'
-                              &&visitorBloc.startTimeAccess.toString()!='Start Time') {
+                          } else if (visitorBloc.endTimeAccess.toString() !=
+                                  'End Time' &&
+                              visitorBloc.startTimeAccess.toString() !=
+                                  'Start Time') {
                             if (visitorBloc.effectiveTimeTimeStamp != null &&
                                 visitorBloc.expirationTimeTimeStamp != null) {
                               if (isRepeat == true) {
                                 if (visitorBloc.expirationTime != 'End Time' &&
                                     visitorBloc.effectiveTime != 'Start Time' &&
                                     visitorBloc.selectedDays.isNotEmpty) {
-                                  setPasswordFunction(context, size, visitorBloc);
+                                  setPasswordFunction(
+                                      context, size, visitorBloc);
                                 } else {
                                   visitorBloc.stateDialog(
                                       context: context,
@@ -562,14 +539,16 @@ class VisitorPasswordDialog extends StatelessWidget {
                             } else {
                               visitorBloc.stateDialog(
                                   context: context,
-                                  message: 'Please select Access Period to continue',
+                                  message:
+                                      'Please select Access Period to continue',
                                   title: 'Access Period');
                             }
-                          }else{
-                              visitorBloc.stateDialog(
-                                  context: context,
-                                  message: 'Please select Access Period to continue',
-                                  title: 'Access Period');
+                          } else {
+                            visitorBloc.stateDialog(
+                                context: context,
+                                message:
+                                    'Please select Access Period to continue',
+                                title: 'Access Period');
                           }
                         } else {
                           visitorBloc.stateDialog(
@@ -615,7 +594,8 @@ class VisitorPasswordDialog extends StatelessWidget {
                 content: SizedBox(
                   height: size.height * 0.25,
                   child: Center(
-                    child: CircularProgressIndicator(), // Display a loading spinner
+                    child:
+                        CircularProgressIndicator(), // Display a loading spinner
                   ),
                 ),
               );
@@ -639,7 +619,10 @@ class VisitorPasswordDialog extends StatelessWidget {
                           ),
                           Text(
                             'Set Password',
-                            style: Theme.of(context).textTheme.headlineLarge!.copyWith(
+                            style: Theme.of(context)
+                                .textTheme
+                                .headlineLarge!
+                                .copyWith(
                                   fontSize: 30,
                                   fontWeight: FontWeight.w400,
                                   color: Colors.black,
@@ -668,7 +651,7 @@ class VisitorPasswordDialog extends StatelessWidget {
                     child: DefaultButton(
                       borderRadius: 8,
                       onPressed: () {
-                        Navigator.of(context).pop();
+                        Navigator.of(context).pop(null);
                       },
                       backgroundColor: Colors.white,
                       child: Text(
@@ -689,37 +672,45 @@ class VisitorPasswordDialog extends StatelessWidget {
                       onPressed: () {
                         Navigator.pop(context);
                         if (visitorBloc.usageFrequencySelected == 'One-Time' &&
-                            visitorBloc.accessTypeSelected == 'Online Password') {
+                            visitorBloc.accessTypeSelected ==
+                                'Online Password') {
                           visitorBloc.add(OnlineOneTimePasswordEvent(
                             context: context,
                             passwordName: visitorBloc.userNameController.text,
                             email: visitorBloc.emailController.text,
                           ));
-                        }
-                        else if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                            visitorBloc.accessTypeSelected == 'Online Password') {
+                        } else if (visitorBloc.usageFrequencySelected ==
+                                'Periodic' &&
+                            visitorBloc.accessTypeSelected ==
+                                'Online Password') {
                           visitorBloc.add(OnlineMultipleTimePasswordEvent(
                             passwordName: visitorBloc.userNameController.text,
                             email: visitorBloc.emailController.text,
-                            effectiveTime: visitorBloc.effectiveTimeTimeStamp.toString(),
-                            invalidTime: visitorBloc.expirationTimeTimeStamp.toString(),
+                            effectiveTime:
+                                visitorBloc.effectiveTimeTimeStamp.toString(),
+                            invalidTime:
+                                visitorBloc.expirationTimeTimeStamp.toString(),
                           ));
-                        }
-                        else if (visitorBloc.usageFrequencySelected == 'One-Time' &&
-                            visitorBloc.accessTypeSelected == 'Offline Password') {
+                        } else if (visitorBloc.usageFrequencySelected ==
+                                'One-Time' &&
+                            visitorBloc.accessTypeSelected ==
+                                'Offline Password') {
                           visitorBloc.add(OfflineOneTimePasswordEvent(
                             context: context,
                             passwordName: visitorBloc.userNameController.text,
                             email: visitorBloc.emailController.text,
                           ));
-                        }
-                        else if (visitorBloc.usageFrequencySelected == 'Periodic' &&
-                            visitorBloc.accessTypeSelected == 'Offline Password') {
+                        } else if (visitorBloc.usageFrequencySelected ==
+                                'Periodic' &&
+                            visitorBloc.accessTypeSelected ==
+                                'Offline Password') {
                           visitorBloc.add(OfflineMultipleTimePasswordEvent(
                             passwordName: visitorBloc.userNameController.text,
                             email: visitorBloc.emailController.text,
-                            effectiveTime: visitorBloc.effectiveTimeTimeStamp.toString(),
-                            invalidTime: visitorBloc.expirationTimeTimeStamp.toString(),
+                            effectiveTime:
+                                visitorBloc.effectiveTimeTimeStamp.toString(),
+                            invalidTime:
+                                visitorBloc.expirationTimeTimeStamp.toString(),
                           ));
                         }
                       },