Implemented and used a reusable widget for analytics sidebars headers.

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

@@ -1,17 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/air_quality_end_side_gauge_and_info.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/air_quality_end_side_live_indicator.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_location.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_location_info_cell.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_sub_value_widget.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_devices/analytics_devices_bloc.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_sidebar_header.dart';
-import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
-import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/analytics_device_dropdown.dart';
-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 AirQualityEndSideWidget extends StatelessWidget {
@@ -27,26 +22,7 @@ class AirQualityEndSideWidget extends StatelessWidget {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          _buildHeader(context),
+          const AnalyticsSidebarHeader(title: 'AQI Sensor'),
-          Text(
-            'Device ID:',
-            style: context.textTheme.bodySmall?.copyWith(
-              color: ColorsManager.textPrimaryColor,
-              fontWeight: FontWeight.w400,
-              fontSize: 12,
-            ),
-          ),
-          const SizedBox(height: 6),
-          SelectableText(
-            context.watch<AnalyticsDevicesBloc>().state.selectedDevice?.uuid ??
-                'N/A',
-            style: context.textTheme.bodySmall?.copyWith(
-              color: ColorsManager.blackColor,
-              fontWeight: FontWeight.w400,
-              fontSize: 12,
-            ),
-          ),
-          const Divider(),
           Expanded(
             flex: 15,
             child: Container(
@@ -139,45 +115,4 @@ class AirQualityEndSideWidget extends StatelessWidget {
       ),
     );
   }
-
-  Widget _buildHeader(BuildContext context) {
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        Expanded(
-          child: FittedBox(
-            alignment: AlignmentDirectional.centerStart,
-            fit: BoxFit.scaleDown,
-            child: SelectableText(
-              'AQI Sensor',
-              style: context.textTheme.headlineSmall?.copyWith(
-                fontWeight: FontWeight.w700,
-                color: ColorsManager.vividBlue.withValues(alpha: 0.6),
-                fontSize: 18,
-              ),
-            ),
-          ),
-        ),
-        const Spacer(),
-        Expanded(
-          flex: 2,
-          child: FittedBox(
-            alignment: AlignmentDirectional.centerEnd,
-            fit: BoxFit.scaleDown,
-            child: AnalyticsDeviceDropdown(
-              onChanged: (value) {
-                context.read<AnalyticsDevicesBloc>().add(
-                      SelectAnalyticsDeviceEvent(value),
-                    );
-                FetchEnergyManagementDataHelper.loadRealtimeDeviceChanges(
-                  context,
-                  deviceUuid: value.uuid,
-                );
-              },
-            ),
-          ),
-        ),
-      ],
-    );
-  }
 }

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

