Merge branch 'dev' into 1511-occupancy-heat-map-tooltip

Sp 1512 fe apply responsive behavior for dashboard layout and sidebar collapse

lib/pages/analytics/models/occupancy_heat_map_model.dart

@@ -1,22 +1,28 @@
 import 'package:equatable/equatable.dart';
 
 class OccupancyHeatMapModel extends Equatable {
-  final DateTime date;
+  final String uuid;
 
-  final int occupancy;
+  final DateTime eventDate;
+
+  final int countTotalPresenceDetected;
 
   const OccupancyHeatMapModel({
-    required this.date,
-    required this.occupancy,
+    required this.uuid,
+    required this.eventDate,
+    required this.countTotalPresenceDetected,
   });
 
   factory OccupancyHeatMapModel.fromJson(Map<String, dynamic> json) {
     return OccupancyHeatMapModel(
-      date: DateTime.parse(json['date'] as String),
-      occupancy: json['occupancy'] as int,
+      uuid: json['uuid'] as String? ?? '',
+      eventDate: DateTime.parse(
+        json['event_date'] as String? ?? '${DateTime.now()}',
+      ),
+      countTotalPresenceDetected: json['count_total_presence_detected'] as int? ?? 0,
     );
   }
 
   @override
-  List<Object?> get props => [date, occupancy];
+  List<Object?> get props => [uuid, eventDate, countTotalPresenceDetected];
 }

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

@@ -14,7 +14,7 @@ import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_he
 import 'package:syncrow_web/pages/analytics/services/energy_consumption_by_phases/fake_energy_consumption_by_phases_service.dart';
 import 'package:syncrow_web/pages/analytics/services/energy_consumption_per_device/fake_energy_consumption_per_device_service.dart';
 import 'package:syncrow_web/pages/analytics/services/occupacy/fake_occupacy_service.dart';
-import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/fake_occupancy_heat_map_service.dart';
+import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/remote_occupancy_heat_map_service.dart';
 import 'package:syncrow_web/pages/analytics/services/power_clamp_info/remote_power_clamp_info_service.dart';
 import 'package:syncrow_web/pages/analytics/services/realtime_device_service/firebase_realtime_device_service.dart';
 import 'package:syncrow_web/pages/analytics/services/total_energy_consumption/remote_total_energy_consumption_service.dart';
@@ -60,7 +60,9 @@ class AnalyticsPage extends StatelessWidget {
         ),
         BlocProvider(create: (context) => OccupancyBloc(FakeOccupacyService())),
         BlocProvider(
-          create: (context) => OccupancyHeatMapBloc(FakeOccupancyHeatMapService()),
+          create: (context) => OccupancyHeatMapBloc(
+            RemoteOccupancyHeatMapService(HTTPService()),
+          ),
         ),
         BlocProvider(create: (context) => AnalyticsDatePickerBloc()),
       ],

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

