SP-1917-FE-Increase-Zoom-In-Out-levels-of-the-canvas.

<!--
  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:
-->

## Description

<!--- Describe your changes in detail -->
refactor booking page to use PageController 

## Type of Change

<!--- Put an `x` in all the boxes that apply: -->

- [ ] ✨ New feature (non-breaking change which adds functionality)
- [x] 🛠️ 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/access_management/booking_system/presentation/view/booking_page.dart

@@ -1,4 +1,3 @@
-// booking_page.dart
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:calendar_view/calendar_view.dart';
@@ -20,7 +19,8 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class BookingPage extends StatefulWidget {
-  const BookingPage({super.key});
+  final PageController? pageController;
+  const BookingPage({super.key, this.pageController});
 
   @override
   State<BookingPage> createState() => _BookingPageState();
@@ -42,12 +42,15 @@ class _BookingPageState extends State<BookingPage> {
           ),
         ),
       ],
-      child: _BookingPageContent(),
+      child: _BookingPageContent(widget.pageController),
     );
   }
 }
 
 class _BookingPageContent extends StatefulWidget {
+  final PageController? pageController;
+  const _BookingPageContent(this.pageController);
+
   @override
   State<_BookingPageContent> createState() => _BookingPageContentState();
 }
@@ -90,8 +93,7 @@ class _BookingPageContentState extends State<_BookingPageContent> {
     return BlocListener<SelectedBookableSpaceBloc, SelectedBookableSpaceState>(
       listener: (context, state) {
         if (state.selectedBookableSpace != null) {
-          // Reset events and clear cache when room changes
-          context.read<CalendarEventsBloc>().add(ResetEvents());
+          context.read<CalendarEventsBloc>().add(const ResetEvents());
           _loadEvents(context);
         }
       },
@@ -176,7 +178,9 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                               SvgTextButton(
                                 svgAsset: Assets.homeIcon,
                                 label: 'Manage Bookable Spaces',
-                                onPressed: () {},
+                                onPressed: () {
+                                  widget.pageController!.jumpToPage(2);
+                                },
                               ),
                               const SizedBox(width: 20),
                               SvgTextButton(
@@ -237,7 +241,6 @@ class _BookingPageContentState extends State<_BookingPageContent> {
                                           .watch<DateSelectionBloc>()
                                           .state
                                           .selectedDateFromSideBarCalender,
-                                      // isLoading: eventState is EventsLoading,
                                     );
                                   },
                                 );

lib/pages/access_management/booking_system/presentation/view/widgets/week_navigation.dart

@@ -19,6 +19,7 @@ class WeekNavigation extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
+      width: 250,
       padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
       decoration: BoxDecoration(
         color: ColorsManager.circleRolesBackground,
@@ -32,6 +33,8 @@ class WeekNavigation extends StatelessWidget {
         ],
       ),
       child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
         children: [
           IconButton(
             iconSize: 15,
@@ -40,12 +43,16 @@ class WeekNavigation extends StatelessWidget {
             onPressed: onPreviousWeek,
           ),
           const SizedBox(width: 10),
-          Text(
-            _getMonthYearText(weekStart, weekEnd),
-            style: const TextStyle(
-              color: ColorsManager.lightGrayColor,
-              fontSize: 14,
-              fontWeight: FontWeight.w400,
+          SizedBox(
+            width: 120,
+            child: Text(
+              _getMonthYearText(weekStart, weekEnd),
+              style: const TextStyle(
+                color: ColorsManager.lightGrayColor,
+                fontSize: 14,
+                fontWeight: FontWeight.w400,
+              ),
+              textAlign: TextAlign.center,
             ),
           ),
           const SizedBox(width: 10),

lib/pages/access_management/booking_system/view/booking_page.dart

@@ -1,57 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/icon_text_button.dart';
-
-import 'package:syncrow_web/utils/constants/assets.dart';
-
-class BookingPage extends StatelessWidget {
-  final PageController pageController;
-  const BookingPage({
-    super.key,
-    required this.pageController,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      children: [
-        Expanded(
-            child: Container(
-          color: Colors.blueGrey[100],
-          child: const Center(
-            child: Text(
-              'Side bar',
-              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
-            ),
-          ),
-        )),
-        Expanded(
-            flex: 4,
-            child: Padding(
-              padding: const EdgeInsets.all(20.0),
-              child: SizedBox(
-                child: Column(
-                  children: [
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      children: [
-                        SvgTextButton(
-                            svgAsset: Assets.homeIcon,
-                            label: 'Manage Bookable Spaces',
-                            onPressed: () {
-                              pageController.jumpToPage(2);
-                            }),
-                        const SizedBox(width: 20),
-                        SvgTextButton(
-                            svgAsset: Assets.groupIcon,
-                            label: 'Manage Users',
-                            onPressed: () {})
-                      ],
-                    )
-                  ],
-                ),
-              ),
-            ))
-      ],
-    );
-  }
-}

lib/pages/access_management/view/access_management.dart

@@ -2,9 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/view/booking_page.dart';
 import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/screens/manage_bookable_spaces_screen.dart';
-import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/booking_page.dart' hide BookingPage;
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/booking_page.dart';
 import 'package:syncrow_web/pages/access_management/view/access_overview_content.dart';
 import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';

lib/pages/routines/create_new_routines/dropdown_menu_content.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 import 'space_tree_dropdown_bloc.dart';
 
 class DropdownMenuContent extends StatefulWidget {
@@ -75,7 +76,8 @@ class _DropdownMenuContentState extends State<DropdownMenuContent> {
                 child: TextFormField(
                   controller: _searchController,
                   onChanged: _handleSearch,
-                  style: const TextStyle(fontSize: 14, color: Colors.black),
+                  style: const TextStyle(
+                      fontSize: 14, color: ColorsManager.blackColor),
                   decoration: InputDecoration(
                     hintText: 'Search for space...',
                     prefixIcon: const Icon(Icons.search, size: 20),
@@ -84,6 +86,12 @@ class _DropdownMenuContentState extends State<DropdownMenuContent> {
                     border: OutlineInputBorder(
                       borderRadius: BorderRadius.circular(8),
                     ),
+                    focusedBorder: OutlineInputBorder(
+                      borderRadius: BorderRadius.circular(8),
+                      borderSide: const BorderSide(
+                        color: ColorsManager.dropDownSelectBlue,
+                      ),
+                    ),
                     isDense: true,
                   ),
                 ),
@@ -117,7 +125,9 @@ class _DropdownMenuContentState extends State<DropdownMenuContent> {
                       title: Text(
                         community.name,
                         style: TextStyle(
-                          color: isSelected ? Colors.blue : Colors.black,
+                          color: isSelected
+                              ? ColorsManager.dropDownSelectBlue
+                              : ColorsManager.blackColor,
                           fontWeight:
                               isSelected ? FontWeight.bold : FontWeight.normal,
                         ),

lib/pages/routines/create_new_routines/space_dropdown.dart

@@ -52,7 +52,7 @@ class SpaceDropdown extends StatelessWidget {
                             fontSize: 16,
                             fontWeight: FontWeight.bold,
                             color: selectedValue == space.uuid
-                                ? ColorsManager.dialogBlueTitle
+                                ? ColorsManager.dropDownSelectBlue
                                 : ColorsManager.blackColor,
                           ),
                     ),
@@ -61,7 +61,7 @@ class SpaceDropdown extends StatelessWidget {
                       style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                             fontSize: 12,
                             color: selectedValue == space.uuid
-                                ? ColorsManager.dialogBlueTitle
+                                ? ColorsManager.dropDownSelectBlue
                                 : ColorsManager.blackColor,
                           ),
                     ),

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

@@ -508,8 +508,8 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
           horizontal: context.screenWidth * 0.3,
           vertical: context.screenHeight * 0.3,
         ),
-        minScale: 0.5,
-        maxScale: 3.0,
+        minScale: 0.3,
+        maxScale: 4.5,
         constrained: false,
         child: SizedBox(
           width: context.screenWidth * 5,

lib/utils/color_manager.dart

@@ -85,6 +85,8 @@ abstract class ColorsManager {
   static const Color minBlue = Color(0xFF93AAFD);
   static const Color minBlueDot = Color(0xFF023DFE);
   static const Color grey25 = Color(0xFFF9F9F9);
+  static const Color dropDownSelectBlue = Color(0xFF2196F3);
+  static const Color drpoDownSelectBlue = Color(0xFF2196F3);
   static const Color grey50 = Color(0xFF718096);
   static const Color red100 = Color(0xFFFE0202);
   static const Color grey800 = Color(0xffF8F8F8);
@@ -93,4 +95,5 @@ abstract class ColorsManager {
   static const Color shadowOfDetailsContainer = Color(0x40000000);
   static const Color checkBoxBorderGray = Color(0xffD0D0D0);
   static const Color timePickerColor = Color(0xff000000);
+
 }