@@ -6,9 +6,14 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class AnalyticsDeviceDropdown extends StatelessWidget {
-  const AnalyticsDeviceDropdown({required this.onChanged, super.key});
+  const AnalyticsDeviceDropdown({
+    required this.onChanged,
+    this.showSpaceUuid = false,
+    super.key,
+  });
 
   final ValueChanged<AnalyticsDevice> onChanged;
+  final bool showSpaceUuid;
 
   @override
   Widget build(BuildContext context) {
@@ -72,17 +77,18 @@ class AnalyticsDeviceDropdown extends StatelessWidget {
             mainAxisSize: MainAxisSize.min,
             children: [
               Text(e.name),
-              if (spaceUuid != null)
+              if (showSpaceUuid)
-                FittedBox(
+                if (spaceUuid != null)
-                  fit: BoxFit.scaleDown,
+                  FittedBox(
-                  alignment: AlignmentDirectional.centerStart,
+                    fit: BoxFit.scaleDown,
-                  child: Text(
+                    alignment: AlignmentDirectional.centerStart,
-                    spaceUuid,
+                    child: Text(
-                    style: _getTextStyle(context)?.copyWith(
+                      spaceUuid,
-                      fontSize: 10,
+                      style: _getTextStyle(context)?.copyWith(
+                        fontSize: 10,
+                      ),
                     ),
                   ),
-                ),
             ],
           ),
         );

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

@@ -2,19 +2,16 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.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/power_clamp_info/power_clamp_info_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/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
-import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/analytics_device_dropdown.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart_box.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_sidebar_header.dart';
 import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clamp_model.dart';
-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 PowerClampEnergyDataWidget extends StatelessWidget {
@@ -42,26 +39,18 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 AnalyticsErrorWidget(state.errorMessage),
-                _buildHeader(context),
+                AnalyticsSidebarHeader(
-                Text(
+                  title: 'Smart Power Clamp',
-                  'Device ID:',
+                  showSpaceUuid: true,
-                  style: context.textTheme.bodySmall?.copyWith(
+                  onChanged: (device) {
-                    color: ColorsManager.textPrimaryColor,
+                    FetchEnergyManagementDataHelper.loadEnergyConsumptionByPhases(
-                    fontWeight: FontWeight.w400,
+                      context,
-                    fontSize: 12,
+                      powerClampUuid: device.uuid,
-                  ),
+                      selectedDate:
+                          context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
+                    );
+                  },
                 ),
-                const SizedBox(height: 6),
-                SelectableText(
-                  context.watch<AnalyticsDevicesBloc>().state.selectedDevice?.uuid ??
-                      'N/A',
-                  style: context.textTheme.bodySmall?.copyWith(
-                    color: ColorsManager.blackColor,
-                    fontWeight: FontWeight.w400,
-                    fontSize: 12,
-                  ),
-                ),
-                const Divider(),
                 Expanded(
                   flex: 2,
                   child: PowerClampEnergyStatusWidget(
@@ -111,51 +100,6 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
     );
   }
 
-  Widget _buildHeader(BuildContext context) {
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        Expanded(
-          flex: 3,
-          child: FittedBox(
-            fit: BoxFit.scaleDown,
-            alignment: AlignmentDirectional.centerStart,
-            child: SelectableText(
-              'Smart Power Clamp',
-              style: context.textTheme.headlineSmall?.copyWith(
-                fontWeight: FontWeight.w700,
-                color: ColorsManager.vividBlue.withValues(alpha: 0.6),
-                fontSize: 18,
-              ),
-            ),
-          ),
-        ),
-        const Spacer(),
-        Expanded(
-          flex: 2,
-          child: FittedBox(
-            fit: BoxFit.scaleDown,
-            alignment: AlignmentDirectional.centerEnd,
-            child: AnalyticsDeviceDropdown(
-              onChanged: (value) {
-                FetchEnergyManagementDataHelper.loadEnergyConsumptionByPhases(
-                  context,
-                  powerClampUuid: value.uuid,
-                  selectedDate:
-                      context.read<AnalyticsDatePickerBloc>().state.monthlyDate,
-                );
-                FetchEnergyManagementDataHelper.loadRealtimeDeviceChanges(
-                  context,
-                  deviceUuid: value.uuid,
-                );
-              },
-            ),
-          ),
-        ),
-      ],
-    );
-  }
-
   String _valueFromCode(String code, List<DataPoint> points) {
     return points
         .firstWhere((e) => e.code == code, orElse: () => DataPoint(value: '--'))

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

@@ -1,15 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.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/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
-import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/analytics_device_dropdown.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_sidebar_header.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
-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 OccupancyEndSideBar extends StatelessWidget {
@@ -27,28 +23,7 @@ class OccupancyEndSideBar extends StatelessWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              _buildHeader(context),
+              const AnalyticsSidebarHeader(title: 'Presnce Sensor'),
-              Text(
-                'Device ID:',
-                style: context.textTheme.bodySmall?.copyWith(
-                  color: ColorsManager.textPrimaryColor,
-                  fontWeight: FontWeight.w400,
-                  fontSize: 12,
-                ),
-              ),
-              const SizedBox(height: 6),
-              SelectableText(
-                context.watch<AnalyticsDevicesBloc>().state.selectedDevice?.uuid ??
-                    'N/A',
-                style: context.textTheme.bodySmall?.copyWith(
-                  color: ColorsManager.blackColor,
-                  fontWeight: FontWeight.w400,
-                  fontSize: 12,
-                ),
-              ),
-              const SizedBox(height: 10),
-              const Divider(height: 1, color: ColorsManager.greyColor),
-              const SizedBox(height: 50),
               SizedBox(
                 height: MediaQuery.sizeOf(context).height * 0.2,
                 child: PowerClampEnergyStatusWidget(
@@ -101,42 +76,4 @@ class OccupancyEndSideBar extends StatelessWidget {
         .toString();
     return value == 'null' ? defaultValue ?? '--' : value;
   }
-
-  Widget _buildHeader(BuildContext context) {
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        Expanded(
-          flex: 3,
-          child: FittedBox(
-            fit: BoxFit.scaleDown,
-            alignment: AlignmentDirectional.centerStart,
-            child: SelectableText(
-              'Presnce Sensor',
-              style: context.textTheme.headlineSmall?.copyWith(
-                fontWeight: FontWeight.w700,
-                color: ColorsManager.vividBlue.withValues(alpha: 0.6),
-                fontSize: 18,
-              ),
-            ),
-          ),
-        ),
-        const Spacer(),
-        Expanded(
-          flex: 2,
-          child: FittedBox(
-            fit: BoxFit.scaleDown,
-            alignment: AlignmentDirectional.centerEnd,
-            child: AnalyticsDeviceDropdown(
-              onChanged: (value) =>
-                  FetchEnergyManagementDataHelper.loadRealtimeDeviceChanges(
-                context,
-                deviceUuid: value.uuid,
-              ),
-            ),
-          ),
-        ),
-      ],
-    );
-  }
 }

lib/pages/analytics/widgets/analytics_sidebar_header.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/models/analytics_device.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/helpers/fetch_energy_management_data_helper.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/analytics_device_dropdown.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AnalyticsSidebarHeader extends StatelessWidget {
+  const AnalyticsSidebarHeader({
+    required this.title,
+    this.showSpaceUuid = false,
+    this.onChanged,
+    super.key,
+  });
+
+  final String title;
+  final bool showSpaceUuid;
+  final void Function(AnalyticsDevice device)? onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(
+              flex: 2,
+              child: FittedBox(
+                alignment: AlignmentDirectional.centerStart,
+                fit: BoxFit.scaleDown,
+                child: SelectableText(
+                  title,
+                  style: context.textTheme.headlineSmall?.copyWith(
+                    fontWeight: FontWeight.w700,
+                    color: ColorsManager.vividBlue.withValues(alpha: 0.6),
+                    fontSize: 18,
+                  ),
+                ),
+              ),
+            ),
+            const Spacer(),
+            Expanded(
+              flex: 2,
+              child: FittedBox(
+                alignment: AlignmentDirectional.centerEnd,
+                fit: BoxFit.scaleDown,
+                child: AnalyticsDeviceDropdown(
+                  onChanged: (value) {
+                    context.read<AnalyticsDevicesBloc>().add(
+                          SelectAnalyticsDeviceEvent(value),
+                        );
+                    FetchEnergyManagementDataHelper.loadRealtimeDeviceChanges(
+                      context,
+                      deviceUuid: value.uuid,
+                    );
+                    onChanged?.call(value);
+                  },
+                ),
+              ),
+            ),
+          ],
+        ),
+        Text(
+          'Device ID:',
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.textPrimaryColor,
+            fontWeight: FontWeight.w400,
+            fontSize: 12,
+          ),
+        ),
+        const SizedBox(height: 6),
+        SelectableText(
+          context.watch<AnalyticsDevicesBloc>().state.selectedDevice?.uuid ?? 'N/A',
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.blackColor,
+            fontWeight: FontWeight.w400,
+            fontSize: 12,
+          ),
+        ),
+        const SizedBox(height: 10),
+        const Divider(height: 1, color: ColorsManager.greyColor),
+        const SizedBox(height: 24),
+      ],
+    );
+  }
+}