@@ -35,8 +35,7 @@ abstract final class FetchOccupancyDataHelper {
     context.read<OccupancyHeatMapBloc>().add(
           LoadOccupancyHeatMapEvent(
             GetOccupancyHeatMapParam(
-              spaceId: spaceId,
-              communityId: communityId,
+              spaceUuid: spaceId,
               year: datePickerState.yearlyDate,
             ),
           ),

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

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class HeatMapTooltip extends StatelessWidget {
+  const HeatMapTooltip({
+    required this.date,
+    required this.value,
+    super.key,
+  });
+
+  final DateTime date;
+  final int value;
+
+  @override
+  Widget build(BuildContext context) {
+    return FittedBox(
+      fit: BoxFit.scaleDown,
+      alignment: AlignmentDirectional.topStart,
+      child: Container(
+        padding: const EdgeInsets.all(8),
+        decoration: BoxDecoration(
+          color: ColorsManager.grey700,
+          borderRadius: BorderRadius.circular(3),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Text(
+              DateFormat('MMM d, yyyy').format(date),
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 12,
+                fontWeight: FontWeight.w700,
+                color: ColorsManager.whiteColors,
+              ),
+            ),
+            const Divider(height: 2, thickness: 1),
+            Text(
+              '$value Occupants',
+              style: context.textTheme.bodySmall?.copyWith(
+                fontSize: 10,
+                fontWeight: FontWeight.w500,
+                color: ColorsManager.whiteColors,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/heat_map_tooltip.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_painter.dart';
+
+class InteractiveHeatMap extends StatefulWidget {
+  const InteractiveHeatMap({
+    required this.items,
+    required this.maxValue,
+    required this.cellSize,
+    super.key,
+  });
+
+  final List<OccupancyPaintItem> items;
+  final int maxValue;
+  final double cellSize;
+
+  @override
+  State<InteractiveHeatMap> createState() => _InteractiveHeatMapState();
+}
+
+class _InteractiveHeatMapState extends State<InteractiveHeatMap> {
+  OccupancyPaintItem? _hoveredItem;
+  OverlayEntry? _overlayEntry;
+  final LayerLink _layerLink = LayerLink();
+
+  @override
+  void dispose() {
+    _removeOverlay();
+    _overlayEntry?.dispose();
+    super.dispose();
+  }
+
+  void _removeOverlay() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+  }
+
+  void _showTooltip(OccupancyPaintItem item, Offset localPosition) {
+    _removeOverlay();
+
+    final column = item.index ~/ 7;
+    final row = item.index % 7;
+    final x = column * widget.cellSize;
+    final y = row * widget.cellSize;
+
+    _overlayEntry = OverlayEntry(
+      builder: (context) => Positioned(
+        child: CompositedTransformFollower(
+          link: _layerLink,
+          offset: Offset(x + widget.cellSize, y),
+          child: Material(
+            color: Colors.transparent,
+            child: Transform.translate(
+              offset: Offset(-(widget.cellSize * 2.5), -50),
+              child: HeatMapTooltip(date: item.date, value: item.value),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    Overlay.of(context).insert(_overlayEntry!);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CompositedTransformTarget(
+      link: _layerLink,
+      child: MouseRegion(
+        onHover: (event) {
+          final column = event.localPosition.dx ~/ widget.cellSize;
+          final row = event.localPosition.dy ~/ widget.cellSize;
+          final index = column * 7 + row;
+
+          if (index >= 0 && index < widget.items.length) {
+            final item = widget.items[index];
+            if (_hoveredItem != item) {
+              setState(() => _hoveredItem = item);
+              _showTooltip(item, event.localPosition);
+            }
+          } else {
+            _removeOverlay();
+            setState(() => _hoveredItem = null);
+          }
+        },
+        onExit: (_) {
+          _removeOverlay();
+          setState(() => _hoveredItem = null);
+        },
+        child: CustomPaint(
+          isComplex: true,
+          size: _painterSize,
+          painter: OccupancyPainter(
+            items: widget.items,
+            maxValue: widget.maxValue,
+            hoveredItem: _hoveredItem,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Size get _painterSize {
+    final height = 7 * widget.cellSize;
+    final width = widget.items.length ~/ 7 * widget.cellSize;
+    return Size(width, height);
+  }
+}

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

@@ -1,6 +1,7 @@
 import 'dart:math' as math show max;
 
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/interactive_heat_map.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_days.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_gradient.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_heat_map_months.dart';
@@ -15,7 +16,7 @@ class OccupancyHeatMap extends StatelessWidget {
   static const _totalWeeks = 53;
 
   int get _maxValue => heatMapData.isNotEmpty
-      ? heatMapData.keys.map((key) => heatMapData[key]!).reduce(math.max)
+      ? heatMapData.keys.map((key) => heatMapData[key] ?? 0).reduce(math.max)
       : 0;
 
   DateTime _getStartingDate() {
@@ -28,7 +29,7 @@ class OccupancyHeatMap extends StatelessWidget {
     return List.generate(_totalWeeks * 7, (index) {
       final date = startDate.add(Duration(days: index));
       final value = heatMapData[date] ?? 0;
-      return OccupancyPaintItem(index: index, value: value);
+      return OccupancyPaintItem(index: index, value: value, date: date);
     });
   }
 
@@ -58,15 +59,13 @@ class OccupancyHeatMap extends StatelessWidget {
                   child: Row(
                     children: [
                       const OccupancyHeatMapDays(cellSize: _cellSize),
-                      CustomPaint(
-                        size: const Size(_totalWeeks * _cellSize, 7 * _cellSize),
-                        child: CustomPaint(
-                          isComplex: true,
-                          size: const Size(_totalWeeks * _cellSize, 7 * _cellSize),
-                          painter: OccupancyPainter(
-                            items: paintItems,
-                            maxValue: _maxValue,
-                          ),
+                      SizedBox(
+                        width: _totalWeeks * _cellSize,
+                        height: 7 * _cellSize,
+                        child: InteractiveHeatMap(
+                          items: paintItems,
+                          maxValue: _maxValue,
+                          cellSize: _cellSize,
                         ),
                       ),
                     ],

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

@@ -68,7 +68,10 @@ class OccupancyHeatMapBox extends StatelessWidget {
               Expanded(
                 child: OccupancyHeatMap(
                   heatMapData: state.heatMapData.asMap().map(
-                        (_, value) => MapEntry(value.date, value.occupancy),
+                        (_, value) => MapEntry(
+                          value.eventDate,
+                          value.countTotalPresenceDetected,
+                        ),
                       ),
                 ),
               ),

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

@@ -4,18 +4,25 @@ import 'package:syncrow_web/utils/color_manager.dart';
 class OccupancyPaintItem {
   final int index;
   final int value;
+  final DateTime date;
 
-  const OccupancyPaintItem({required this.index, required this.value});
+  const OccupancyPaintItem({
+    required this.index,
+    required this.value,
+    required this.date,
+  });
 }
 
 class OccupancyPainter extends CustomPainter {
   OccupancyPainter({
     required this.items,
     required this.maxValue,
+    this.hoveredItem,
   });
 
   final List<OccupancyPaintItem> items;
   final int maxValue;
+  final OccupancyPaintItem? hoveredItem;
 
   static const double cellSize = 16.0;
 
@@ -25,6 +32,10 @@ class OccupancyPainter extends CustomPainter {
     final Paint borderPaint = Paint()
       ..color = ColorsManager.grayBorder.withValues(alpha: 0.4)
       ..style = PaintingStyle.stroke;
+    final Paint hoveredBorderPaint = Paint()
+      ..color = Colors.black
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1.5;
 
     for (final item in items) {
       final column = item.index ~/ 7;
@@ -37,22 +48,27 @@ class OccupancyPainter extends CustomPainter {
       final rect = Rect.fromLTWH(x, y, cellSize, cellSize);
       canvas.drawRect(rect, fillPaint);
 
-      _drawDashedLine(
-        canvas,
-        Offset(x, y),
-        Offset(x + cellSize, y),
-        borderPaint,
-      );
-      _drawDashedLine(
-        canvas,
-        Offset(x, y + cellSize),
-        Offset(x + cellSize, y + cellSize),
-        borderPaint,
-      );
+      // Highlight the hovered item
+      if (hoveredItem != null && hoveredItem!.index == item.index) {
+        canvas.drawRect(rect, hoveredBorderPaint);
+      } else {
+        _drawDashedLine(
+          canvas,
+          Offset(x, y),
+          Offset(x + cellSize, y),
+          borderPaint,
+        );
+        _drawDashedLine(
+          canvas,
+          Offset(x, y + cellSize),
+          Offset(x + cellSize, y + cellSize),
+          borderPaint,
+        );
 
-      canvas.drawLine(Offset(x, y), Offset(x, y + cellSize), borderPaint);
-      canvas.drawLine(
-          Offset(x + cellSize, y), Offset(x + cellSize, y + cellSize), borderPaint);
+        canvas.drawLine(Offset(x, y), Offset(x, y + cellSize), borderPaint);
+        canvas.drawLine(Offset(x + cellSize, y), Offset(x + cellSize, y + cellSize),
+            borderPaint);
+      }
     }
   }
 
@@ -80,5 +96,6 @@ class OccupancyPainter extends CustomPainter {
   }
 
   @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+  bool shouldRepaint(covariant OccupancyPainter oldDelegate) =>
+      oldDelegate.hoveredItem != hoveredItem;
 }

lib/pages/analytics/params/get_occupancy_heat_map_param.dart

@@ -1,19 +1,13 @@
 class GetOccupancyHeatMapParam {
   final DateTime year;
-  final String communityId;
-  final String spaceId;
+  final String spaceUuid;
 
   const GetOccupancyHeatMapParam({
     required this.year,
-    required this.communityId,
-    required this.spaceId,
+    required this.spaceUuid,
   });
 
   Map<String, dynamic> toJson() {
-    return {
-      'year': year.toIso8601String(),
-      'communityId': communityId,
-      'spaceId': spaceId,
-    };
+    return {'year': year.year};
   }
 }

lib/pages/analytics/services/occupancy_heat_map/fake_occupancy_heat_map_service.dart

@@ -1,25 +0,0 @@
-import 'package:syncrow_web/pages/analytics/models/occupancy_heat_map_model.dart';
-import 'package:syncrow_web/pages/analytics/params/get_occupancy_heat_map_param.dart';
-import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/occupancy_heat_map_service.dart';
-
-class FakeOccupancyHeatMapService implements OccupancyHeatMapService {
-  @override
-  Future<List<OccupancyHeatMapModel>> load(GetOccupancyHeatMapParam param) {
-    return Future.delayed(const Duration(milliseconds: 200), () {
-      final now = DateTime.now();
-      final startOfYear = DateTime(now.year, 1, 1);
-      final endOfYear = DateTime(now.year, 12, 31);
-      final daysInYear = endOfYear.difference(startOfYear).inDays + 1;
-
-      final List<OccupancyHeatMapModel> data = List.generate(
-        daysInYear,
-        (index) => OccupancyHeatMapModel(
-          date: startOfYear.add(Duration(days: index)),
-          occupancy: ((index + 1) * 10) % 100,
-        ),
-      );
-
-      return data;
-    });
-  }
-}

lib/pages/analytics/services/occupancy_heat_map/remote_occupancy_heat_map_service.dart

@@ -0,0 +1,35 @@
+import 'package:syncrow_web/pages/analytics/models/occupancy_heat_map_model.dart';
+import 'package:syncrow_web/pages/analytics/params/get_occupancy_heat_map_param.dart';
+import 'package:syncrow_web/pages/analytics/services/occupancy_heat_map/occupancy_heat_map_service.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+final class RemoteOccupancyHeatMapService implements OccupancyHeatMapService {
+  const RemoteOccupancyHeatMapService(this._httpService);
+
+  final HTTPService _httpService;
+
+  @override
+  Future<List<OccupancyHeatMapModel>> load(GetOccupancyHeatMapParam param) async {
+    try {
+      final response = await _httpService.get(
+        path: '/occupancy/heat-map/space/${param.spaceUuid}',
+        showServerMessage: true,
+        queryParameters: param.toJson(),
+        expectedResponseModel: (response) {
+          final json = response as Map<String, dynamic>;
+          final dailyData = json['data'] as List<dynamic>? ?? <dynamic>[];
+
+          final result = dailyData.map(
+            (json) => OccupancyHeatMapModel.fromJson(json as Map<String, dynamic>),
+          );
+
+          return result.toList();
+        },
+      );
+
+      return response;
+    } catch (e) {
+      throw Exception('Failed to load total energy consumption:');
+    }
+  }
+}

lib/pages/analytics/widgets/analytics_error_widget.dart

@@ -12,7 +12,7 @@ class AnalyticsErrorWidget extends StatelessWidget {
     return Visibility(
       visible: errorMessage != null || (errorMessage?.isNotEmpty ?? false),
       child: Text(
-        '$errorMessage ?? "Something went wrong"',
+        errorMessage ?? 'Something went wrong',
         maxLines: 1,
         overflow: TextOverflow.ellipsis,
         style: context.textTheme.bodySmall?.copyWith(