Sp 1511 fe build occupancy heat map weekly monthly intensity view (#178)

* set the default tab to occupancy for ease of development.

* Implemented an initial design for the occupancy chart.

* Add Occupacy model and service for occupancy data handling.

* Created `OccupancyBloc`.

* Implemented the sidebar of Occupancy view.

* Moved `OccupancyEndSideBar` widget to its own file.

* Removed unnecessary widgets.

* Matched the `OccupancyChart` with the figma design.

* Added `AnalyticsDateFilterButton` to `OccupancyChartBox`.

* Hides `AnalyticsDateFilterButton` that is in the page header, when the selected tab isn't `AnalyticsPageTab.energyManagement`.

* Added animation to`AnalyticsDateFilterButton`.

* modified the implementation of `FakeOccupacyService` to clamp all the generated values to less than a 100.

* Injected `OccupancyBloc` into `AnalyticsPage`.

* Made `OccupancyChart` read its data from `OccupancyBloc`.

* Refactor AnalyticsCommunitiesSidebar to load data based on selected tab and implement loadEnergyManagementData method

* Refactor Analytics views to use StatefulWidget and load data in initState

* Created `OccupancyHeatMapModel`.

* Add FakeOccupancyHeatMapService implementation.

* Created `OccupancyHeatMapBloc`.

* Injected `OccupancyHeatMapBloc` into `AnalyticsPage`.

* Add OccupancyHeatMapBox widget and integrate into AnalyticsOccupancyView

* Matching the heat map with the design, and added week days.

* Made the HeatMap cells have a dashed border.

* shows months.

* responsiveness.

* Integrate OccupancyHeatMapBloc and update OccupancyHeatMapBox to display heat map data with error handling

* Integrate OccupancyHeatMapBloc and update OccupancyHeatMapBox to display heat map data with error handling

* made the heatmap loading fast af by using painters instead of individually creating a widget for every single event.

* Extracted `OccupancyHeatMapMonths` into its own widgte.

* Moved `OccupancyHeatMapMonths` to its own file.

* Adjusted design of `OccupancyHeatMapMonths`.

* Adjust layout flex properties for `OccupancyEndSideBar` and its parent column in `AnalyticsOccupancyView`.

* moved `OccupancyPaintItem` to `OccupancyPainter`s file.

* removed comments from `OccupancyPainter`.

* used color.withValues instead of .withOpacity.

* re-added `OccupancyHeatMapGradient`.

* Revert initial tab to `energyManagement`.

* Made datepicker dynamic for multiple states.

* Add year picker functionality to date filter button and implement dynamic date selection

* Align date filter button to the end in occupancy chart and heat map boxes for improved UI consistency.

* Enahnced color of border in `OccupancyPainter`.

* Add ClearOccupancyHeatMapEvent to reset heat map state and update occupancy data helper to trigger event on empty selections

* show percentage of value in tool tip of `OccupancyChart`.

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

@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/analytics_date_filter_button.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_bloc.dart';
+import 'package:syncrow_web/pages/analytics/modules/occupancy/helpers/fetch_occupancy_data_helper.dart';
 import 'package:syncrow_web/pages/analytics/modules/occupancy/widgets/occupancy_chart.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -23,9 +25,9 @@ class OccupancyChartBox extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               AnalyticsErrorWidget(state.errorMessage),
-              const Row(
+              Row(
                 children: [
-                  Expanded(
+                  const Expanded(
                     flex: 3,
                     child: FittedBox(
                       alignment: AlignmentDirectional.centerStart,
@@ -33,11 +35,23 @@ class OccupancyChartBox extends StatelessWidget {
                       child: ChartTitle(title: Text('Occupancy')),
                     ),
                   ),
-                  Spacer(),
+                  const Spacer(),
                   Expanded(
                     child: FittedBox(
                       fit: BoxFit.scaleDown,
-                      child: AnalyticsDateFilterButton(),
+                      alignment: AlignmentDirectional.centerEnd,
+                      child: AnalyticsDateFilterButton(
+                        onDateSelected: (DateTime value) {
+                          context.read<AnalyticsDatePickerBloc>().add(
+                                UpdateAnalyticsDatePickerEvent(montlyDate: value),
+                              );
+                          FetchOccupancyDataHelper.loadOccupancyData(context);
+                        },
+                        selectedDate: context
+                            .watch<AnalyticsDatePickerBloc>()
+                            .state
+                            .monthlyDate,
+                      ),
                     ),
                   ),
                 ],