Merge branch 'dev' into revert-SP-1589

lib/pages/access_management/bloc/access_bloc.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
-import 'package:syncrow_web/pages/access_management/model/password_model.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/model/password_model.dart';
 import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/common/hour_picker_dialog.dart';
 import 'package:syncrow_web/services/access_mang_api.dart';

lib/pages/access_management/bloc/access_state.dart

@@ -1,5 +1,5 @@
 import 'package:equatable/equatable.dart';
-import 'package:syncrow_web/pages/access_management/model/password_model.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/model/password_model.dart';
 
 abstract class AccessState extends Equatable {
   const AccessState();

lib/pages/access_management/booking_system/data/services/remote_bookable_spaces_service.dart

@@ -0,0 +1,52 @@
+import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/paginated_bookable_spaces.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/services/bookable_system_service.dart';
+import 'package:syncrow_web/services/api/api_exception.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/constants/api_const.dart';
+
+class RemoteBookableSpacesService implements BookableSystemService {
+  const RemoteBookableSpacesService(this._httpService);
+
+  final HTTPService _httpService;
+  static const _defaultErrorMessage = 'Failed to load bookable spaces';
+
+  @override
+  Future<PaginatedBookableSpaces> getBookableSpaces({
+    required LoadBookableSpacesParam param,
+  }) async {
+    try {
+      final response = await _httpService.get(
+        path: ApiEndpoints.getBookableSpaces,
+        queryParameters: {
+          'page': param.page,
+          'size': param.size,
+          'active': true,
+          'configured': true,
+          if (param.search != null &&
+              param.search.isNotEmpty &&
+              param.search != 'null')
+            'search': param.search,
+        },
+        expectedResponseModel: (json) {
+          return PaginatedBookableSpaces.fromJson(
+            json as Map<String, dynamic>,
+          );
+        },
+      );
+      return response;
+    } on DioException catch (e) {
+      final responseData = e.response?.data;
+      if (responseData is Map<String, dynamic>) {
+        final errorMessage = responseData['error']?['message'] as String? ??
+            responseData['message'] as String? ??
+            _defaultErrorMessage;
+        throw APIException(errorMessage);
+      }
+      throw APIException(_defaultErrorMessage);
+    } catch (e) {
+      throw APIException('$_defaultErrorMessage: ${e.toString()}');
+    }
+  }
+}

lib/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart

@@ -0,0 +1,36 @@
+import 'package:equatable/equatable.dart';
+
+class LoadBookableSpacesParam extends Equatable {
+  const LoadBookableSpacesParam({
+    this.page = 1,
+    this.size = 25,
+    this.search = '',
+    this.active = true,
+    this.configured = true,
+  });
+
+  final int page;
+  final int size;
+  final String search;
+  final bool active;
+  final bool configured;
+
+  LoadBookableSpacesParam copyWith({
+    int? page,
+    int? size,
+    String? search,
+    bool? active,
+    bool? configured,
+  }) {
+    return LoadBookableSpacesParam(
+      page: page ?? this.page,
+      size: size ?? this.size,
+      search: search ?? this.search,
+      active: active ?? this.active,
+      configured: configured ?? this.configured,
+    );
+  }
+
+  @override
+  List<Object?> get props => [page, size, search, active, configured];
+}

lib/pages/access_management/booking_system/domain/models/bookable_room.dart

@@ -0,0 +1,52 @@
+class BookableSpaceModel {
+  final String uuid;
+  final String spaceName;
+  final String virtualLocation;
+  final BookableConfig bookableConfig;
+
+  BookableSpaceModel({
+    required this.uuid,
+    required this.spaceName,
+    required this.virtualLocation,
+    required this.bookableConfig,
+  });
+
+  factory BookableSpaceModel.fromJson(Map<String, dynamic> json) {
+    return BookableSpaceModel(
+      uuid: json['uuid'] as String,
+      spaceName: json['spaceName'] as String,
+      virtualLocation: json['virtualLocation'] as String,
+      bookableConfig: BookableConfig.fromJson(
+          json['bookableConfig'] as Map<String, dynamic>),
+    );
+  }
+}
+
+class BookableConfig {
+  final String uuid;
+  final List<String> daysAvailable;
+  final String startTime;
+  final String endTime;
+  final bool active;
+  final int points;
+
+  BookableConfig({
+    required this.uuid,
+    required this.daysAvailable,
+    required this.startTime,
+    required this.endTime,
+    required this.active,
+    required this.points,
+  });
+
+  factory BookableConfig.fromJson(Map<String, dynamic> json) {
+    return BookableConfig(
+      uuid: json['uuid'] as String,
+      daysAvailable: (json['daysAvailable'] as List).cast<String>(),
+      startTime: json['startTime'] as String,
+      endTime: json['endTime'] as String,
+      active: json['active'] as bool,
+      points: json['points'] as int,
+    );
+  }
+}

lib/pages/access_management/booking_system/domain/models/paginated_bookable_spaces.dart

@@ -0,0 +1,40 @@
+
+
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+
+class PaginatedBookableSpaces {
+  final List<BookableSpaceModel> data;
+  final String message;
+  final int page;
+  final int size;
+  final int totalItem;
+  final int totalPage;
+  final bool hasNext;
+  final bool hasPrevious;
+
+  PaginatedBookableSpaces({
+    required this.data,
+    required this.message,
+    required this.page,
+    required this.size,
+    required this.totalItem,
+    required this.totalPage,
+    required this.hasNext,
+    required this.hasPrevious,
+  });
+
+  factory PaginatedBookableSpaces.fromJson(Map<String, dynamic> json) {
+    return PaginatedBookableSpaces(
+      data: (json['data'] as List)
+          .map((item) => BookableSpaceModel.fromJson(item))
+          .toList(),
+      message: json['message'] as String,
+      page: json['page'] as int,
+      size: json['size'] as int,
+      totalItem: json['totalItem'] as int,
+      totalPage: json['totalPage'] as int,
+      hasNext: json['hasNext'] as bool,
+      hasPrevious: json['hasPrevious'] as bool,
+    );
+  }
+}

lib/pages/access_management/booking_system/domain/services/bookable_system_service.dart

@@ -0,0 +1,8 @@
+import 'package:syncrow_web/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/paginated_bookable_spaces.dart';
+
+abstract class BookableSystemService {
+  Future<PaginatedBookableSpaces> getBookableSpaces({
+    required LoadBookableSpacesParam param,
+  });
+}

lib/pages/access_management/booking_system/domain/services/debounced_bookable_spaces_service.dart

@@ -0,0 +1,45 @@
+import 'dart:async';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/paginated_bookable_spaces.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/services/bookable_system_service.dart';
+
+class DebouncedBookableSpacesService implements BookableSystemService {
+  final BookableSystemService _inner;
+  final Duration debounceDuration;
+
+  Timer? _debounceTimer;
+  Completer<PaginatedBookableSpaces>? _lastCompleter;
+
+  DebouncedBookableSpacesService(
+    this._inner, {
+    this.debounceDuration = const Duration(milliseconds: 500),
+  });
+
+  @override
+  Future<PaginatedBookableSpaces> getBookableSpaces({
+    required LoadBookableSpacesParam param,
+  }) {
+    _debounceTimer?.cancel();
+    if (_lastCompleter != null && !_lastCompleter!.isCompleted) {
+      _lastCompleter!.completeError(StateError("Cancelled by new search"));
+    }
+
+    final completer = Completer<PaginatedBookableSpaces>();
+    _lastCompleter = completer;
+
+    _debounceTimer = Timer(debounceDuration, () async {
+      try {
+        final result = await _inner.getBookableSpaces(param: param);
+        if (!completer.isCompleted) {
+          completer.complete(result);
+        }
+      } catch (e, st) {
+        if (!completer.isCompleted) {
+          completer.completeError(e, st);
+        }
+      }
+    });
+
+    return completer.future;
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/calendar/events_bloc.dart

@@ -0,0 +1,143 @@
+import 'dart:async';
+import 'package:bloc/bloc.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:flutter/material.dart';
+part 'events_event.dart';
+part 'events_state.dart';
+
+class CalendarEventsBloc extends Bloc<CalendarEventsEvent, CalendarEventState> {
+  final EventController eventController = EventController();
+
+  CalendarEventsBloc() : super(EventsInitial()) {
+    on<LoadEvents>(_onLoadEvents);
+    on<AddEvent>(_onAddEvent);
+    on<StartTimer>(_onStartTimer);
+    on<DisposeResources>(_onDisposeResources);
+    on<GoToWeek>(_onGoToWeek);
+  }
+
+  Future<void> _onLoadEvents(
+    LoadEvents event,
+    Emitter<CalendarEventState> emit,
+  ) async {
+    emit(EventsLoading());
+    try {
+      final events = _generateDummyEventsForWeek(event.weekStart);
+      eventController.addAll(events);
+      emit(EventsLoaded(
+        events: events,
+        initialDate: event.weekStart,
+        weekDays: _getWeekDays(event.weekStart),
+      ));
+    } catch (e) {
+      emit(EventsError('Failed to load events'));
+    }
+  }
+
+  List<CalendarEventData> _generateDummyEventsForWeek(DateTime weekStart) {
+    final events = <CalendarEventData>[];
+
+    for (int i = 0; i < 7; i++) {
+      final date = weekStart.add(Duration(days: i));
+
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 9, minute: 0),
+        endTime: date.copyWith(hour: 10, minute: 30),
+        title: 'Team Meeting',
+        description: 'Daily standup',
+        color: Colors.blue,
+      ));
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 14, minute: 0),
+        endTime: date.copyWith(hour: 15, minute: 0),
+        title: 'Client Call',
+        description: 'Project discussion',
+        color: Colors.green,
+      ));
+    }
+
+    return events;
+  }
+
+  void _onAddEvent(AddEvent event, Emitter<CalendarEventState> emit) {
+    eventController.add(event.event);
+    if (state is EventsLoaded) {
+      final loaded = state as EventsLoaded;
+      emit(EventsLoaded(
+        events: [...eventController.events],
+        initialDate: loaded.initialDate,
+        weekDays: loaded.weekDays,
+      ));
+    }
+  }
+
+  void _onStartTimer(StartTimer event, Emitter<CalendarEventState> emit) {}
+
+  void _onDisposeResources(
+      DisposeResources event, Emitter<CalendarEventState> emit) {
+    eventController.dispose();
+  }
+
+  void _onGoToWeek(GoToWeek event, Emitter<CalendarEventState> emit) {
+    if (state is EventsLoaded) {
+      final loaded = state as EventsLoaded;
+      final newWeekDays = _getWeekDays(event.weekDate);
+      emit(EventsLoaded(
+        events: loaded.events,
+        initialDate: event.weekDate,
+        weekDays: newWeekDays,
+      ));
+    }
+  }
+
+  List<CalendarEventData> _generateDummyEvents() {
+    final now = DateTime.now();
+    return [
+      CalendarEventData(
+        date: now,
+        startTime: now.copyWith(hour: 8, minute: 00, second: 0),
+        endTime: now.copyWith(hour: 9, minute: 00, second: 0),
+        title: 'Team Meeting',
+        description: 'Weekly team sync',
+        color: Colors.blue,
+      ),
+      CalendarEventData(
+        date: now,
+        startTime: now.copyWith(hour: 9, minute: 00, second: 0),
+        endTime: now.copyWith(hour: 10, minute: 30, second: 0),
+        title: 'Team Meeting',
+        description: 'Weekly team sync',
+        color: Colors.blue,
+      ),
+      CalendarEventData(
+        date: now.add(const Duration(days: 1)),
+        startTime: now.copyWith(hour: 14, day: now.day + 1),
+        endTime: now.copyWith(hour: 15, day: now.day + 1),
+        title: 'Client Call',
+        description: 'Project discussion',
+        color: Colors.green,
+      ),
+      CalendarEventData(
+        date: now.add(const Duration(days: 2)),
+        startTime: now.copyWith(hour: 11, day: now.day + 2),
+        endTime: now.copyWith(hour: 12, day: now.day + 2),
+        title: 'Lunch with Team',
+        color: Colors.orange,
+      ),
+    ];
+  }
+
+  List<DateTime> _getWeekDays(DateTime date) {
+    final int weekday = date.weekday;
+    final DateTime monday = date.subtract(Duration(days: weekday - 1));
+    return List.generate(7, (i) => monday.add(Duration(days: i)));
+  }
+
+  @override
+  Future<void> close() {
+    eventController.dispose();
+    return super.close();
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/calendar/events_event.dart

@@ -0,0 +1,25 @@
+part of 'events_bloc.dart';
+
+@immutable
+abstract class CalendarEventsEvent {
+  const CalendarEventsEvent();
+}
+
+class LoadEvents extends CalendarEventsEvent {
+  final DateTime weekStart;
+  const LoadEvents({required this.weekStart});
+}
+
+class AddEvent extends CalendarEventsEvent {
+  final CalendarEventData event;
+  AddEvent(this.event);
+}
+
+class StartTimer extends CalendarEventsEvent {}
+
+class DisposeResources extends CalendarEventsEvent {}
+
+class GoToWeek extends CalendarEventsEvent {
+  final DateTime weekDate;
+  GoToWeek(this.weekDate);
+}

lib/pages/access_management/booking_system/presentation/bloc/calendar/events_state.dart

@@ -0,0 +1,25 @@
+part of 'events_bloc.dart';
+
+@immutable
+abstract class CalendarEventState {}
+
+class EventsInitial extends CalendarEventState {}
+
+class EventsLoading extends CalendarEventState {}
+
+class EventsLoaded extends CalendarEventState {
+  final List<CalendarEventData> events;
+  final DateTime initialDate;
+  final List<DateTime> weekDays;
+
+  EventsLoaded({
+    required this.events,
+    required this.initialDate,
+    required this.weekDays,
+  });
+}
+
+class EventsError extends CalendarEventState {
+  final String message;
+  EventsError(this.message);
+}

lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart

@@ -0,0 +1,40 @@
+import 'package:bloc/bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart';
+import 'date_selection_state.dart';
+
+
+class DateSelectionBloc extends Bloc<DateSelectionEvent, DateSelectionState> {
+  DateSelectionBloc() : super(DateSelectionState.initial()) {
+    on<SelectDate>((event, emit) {
+      final newWeekStart = _getStartOfWeek(event.selectedDate);
+      emit(state.copyWith(
+        selectedDate: event.selectedDate,
+        weekStart: newWeekStart,
+      ));
+    });
+
+    on<NextWeek>((event, emit) {
+      final newWeekStart = state.weekStart.add(const Duration(days: 7));
+      emit(state.copyWith(
+        weekStart: newWeekStart,
+      ));
+    });
+
+    on<PreviousWeek>((event, emit) {
+      final newWeekStart = state.weekStart.subtract(const Duration(days: 7));
+      emit(state.copyWith(
+        weekStart: newWeekStart,
+      ));
+    });
+
+    on<SelectDateFromSidebarCalendar>((event, emit) {
+      emit(state.copyWith(
+        selectedDateFromSideBarCalender: event.selectedDate,
+      ));
+    });
+  }
+
+  static DateTime _getStartOfWeek(DateTime date) {
+    return date.subtract(Duration(days: date.weekday - 1));
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart

@@ -0,0 +1,18 @@
+
+abstract class DateSelectionEvent {
+  const DateSelectionEvent();
+}
+
+class SelectDate extends DateSelectionEvent {
+  final DateTime selectedDate;
+  const SelectDate(this.selectedDate);
+}
+
+class NextWeek extends DateSelectionEvent {}
+
+class PreviousWeek extends DateSelectionEvent {}
+
+class SelectDateFromSidebarCalendar extends DateSelectionEvent {
+  final DateTime selectedDate;
+  SelectDateFromSidebarCalendar(this.selectedDate);
+}

lib/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart

@@ -0,0 +1,34 @@
+
+class DateSelectionState {
+  final DateTime selectedDate;
+  final DateTime weekStart;
+  final DateTime? selectedDateFromSideBarCalender;
+
+  DateSelectionState({
+    required this.selectedDate,
+    required this.weekStart,
+    this.selectedDateFromSideBarCalender,
+  });
+
+  factory DateSelectionState.initial() {
+    final now = DateTime.now();
+    final weekStart = now.subtract(Duration(days: now.weekday - 1));
+    return DateSelectionState(
+      selectedDate: now,
+      weekStart: weekStart,
+      selectedDateFromSideBarCalender: null,
+    );
+  }
+
+  DateSelectionState copyWith({
+    DateTime? selectedDate,
+    DateTime? weekStart,
+    DateTime? selectedDateFromSideBarCalender,
+  }) {
+    return DateSelectionState(
+      selectedDate: selectedDate ?? this.selectedDate,
+      weekStart: weekStart ?? this.weekStart,
+      selectedDateFromSideBarCalender: selectedDateFromSideBarCalender ?? this.selectedDateFromSideBarCalender,
+    );
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_bloc.dart

@@ -0,0 +1,14 @@
+import 'package:bloc/bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+part 'selected_bookable_space_event.dart';
+part 'selected_bookable_space_state.dart';
+
+class SelectedBookableSpaceBloc
+    extends Bloc<SelectedBookableSpaceEvent, SelectedBookableSpaceState> {
+  SelectedBookableSpaceBloc() : super(const SelectedBookableSpaceState()) {
+    on<SelectBookableSpace>((event, emit) {
+      emit(SelectedBookableSpaceState(
+          selectedBookableSpace: event.bookableSpace));
+    });
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_event.dart

@@ -0,0 +1,11 @@
+part of 'selected_bookable_space_bloc.dart';
+
+abstract class SelectedBookableSpaceEvent {
+  const SelectedBookableSpaceEvent();
+}
+
+class SelectBookableSpace extends SelectedBookableSpaceEvent {
+  final BookableSpaceModel bookableSpace;
+
+  const SelectBookableSpace(this.bookableSpace);
+}

lib/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_state.dart

@@ -0,0 +1,9 @@
+part of 'selected_bookable_space_bloc.dart';
+
+class SelectedBookableSpaceState {
+  final BookableSpaceModel? selectedBookableSpace;
+
+  const SelectedBookableSpaceState(
+   { this.selectedBookableSpace,}
+  );
+}

lib/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_bloc.dart

@@ -0,0 +1,148 @@
+import 'dart:async';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/load_bookable_spaces_param.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/services/bookable_system_service.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_event.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_state.dart';
+
+class SidebarBloc extends Bloc<SidebarEvent, SidebarState> {
+  final BookableSystemService _bookingService;
+  int _currentPage = 1;
+  final int _pageSize = 20;
+  String _currentSearch = '';
+
+  SidebarBloc(this._bookingService)
+      : super(SidebarState(
+          allRooms: [],
+          displayedRooms: [],
+          isLoading: true,
+          hasMore: true,
+        )) {
+    on<LoadBookableSpaces>(_onLoadBookableSpaces);
+    on<LoadMoreSpaces>(_onLoadMoreSpaces);
+    on<SelectRoomEvent>(_onSelectRoom);
+    on<SearchRoomsEvent>(_onSearchRooms);
+    on<ResetSearch>(_onResetSearch);
+  }
+
+  Future<void> _onLoadBookableSpaces(
+    LoadBookableSpaces event,
+    Emitter<SidebarState> emit,
+  ) async {
+    try {
+      emit(state.copyWith(isLoading: true, errorMessage: null));
+      _currentPage = 1;
+      _currentSearch = '';
+
+      final paginatedSpaces = await _bookingService.getBookableSpaces(
+        param: LoadBookableSpacesParam(
+          page: _currentPage,
+          size: _pageSize,
+          search: _currentSearch,
+        ),
+      );
+
+      emit(state.copyWith(
+        allRooms: paginatedSpaces.data,
+        displayedRooms: paginatedSpaces.data,
+        isLoading: false,
+        hasMore: paginatedSpaces.hasNext,
+        totalPages: paginatedSpaces.totalPage,
+        currentPage: _currentPage,
+      ));
+    } catch (e) {
+      emit(state.copyWith(
+        isLoading: false,
+        errorMessage: 'Failed to load rooms: ${e.toString()}',
+      ));
+    }
+  }
+
+  Future<void> _onLoadMoreSpaces(
+    LoadMoreSpaces event,
+    Emitter<SidebarState> emit,
+  ) async {
+    if (!state.hasMore || state.isLoadingMore) return;
+
+    try {
+      emit(state.copyWith(isLoadingMore: true));
+      _currentPage++;
+
+      final paginatedSpaces = await _bookingService.getBookableSpaces(
+        param: LoadBookableSpacesParam(
+          page: _currentPage,
+          size: _pageSize,
+          search: _currentSearch,
+        ),
+      );
+
+      final updatedRooms = [...state.allRooms, ...paginatedSpaces.data];
+
+      emit(state.copyWith(
+        allRooms: updatedRooms,
+        displayedRooms: updatedRooms,
+        isLoadingMore: false,
+        hasMore: paginatedSpaces.hasNext,
+        totalPages: paginatedSpaces.totalPage,
+        currentPage: _currentPage,
+      ));
+    } catch (e) {
+      _currentPage--;
+      emit(state.copyWith(
+        isLoadingMore: false,
+        errorMessage: 'Failed to load more rooms: ${e.toString()}',
+      ));
+    }
+  }
+
+  Future<void> _onSearchRooms(
+    SearchRoomsEvent event,
+    Emitter<SidebarState> emit,
+  ) async {
+    try {
+      _currentSearch = event.query;
+      _currentPage = 1;
+      emit(state.copyWith(isLoading: true, errorMessage: null));
+      final paginatedSpaces = await _bookingService.getBookableSpaces(
+        param: LoadBookableSpacesParam(
+          page: _currentPage,
+          size: _pageSize,
+          search: _currentSearch,
+        ),
+      );
+      emit(state.copyWith(
+        allRooms: paginatedSpaces.data,
+        displayedRooms: paginatedSpaces.data,
+        isLoading: false,
+        hasMore: paginatedSpaces.hasNext,
+        totalPages: paginatedSpaces.totalPage,
+        currentPage: _currentPage,
+      ));
+    } catch (e) {
+      emit(state.copyWith(
+        isLoading: false,
+        errorMessage: 'Search failed: ${e.toString()}',
+      ));
+    }
+  }
+
+  void _onResetSearch(
+    ResetSearch event,
+    Emitter<SidebarState> emit,
+  ) {
+    _currentSearch = '';
+    add(LoadBookableSpaces());
+  }
+
+  void _onSelectRoom(
+    SelectRoomEvent event,
+    Emitter<SidebarState> emit,
+  ) {
+    emit(state.copyWith(selectedRoomId: event.roomId));
+  }
+
+  @override
+  Future<void> close() {
+    return super.close();
+  }
+}

lib/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_event.dart

@@ -0,0 +1,25 @@
+abstract class SidebarEvent {}
+
+class LoadBookableSpaces extends SidebarEvent {}
+
+class SelectRoomEvent extends SidebarEvent {
+  final String roomId;
+
+  SelectRoomEvent(this.roomId);
+}
+
+class SearchRoomsEvent extends SidebarEvent {
+  final String query;
+
+  SearchRoomsEvent(this.query);
+}
+
+class LoadMoreSpaces extends SidebarEvent {}
+
+class ResetSearch extends SidebarEvent {}
+
+class ExecuteSearch extends SidebarEvent {
+  final String query;
+
+  ExecuteSearch(this.query);
+}

lib/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_state.dart

@@ -0,0 +1,49 @@
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+
+class SidebarState {
+  final List<BookableSpaceModel> allRooms;
+  final List<BookableSpaceModel> displayedRooms;
+  final bool isLoading;
+  final bool isLoadingMore;
+  final String? errorMessage;
+  final String? selectedRoomId;
+  final bool hasMore;
+  final int totalPages;
+  final int currentPage;
+
+  SidebarState({
+    required this.allRooms,
+    required this.displayedRooms,
+    required this.isLoading,
+    this.isLoadingMore = false,
+    this.errorMessage,
+    this.selectedRoomId,
+    this.hasMore = true,
+    this.totalPages = 0,
+    this.currentPage = 1,
+  });
+
+  SidebarState copyWith({
+    List<BookableSpaceModel>? allRooms,
+    List<BookableSpaceModel>? displayedRooms,
+    bool? isLoading,
+    bool? isLoadingMore,
+    String? errorMessage,
+    String? selectedRoomId,
+    bool? hasMore,
+    int? totalPages,
+    int? currentPage,
+  }) {
+    return SidebarState(
+      allRooms: allRooms ?? this.allRooms,
+      displayedRooms: displayedRooms ?? this.displayedRooms,
+      isLoading: isLoading ?? this.isLoading,
+      isLoadingMore: isLoadingMore ?? this.isLoadingMore,
+      errorMessage: errorMessage ?? this.errorMessage,
+      selectedRoomId: selectedRoomId ?? this.selectedRoomId,
+      hasMore: hasMore ?? this.hasMore,
+      totalPages: totalPages ?? this.totalPages,
+      currentPage: currentPage ?? this.currentPage,
+    );
+  }
+}

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

@@ -0,0 +1,266 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:intl/intl.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_event.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/date_selection/date_selection_state.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/selected_bookable_space_bloc/selected_bookable_space_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/booking_sidebar.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/custom_calendar_page.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/icon_text_button.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/weekly_calendar_page.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class BookingPage extends StatefulWidget {
+  const BookingPage({super.key});
+
+  @override
+  State<BookingPage> createState() => _BookingPageState();
+}
+
+class _BookingPageState extends State<BookingPage> {
+  late final EventController _eventController;
+
+  @override
+  void initState() {
+    super.initState();
+    _eventController = EventController();
+  }
+
+  @override
+  void dispose() {
+    _eventController.dispose();
+    super.dispose();
+  }
+
+  List<CalendarEventData> _generateDummyEventsForWeek(DateTime weekStart) {
+    final List<CalendarEventData> events = [];
+    for (int i = 0; i < 7; i++) {
+      final date = weekStart.add(Duration(days: i));
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 9, minute: 0),
+        endTime: date.copyWith(hour: 10, minute: 30),
+        title: 'Team Meeting',
+        description: 'Daily standup',
+        color: Colors.blue,
+      ));
+      events.add(CalendarEventData(
+        date: date,
+        startTime: date.copyWith(hour: 14, minute: 0),
+        endTime: date.copyWith(hour: 15, minute: 0),
+        title: 'Client Call',
+        description: 'Project discussion',
+        color: Colors.green,
+      ));
+    }
+    return events;
+  }
+
+  void _loadEventsForWeek(DateTime weekStart) {
+    _eventController.removeWhere((_) => true);
+    _eventController.addAll(_generateDummyEventsForWeek(weekStart));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(create: (_) => SelectedBookableSpaceBloc()),
+        BlocProvider(create: (_) => DateSelectionBloc()),
+      ],
+      child: BlocListener<DateSelectionBloc, DateSelectionState>(
+        listenWhen: (previous, current) =>
+            previous.weekStart != current.weekStart,
+        listener: (context, state) {
+          _loadEventsForWeek(state.weekStart);
+        },
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Expanded(
+              child: Container(
+                decoration: BoxDecoration(
+                  color: ColorsManager.whiteColors,
+                  boxShadow: [
+                    BoxShadow(
+                      color: ColorsManager.blackColor.withOpacity(0.1),
+                      offset: const Offset(3, 0),
+                      blurRadius: 6,
+                      spreadRadius: 0,
+                    ),
+                  ],
+                ),
+                child: Column(
+                  children: [
+                    Expanded(
+                      flex: 2,
+                      child: BlocBuilder<SelectedBookableSpaceBloc,
+                          SelectedBookableSpaceState>(
+                        builder: (context, state) {
+                          return BookingSidebar(
+                            onRoomSelected: (selectedRoom) {
+                              context
+                                  .read<SelectedBookableSpaceBloc>()
+                                  .add(SelectBookableSpace(selectedRoom));
+                            },
+                          );
+                        },
+                      ),
+                    ),
+                    Expanded(
+                      child: BlocBuilder<DateSelectionBloc, DateSelectionState>(
+                        builder: (context, dateState) {
+                          return CustomCalendarPage(
+                            selectedDate: dateState.selectedDate,
+                            onDateChanged: (day, month, year) {
+                              final newDate = DateTime(year, month, day);
+                              context
+                                  .read<DateSelectionBloc>()
+                                  .add(SelectDate(newDate));
+                              context
+                                  .read<DateSelectionBloc>()
+                                  .add(SelectDateFromSidebarCalendar(newDate));
+                            },
+                          );
+                        },
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            Expanded(
+              flex: 4,
+              child: Padding(
+                padding: const EdgeInsets.all(20.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Row(
+                          children: [
+                            SvgTextButton(
+                              svgAsset: Assets.homeIcon,
+                              label: 'Manage Bookable Spaces',
+                              onPressed: () {},
+                            ),
+                            const SizedBox(width: 20),
+                            SvgTextButton(
+                              svgAsset: Assets.groupIcon,
+                              label: 'Manage Users',
+                              onPressed: () {},
+                            ),
+                          ],
+                        ),
+                        BlocBuilder<DateSelectionBloc, DateSelectionState>(
+                          builder: (context, state) {
+                            final weekStart = state.weekStart;
+                            final weekEnd =
+                                weekStart.add(const Duration(days: 6));
+                            return Container(
+                              padding: const EdgeInsets.symmetric(
+                                  horizontal: 10, vertical: 5),
+                              decoration: BoxDecoration(
+                                color: ColorsManager.circleRolesBackground,
+                                borderRadius: BorderRadius.circular(10),
+                                boxShadow: const [
+                                  BoxShadow(
+                                    color: ColorsManager.lightGrayColor,
+                                    blurRadius: 4,
+                                    offset: Offset(0, 1),
+                                  ),
+                                ],
+                              ),
+                              child: Row(
+                                children: [
+                                  IconButton(
+                                    iconSize: 15,
+                                    icon: const Icon(Icons.arrow_back_ios,
+                                        color: ColorsManager.lightGrayColor),
+                                    onPressed: () {
+                                      context
+                                          .read<DateSelectionBloc>()
+                                          .add(PreviousWeek());
+                                    },
+                                  ),
+                                  const SizedBox(width: 10),
+                                  Text(
+                                    _getMonthYearText(weekStart, weekEnd),
+                                    style: const TextStyle(
+                                      color: ColorsManager.lightGrayColor,
+                                      fontSize: 14,
+                                      fontWeight: FontWeight.w400,
+                                    ),
+                                  ),
+                                  const SizedBox(width: 10),
+                                  IconButton(
+                                    iconSize: 15,
+                                    icon: const Icon(Icons.arrow_forward_ios,
+                                        color: ColorsManager.lightGrayColor),
+                                    onPressed: () {
+                                      context
+                                          .read<DateSelectionBloc>()
+                                          .add(NextWeek());
+                                    },
+                                  ),
+                                ],
+                              ),
+                            );
+                          },
+                        ),
+                      ],
+                    ),
+                    Expanded(
+                      child: BlocBuilder<SelectedBookableSpaceBloc,
+                          SelectedBookableSpaceState>(
+                        builder: (context, roomState) {
+                          final selectedRoom = roomState.selectedBookableSpace;
+                          return BlocBuilder<DateSelectionBloc,
+                              DateSelectionState>(
+                            builder: (context, dateState) {
+                              return WeeklyCalendarPage(
+                                startTime:
+                                    selectedRoom?.bookableConfig.startTime,
+                                endTime: selectedRoom?.bookableConfig.endTime,
+                                weekStart: dateState.weekStart,
+                                selectedDate: dateState.selectedDate,
+                                eventController: _eventController,
+                                selectedDateFromSideBarCalender: context
+                                    .watch<DateSelectionBloc>()
+                                    .state
+                                    .selectedDateFromSideBarCalender,
+                              );
+                            },
+                          );
+                        },
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  String _getMonthYearText(DateTime start, DateTime end) {
+    final startMonth = DateFormat('MMM').format(start);
+    final endMonth = DateFormat('MMM').format(end);
+    final year = start.year == end.year
+        ? start.year.toString()
+        : '${start.year}-${end.year}';
+
+    if (start.month == end.month) {
+      return '$startMonth $year';
+    } else {
+      return '$startMonth - $endMonth $year';
+    }
+  }
+}

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

@@ -0,0 +1,242 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/data/services/remote_bookable_spaces_service.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_bloc.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_event.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/bloc/sidebar/sidebar_state.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/presentation/view/widgets/room_list_item.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class BookingSidebar extends StatelessWidget {
+  final void Function(BookableSpaceModel) onRoomSelected;
+
+  const BookingSidebar({
+    super.key,
+    required this.onRoomSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => SidebarBloc(RemoteBookableSpacesService(
+        HTTPService(),
+      ))
+        ..add(LoadBookableSpaces()),
+      child: _SidebarContent(onRoomSelected: onRoomSelected),
+    );
+  }
+}
+
+class _SidebarContent extends StatefulWidget {
+  final void Function(BookableSpaceModel) onRoomSelected;
+
+  const _SidebarContent({
+    required this.onRoomSelected,
+  });
+
+  @override
+  State<_SidebarContent> createState() => __SidebarContentState();
+}
+
+class __SidebarContentState extends State<_SidebarContent> {
+  final TextEditingController searchController = TextEditingController();
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_scrollListener);
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  void _scrollListener() {
+    if (_scrollController.position.pixels ==
+        _scrollController.position.maxScrollExtent) {
+      context.read<SidebarBloc>().add(LoadMoreSpaces());
+    }
+  }
+
+  void _handleSearch(String value) {
+    context.read<SidebarBloc>().add(SearchRoomsEvent(value));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocConsumer<SidebarBloc, SidebarState>(
+      listener: (context, state) {
+        if (state.currentPage == 1 && searchController.text.isNotEmpty) {
+          searchController.clear();
+        }
+      },
+      builder: (context, state) {
+        return Column(
+          children: [
+            const _SidebarHeader(title: 'Spaces'),
+            Container(
+              decoration: BoxDecoration(
+                color: ColorsManager.whiteColors,
+                borderRadius: BorderRadius.circular(8.0),
+                boxShadow: [
+                  BoxShadow(
+                    color: ColorsManager.blackColor.withOpacity(0.1),
+                    offset: const Offset(0, -2),
+                    blurRadius: 4,
+                    spreadRadius: 0,
+                  ),
+                  BoxShadow(
+                    color: ColorsManager.blackColor.withOpacity(0.1),
+                    offset: const Offset(0, 2),
+                    blurRadius: 4,
+                    spreadRadius: 0,
+                  ),
+                ],
+              ),
+              child: Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: Container(
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(
+                        horizontal: 16.0, vertical: 8.0),
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: ColorsManager.counterBackgroundColor,
+                        borderRadius: BorderRadius.circular(8.0),
+                      ),
+                      child: Row(
+                        children: [
+                          Expanded(
+                            child: TextField(
+                              style: Theme.of(context)
+                                  .textTheme
+                                  .bodyMedium
+                                  ?.copyWith(
+                                    color: ColorsManager.blackColor,
+                                  ),
+                              controller: searchController,
+                              onChanged: _handleSearch,
+                              decoration: InputDecoration(
+                                hintText: 'Search',
+                                suffixIcon: Padding(
+                                  padding: const EdgeInsets.all(8.0),
+                                  child: SizedBox(
+                                    width: 20,
+                                    height: 20,
+                                    child: SvgPicture.asset(
+                                      Assets.searchIconUser,
+                                      color: ColorsManager.primaryTextColor,
+                                    ),
+                                  ),
+                                ),
+                                contentPadding: const EdgeInsets.symmetric(
+                                    vertical: 8, horizontal: 12),
+                                border: const OutlineInputBorder(
+                                    borderSide: BorderSide.none),
+                              ),
+                            ),
+                          ),
+                          if (searchController.text.isNotEmpty)
+                            IconButton(
+                              icon: const Icon(Icons.close),
+                              onPressed: () {
+                                context.read<SidebarBloc>().add(ResetSearch());
+                              },
+                            ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            if (state.isLoading)
+              const Expanded(
+                child: Center(child: CircularProgressIndicator()),
+              )
+            else if (state.errorMessage != null)
+              Expanded(
+                child: Center(child: Text(state.errorMessage!)),
+              )
+            else
+              Expanded(
+                child: ListView.builder(
+                  controller: _scrollController,
+                  itemCount:
+                      state.displayedRooms.length + (state.hasMore ? 1 : 0),
+                  itemBuilder: (context, index) {
+                    if (index == state.displayedRooms.length) {
+                      return _buildLoadMoreIndicator(state);
+                    }
+
+                    final room = state.displayedRooms[index];
+                    return RoomListItem(
+                      room: room,
+                      isSelected: state.selectedRoomId == room.uuid,
+                      onTap: () {
+                        context
+                            .read<SidebarBloc>()
+                            .add(SelectRoomEvent(room.uuid));
+                        widget.onRoomSelected(room);
+                      },
+                    );
+                  },
+                ),
+              ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildLoadMoreIndicator(SidebarState state) {
+    if (state.isLoadingMore) {
+      return const Padding(
+        padding: EdgeInsets.symmetric(vertical: 16.0),
+        child: Center(child: CircularProgressIndicator()),
+      );
+    } else if (state.hasMore) {
+      return const Padding(
+        padding: EdgeInsets.symmetric(vertical: 16.0),
+        child: Center(child: Text('Scroll to load more')),
+      );
+    } else {
+      return const SizedBox.shrink();
+    }
+  }
+}
+
+class _SidebarHeader extends StatelessWidget {
+  final String title;
+
+  const _SidebarHeader({
+    required this.title,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            title,
+            style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                  fontWeight: FontWeight.w400,
+                  color: ColorsManager.primaryTextColor,
+                  fontSize: 20,
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:calendar_date_picker2/calendar_date_picker2.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CustomCalendarPage extends StatefulWidget {
+  final DateTime selectedDate;
+  final Function(int day, int month, int year) onDateChanged;
+
+  const CustomCalendarPage({
+    super.key,
+    required this.selectedDate,
+    required this.onDateChanged,
+  });
+
+  @override
+  State<CustomCalendarPage> createState() => _CustomCalendarPageState();
+}
+
+class _CustomCalendarPageState extends State<CustomCalendarPage> {
+  late DateTime _selectedDate;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedDate = widget.selectedDate;
+  }
+
+  @override
+  void didUpdateWidget(CustomCalendarPage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.selectedDate != oldWidget.selectedDate) {
+      setState(() {
+        _selectedDate = widget.selectedDate;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final config = CalendarDatePicker2Config(
+      calendarType: CalendarDatePicker2Type.single,
+      selectedDayHighlightColor: const Color(0xFF3B82F6),
+      selectedDayTextStyle: const TextStyle(
+        color: Colors.white,
+        fontWeight: FontWeight.w400,
+        fontSize: 14,
+      ),
+      dayTextStyle: const TextStyle(
+        color: ColorsManager.blackColor,
+        fontWeight: FontWeight.w400,
+        fontSize: 14,
+      ),
+      weekdayLabelTextStyle: const TextStyle(
+        color: ColorsManager.grey50,
+        fontWeight: FontWeight.w400,
+        fontSize: 14,
+      ),
+      controlsTextStyle: const TextStyle(
+        color: Color(0xFF232D3A),
+        fontWeight: FontWeight.w400,
+        fontSize: 18,
+      ),
+      centerAlignModePicker: false,
+      disableMonthPicker: true,
+      firstDayOfWeek: 1,
+      weekdayLabels: const ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+    );
+
+    return CalendarDatePicker2(
+      config: config,
+      value: [_selectedDate],
+      onValueChanged: (dates) {
+        final picked = dates.first;
+        if (picked != null) {
+          setState(() {
+            _selectedDate = picked;
+          });
+          widget.onDateChanged(picked.day, picked.month, picked.year);
+        }
+      },
+    );
+  }
+}

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

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SvgTextButton extends StatelessWidget {
+  final String svgAsset;
+  final String label;
+  final VoidCallback onPressed;
+  final Color backgroundColor;
+  final Color svgColor;
+  final Color labelColor;
+  final double borderRadius;
+  final List<BoxShadow> boxShadow;
+  final double svgSize;
+
+  const SvgTextButton({
+    super.key,
+    required this.svgAsset,
+    required this.label,
+    required this.onPressed,
+    this.backgroundColor = ColorsManager.circleRolesBackground,
+    this.svgColor = const Color(0xFF496EFF),
+    this.labelColor = Colors.black,
+    this.borderRadius = 10.0,
+    this.boxShadow = const [
+      BoxShadow(
+        color: ColorsManager.lightGrayColor,
+        blurRadius: 4,
+        offset: Offset(0, 1),
+      ),
+    ],
+    this.svgSize = 24.0,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(borderRadius),
+        onTap: onPressed,
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+          decoration: BoxDecoration(
+            color: backgroundColor,
+            borderRadius: BorderRadius.circular(borderRadius),
+            boxShadow: boxShadow,
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SvgPicture.asset(
+                svgAsset,
+                width: svgSize,
+                height: svgSize,
+              ),
+              const SizedBox(width: 12),
+              Text(
+                label,
+                style: TextStyle(
+                  color: labelColor,
+                  fontSize: 12,
+                  fontWeight: FontWeight.w400,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/access_management/booking_system/domain/models/bookable_room.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class RoomListItem extends StatelessWidget {
+  final BookableSpaceModel room;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const RoomListItem({
+    required this.room,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return RadioListTile(
+      value: room.uuid,
+      contentPadding: const EdgeInsetsDirectional.symmetric(horizontal: 16),
+      groupValue: isSelected ? room.uuid : null,
+      visualDensity: const VisualDensity(vertical: -4),
+      onChanged: (value) => onTap(),
+      activeColor: ColorsManager.primaryColor,
+      title: Text(
+        room.spaceName,
+        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+            color: ColorsManager.lightGrayColor,
+            fontWeight: FontWeight.w700,
+            fontSize: 12),
+      ),
+      subtitle: Text(
+        room.virtualLocation,
+        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+              fontSize: 10,
+              fontWeight: FontWeight.w400,
+              color: ColorsManager.textGray,
+            ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,292 @@
+import 'package:flutter/material.dart';
+import 'package:calendar_view/calendar_view.dart';
+import 'package:intl/intl.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class WeeklyCalendarPage extends StatelessWidget {
+  final DateTime weekStart;
+  final DateTime selectedDate;
+  final EventController eventController;
+  final String? startTime;
+  final String? endTime;
+  final DateTime? selectedDateFromSideBarCalender;
+
+  const WeeklyCalendarPage({
+    super.key,
+    required this.weekStart,
+    required this.selectedDate,
+    required this.eventController,
+    this.startTime,
+    this.endTime,
+    this.selectedDateFromSideBarCalender,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final startHour = _parseHour(startTime, defaultValue: 0);
+    final endHour = _parseHour(endTime, defaultValue: 24);
+
+    if (endTime == null || endTime!.isEmpty) {
+      return const Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.calendar_today,
+              color: ColorsManager.lightGrayColor,
+              size: 80,
+            ),
+            SizedBox(height: 20),
+            Text(
+              'Please select a bookable space to view the calendar.',
+              style: TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w500,
+                  color: ColorsManager.lightGrayColor),
+            ),
+          ],
+        ),
+      );
+    }
+
+    final weekDays = _getWeekDays(weekStart);
+
+    final selectedDayIndex =
+        weekDays.indexWhere((d) => isSameDay(d, selectedDate));
+    final selectedSidebarIndex = selectedDateFromSideBarCalender == null
+        ? -1
+        : weekDays
+            .indexWhere((d) => isSameDay(d, selectedDateFromSideBarCalender!));
+
+    const double timeLineWidth = 80;
+    const int totalDays = 7;
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final double calendarWidth = constraints.maxWidth;
+        final double dayColumnWidth =
+            (calendarWidth - timeLineWidth) / totalDays - 0.1;
+
+        return Padding(
+          padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 25),
+          child: Stack(
+            children: [
+              WeekView(
+                pageViewPhysics: const NeverScrollableScrollPhysics(),
+                key: ValueKey(weekStart),
+                controller: eventController,
+                initialDay: weekStart,
+                startHour: startHour - 1,
+                endHour: endHour,
+                heightPerMinute: 1.1,
+                showLiveTimeLineInAllDays: false,
+                showVerticalLines: true,
+                emulateVerticalOffsetBy: -80,
+                startDay: WeekDays.monday,
+                liveTimeIndicatorSettings: const LiveTimeIndicatorSettings(
+                  showBullet: false,
+                  height: 0,
+                ),
+                weekDayBuilder: (date) {
+                  final index = weekDays.indexWhere((d) => isSameDay(d, date));
+                  final isSelectedDay = index == selectedDayIndex;
+                  return Column(
+                    children: [
+                      Text(
+                        DateFormat('EEE').format(date).toUpperCase(),
+                        style: TextStyle(
+                          fontWeight: FontWeight.w400,
+                          fontSize: 14,
+                          color: isSelectedDay ? Colors.blue : Colors.black,
+                        ),
+                      ),
+                      Text(
+                        DateFormat('d').format(date),
+                        style: TextStyle(
+                          fontWeight: FontWeight.w700,
+                          fontSize: 20,
+                          color: isSelectedDay
+                              ? ColorsManager.blue1
+                              : ColorsManager.blackColor,
+                        ),
+                      ),
+                    ],
+                  );
+                },
+                timeLineBuilder: (date) {
+                  int hour = date.hour == 0
+                      ? 12
+                      : (date.hour > 12 ? date.hour - 12 : date.hour);
+                  String period = date.hour >= 12 ? 'PM' : 'AM';
+                  return Container(
+                    height: 60,
+                    alignment: Alignment.center,
+                    child: RichText(
+                      text: TextSpan(
+                        children: [
+                          TextSpan(
+                            text: '$hour',
+                            style: const TextStyle(
+                              fontWeight: FontWeight.w700,
+                              fontSize: 24,
+                              color: ColorsManager.blackColor,
+                            ),
+                          ),
+                          WidgetSpan(
+                            child: Padding(
+                              padding: const EdgeInsets.only(left: 2, top: 6),
+                              child: Text(
+                                period,
+                                style: const TextStyle(
+                                  fontWeight: FontWeight.w400,
+                                  fontSize: 12,
+                                  color: ColorsManager.blackColor,
+                                  letterSpacing: 1,
+                                ),
+                              ),
+                            ),
+                            alignment: PlaceholderAlignment.baseline,
+                            baseline: TextBaseline.alphabetic,
+                          ),
+                        ],
+                      ),
+                    ),
+                  );
+                },
+                timeLineWidth: timeLineWidth,
+                weekPageHeaderBuilder: (start, end) => Container(),
+                weekTitleHeight: 60,
+                weekNumberBuilder: (firstDayOfWeek) => Padding(
+                  padding: const EdgeInsets.only(right: 15, bottom: 10),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [
+                      Text(
+                        firstDayOfWeek.timeZoneName.replaceAll(':00', ''),
+                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                              fontSize: 12,
+                              color: ColorsManager.blackColor,
+                              fontWeight: FontWeight.w400,
+                            ),
+                      ),
+                    ],
+                  ),
+                ),
+                eventTileBuilder: (date, events, boundary, start, end) {
+                  return Container(
+                    margin:
+                        const EdgeInsets.symmetric(vertical: 2, horizontal: 2),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: events.map((event) {
+                        final bool isEventEnded = event.endTime != null &&
+                            event.endTime!.isBefore(DateTime.now());
+                        return Expanded(
+                          child: Container(
+                            width: double.infinity,
+                            padding: const EdgeInsets.all(6),
+                            decoration: BoxDecoration(
+                              color: isEventEnded
+                                  ? ColorsManager.lightGrayBorderColor
+                                  : ColorsManager.blue1.withOpacity(0.25),
+                              borderRadius: BorderRadius.circular(6),
+                            ),
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Text(
+                                  DateFormat('h:mm a').format(event.startTime!),
+                                  style: const TextStyle(
+                                    fontWeight: FontWeight.bold,
+                                    fontSize: 12,
+                                    color: Colors.black87,
+                                  ),
+                                ),
+                                const SizedBox(height: 2),
+                                Text(
+                                  event.title,
+                                  style: const TextStyle(
+                                    fontSize: 12,
+                                    color: ColorsManager.blackColor,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        );
+                      }).toList(),
+                    ),
+                  );
+                },
+              ),
+              if (selectedDayIndex >= 0)
+                Positioned(
+                  left: (timeLineWidth + 3) +
+                      (dayColumnWidth - 8) * (selectedDayIndex - 0.01),
+                  top: 0,
+                  bottom: 0,
+                  width: dayColumnWidth,
+                  child: IgnorePointer(
+                    child: Container(
+                      margin: const EdgeInsets.symmetric(
+                          vertical: 0, horizontal: 4),
+                      color: ColorsManager.spaceColor.withOpacity(0.07),
+                    ),
+                  ),
+                ),
+              if (selectedSidebarIndex >= 0 &&
+                  selectedSidebarIndex != selectedDayIndex)
+                Positioned(
+                  left: (timeLineWidth + 3) +
+                      (dayColumnWidth - 8) * (selectedSidebarIndex - 0.01),
+                  top: 0,
+                  bottom: 0,
+                  width: dayColumnWidth,
+                  child: IgnorePointer(
+                    child: Container(
+                      margin: const EdgeInsets.symmetric(
+                          vertical: 0, horizontal: 4),
+                      color: Colors.orange.withOpacity(0.14),
+                    ),
+                  ),
+                ),
+              Positioned(
+                right: 0,
+                top: 50,
+                bottom: 0,
+                child: IgnorePointer(
+                  child: Container(
+                    width: 1,
+                    color: Theme.of(context).scaffoldBackgroundColor,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  List<DateTime> _getWeekDays(DateTime date) {
+    final int weekday = date.weekday;
+    final DateTime monday = date.subtract(Duration(days: weekday - 1));
+    return List.generate(7, (i) => monday.add(Duration(days: i)));
+  }
+}
+
+bool isSameDay(DateTime d1, DateTime d2) {
+  return d1.year == d2.year && d1.month == d2.month && d1.day == d2.day;
+}
+
+int _parseHour(String? time, {required int defaultValue}) {
+  if (time == null || time.isEmpty || !time.contains(':')) {
+    return defaultValue;
+  }
+  try {
+    return int.parse(time.split(':')[0]);
+  } catch (e) {
+    return defaultValue;
+  }
+}

lib/pages/access_management/view/access_management.dart

@@ -2,302 +2,86 @@ 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/bloc/access_state.dart';
-import 'package:syncrow_web/pages/common/buttons/default_button.dart';
-import 'package:syncrow_web/pages/common/buttons/search_reset_buttons.dart';
-import 'package:syncrow_web/pages/common/custom_table.dart';
-import 'package:syncrow_web/pages/common/date_time_widget.dart';
-import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
-import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
+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/pages/visitor_password/view/visitor_password_dialog.dart';
-// import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/utils/constants/app_enum.dart';
-import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
-import 'package:syncrow_web/utils/style.dart';
 import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
 
-class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
+class AccessManagementPage extends StatefulWidget {
   const AccessManagementPage({super.key});
 
   @override
-  Widget build(BuildContext context) {
-    final isLargeScreen = isLargeScreenSize(context);
-    final isSmallScreen = isSmallScreenSize(context);
-    final isHalfMediumScreen = isHafMediumScreenSize(context);
-    final padding =
-        isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15);
+  State<AccessManagementPage> createState() => _AccessManagementPageState();
+}
 
-    return WebScaffold(
+class _AccessManagementPageState extends State<AccessManagementPage>
+    with HelperResponsiveLayout {
+  final PageController _pageController = PageController(initialPage: 0);
+  int _currentPageIndex = 0;
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
+      child: WebScaffold(
         enableMenuSidebar: false,
         appBarTitle: Text(
           'Access Management',
           style: ResponsiveTextTheme.of(context).deviceManagementTitle,
         ),
-        rightBody: const NavigateHomeGridView(),
-        scaffoldBody: BlocProvider(
-            create: (BuildContext context) =>
-                AccessBloc()..add(FetchTableData()),
-            child: BlocConsumer<AccessBloc, AccessState>(
-                listener: (context, state) {},
-                builder: (context, state) {
-                  final accessBloc = BlocProvider.of<AccessBloc>(context);
-                  final filteredData = accessBloc.filteredData;
-                  return state is AccessLoaded
-                      ? const Center(child: CircularProgressIndicator())
-                      : Container(
-                          padding: padding,
-                          height: MediaQuery.of(context).size.height,
-                          width: MediaQuery.of(context).size.width,
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              FilterWidget(
-                                size: MediaQuery.of(context).size,
-                                tabs: accessBloc.tabs,
-                                selectedIndex: accessBloc.selectedIndex,
-                                onTabChanged: (index) {
-                                  accessBloc.add(TabChangedEvent(index));
-                                },
-                              ),
-                              const SizedBox(height: 20),
-                              if (isSmallScreen || isHalfMediumScreen)
-                                _buildSmallSearchFilters(context, accessBloc)
-                              else
-                                _buildNormalSearchWidgets(context, accessBloc),
-                              const SizedBox(height: 20),
-                              _buildVisitorAdminPasswords(context, accessBloc),
-                              const SizedBox(height: 20),
-                              Expanded(
-                                  child: DynamicTable(
-                                tableName: 'AccessManagement',
-                                uuidIndex: 1,
-                                withSelectAll: true,
-                                isEmpty: filteredData.isEmpty,
-                                withCheckBox: false,
-                                size: MediaQuery.of(context).size,
-                                cellDecoration: containerDecoration,
-                                headers: const [
-                                  'Name',
-                                  'Access Type',
-                                  'Access Start',
-                                  'Access End',
-                                  'Accessible Device',
-                                  'Authorizer',
-                                  'Authorization Date & Time',
-                                  'Access Status'
-                                ],
-                                data: filteredData.map((item) {
-                                  return [
-                                    item.passwordName,
-                                    item.passwordType.value,
-                                    accessBloc
-                                        .timestampToDate(item.effectiveTime),
-                                    accessBloc
-                                        .timestampToDate(item.invalidTime),
-                                    item.deviceName.toString(),
-                                    item.authorizerEmail.toString(),
-                                    accessBloc
-                                        .timestampToDate(item.invalidTime),
-                                    item.passwordStatus.value,
-                                  ];
-                                }).toList(),
-                              )),
-                            ],
-                          ),
-                        );
-                })));
-  }
-
-  Wrap _buildVisitorAdminPasswords(
-      BuildContext context, AccessBloc accessBloc) {
-    return Wrap(
-      spacing: 10,
-      runSpacing: 10,
-      children: [
-        Container(
-          width: 205,
-          height: 42,
-          decoration: containerDecoration,
-          child: DefaultButton(
-              onPressed: () {
-                showDialog(
-                  context: context,
-                  barrierDismissible: false,
-                  builder: (BuildContext context) {
-                    return const VisitorPasswordDialog();
-                  },
-                ).then((v) {
-                  if (v != null) {
-                    accessBloc.add(FetchTableData());
-                  }
-                });
-              },
-              borderRadius: 8,
+        centerBody: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            TextButton(
+              onPressed: () => _switchPage(0),
               child: Text(
-                'Create Visitor Password ',
-                style: context.textTheme.titleSmall!
-                    .copyWith(color: Colors.white, fontSize: 12),
-              )),
+                'Access Overview',
+                style: context.textTheme.titleMedium?.copyWith(
+                  color: _currentPageIndex == 0 ? Colors.white : Colors.grey,
+                  fontWeight: _currentPageIndex == 0
+                      ? FontWeight.w700
+                      : FontWeight.w400,
+                ),
+              ),
+            ),
+            TextButton(
+              onPressed: () => _switchPage(1),
+              child: Text(
+                'Booking System',
+                style: context.textTheme.titleMedium?.copyWith(
+                  color: _currentPageIndex == 1 ? Colors.white : Colors.grey,
+                  fontWeight: _currentPageIndex == 1
+                      ? FontWeight.w700
+                      : FontWeight.w400,
+                ),
+              ),
+            ),
+          ],
         ),
-        // Container(
-        //   width: 133,
-        //   height: 42,
-        //   decoration: containerDecoration,
-        //   child: DefaultButton(
-        //       borderRadius: 8,
-        //       backgroundColor: ColorsManager.whiteColors,
-        //       child: Text(
-        //         'Admin Password',
-        //         style: context.textTheme.titleSmall!
-        //             .copyWith(color: Colors.black, fontSize: 12),
-        //       )),
-        // ),
-      ],
+        rightBody: const NavigateHomeGridView(),
+        scaffoldBody: PageView(
+          controller: _pageController,
+          physics: const NeverScrollableScrollPhysics(),
+          children: const [
+            AccessOverviewContent(),
+            BookingPage(),
+          ],
+        ),
+      ),
     );
   }
 
-  Row _buildNormalSearchWidgets(BuildContext context, AccessBloc accessBloc) {
-    // TimeOfDay _selectedTime = TimeOfDay.now();
-
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.end,
-      textBaseline: TextBaseline.ideographic,
-      children: [
-        SizedBox(
-          width: 250,
-          child: CustomWebTextField(
-            controller: accessBloc.passwordName,
-            height: 43,
-            isRequired: false,
-            textFieldName: 'Name',
-            description: '',
-            onSubmitted: (value) {
-              accessBloc.add(FilterDataEvent(
-                  emailAuthorizer:
-                      accessBloc.emailAuthorizer.text.toLowerCase(),
-                  selectedTabIndex:
-                      BlocProvider.of<AccessBloc>(context).selectedIndex,
-                  passwordName: accessBloc.passwordName.text.toLowerCase(),
-                  startTime: accessBloc.effectiveTimeTimeStamp,
-                  endTime: accessBloc.expirationTimeTimeStamp));
-            },
-          ),
-        ),
-        const SizedBox(width: 15),
-        SizedBox(
-          width: 250,
-          child: CustomWebTextField(
-            controller: accessBloc.emailAuthorizer,
-            height: 43,
-            isRequired: false,
-            textFieldName: 'Authorizer',
-            description: '',
-            onSubmitted: (value) {
-              accessBloc.add(FilterDataEvent(
-                  emailAuthorizer:
-                      accessBloc.emailAuthorizer.text.toLowerCase(),
-                  selectedTabIndex:
-                      BlocProvider.of<AccessBloc>(context).selectedIndex,
-                  passwordName: accessBloc.passwordName.text.toLowerCase(),
-                  startTime: accessBloc.effectiveTimeTimeStamp,
-                  endTime: accessBloc.expirationTimeTimeStamp));
-            },
-          ),
-        ),
-        const SizedBox(width: 15),
-        SizedBox(
-          child: DateTimeWebWidget(
-            icon: Assets.calendarIcon,
-            isRequired: false,
-            title: 'Access Time',
-            size: MediaQuery.of(context).size,
-            endTime: () {
-              accessBloc.add(SelectTime(context: context, isStart: false));
-            },
-            startTime: () {
-              accessBloc.add(SelectTime(context: context, isStart: true));
-            },
-            firstString: BlocProvider.of<AccessBloc>(context).startTime,
-            secondString: BlocProvider.of<AccessBloc>(context).endTime,
-          ),
-        ),
-        const SizedBox(width: 15),
-        SearchResetButtons(
-          onSearch: () {
-            accessBloc.add(FilterDataEvent(
-                emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
-                selectedTabIndex:
-                    BlocProvider.of<AccessBloc>(context).selectedIndex,
-                passwordName: accessBloc.passwordName.text.toLowerCase(),
-                startTime: accessBloc.effectiveTimeTimeStamp,
-                endTime: accessBloc.expirationTimeTimeStamp));
-          },
-          onReset: () {
-            accessBloc.add(ResetSearch());
-          },
-        ),
-      ],
-    );
-  }
-
-  Widget _buildSmallSearchFilters(BuildContext context, AccessBloc accessBloc) {
-    return Wrap(
-      spacing: 20,
-      runSpacing: 10,
-      children: [
-        SizedBox(
-          width: 300,
-          child: CustomWebTextField(
-              controller: accessBloc.passwordName,
-              isRequired: true,
-              height: 40,
-              textFieldName: 'Name',
-              description: '',
-              onSubmitted: (value) {
-                accessBloc.add(FilterDataEvent(
-                    emailAuthorizer:
-                        accessBloc.emailAuthorizer.text.toLowerCase(),
-                    selectedTabIndex:
-                        BlocProvider.of<AccessBloc>(context).selectedIndex,
-                    passwordName: accessBloc.passwordName.text.toLowerCase(),
-                    startTime: accessBloc.effectiveTimeTimeStamp,
-                    endTime: accessBloc.expirationTimeTimeStamp));
-              }),
-        ),
-        DateTimeWebWidget(
-          icon: Assets.calendarIcon,
-          isRequired: false,
-          title: 'Access Time',
-          size: MediaQuery.of(context).size,
-          endTime: () {
-            accessBloc.add(SelectTime(context: context, isStart: false));
-          },
-          startTime: () {
-            accessBloc.add(SelectTime(context: context, isStart: true));
-          },
-          firstString: BlocProvider.of<AccessBloc>(context).startTime,
-          secondString: BlocProvider.of<AccessBloc>(context).endTime,
-        ),
-        SearchResetButtons(
-          onSearch: () {
-            accessBloc.add(FilterDataEvent(
-                emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
-                selectedTabIndex:
-                    BlocProvider.of<AccessBloc>(context).selectedIndex,
-                passwordName: accessBloc.passwordName.text.toLowerCase(),
-                startTime: accessBloc.effectiveTimeTimeStamp,
-                endTime: accessBloc.expirationTimeTimeStamp));
-          },
-          onReset: () {
-            accessBloc.add(ResetSearch());
-          },
-        ),
-      ],
-    );
+  void _switchPage(int index) {
+    setState(() => _currentPageIndex = index);
+    _pageController.jumpToPage(index);
   }
 }

lib/pages/access_management/view/access_overview_content.dart

@@ -0,0 +1,289 @@
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/pages/common/buttons/search_reset_buttons.dart';
+import 'package:syncrow_web/pages/common/custom_table.dart';
+import 'package:syncrow_web/pages/common/date_time_widget.dart';
+import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
+import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
+import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart';
+import 'package:syncrow_web/utils/constants/app_enum.dart';
+import 'package:syncrow_web/utils/constants/assets.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/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class AccessOverviewContent extends StatelessWidget
+    with HelperResponsiveLayout {
+  const AccessOverviewContent({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final isLargeScreen = isLargeScreenSize(context);
+    final isSmallScreen = isSmallScreenSize(context);
+    final isHalfMediumScreen = isHafMediumScreenSize(context);
+    final padding =
+        isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15);
+
+    return BlocProvider(
+        create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
+        child: BlocConsumer<AccessBloc, AccessState>(
+            listener: (context, state) {},
+            builder: (context, state) {
+              final accessBloc = BlocProvider.of<AccessBloc>(context);
+              final filteredData = accessBloc.filteredData;
+              return state is AccessLoaded
+                  ? const Center(child: CircularProgressIndicator())
+                  : Container(
+                      padding: padding,
+                      height: MediaQuery.of(context).size.height,
+                      width: MediaQuery.of(context).size.width,
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          FilterWidget(
+                            size: MediaQuery.of(context).size,
+                            tabs: accessBloc.tabs,
+                            selectedIndex: accessBloc.selectedIndex,
+                            onTabChanged: (index) {
+                              accessBloc.add(TabChangedEvent(index));
+                            },
+                          ),
+                          const SizedBox(height: 20),
+                          if (isSmallScreen || isHalfMediumScreen)
+                            _buildSmallSearchFilters(context, accessBloc)
+                          else
+                            _buildNormalSearchWidgets(context, accessBloc),
+                          const SizedBox(height: 20),
+                          _buildVisitorAdminPasswords(context, accessBloc),
+                          const SizedBox(height: 20),
+                          Expanded(
+                              child: DynamicTable(
+                            tableName: 'AccessManagement',
+                            uuidIndex: 1,
+                            withSelectAll: true,
+                            isEmpty: filteredData.isEmpty,
+                            withCheckBox: false,
+                            size: MediaQuery.of(context).size,
+                            cellDecoration: containerDecoration,
+                            headers: const [
+                              'Name',
+                              'Access Type',
+                              'Access Start',
+                              'Access End',
+                              'Accessible Device',
+                              'Authorizer',
+                              'Authorization Date & Time',
+                              'Access Status'
+                            ],
+                            data: filteredData.map((item) {
+                              return [
+                                item.passwordName,
+                                item.passwordType.value,
+                                accessBloc.timestampToDate(item.effectiveTime),
+                                accessBloc.timestampToDate(item.invalidTime),
+                                item.deviceName.toString(),
+                                item.authorizerEmail.toString(),
+                                accessBloc.timestampToDate(item.invalidTime),
+                                item.passwordStatus.value,
+                              ];
+                            }).toList(),
+                          )),
+                        ],
+                      ),
+                    );
+            }));
+  }
+
+  Wrap _buildVisitorAdminPasswords(
+      BuildContext context, AccessBloc accessBloc) {
+    return Wrap(
+      spacing: 10,
+      runSpacing: 10,
+      children: [
+        Container(
+          width: 205,
+          height: 42,
+          decoration: containerDecoration,
+          child: DefaultButton(
+              onPressed: () {
+                showDialog(
+                  context: context,
+                  barrierDismissible: false,
+                  builder: (BuildContext context) {
+                    return const VisitorPasswordDialog();
+                  },
+                ).then((v) {
+                  if (v != null) {
+                    accessBloc.add(FetchTableData());
+                  }
+                });
+              },
+              borderRadius: 8,
+              child: Text(
+                'Create Visitor Password ',
+                style: context.textTheme.titleSmall!
+                    .copyWith(color: Colors.white, fontSize: 12),
+              )),
+        ),
+        // Container(
+        //   width: 133,
+        //   height: 42,
+        //   decoration: containerDecoration,
+        //   child: DefaultButton(
+        //       borderRadius: 8,
+        //       backgroundColor: ColorsManager.whiteColors,
+        //       child: Text(
+        //         'Admin Password',
+        //         style: context.textTheme.titleSmall!
+        //             .copyWith(color: Colors.black, fontSize: 12),
+        //       )),
+        // ),
+      ],
+    );
+  }
+
+  Row _buildNormalSearchWidgets(BuildContext context, AccessBloc accessBloc) {
+    // TimeOfDay _selectedTime = TimeOfDay.now();
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.end,
+      textBaseline: TextBaseline.ideographic,
+      children: [
+        SizedBox(
+          width: 250,
+          child: CustomWebTextField(
+            controller: accessBloc.passwordName,
+            height: 43,
+            isRequired: false,
+            textFieldName: 'Name',
+            description: '',
+            onSubmitted: (value) {
+              accessBloc.add(FilterDataEvent(
+                  emailAuthorizer:
+                      accessBloc.emailAuthorizer.text.toLowerCase(),
+                  selectedTabIndex:
+                      BlocProvider.of<AccessBloc>(context).selectedIndex,
+                  passwordName: accessBloc.passwordName.text.toLowerCase(),
+                  startTime: accessBloc.effectiveTimeTimeStamp,
+                  endTime: accessBloc.expirationTimeTimeStamp));
+            },
+          ),
+        ),
+        const SizedBox(width: 15),
+        SizedBox(
+          width: 250,
+          child: CustomWebTextField(
+            controller: accessBloc.emailAuthorizer,
+            height: 43,
+            isRequired: false,
+            textFieldName: 'Authorizer',
+            description: '',
+            onSubmitted: (value) {
+              accessBloc.add(FilterDataEvent(
+                  emailAuthorizer:
+                      accessBloc.emailAuthorizer.text.toLowerCase(),
+                  selectedTabIndex:
+                      BlocProvider.of<AccessBloc>(context).selectedIndex,
+                  passwordName: accessBloc.passwordName.text.toLowerCase(),
+                  startTime: accessBloc.effectiveTimeTimeStamp,
+                  endTime: accessBloc.expirationTimeTimeStamp));
+            },
+          ),
+        ),
+        const SizedBox(width: 15),
+        SizedBox(
+          child: DateTimeWebWidget(
+            icon: Assets.calendarIcon,
+            isRequired: false,
+            title: 'Access Time',
+            size: MediaQuery.of(context).size,
+            endTime: () {
+              accessBloc.add(SelectTime(context: context, isStart: false));
+            },
+            startTime: () {
+              accessBloc.add(SelectTime(context: context, isStart: true));
+            },
+            firstString: BlocProvider.of<AccessBloc>(context).startTime,
+            secondString: BlocProvider.of<AccessBloc>(context).endTime,
+          ),
+        ),
+        const SizedBox(width: 15),
+        SearchResetButtons(
+          onSearch: () {
+            accessBloc.add(FilterDataEvent(
+                emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
+                selectedTabIndex:
+                    BlocProvider.of<AccessBloc>(context).selectedIndex,
+                passwordName: accessBloc.passwordName.text.toLowerCase(),
+                startTime: accessBloc.effectiveTimeTimeStamp,
+                endTime: accessBloc.expirationTimeTimeStamp));
+          },
+          onReset: () {
+            accessBloc.add(ResetSearch());
+          },
+        ),
+      ],
+    );
+  }
+
+  Widget _buildSmallSearchFilters(BuildContext context, AccessBloc accessBloc) {
+    return Wrap(
+      spacing: 20,
+      runSpacing: 10,
+      children: [
+        SizedBox(
+          width: 300,
+          child: CustomWebTextField(
+              controller: accessBloc.passwordName,
+              isRequired: true,
+              height: 40,
+              textFieldName: 'Name',
+              description: '',
+              onSubmitted: (value) {
+                accessBloc.add(FilterDataEvent(
+                    emailAuthorizer:
+                        accessBloc.emailAuthorizer.text.toLowerCase(),
+                    selectedTabIndex:
+                        BlocProvider.of<AccessBloc>(context).selectedIndex,
+                    passwordName: accessBloc.passwordName.text.toLowerCase(),
+                    startTime: accessBloc.effectiveTimeTimeStamp,
+                    endTime: accessBloc.expirationTimeTimeStamp));
+              }),
+        ),
+        DateTimeWebWidget(
+          icon: Assets.calendarIcon,
+          isRequired: false,
+          title: 'Access Time',
+          size: MediaQuery.of(context).size,
+          endTime: () {
+            accessBloc.add(SelectTime(context: context, isStart: false));
+          },
+          startTime: () {
+            accessBloc.add(SelectTime(context: context, isStart: true));
+          },
+          firstString: BlocProvider.of<AccessBloc>(context).startTime,
+          secondString: BlocProvider.of<AccessBloc>(context).endTime,
+        ),
+        SearchResetButtons(
+          onSearch: () {
+            accessBloc.add(FilterDataEvent(
+                emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
+                selectedTabIndex:
+                    BlocProvider.of<AccessBloc>(context).selectedIndex,
+                passwordName: accessBloc.passwordName.text.toLowerCase(),
+                startTime: accessBloc.effectiveTimeTimeStamp,
+                endTime: accessBloc.expirationTimeTimeStamp));
+          },
+          onReset: () {
+            accessBloc.add(ResetSearch());
+          },
+        ),
+      ],
+    );
+  }
+}

lib/pages/analytics/models/analytics_device.dart

@@ -39,8 +39,12 @@ 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? ?? '0.0') : null,
-      longitude: json['lon'] != null ? double.parse(json['lon'] as String? ?? '0.0') : null,
+      latitude: json['lat'] != null && json['lat'] != ''
+          ? double.tryParse(json['lat']?.toString() ?? '0.0')
+          : null,
+      longitude: json['lon'] != null && json['lon'] != ''
+          ? double.tryParse(json['lon']?.toString() ?? '0.0')
+          : null,
     );
   }
 }

lib/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart

@@ -46,11 +46,11 @@ class AirQualityDistributionBloc
     }
   }
 
-  Future<void> _onClearAirQualityDistribution(
+  void _onClearAirQualityDistribution(
     ClearAirQualityDistribution event,
     Emitter<AirQualityDistributionState> emit,
-  ) async {
-    emit(const AirQualityDistributionState());
+  ) {
+    emit(AirQualityDistributionState(selectedAqiType: state.selectedAqiType));
   }
 
   void _onUpdateAqiTypeEvent(

lib/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart

@@ -75,6 +75,6 @@ class RangeOfAqiBloc extends Bloc<RangeOfAqiEvent, RangeOfAqiState> {
     ClearRangeOfAqiEvent event,
     Emitter<RangeOfAqiState> emit,
   ) {
-    emit(const RangeOfAqiState());
+    emit(RangeOfAqiState(selectedAqiType: state.selectedAqiType));
   }
 }

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

@@ -20,6 +20,7 @@ class AqiDistributionChart extends StatelessWidget {
     return BarChart(
       BarChartData(
         maxY: 100.1,
+        alignment: BarChartAlignment.start,
         gridData: EnergyManagementChartsHelper.gridData(
           horizontalInterval: 20,
         ),

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

@@ -3,7 +3,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/air_quality_distribution/air_quality_distribution_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/aqi_distribution_chart_title.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_chart_empty_state_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class AqiDistributionChartBox extends StatelessWidget {
@@ -32,8 +34,20 @@ class AqiDistributionChartBox extends StatelessWidget {
               const SizedBox(height: 10),
               const Divider(),
               const SizedBox(height: 20),
-              Expanded(
-                child: AqiDistributionChart(chartData: state.chartData),
+              Visibility(
+                visible: state.chartData.isNotEmpty,
+                replacement: AnalyticsChartEmptyStateWidget(
+                  isLoading: state.status == AirQualityDistributionStatus.loading,
+                  isError: state.status == AirQualityDistributionStatus.failure,
+                  isInitial: state.status == AirQualityDistributionStatus.initial,
+                  errorMessage: state.errorMessage,
+                  iconPath: Assets.emptyBarredChart,
+                ),
+                child: Expanded(
+                  child: AqiDistributionChart(
+                    chartData: state.chartData,
+                  ),
+                ),
               ),
             ],
           ),

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

@@ -34,6 +34,7 @@ class AqiDistributionChartTitle extends StatelessWidget {
             alignment: AlignmentDirectional.centerEnd,
             fit: BoxFit.scaleDown,
             child: AqiTypeDropdown(
+              selectedAqiType: context.watch<AirQualityDistributionBloc>().state.selectedAqiType,
               onChanged: (value) {
                 if (value != null) {
                   final bloc = context.read<AirQualityDistributionBloc>();

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

@@ -18,19 +18,20 @@ enum AqiType {
 }
 
 class AqiTypeDropdown extends StatefulWidget {
-  const AqiTypeDropdown({super.key, required this.onChanged});
+  const AqiTypeDropdown({
+    required this.onChanged,
+    this.selectedAqiType,
+    super.key,
+  });
 
   final ValueChanged<AqiType?> onChanged;
+  final AqiType? selectedAqiType;
 
   @override
   State<AqiTypeDropdown> createState() => _AqiTypeDropdownState();
 }
 
 class _AqiTypeDropdownState extends State<AqiTypeDropdown> {
-  AqiType? _selectedItem = AqiType.aqi;
-
-  void _updateSelectedItem(AqiType? item) => setState(() => _selectedItem = item);
-
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -41,8 +42,8 @@ class _AqiTypeDropdownState extends State<AqiTypeDropdown> {
           width: 1,
         ),
       ),
-      child: DropdownButton<AqiType?>(
-        value: _selectedItem,
+      child: DropdownButton<AqiType>(
+        value: widget.selectedAqiType,
         isDense: true,
         borderRadius: BorderRadius.circular(16),
         dropdownColor: ColorsManager.whiteColors,
@@ -59,10 +60,7 @@ class _AqiTypeDropdownState extends State<AqiTypeDropdown> {
         items: AqiType.values
             .map((e) => DropdownMenuItem(value: e, child: Text(e.value)))
             .toList(),
-        onChanged: (value) {
-          _updateSelectedItem(value);
-          widget.onChanged(value);
-        },
+        onChanged: widget.onChanged,
       ),
     );
   }

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

@@ -3,7 +3,9 @@ import 'package:flutter_bloc/flutter_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/range_of_aqi_chart.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_title.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_chart_empty_state_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class RangeOfAqiChartBox extends StatelessWidget {
@@ -32,10 +34,20 @@ class RangeOfAqiChartBox extends StatelessWidget {
               const SizedBox(height: 10),
               const Divider(),
               const SizedBox(height: 20),
-              Expanded(
-                child: RangeOfAqiChart(
-                  chartData: state.filteredRangeOfAqi,
-                  selectedAqiType: state.selectedAqiType,
+              Visibility(
+                visible: state.filteredRangeOfAqi.isNotEmpty,
+                replacement: AnalyticsChartEmptyStateWidget(
+                  isLoading: state.status == RangeOfAqiStatus.loading,
+                  isError: state.status == RangeOfAqiStatus.failure,
+                  isInitial: state.status == RangeOfAqiStatus.initial,
+                  errorMessage: state.errorMessage,
+                  iconPath: Assets.emptyRangeOfAqi,
+                ),
+                child: Expanded(
+                  child: RangeOfAqiChart(
+                    chartData: state.filteredRangeOfAqi,
+                    selectedAqiType: state.selectedAqiType,
+                  ),
                 ),
               ),
             ],

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

@@ -63,15 +63,15 @@ class RangeOfAqiChartTitle extends StatelessWidget {
             fit: BoxFit.scaleDown,
             alignment: AlignmentDirectional.centerEnd,
             child: AqiTypeDropdown(
+              selectedAqiType: context.watch<RangeOfAqiBloc>().state.selectedAqiType,
               onChanged: (value) {
                 final spaceTreeState = context.read<SpaceTreeBloc>().state;
                 final spaceUuid = spaceTreeState.selectedSpaces.firstOrNull;
-
-                if (spaceUuid == null) return;
-
                 if (value != null) {
                   context.read<RangeOfAqiBloc>().add(UpdateAqiTypeEvent(value));
                 }
+
+                if (spaceUuid == null) return;
               },
             ),
           ),

lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart

@@ -38,7 +38,7 @@ class AnalyticsEnergyManagementView extends StatelessWidget {
         return SingleChildScrollView(
           child: Container(
             padding: _padding,
-            height: MediaQuery.sizeOf(context).height * 1,
+            height: MediaQuery.sizeOf(context).height * 1.05,
             child: const Column(
               children: [
                 Expanded(

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

@@ -5,8 +5,10 @@ import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/ener
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_chart_empty_state_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
@@ -54,8 +56,24 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
               const SizedBox(height: 20),
               const Divider(height: 0),
               const SizedBox(height: 20),
-              Expanded(
-                child: EnergyConsumptionPerDeviceChart(chartData: state.chartData),
+              Visibility(
+                visible: state.chartData.isNotEmpty &&
+                    state.chartData
+                        .every((e) => e.energy.every((e) => e.value != 0)),
+                replacement: AnalyticsChartEmptyStateWidget(
+                  isLoading:
+                      state.status == EnergyConsumptionPerDeviceStatus.loading,
+                  isError: state.status == EnergyConsumptionPerDeviceStatus.failure,
+                  isInitial:
+                      state.status == EnergyConsumptionPerDeviceStatus.initial,
+                  errorMessage: state.errorMessage,
+                  iconPath: Assets.emptyEnergyManagementPerDevice,
+                ),
+                child: Expanded(
+                  child: EnergyConsumptionPerDeviceChart(
+                    chartData: state.chartData,
+                  ),
+                ),
               ),
             ],
           ),

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

@@ -3,8 +3,10 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/total_energy_consumption/total_energy_consumption_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_chart_empty_state_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/charts_loading_widget.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class TotalEnergyConsumptionChartBox extends StatelessWidget {
@@ -41,7 +43,18 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
             const SizedBox(height: 20),
             const Divider(),
             const SizedBox(height: 20),
-            TotalEnergyConsumptionChart(chartData: state.chartData),
+            Visibility(
+              visible: state.chartData.isNotEmpty &&
+                  state.chartData.every((e) => e.value != 0),
+              replacement: AnalyticsChartEmptyStateWidget(
+                isLoading: state.status == TotalEnergyConsumptionStatus.loading,
+                isError: state.status == TotalEnergyConsumptionStatus.failure,
+                isInitial: state.status == TotalEnergyConsumptionStatus.initial,
+                errorMessage: state.errorMessage,
+                iconPath: Assets.emptyEnergyManagementChart,
+              ),
+              child: TotalEnergyConsumptionChart(chartData: state.chartData),
+            ),
           ],
         ),
       ),

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

@@ -18,6 +18,7 @@ class OccupancyChart extends StatelessWidget {
     return BarChart(
       BarChartData(
         maxY: 100.001,
+        alignment: BarChartAlignment.start,
         gridData: EnergyManagementChartsHelper.gridData().copyWith(
           checkToShowHorizontalLine: (value) => true,
           horizontalInterval: 20,

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

@@ -6,8 +6,10 @@ import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/ch
 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_chart_empty_state_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class OccupancyChartBox extends StatelessWidget {
@@ -67,7 +69,24 @@ class OccupancyChartBox extends StatelessWidget {
               const SizedBox(height: 20),
               const Divider(),
               const SizedBox(height: 20),
-              Expanded(child: OccupancyChart(chartData: state.chartData)),
+              Visibility(
+                visible: state.chartData.isNotEmpty &&
+                    state.chartData.every(
+                      (e) => e.occupancy.isNotEmpty,
+                    ),
+                replacement: AnalyticsChartEmptyStateWidget(
+                  isLoading: state.status == OccupancyStatus.loading,
+                  isError: state.status == OccupancyStatus.failure,
+                  isInitial: state.status == OccupancyStatus.initial,
+                  errorMessage: state.errorMessage,
+                  iconPath: Assets.emptyBarredChart,
+                ),
+                child: Expanded(
+                  child: OccupancyChart(
+                    chartData: state.chartData,
+                  ),
+                ),
+              ),
             ],
           ),
         );

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

@@ -6,8 +6,10 @@ import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/ch
 import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_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_heat_map.dart';
+import 'package:syncrow_web/pages/analytics/widgets/analytics_chart_empty_state_widget.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
 import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/style.dart';
 
 class OccupancyHeatMapBox extends StatelessWidget {
@@ -68,16 +70,29 @@ class OccupancyHeatMapBox extends StatelessWidget {
               const SizedBox(height: 20),
               const Divider(),
               const SizedBox(height: 20),
-              Expanded(
-                child: OccupancyHeatMap(
-                  selectedDate:
-                      context.watch<AnalyticsDatePickerBloc>().state.yearlyDate,
-                  heatMapData: state.heatMapData.asMap().map(
-                        (_, value) => MapEntry(
-                          value.eventDate,
-                          value.countTotalPresenceDetected,
+              Visibility(
+                visible: state.heatMapData.isNotEmpty &&
+                    state.heatMapData.every(
+                      (e) => e.countTotalPresenceDetected != 0,
+                    ),
+                replacement: AnalyticsChartEmptyStateWidget(
+                  isLoading: state.status == OccupancyHeatMapStatus.loading,
+                  isError: state.status == OccupancyHeatMapStatus.failure,
+                  isInitial: state.status == OccupancyHeatMapStatus.initial,
+                  errorMessage: state.errorMessage,
+                  iconPath: Assets.emptyHeatmap,
+                ),
+                child: Expanded(
+                  child: OccupancyHeatMap(
+                    selectedDate:
+                        context.watch<AnalyticsDatePickerBloc>().state.yearlyDate,
+                    heatMapData: state.heatMapData.asMap().map(
+                          (_, value) => MapEntry(
+                            value.eventDate,
+                            value.countTotalPresenceDetected,
+                          ),
                         ),
-                      ),
+                  ),
                 ),
               ),
             ],

lib/pages/analytics/services/device_location/device_location_details_service_decorator.dart

@@ -17,8 +17,8 @@ class DeviceLocationDetailsServiceDecorator implements DeviceLocationService {
         'reverse',
         queryParameters: {
           'format': 'json',
-          'lat': param.latitude,
-          'lon': param.longitude,
+          'lat': 25.1880567,
+          'lon': 55.266608,
         },
       );
 

lib/pages/analytics/widgets/analytics_chart_empty_state_widget.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/common/widgets/app_loading_indicator.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AnalyticsChartEmptyStateWidget extends StatelessWidget {
+  const AnalyticsChartEmptyStateWidget({
+    required this.iconPath,
+    this.isLoading = false,
+    this.isError = false,
+    this.isInitial = false,
+    this.errorMessage,
+    this.noDataMessage = 'No data to display',
+    this.initialMessage = 'Please select a space to see data',
+    super.key,
+  });
+
+  final bool isLoading;
+  final bool isError;
+  final bool isInitial;
+  final String? errorMessage;
+  final String noDataMessage;
+  final String initialMessage;
+  final String iconPath;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: _buildWidgetBasedOnState(context),
+    );
+  }
+
+  Widget _buildWidgetBasedOnState(BuildContext context) {
+    final widgetsMap = {
+      isLoading: const AppLoadingIndicator(),
+      isInitial: _buildState(context, initialMessage),
+      isError: _buildState(context, errorMessage ?? 'Something went wrong'),
+    };
+
+    return widgetsMap[true] ?? _buildState(context, noDataMessage);
+  }
+
+  Widget _buildState(BuildContext context, String message) {
+    return Center(
+      child: Column(
+        spacing: 16,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          const SizedBox(height: 16),
+          Expanded(child: SvgPicture.asset(iconPath, fit: BoxFit.contain)),
+          SelectableText(
+            message,
+            style: isError
+                ? context.textTheme.bodyMedium?.copyWith(
+                    color: ColorsManager.red,
+                    fontSize: 16,
+                    fontWeight: FontWeight.w700,
+                  )
+                : null,
+            textAlign: TextAlign.center,
+          ),
+          const SizedBox(height: 16),
+        ],
+      ),
+    );
+  }
+}

lib/pages/common/custom_table.dart

@@ -50,6 +50,9 @@ class _DynamicTableState extends State<DynamicTable> {
   bool _selectAll = false;
   final ScrollController _verticalScrollController = ScrollController();
   final ScrollController _horizontalScrollController = ScrollController();
+  static const double _fixedRowHeight = 60;
+  static const double _checkboxColumnWidth = 50;
+  static const double _settingsColumnWidth = 100;
 
   @override
   void initState() {
@@ -67,7 +70,6 @@ class _DynamicTableState extends State<DynamicTable> {
 
   bool _compareListOfLists(
       List<List<dynamic>> oldList, List<List<dynamic>> newList) {
-    // Check if the old and new lists are the same
     if (oldList.length != newList.length) return false;
 
     for (int i = 0; i < oldList.length; i++) {
@@ -104,73 +106,130 @@ class _DynamicTableState extends State<DynamicTable> {
     context.read<DeviceManagementBloc>().add(UpdateSelection(_selectedRows));
   }
 
+  double get _totalTableWidth {
+    final hasSettings = widget.headers.contains('Settings');
+    final base = (widget.withCheckBox ? _checkboxColumnWidth : 0) +
+        (hasSettings ? _settingsColumnWidth : 0);
+    final regularCount = widget.headers.length - (hasSettings ? 1 : 0);
+    final regularWidth = (widget.size.width - base) / regularCount;
+    return base + regularCount * regularWidth;
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
+      width: widget.size.width,
+      height: widget.size.height,
       decoration: widget.cellDecoration,
-      child: Scrollbar(
-        controller: _verticalScrollController,
-        thumbVisibility: true,
-        trackVisibility: true,
+      child: ScrollConfiguration(
+        behavior: const ScrollBehavior().copyWith(scrollbars: false),
         child: Scrollbar(
-          //fixed the horizontal scrollbar issue
           controller: _horizontalScrollController,
           thumbVisibility: true,
           trackVisibility: true,
-          notificationPredicate: (notif) => notif.depth == 1,
+          notificationPredicate: (notif) =>
+              notif.metrics.axis == Axis.horizontal,
           child: SingleChildScrollView(
-            controller: _verticalScrollController,
-            child: SingleChildScrollView(
-              controller: _horizontalScrollController,
-              scrollDirection: Axis.horizontal,
-              child: SizedBox(
-                width: widget.size.width,
-                child: Column(
-                  children: [
-                    Container(
-                      decoration: widget.headerDecoration ??
-                          const BoxDecoration(
-                            color: ColorsManager.boxColor,
+            controller: _horizontalScrollController,
+            scrollDirection: Axis.horizontal,
+            child: SizedBox(
+              width: _totalTableWidth,
+              child: Column(
+                children: [
+                  Container(
+                    height: _fixedRowHeight,
+                    decoration: widget.headerDecoration ??
+                        const BoxDecoration(color: ColorsManager.boxColor),
+                    child: Row(
+                      children: [
+                        if (widget.withCheckBox)
+                          _buildSelectAllCheckbox(_checkboxColumnWidth),
+                        for (var i = 0; i < widget.headers.length; i++)
+                          _buildTableHeaderCell(
+                            widget.headers[i],
+                            widget.headers[i] == 'Settings'
+                                ? _settingsColumnWidth
+                                : (_totalTableWidth -
+                                        (widget.withCheckBox
+                                            ? _checkboxColumnWidth
+                                            : 0) -
+                                        (widget.headers.contains('Settings')
+                                            ? _settingsColumnWidth
+                                            : 0)) /
+                                    (widget.headers.length -
+                                        (widget.headers.contains('Settings')
+                                            ? 1
+                                            : 0)),
                           ),
-                      child: Row(
-                        children: [
-                          if (widget.withCheckBox) _buildSelectAllCheckbox(),
-                          ...List.generate(widget.headers.length, (index) {
-                            return _buildTableHeaderCell(
-                                widget.headers[index], index);
-                          })
-                          //...widget.headers.map((header) => _buildTableHeaderCell(header)),
-                        ],
-                      ),
+                      ],
                     ),
-                    SizedBox(
-                      width: widget.size.width,
-                      child: widget.isEmpty
-                          ? _buildEmptyState()
-                          : Column(
-                              children:
-                                  List.generate(widget.data.length, (rowIndex) {
+                  ),
+
+                  Expanded(
+                    child: widget.isEmpty
+                        ? _buildEmptyState()
+                        : Scrollbar(
+                            controller: _verticalScrollController,
+                            thumbVisibility: true,
+                            trackVisibility: true,
+                            notificationPredicate: (notif) =>
+                                notif.metrics.axis == Axis.vertical,
+                            child: ListView.builder(
+                              controller: _verticalScrollController,
+                              itemCount: widget.data.length,
+                              itemBuilder: (_, rowIndex) {
                                 final row = widget.data[rowIndex];
-                                return Row(
-                                  children: [
-                                    if (widget.withCheckBox)
-                                      _buildRowCheckbox(
-                                          rowIndex, widget.size.height * 0.08),
-                                    ...row.asMap().entries.map((entry) {
-                                      return _buildTableCell(
-                                        entry.value.toString(),
-                                        widget.size.height * 0.08,
-                                        rowIndex: rowIndex,
-                                        columnIndex: entry.key,
-                                      );
-                                    }).toList(),
-                                  ],
+                                return SizedBox(
+                                  height: _fixedRowHeight,
+                                  child: Row(
+                                    children: [
+                                      if (widget.withCheckBox)
+                                        _buildRowCheckbox(
+                                          rowIndex,
+                                          _checkboxColumnWidth,
+                                        ),
+                                      for (var colIndex = 0;
+                                          colIndex < row.length;
+                                          colIndex++)
+                                        widget.headers[colIndex] == 'Settings'
+                                            ? buildSettingsIcon(
+                                                width: _settingsColumnWidth,
+                                                onTap: () => widget
+                                                    .onSettingsPressed
+                                                    ?.call(rowIndex),
+                                              )
+                                            : _buildTableCell(
+                                                row[colIndex].toString(),
+                                                width: widget.headers[
+                                                            colIndex] ==
+                                                        'Settings'
+                                                    ? _settingsColumnWidth
+                                                    : (_totalTableWidth -
+                                                            (widget.withCheckBox
+                                                                ? _checkboxColumnWidth
+                                                                : 0) -
+                                                            (widget.headers
+                                                                    .contains(
+                                                                        'Settings')
+                                                                ? _settingsColumnWidth
+                                                                : 0)) /
+                                                        (widget.headers.length -
+                                                            (widget.headers
+                                                                    .contains(
+                                                                        'Settings')
+                                                                ? 1
+                                                                : 0)),
+                                                rowIndex: rowIndex,
+                                                columnIndex: colIndex,
+                                              ),
+                                    ],
+                                  ),
                                 );
-                              }),
+                              },
                             ),
-                    ),
-                  ],
-                ),
+                          ),
+                  ),
+                ],
               ),
             ),
           ),
@@ -210,9 +269,10 @@ class _DynamicTableState extends State<DynamicTable> {
           ],
         ),
       );
-  Widget _buildSelectAllCheckbox() {
+
+  Widget _buildSelectAllCheckbox(double width) {
     return Container(
-      width: 50,
+      width: width,
       decoration: const BoxDecoration(
         border: Border.symmetric(
           vertical: BorderSide(color: ColorsManager.boxDivider),
@@ -227,11 +287,11 @@ class _DynamicTableState extends State<DynamicTable> {
     );
   }
 
-  Widget _buildRowCheckbox(int index, double size) {
+  Widget _buildRowCheckbox(int index, double width) {
     return Container(
-      width: 50,
+      width: width,
       padding: const EdgeInsets.all(8.0),
-      height: size,
+      height: _fixedRowHeight,
       decoration: const BoxDecoration(
         border: Border(
           bottom: BorderSide(
@@ -253,50 +313,47 @@ class _DynamicTableState extends State<DynamicTable> {
     );
   }
 
-  Widget _buildTableHeaderCell(String title, int index) {
-    return Expanded(
-      child: Container(
-        decoration: const BoxDecoration(
-          border: Border.symmetric(
-            vertical: BorderSide(color: ColorsManager.boxDivider),
-          ),
+  Widget _buildTableHeaderCell(String title, double width) {
+    return Container(
+      width: width,
+      decoration: const BoxDecoration(
+        border: Border.symmetric(
+          vertical: BorderSide(color: ColorsManager.boxDivider),
         ),
-        constraints: const BoxConstraints.expand(height: 40),
-        alignment: Alignment.centerLeft,
-        child: Padding(
-          padding: EdgeInsets.symmetric(
-              horizontal: index == widget.headers.length - 1 ? 12 : 8.0,
-              vertical: 4),
-          child: Text(
-            title,
-            style: context.textTheme.titleSmall!.copyWith(
-              color: ColorsManager.grayColor,
-              fontSize: 12,
-              fontWeight: FontWeight.w400,
-            ),
-            maxLines: 2,
+      ),
+      constraints: BoxConstraints(minHeight: 40, maxHeight: _fixedRowHeight),
+      alignment: Alignment.centerLeft,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
+        child: Text(
+          title,
+          style: context.textTheme.titleSmall!.copyWith(
+            color: ColorsManager.grayColor,
+            fontSize: 12,
+            fontWeight: FontWeight.w400,
           ),
+          maxLines: 2,
+          overflow: TextOverflow.ellipsis,
         ),
       ),
     );
   }
 
-  Widget _buildTableCell(String content, double size,
-      {required int rowIndex, required int columnIndex}) {
+  Widget _buildTableCell(String content,
+      {required double width,
+      required int rowIndex,
+      required int columnIndex}) {
     bool isBatteryLevel = content.endsWith('%');
     double? batteryLevel;
 
     if (isBatteryLevel) {
       batteryLevel = double.tryParse(content.replaceAll('%', '').trim());
     }
+
     bool isSettingsColumn = widget.headers[columnIndex] == 'Settings';
     if (isSettingsColumn) {
       return buildSettingsIcon(
-        width: 120,
-        height: 60,
-        iconSize: 40,
-        onTap: () => widget.onSettingsPressed?.call(rowIndex),
-      );
+          width: width, onTap: () => widget.onSettingsPressed?.call(rowIndex));
     }
 
     Color? statusColor;
@@ -320,92 +377,82 @@ class _DynamicTableState extends State<DynamicTable> {
         statusColor = Colors.black;
     }
 
-    return Expanded(
-      child: Container(
-        height: size,
-        padding: const EdgeInsets.all(5.0),
-        decoration: const BoxDecoration(
-          border: Border(
-            bottom: BorderSide(
-              color: ColorsManager.boxDivider,
-              width: 1.0,
-            ),
+    return Container(
+      width: width,
+      height: _fixedRowHeight,
+      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
+      decoration: const BoxDecoration(
+        border: Border(
+          bottom: BorderSide(
+            color: ColorsManager.boxDivider,
+            width: 1.0,
           ),
-          color: Colors.white,
         ),
-        alignment: Alignment.centerLeft,
-        child: Text(
-          content,
-          style: TextStyle(
-              color: (batteryLevel != null && batteryLevel < 20)
-                  ? ColorsManager.red
-                  : (batteryLevel != null && batteryLevel > 20)
-                      ? ColorsManager.green
-                      : statusColor,
-              fontSize: 13,
-              fontWeight: FontWeight.w400),
-          maxLines: 2,
+        color: Colors.white,
+      ),
+      alignment: Alignment.centerLeft,
+      child: Text(
+        content,
+        style: TextStyle(
+          color: (batteryLevel != null && batteryLevel < 20)
+              ? ColorsManager.red
+              : (batteryLevel != null && batteryLevel > 20)
+                  ? ColorsManager.green
+                  : statusColor,
+          fontSize: 13,
+          fontWeight: FontWeight.w400,
         ),
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
       ),
     );
   }
 
-  Widget buildSettingsIcon(
-      {double width = 120,
-      double height = 60,
-      double iconSize = 40,
-      VoidCallback? onTap}) {
-    return Column(
-      children: [
-        Container(
-          padding: const EdgeInsets.only(top: 10, bottom: 15, left: 10),
-          margin: const EdgeInsets.only(right: 15),
-          decoration: const BoxDecoration(
-            color: ColorsManager.whiteColors,
-            border: Border(
-              bottom: BorderSide(
-                color: ColorsManager.boxDivider,
-                width: 1.0,
-              ),
-            ),
+  Widget buildSettingsIcon({required double width, VoidCallback? onTap}) {
+    return Container(
+      width: width,
+      height: _fixedRowHeight,
+      padding: const EdgeInsets.only(left: 15, top: 10, bottom: 10),
+      decoration: const BoxDecoration(
+        color: ColorsManager.whiteColors,
+        border: Border(
+          bottom: BorderSide(
+            color: ColorsManager.boxDivider,
+            width: 1.0,
           ),
-          width: width,
-          child: Padding(
-            padding: const EdgeInsets.only(
-              right: 16.0,
-              left: 17.0,
-            ),
-            child: Container(
-              width: 50,
-              decoration: BoxDecoration(
-                color: const Color(0xFFF7F8FA),
-                borderRadius: BorderRadius.circular(height / 2),
-                boxShadow: [
-                  BoxShadow(
-                    color: Colors.black.withOpacity(0.17),
-                    blurRadius: 14,
-                    offset: const Offset(0, 4),
-                  ),
-                ],
+        ),
+      ),
+      child: Align(
+        alignment: Alignment.centerLeft,
+        child: Container(
+          width: 50,
+          decoration: BoxDecoration(
+            color: const Color(0xFFF7F8FA),
+            borderRadius: BorderRadius.circular(20),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.17),
+                blurRadius: 14,
+                offset: const Offset(0, 4),
               ),
-              child: InkWell(
-                onTap: onTap,
-                child: Padding(
-                  padding: const EdgeInsets.all(8.0),
-                  child: Center(
-                    child: SvgPicture.asset(
-                      Assets.settings,
-                      width: 40,
-                      height: 22,
-                      color: ColorsManager.primaryColor,
-                    ),
-                  ),
+            ],
+          ),
+          child: InkWell(
+            onTap: onTap,
+            child: Padding(
+              padding: EdgeInsets.all(8.0),
+              child: Center(
+                child: SvgPicture.asset(
+                  Assets.settings,
+                  width: 40,
+                  height: 20,
+                  color: ColorsManager.primaryColor,
                 ),
               ),
             ),
           ),
         ),
-      ],
+      ),
     );
   }
 }

lib/pages/device_managment/ac/view/ac_device_batch_control.dart

@@ -15,7 +15,8 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
-class AcDeviceBatchControlView extends StatelessWidget with HelperResponsiveLayout {
+class AcDeviceBatchControlView extends StatelessWidget
+    with HelperResponsiveLayout {
   const AcDeviceBatchControlView({super.key, required this.devicesIds});
 
   final List<String> devicesIds;
@@ -51,7 +52,7 @@ class AcDeviceBatchControlView extends StatelessWidget with HelperResponsiveLayo
                   deviceId: devicesIds.first,
                   code: 'switch',
                   value: state.status.acSwitch,
-                  label: 'ThermoState',
+                  label: 'Thermostat',
                   icon: Assets.ac,
                   onChange: (value) {
                     context.read<AcBloc>().add(AcBatchControlEvent(
@@ -100,8 +101,8 @@ class AcDeviceBatchControlView extends StatelessWidget with HelperResponsiveLayo
                       ),
                       Text(
                         'h',
-                        style:
-                            context.textTheme.bodySmall!.copyWith(color: ColorsManager.blackColor),
+                        style: context.textTheme.bodySmall!
+                            .copyWith(color: ColorsManager.blackColor),
                       ),
                       Text(
                         '30',
@@ -148,7 +149,8 @@ class AcDeviceBatchControlView extends StatelessWidget with HelperResponsiveLayo
                   callFactoryReset: () {
                     context.read<AcBloc>().add(AcFactoryResetEvent(
                           deviceId: state.status.uuid,
-                          factoryResetModel: FactoryResetModel(devicesUuid: devicesIds),
+                          factoryResetModel:
+                              FactoryResetModel(devicesUuid: devicesIds),
                         ));
                   },
                 ),

lib/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart

@@ -16,11 +16,12 @@ class DeviceManagementBloc
   int _onlineCount = 0;
   int _offlineCount = 0;
   int _lowBatteryCount = 0;
-  List<AllDevicesModel> _selectedDevices = [];
+  final List<AllDevicesModel> _selectedDevices = [];
   List<AllDevicesModel> _filteredDevices = [];
   String currentProductName = '';
   String? currentCommunity;
   String? currentUnitName;
+  String subSpaceName = '';
 
   DeviceManagementBloc() : super(DeviceManagementInitial()) {
     on<FetchDevices>(_onFetchDevices);
@@ -31,15 +32,17 @@ class DeviceManagementBloc
     on<ResetFilters>(_onResetFilters);
     on<ResetSelectedDevices>(_onResetSelectedDevices);
     on<UpdateSelection>(_onUpdateSelection);
+    on<UpdateDeviceName>(_onUpdateDeviceName);
+    on<UpdateSubSpaceName>(_onUpdateSubSpaceName);
   }
 
   Future<void> _onFetchDevices(
       FetchDevices event, Emitter<DeviceManagementState> emit) async {
     emit(DeviceManagementLoading());
     try {
-      List<AllDevicesModel> devices = [];
+      var devices = <AllDevicesModel>[];
       _devices.clear();
-      var spaceBloc = event.context.read<SpaceTreeBloc>();
+      final spaceBloc = event.context.read<SpaceTreeBloc>();
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
 
       if (spaceBloc.state.selectedCommunities.isEmpty) {
@@ -73,7 +76,7 @@ class DeviceManagementBloc
     }
   }
 
-  void _onFilterDevices(
+  Future<void> _onFilterDevices(
       FilterDevices event, Emitter<DeviceManagementState> emit) async {
     if (_devices.isNotEmpty) {
       _filteredDevices = List.from(_devices.where((device) {
@@ -155,8 +158,7 @@ class DeviceManagementBloc
     add(FilterDevices(_getFilterFromIndex(_selectedIndex)));
   }
 
-  void _onSelectDevice(
-      SelectDevice event, Emitter<DeviceManagementState> emit) {
+  void _onSelectDevice(SelectDevice event, Emitter<DeviceManagementState> emit) {
     final selectedUuid = event.selectedDevice.uuid;
 
     if (_selectedDevices.any((device) => device.uuid == selectedUuid)) {
@@ -165,9 +167,9 @@ class DeviceManagementBloc
       _selectedDevices.add(event.selectedDevice);
     }
 
-    List<AllDevicesModel> clonedSelectedDevices = List.from(_selectedDevices);
+    final clonedSelectedDevices = List<AllDevicesModel>.from(_selectedDevices);
 
-    bool isControlButtonEnabled =
+    final isControlButtonEnabled =
         _checkIfControlButtonEnabled(clonedSelectedDevices);
 
     if (state is DeviceManagementLoaded) {
@@ -197,8 +199,8 @@ class DeviceManagementBloc
 
   void _onUpdateSelection(
       UpdateSelection event, Emitter<DeviceManagementState> emit) {
-    List<AllDevicesModel> selectedDevices = [];
-    List<AllDevicesModel> devicesToSelectFrom = [];
+    final selectedDevices = <AllDevicesModel>[];
+    var devicesToSelectFrom = <AllDevicesModel>[];
 
     if (state is DeviceManagementLoaded) {
       devicesToSelectFrom = (state as DeviceManagementLoaded).devices;
@@ -206,7 +208,7 @@ class DeviceManagementBloc
       devicesToSelectFrom = (state as DeviceManagementFiltered).filteredDevices;
     }
 
-    for (int i = 0; i < event.selectedRows.length; i++) {
+    for (var i = 0; i < event.selectedRows.length; i++) {
       if (event.selectedRows[i]) {
         selectedDevices.add(devicesToSelectFrom[i]);
       }
@@ -252,8 +254,7 @@ class DeviceManagementBloc
     _onlineCount = _devices.where((device) => device.online == true).length;
     _offlineCount = _devices.where((device) => device.online == false).length;
     _lowBatteryCount = _devices
-        .where((device) =>
-            device.batteryLevel != null && device.batteryLevel! < 20)
+        .where((device) => device.batteryLevel != null && device.batteryLevel! < 20)
         .length;
   }
 
@@ -270,8 +271,7 @@ class DeviceManagementBloc
     }
   }
 
-  void _onSearchDevices(
-      SearchDevices event, Emitter<DeviceManagementState> emit) {
+  void _onSearchDevices(SearchDevices event, Emitter<DeviceManagementState> emit) {
     if ((event.community == null || event.community!.isEmpty) &&
         (event.unitName == null || event.unitName!.isEmpty) &&
         (event.deviceNameOrProductName == null ||
@@ -300,7 +300,7 @@ class DeviceManagementBloc
     currentCommunity = event.community;
     currentUnitName = event.unitName;
 
-    List<AllDevicesModel> devicesToSearch = _devices;
+    final devicesToSearch = _devices;
 
     if (devicesToSearch.isNotEmpty) {
       final searchText = event.deviceNameOrProductName?.toLowerCase() ?? '';
@@ -343,5 +343,134 @@ class DeviceManagementBloc
     }
   }
 
+  void _onUpdateDeviceName(
+      UpdateDeviceName event, Emitter<DeviceManagementState> emit) {
+    final devices = _devices.map((device) {
+      if (device.uuid == event.deviceId) {
+        final modifiedDevice = device.copyWith(name: event.newName);
+        _selectedDevices.removeWhere((device) => device.uuid == event.deviceId);
+        _selectedDevices.add(modifiedDevice);
+        return modifiedDevice;
+      }
+      return device;
+    }).toList();
+
+    final filteredDevices = _filteredDevices.map((device) {
+      if (device.uuid == event.deviceId) {
+        final modifiedDevice = device.copyWith(name: event.newName);
+        _selectedDevices.removeWhere((device) => device.uuid == event.deviceId);
+        _selectedDevices.add(modifiedDevice);
+        return modifiedDevice;
+      }
+      return device;
+    }).toList();
+
+    _devices = devices;
+    _filteredDevices = filteredDevices;
+
+    if (state is DeviceManagementLoaded) {
+      final loaded = state as DeviceManagementLoaded;
+      final selectedDevices01 = _selectedDevices.map((device) {
+        if (device.uuid == event.deviceId) {
+          final modifiedDevice = device.copyWith(name: event.newName);
+          return modifiedDevice;
+        }
+        return device;
+      }).toList();
+      emit(DeviceManagementLoaded(
+        devices: devices,
+        selectedIndex: loaded.selectedIndex,
+        onlineCount: loaded.onlineCount,
+        offlineCount: loaded.offlineCount,
+        lowBatteryCount: loaded.lowBatteryCount,
+        selectedDevice: selectedDevices01,
+        isControlButtonEnabled: loaded.isControlButtonEnabled,
+      ));
+    } else if (state is DeviceManagementFiltered) {
+      final filtered = state as DeviceManagementFiltered;
+      final selectedDevices01 = filtered.selectedDevice?.map((device) {
+        if (device.uuid == event.deviceId) {
+          final modifiedDevice = device.copyWith(name: event.newName);
+          return modifiedDevice;
+        }
+        return device;
+      }).toList();
+      emit(DeviceManagementFiltered(
+        filteredDevices: filteredDevices,
+        selectedIndex: filtered.selectedIndex,
+        onlineCount: filtered.onlineCount,
+        offlineCount: filtered.offlineCount,
+        lowBatteryCount: filtered.lowBatteryCount,
+        selectedDevice: selectedDevices01,
+        isControlButtonEnabled: filtered.isControlButtonEnabled,
+      ));
+    }
+  }
+
+  void _onUpdateSubSpaceName(
+      UpdateSubSpaceName event, Emitter<DeviceManagementState> emit) {
+    final devices = _devices.map((device) {
+      if (device.uuid == event.deviceId) {
+        return device.copyWith(
+            subspace:
+                device.subspace?.copyWith(subspaceName: event.newSubSpaceName));
+      }
+      return device;
+    }).toList();
+
+    final filteredDevices = _filteredDevices.map((device) {
+      if (device.uuid == event.deviceId) {
+        return device.copyWith(
+            subspace:
+                device.subspace?.copyWith(subspaceName: event.newSubSpaceName));
+      }
+      return device;
+    }).toList();
+
+    _devices = devices;
+    _filteredDevices = filteredDevices;
+
+    if (state is DeviceManagementLoaded) {
+      final loaded = state as DeviceManagementLoaded;
+      final selectedDevices = loaded.selectedDevice?.map((device) {
+        if (device.uuid == event.deviceId) {
+          return device.copyWith(
+              subspace:
+                  device.subspace?.copyWith(subspaceName: event.newSubSpaceName));
+        }
+        return device;
+      }).toList();
+      emit(DeviceManagementLoaded(
+        devices: _devices,
+        selectedIndex: loaded.selectedIndex,
+        onlineCount: loaded.onlineCount,
+        offlineCount: loaded.offlineCount,
+        lowBatteryCount: loaded.lowBatteryCount,
+        selectedDevice: selectedDevices,
+        isControlButtonEnabled: loaded.isControlButtonEnabled,
+      ));
+    } else if (state is DeviceManagementFiltered) {
+      // final filtered = state as DeviceManagementFiltered;
+      // emit(DeviceManagementFiltered(
+      //   filteredDevices: _filteredDevices,
+      //   selectedIndex: filtered.selectedIndex,
+      //   onlineCount: filtered.onlineCount,
+      //   offlineCount: filtered.offlineCount,
+      //   lowBatteryCount: filtered.lowBatteryCount,
+      //   selectedDevice: filtered.selectedDevice,
+      //   isControlButtonEnabled: filtered.isControlButtonEnabled,
+      // ));
+    }
+  }
+
+  void changeSubspaceName(
+      String deviceId, String newSubSpaceName, String subspaceId) {
+    add(UpdateSubSpaceName(
+      deviceId: deviceId,
+      newSubSpaceName: newSubSpaceName,
+      subspaceId: subspaceId,
+    ));
+  }
+
   List<AllDevicesModel> get selectedDevices => _selectedDevices;
 }

lib/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_event.dart

@@ -70,3 +70,21 @@ class UpdateSelection extends DeviceManagementEvent {
 
   const UpdateSelection(this.selectedRows);
 }
+
+class UpdateDeviceName extends DeviceManagementEvent {
+  final String deviceId;
+  final String newName;
+
+  const UpdateDeviceName({required this.deviceId, required this.newName});
+}
+
+class UpdateSubSpaceName extends DeviceManagementEvent {
+  final String deviceId;
+  final String newSubSpaceName;
+  final String subspaceId;
+
+  const UpdateSubSpaceName(
+      {required this.deviceId,
+      required this.newSubSpaceName,
+      required this.subspaceId});
+}

lib/pages/device_managment/all_devices/models/device_status.dart

@@ -60,4 +60,13 @@ class Status {
   factory Status.fromJson(String source) => Status.fromMap(json.decode(source));
 
   String toJson() => json.encode(toMap());
+  Status copyWith({
+    String? code,
+    dynamic value,
+  }) {
+    return Status(
+      code: code ?? this.code,
+      value: value ?? this.value,
+    );
+  }
 }

lib/pages/device_managment/all_devices/models/device_subspace.model.dart

@@ -44,4 +44,20 @@ class DeviceSubspace {
   static List<Map<String, dynamic>> listToJson(List<DeviceSubspace> subspaces) {
     return subspaces.map((subspace) => subspace.toJson()).toList();
   }
+
+  DeviceSubspace copyWith({
+    String? uuid,
+    DateTime? createdAt,
+    DateTime? updatedAt,
+    String? subspaceName,
+    bool? disabled,
+  }) {
+    return DeviceSubspace(
+      uuid: uuid ?? this.uuid,
+      createdAt: createdAt ?? this.createdAt,
+      updatedAt: updatedAt ?? this.updatedAt,
+      subspaceName: subspaceName ?? this.subspaceName,
+      disabled: disabled ?? this.disabled,
+    );
+  }
 }

lib/pages/device_managment/all_devices/models/devices_model.dart

@@ -588,4 +588,72 @@ SOS
     "NCPS": DeviceType.NCPS,
     "PC": DeviceType.PC,
   };
+
+  AllDevicesModel copyWith({
+    DevicesModelRoom? room,
+    DeviceSubspace? subspace,
+    DevicesModelUnit? unit,
+    DeviceCommunityModel? community,
+    String? productUuid,
+    String? productType,
+    String? permissionType,
+    int? activeTime,
+    String? category,
+    String? categoryName,
+    int? createTime,
+    String? gatewayId,
+    String? icon,
+    String? ip,
+    String? lat,
+    String? localKey,
+    String? lon,
+    String? model,
+    String? name,
+    String? nodeId,
+    bool? online,
+    String? ownerId,
+    bool? sub,
+    String? timeZone,
+    int? updateTime,
+    String? uuid,
+    int? batteryLevel,
+    String? productName,
+    List<DeviceSpaceModel>? spaces,
+    List<DeviceTagModel>? deviceTags,
+    DeviceSubSpace? deviceSubSpace,
+  }) {
+    return AllDevicesModel(
+      room: room ?? this.room,
+      subspace: subspace ?? this.subspace,
+      unit: unit ?? this.unit,
+      community: community ?? this.community,
+      productUuid: productUuid ?? this.productUuid,
+      productType: productType ?? this.productType,
+      permissionType: permissionType ?? this.permissionType,
+      activeTime: activeTime ?? this.activeTime,
+      category: category ?? this.category,
+      categoryName: categoryName ?? this.categoryName,
+      createTime: createTime ?? this.createTime,
+      gatewayId: gatewayId ?? this.gatewayId,
+      icon: icon ?? this.icon,
+      ip: ip ?? this.ip,
+      lat: lat ?? this.lat,
+      localKey: localKey ?? this.localKey,
+      lon: lon ?? this.lon,
+      model: model ?? this.model,
+      name: name ?? this.name,
+      nodeId: nodeId ?? this.nodeId,
+      online: online ?? this.online,
+      ownerId: ownerId ?? this.ownerId,
+      sub: sub ?? this.sub,
+      timeZone: timeZone ?? this.timeZone,
+      updateTime: updateTime ?? this.updateTime,
+      uuid: uuid ?? this.uuid,
+      batteryLevel: batteryLevel ?? this.batteryLevel,
+      productName: productName ?? this.productName,
+      spaces: spaces ?? this.spaces,
+      deviceTags: deviceTags ?? this.deviceTags,
+      deviceSubSpace: deviceSubSpace ?? this.deviceSubSpace,
+    );
+  }
 }

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

@@ -23,6 +23,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<DeviceManagementBloc, DeviceManagementState>(
+      buildWhen: (previous, current) => previous != current,
       builder: (context, state) {
         List<AllDevicesModel> devicesToShow = [];
         int selectedIndex = 0;
@@ -31,7 +32,6 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
         int lowBatteryCount = 0;
         bool isControlButtonEnabled = false;
         List<AllDevicesModel> selectedDevices = [];
-
         if (state is DeviceManagementLoaded) {
           devicesToShow = state.devices;
           selectedIndex = state.selectedIndex;
@@ -68,6 +68,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
           children: [
             Expanded(child: SpaceTreeView(
               onSelect: () {
+                context.read<DeviceManagementBloc>().add(ResetFilters());
                 context.read<DeviceManagementBloc>().add(FetchDevices(context));
               },
             )),
@@ -111,6 +112,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                     onPressed: isControlButtonEnabled
                                         ? () {
                                             if (isAnyDeviceOffline) {
+                                              ScaffoldMessenger.of(context)
+                                                  .clearSnackBars();
                                               ScaffoldMessenger.of(context)
                                                   .showSnackBar(
                                                 const SnackBar(
@@ -190,7 +193,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                 'Product Name',
                                 'Device ID',
                                 'Space Name',
-                                'location',
+                                'Location',
                                 'Battery Level',
                                 'Installation Date and Time',
                                 'Status',
@@ -242,7 +245,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                   .map((device) => device.uuid!)
                                   .toList(),
                               isEmpty: devicesToShow.isEmpty,
-                              onSettingsPressed: (rowIndex) {
+                              onSettingsPressed: (rowIndex) async {
                                 final device = devicesToShow[rowIndex];
                                 showDeviceSettingsSidebar(context, device);
                               },
@@ -264,7 +267,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
       barrierDismissible: true,
       barrierLabel: "Device Settings",
       transitionDuration: const Duration(milliseconds: 300),
-      pageBuilder: (context, anim1, anim2) {
+      pageBuilder: (_, anim1, anim2) {
         return Align(
           alignment: Alignment.centerRight,
           child: Material(
@@ -274,6 +277,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
               child: DeviceSettingsPanel(
                 device: device,
                 onClose: () => Navigator.of(context).pop(),
+                deviceManagementBloc: context.read<DeviceManagementBloc>(),
               ),
             ),
           ),

lib/pages/device_managment/curtain_module/view/curtain_module_items.dart

@@ -62,9 +62,10 @@ class CurtainModuleItems extends StatelessWidget with HelperResponsiveLayout {
                                     BlocProvider.of<CurtainModuleBloc>(context),
                                 child: BuildScheduleView(
                                   deviceUuid: deviceId,
-                                  category: 'CUR_2',
+                                  category: 'Timer',
                                   code: 'control',
-                                  
+                                  countdownCode: 'Timer',
+                                  deviceType: 'CUR_2',
                                 ),
                               ));
                     },

lib/pages/device_managment/curtain_module/widgets/accurate_calibrating_dialog.dart

@@ -4,6 +4,7 @@ import 'package:syncrow_web/pages/device_managment/curtain_module/bloc/curtain_m
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 
 class AccurteCalibratingDialog extends StatelessWidget {
   final String deviceId;
@@ -17,14 +18,15 @@ class AccurteCalibratingDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
+      backgroundColor: ColorsManager.whiteColors,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Calibrating',
         body: const NormalTextBodyForDialog(
           title: '',
           step1:
-              '1. Click Close Button to make the Curtain run to Full Close and Position.',
-          step2: '2. click Next to complete the Calibration.',
+              'Click Close Button to make the Curtain run to Full Close and Position.',
+          step2: 'click Next to complete the Calibration.',
         ),
         leftOnTap: () => Navigator.of(parentContext).pop(),
         rightOnTap: () {

lib/pages/device_managment/curtain_module/widgets/accurate_calibration_dialog.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/accurate_calibrating_dialog.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 
 class AccurateCalibrationDialog extends StatelessWidget {
   final String deviceId;
@@ -15,13 +16,14 @@ class AccurateCalibrationDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
+      backgroundColor: ColorsManager.whiteColors,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Accurate Calibration',
         body: const NormalTextBodyForDialog(
           title: 'Prepare Calibration:',
-          step1: '1. Run The Curtain to the Fully Open Position,and pause.',
-          step2: '2. click Next to Start accurate calibration.',
+          step1: 'Run The Curtain to the Fully Open Position,and pause.',
+          step2: 'click Next to Start accurate calibration.',
         ),
         leftOnTap: () => Navigator.of(parentContext).pop(),
         rightOnTap: () {

lib/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart

@@ -17,78 +17,102 @@ class AccurateDialogWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: 300,
-      width: 400,
+      height: 250,
+      width: 500,
       child: Column(
         children: [
-          Padding(
-            padding: const EdgeInsets.all(10),
-            child: Text(
-              title,
-              style: const TextStyle(
-                fontSize: 24,
-                fontWeight: FontWeight.bold,
-                color: ColorsManager.blueColor,
-              ),
+          Expanded(
+            flex: 3,
+            child: Column(
+              children: [
+                Padding(
+                  padding: const EdgeInsets.all(10),
+                  child: Text(
+                    title,
+                    style: TextStyle(
+                      fontSize: 24,
+                      fontWeight: FontWeight.bold,
+                      color: ColorsManager.dialogBlueTitle,
+                    ),
+                  ),
+                ),
+                const Divider(
+                  indent: 60,
+                  endIndent: 60,
+                ),
+              ],
             ),
           ),
-          const SizedBox(height: 5),
-          const Divider(
-            indent: 10,
-            endIndent: 10,
-          ),
-          Padding(
-            padding: const EdgeInsets.all(10),
+          Expanded(
+            flex: 5,
             child: body,
           ),
-          const SizedBox(height: 20),
-          const Spacer(),
-          const Divider(),
-          Row(
-            children: [
-              Expanded(
-                child: InkWell(
-                  onTap: leftOnTap,
-                  child: Container(
-                    height: 60,
-                    alignment: Alignment.center,
-                    decoration: const BoxDecoration(
-                      border: Border(
-                        right: BorderSide(
-                          color: ColorsManager.grayBorder,
+          Expanded(
+            flex: 2,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                const Expanded(child: Divider()),
+                Row(
+                  children: [
+                    Expanded(
+                      child: InkWell(
+                        borderRadius: const BorderRadius.only(
+                          bottomLeft: Radius.circular(26),
+                        ),
+                        onTap: leftOnTap,
+                        child: Container(
+                          height: 40,
+                          alignment: Alignment.center,
+                          decoration: const BoxDecoration(
+                            border: Border(
+                              right: BorderSide(
+                                color: ColorsManager.grayBorder,
+                              ),
+                            ),
+                            borderRadius: BorderRadius.only(
+                              bottomLeft: Radius.circular(26),
+                            ),
+                          ),
+                          child: const Text(
+                            'Cancel',
+                            style: TextStyle(color: ColorsManager.grayBorder),
+                          ),
                         ),
                       ),
                     ),
-                    child: const Text(
-                      'Cancel',
-                      style: TextStyle(color: ColorsManager.grayBorder),
-                    ),
-                  ),
-                ),
-              ),
-              Expanded(
-                child: InkWell(
-                  onTap: rightOnTap,
-                  child: Container(
-                    height: 60,
-                    alignment: Alignment.center,
-                    decoration: const BoxDecoration(
-                      border: Border(
-                        right: BorderSide(
-                          color: ColorsManager.grayBorder,
+                    Expanded(
+                      child: InkWell(
+                        borderRadius: const BorderRadius.only(
+                          bottomRight: Radius.circular(26),
+                        ),
+                        onTap: rightOnTap,
+                        child: Container(
+                          height: 40,
+                          alignment: Alignment.center,
+                          decoration: const BoxDecoration(
+                            border: Border(
+                              right: BorderSide(
+                                color: ColorsManager.grayBorder,
+                              ),
+                            ),
+                            borderRadius: BorderRadius.only(
+                              bottomRight: Radius.circular(26),
+                            ),
+                          ),
+                          child: const Text(
+                            'Next',
+                            style: TextStyle(
+                              color: ColorsManager.blueColor,
+                            ),
+                          ),
                         ),
                       ),
-                    ),
-                    child: const Text(
-                      'Next',
-                      style: TextStyle(
-                        color: ColorsManager.blueColor,
-                      ),
-                    ),
-                  ),
-                ),
-              )
-            ],
+                    )
+                  ],
+                )
+              ],
+            ),
           )
         ],
       ),

lib/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/bloc/curtain_module_bloc.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 
 class CalibrateCompletedDialog extends StatelessWidget {
   final BuildContext parentContext;
@@ -15,58 +17,69 @@ class CalibrateCompletedDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
+      backgroundColor: ColorsManager.whiteColors,
       contentPadding: EdgeInsets.zero,
       content: SizedBox(
         height: 250,
         width: 400,
         child: Column(
           children: [
-            const Padding(
-              padding: EdgeInsets.all(10),
-              child: Text(
-                'Calibration Completed',
-                style: TextStyle(
-                  fontSize: 24,
-                  fontWeight: FontWeight.bold,
-                  color: ColorsManager.blueColor,
-                ),
+            Expanded(
+              child: Column(
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.all(10),
+                    child: Text(
+                      'Calibration Completed',
+                      style: TextStyle(
+                        fontSize: 24,
+                        fontWeight: FontWeight.bold,
+                        color: ColorsManager.dialogBlueTitle,
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 5),
+                  const Divider(
+                    indent: 10,
+                    endIndent: 10,
+                  ),
+                ],
               ),
             ),
-            const SizedBox(height: 5),
-            const Divider(
-              indent: 10,
-              endIndent: 10,
+            Expanded(
+              child: SvgPicture.asset(Assets.completedDoneIcon),
             ),
-            const Icon(
-              Icons.check_circle,
-              size: 100,
-              color: ColorsManager.blueColor,
-            ),
-            const Spacer(),
-            const Divider(
-              indent: 10,
-              endIndent: 10,
-            ),
-            InkWell(
-              onTap: () {
-                parentContext.read<CurtainModuleBloc>().add(
-                      FetchCurtainModuleStatusEvent(
-                        deviceId: deviceId,
-                      ),
-                    );
-                Navigator.of(parentContext).pop();
-                Navigator.of(parentContext).pop();
-              },
-              child: Container(
-                height: 40,
-                width: double.infinity,
-                alignment: Alignment.center,
-                child: const Text(
-                  'Close',
-                  style: TextStyle(
-                    color: ColorsManager.grayBorder,
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  const Divider(
+                    indent: 10,
+                    endIndent: 10,
                   ),
-                ),
+                  InkWell(
+                    onTap: () {
+                      parentContext.read<CurtainModuleBloc>().add(
+                            FetchCurtainModuleStatusEvent(
+                              deviceId: deviceId,
+                            ),
+                          );
+                      Navigator.of(parentContext).pop();
+                      Navigator.of(parentContext).pop();
+                    },
+                    child: Container(
+                      height: 40,
+                      width: double.infinity,
+                      alignment: Alignment.center,
+                      child: const Text(
+                        'Close',
+                        style: TextStyle(
+                          color: ColorsManager.grayBorder,
+                        ),
+                      ),
+                    ),
+                  )
+                ],
               ),
             )
           ],

lib/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart

@@ -15,28 +15,72 @@ class NormalTextBodyForDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(
-          title,
-          style: const TextStyle(
-            color: ColorsManager.grayColor,
+    return Padding(
+      padding: EdgeInsetsGeometry.only(left: 15),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (title.isEmpty)
+            const SizedBox()
+          else
+            Expanded(
+              child: Text(
+                title,
+                style: const TextStyle(
+                  color: ColorsManager.grayColor,
+                  fontSize: 15,
+                ),
+              ),
+            ),
+          Expanded(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const SizedBox(
+                  width: 10,
+                ),
+                const Text('1. ',
+                    style: TextStyle(
+                      color: ColorsManager.grayColor,
+                      fontSize: 15,
+                    )),
+                SizedBox(
+                  width: 450,
+                  child: Text(
+                    step1,
+                    style: const TextStyle(
+                      color: ColorsManager.grayColor,
+                      fontSize: 15,
+                    ),
+                  ),
+                ),
+              ],
+            ),
           ),
-        ),
-        Text(
-          step1,
-          style: const TextStyle(
-            color: ColorsManager.grayColor,
-          ),
-        ),
-        Text(
-          step2,
-          style: const TextStyle(
-            color: ColorsManager.grayColor,
-          ),
-        )
-      ],
+          Expanded(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const SizedBox(
+                  width: 10,
+                ),
+                const Text('2. ',
+                    style: TextStyle(
+                      color: ColorsManager.grayColor,
+                      fontSize: 15,
+                    )),
+                Text(
+                  step2,
+                  style: const TextStyle(
+                    color: ColorsManager.grayColor,
+                    fontSize: 15,
+                  ),
+                ),
+              ],
+            ),
+          )
+        ],
+      ),
     );
   }
 }

lib/pages/device_managment/curtain_module/widgets/number_input_textfield.dart

@@ -19,7 +19,7 @@ class NumberInputField extends StatelessWidget {
         contentPadding: EdgeInsets.zero,
       ),
       style: const TextStyle(
-        fontSize: 20,
+        fontSize: 15,
         color: ColorsManager.blackColor,
       ),
     );

lib/pages/device_managment/curtain_module/widgets/pref_revers_card_widget.dart

@@ -18,7 +18,7 @@ class PrefReversCardWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return DefaultContainer(
-      padding: const EdgeInsets.all(12),
+      padding: const EdgeInsets.all(18),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.spaceBetween,

lib/pages/device_managment/curtain_module/widgets/prefrences_dialog.dart

@@ -23,12 +23,12 @@ class CurtainModulePrefrencesDialog extends StatelessWidget {
   Widget build(_) {
     return AlertDialog(
       backgroundColor: ColorsManager.CircleImageBackground,
-      contentPadding: const EdgeInsets.all(30),
-      title: const Center(
+      contentPadding: const EdgeInsets.all(20),
+      title: Center(
           child: Text(
         'Preferences',
         style: TextStyle(
-          color: ColorsManager.blueColor,
+          color: ColorsManager.dialogBlueTitle,
           fontSize: 24,
           fontWeight: FontWeight.bold,
         ),

lib/pages/device_managment/curtain_module/widgets/quick_calibrating_dialog.dart

@@ -63,55 +63,82 @@ class _QuickCalibratingDialogState extends State<QuickCalibratingDialog> {
   @override
   Widget build(_) {
     return AlertDialog(
+      backgroundColor: ColorsManager.whiteColors,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Calibrating',
         body: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            const Text(
-              '1. please Enter the Travel Time:',
-              style: TextStyle(color: ColorsManager.grayBorder),
-            ),
-            const SizedBox(height: 10),
-            Container(
-              width: 150,
-              height: 40,
-              padding: const EdgeInsets.all(5),
-              decoration: BoxDecoration(
-                color: ColorsManager.whiteColors,
-                borderRadius: BorderRadius.circular(12),
-              ),
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.center,
-                children: [
-                  Expanded(
-                    child: NumberInputField(controller: _controller),
-                  ),
-                  const Expanded(
-                    child: Text(
-                      'seconds',
-                      style: TextStyle(
-                        fontSize: 15,
-                        color: ColorsManager.blueColor,
-                        fontWeight: FontWeight.bold,
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            if (_errorText != null)
-              Padding(
-                padding: const EdgeInsets.only(top: 8.0),
-                child: Text(
-                  _errorText!,
-                  style: const TextStyle(
-                    color: ColorsManager.red,
-                    fontSize: 14,
+            const Expanded(
+              child: Align(
+                alignment: Alignment.topCenter,
+                child: Padding(
+                  padding: EdgeInsets.only(right: 75),
+                  child: Text(
+                    '1.please Enter the Travel Time:',
+                    style: TextStyle(color: ColorsManager.lightGrayColor),
                   ),
                 ),
               ),
+            ),
+            Expanded(
+              child: Align(
+                alignment: Alignment.center,
+                child: Container(
+                  width: 130,
+                  padding: const EdgeInsets.all(5),
+                  decoration: BoxDecoration(
+                    color: ColorsManager.neutralGray.withValues(
+                      alpha: 0.5,
+                    ),
+                    borderRadius: BorderRadius.circular(12),
+                  ),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      Expanded(
+                        child: Padding(
+                            padding: const EdgeInsetsGeometry.only(left: 5),
+                            child: NumberInputField(controller: _controller)),
+                      ),
+                      Expanded(
+                        child: Text(
+                          'seconds',
+                          style: TextStyle(
+                            fontSize: 12,
+                            color: ColorsManager.dialogBlueTitle,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            if (_errorText != null)
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.only(top: 8.0),
+                  child: Text(
+                    _errorText!,
+                    style: const TextStyle(
+                      color: ColorsManager.red,
+                      fontSize: 14,
+                    ),
+                  ),
+                ),
+              ),
+            const Expanded(
+              child: Align(
+                alignment: Alignment.bottomCenter,
+                child: Text(
+                  '2.click Next to Complete the calibration',
+                  style: TextStyle(color: ColorsManager.lightGrayColor),
+                ),
+              ),
+            )
           ],
         ),
         leftOnTap: () => Navigator.of(widget.parentContext).pop(),

lib/pages/device_managment/curtain_module/widgets/quick_calibration_dialog.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/widgets/quick_calibrating_dialog.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 
 class QuickCalibrationDialog extends StatelessWidget {
   final int timControl;
@@ -17,14 +18,15 @@ class QuickCalibrationDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
+      backgroundColor: ColorsManager.whiteColors,
       contentPadding: EdgeInsets.zero,
       content: AccurateDialogWidget(
         title: 'Quick Calibration',
         body: const NormalTextBodyForDialog(
           title: 'Prepare Calibration:',
           step1:
-              '1. Confirm that the curtain is in the fully closed and suspended state.',
-          step2: '2. click Next to Start calibration.',
+              'Confirm that the curtain is in the fully closed and suspended state.',
+          step2: 'click Next to Start calibration.',
         ),
         leftOnTap: () => Navigator.of(parentContext).pop(),
         rightOnTap: () {

lib/pages/device_managment/device_setting/device_management_content.dart

@@ -19,11 +19,14 @@ class DeviceManagementContent extends StatelessWidget {
     required this.device,
     required this.subSpaces,
     required this.deviceInfo,
+    required this.deviceManagementBloc,
   });
 
   final AllDevicesModel device;
   final List<SubSpaceModel> subSpaces;
   final DeviceInfoModel deviceInfo;
+  final DeviceManagementBloc deviceManagementBloc;
+
 
   @override
   Widget build(BuildContext context) {
@@ -87,6 +90,11 @@ class DeviceManagementContent extends StatelessWidget {
                           ),
                         );
                   });
+
+                  deviceManagementBloc.add(UpdateSubSpaceName(
+                      subspaceId: selectedSubSpace.id!,
+                      deviceId: device.uuid!,
+                      newSubSpaceName: selectedSubSpace.name ?? ''));
                 }
               },
               child: infoRow(

lib/pages/device_managment/device_setting/device_settings_panel.dart

@@ -1,13 +1,15 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_state.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/device_icon_type_helper.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/device_management_content.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/remove_device_widget.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
-import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
-import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_state.dart';
 import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
@@ -17,7 +19,13 @@ import 'package:syncrow_web/web_layout/default_container.dart';
 class DeviceSettingsPanel extends StatelessWidget {
   final VoidCallback? onClose;
   final AllDevicesModel device;
-  const DeviceSettingsPanel({super.key, this.onClose, required this.device});
+  final DeviceManagementBloc deviceManagementBloc;
+  const DeviceSettingsPanel({
+    super.key,
+    this.onClose,
+    required this.device,
+    required this.deviceManagementBloc,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -71,10 +79,10 @@ class DeviceSettingsPanel extends StatelessWidget {
                               'Device Settings',
                               style: context.theme.textTheme.titleLarge!
                                   .copyWith(
-                                      fontWeight: FontWeight.w700,
+                                  fontWeight: FontWeight.w700,
                                       color: ColorsManager.vividBlue
                                           .withOpacity(0.7),
-                                      fontSize: 24),
+                                  fontSize: 24),
                             ),
                           ],
                         ),
@@ -134,8 +142,14 @@ class DeviceSettingsPanel extends StatelessWidget {
                                               onFieldSubmitted: (value) {
                                                 _bloc.add(const ChangeNameEvent(
                                                     value: false));
+                                                deviceManagementBloc
+                                                    ..add(UpdateDeviceName(
+                                                        deviceId: device.uuid!,
+                                                        newName: _bloc
+                                                            .nameController
+                                                            .text))..add(ResetSelectedDevices());
                                               },
-                                              decoration: InputDecoration(
+                                              decoration:const InputDecoration(
                                                 isDense: true,
                                                 contentPadding: EdgeInsets.zero,
                                                 border: InputBorder.none,
@@ -157,7 +171,7 @@ class DeviceSettingsPanel extends StatelessWidget {
                                                     onTap: () {
                                                       _bloc.add(
                                                           const ChangeNameEvent(
-                                                              value: true));
+                                                          value: true));
                                                     },
                                                     child: SvgPicture.asset(
                                                       Assets
@@ -190,6 +204,7 @@ class DeviceSettingsPanel extends StatelessWidget {
                           device: device,
                           subSpaces: subSpaces.cast<SubSpaceModel>(),
                           deviceInfo: deviceInfo,
+                          deviceManagementBloc: deviceManagementBloc,
                         ),
                         const SizedBox(height: 32),
                         RemoveDeviceWidget(bloc: _bloc),

lib/pages/device_managment/one_g_glass_switch/bloc/one_gang_glass_switch_bloc.dart

@@ -40,7 +40,7 @@ class OneGangGlassSwitchBloc
     emit(OneGangGlassSwitchLoading());
     try {
       final status = await DevicesManagementApi().getDeviceStatus(event.deviceId);
-      _listenToChanges(event.deviceId, emit);
+      _listenToChanges(event.deviceId);
       deviceStatus = OneGangGlassStatusModel.fromJson(event.deviceId, status.status);
       emit(OneGangGlassSwitchStatusLoaded(deviceStatus));
     } catch (e) {
@@ -48,42 +48,28 @@ class OneGangGlassSwitchBloc
     }
   }
 
-  void _listenToChanges(
-    String deviceId,
-    Emitter<OneGangGlassSwitchState> emit,
-  ) {
+  StreamSubscription<DatabaseEvent>? _deviceStatusSubscription;
+
+  void _listenToChanges(String deviceId) {
     try {
       final ref = FirebaseDatabase.instance.ref('device-status/$deviceId');
-      final stream = ref.onValue;
+      _deviceStatusSubscription = ref.onValue.listen((DatabaseEvent event) async {
+        if (event.snapshot.value == null) return;
 
-      stream.listen((DatabaseEvent event) {
-        final data = event.snapshot.value as Map<dynamic, dynamic>?;
-        if (data == null) return;
+        final usersMap = event.snapshot.value! as Map<dynamic, dynamic>;
 
         final statusList = <Status>[];
-        if (data['status'] != null) {
-          for (var element in data['status']) {
-            statusList.add(
-              Status(
-                code: element['code'].toString(),
-                value: element['value'].toString(),
-              ),
-            );
-          }
-        }
-        if (statusList.isNotEmpty) {
-          final newStatus = OneGangGlassStatusModel.fromJson(deviceId, statusList);
-          if (newStatus != deviceStatus) {
-            deviceStatus = newStatus;
-            if (!isClosed) {
-              add(StatusUpdated(deviceStatus));
-            }
-          }
-        }
+
+        usersMap['status'].forEach((element) {
+          statusList.add(Status(code: element['code'], value: element['value']));
+        });
+
+        deviceStatus =
+            OneGangGlassStatusModel.fromJson(usersMap['productUuid'], statusList);
+
+        add(StatusUpdated(deviceStatus));
       });
-    } catch (e) {
-      emit(OneGangGlassSwitchError('Failed to listen to changes: $e'));
-    }
+    } catch (_) {}
   }
 
   void _onStatusUpdated(
@@ -174,4 +160,10 @@ class OneGangGlassSwitchBloc
       deviceStatus = deviceStatus.copyWith(switch1: value);
     }
   }
+
+  @override
+  Future<void> close() {
+    _deviceStatusSubscription?.cancel();
+    return super.close();
+  }
 }

lib/pages/device_managment/one_g_glass_switch/view/one_gang_glass_switch_control_view.dart

@@ -90,6 +90,8 @@ class OneGangGlassSwitchControlView extends StatelessWidget
                       child: BuildScheduleView(
                         category: 'switch_1',
                         deviceUuid: deviceId,
+                        countdownCode: 'countdown_1',
+                        deviceType: '1GT',
                       ),
                     ));
           },

lib/pages/device_managment/one_gang_switch/view/wall_light_device_control.dart

@@ -80,6 +80,8 @@ class WallLightDeviceControl extends StatelessWidget
                       child: BuildScheduleView(
                         category: 'switch_1',
                         deviceUuid: deviceId,
+                        countdownCode: 'countdown_1',
+                        deviceType: '1G',
                       ),
                     ));
           },

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

@@ -277,6 +277,32 @@ class SmartPowerDeviceControl extends StatelessWidget
                           totalConsumption: 10000,
                           date: blocProvider.formattedDate,
                         ),
+                        EnergyConsumptionPage(
+                          formattedDate:
+                              '${blocProvider.dateTime!.day}/${blocProvider.dateTime!.month}/${blocProvider.dateTime!.year} ${blocProvider.endChartDate}',
+                          onTap: () {
+                            blocProvider.add(SelectDateEvent(context: context));
+                          },
+                          widget: blocProvider.dateSwitcher(),
+                          chartData: blocProvider.energyDataList.isNotEmpty
+                              ? blocProvider.energyDataList
+                              : [
+                                  EnergyData('12:00 AM', 4.0),
+                                  EnergyData('01:00 AM', 6.5),
+                                  EnergyData('02:00 AM', 3.8),
+                                  EnergyData('03:00 AM', 3.2),
+                                  EnergyData('04:00 AM', 6.0),
+                                  EnergyData('05:00 AM', 3.4),
+                                  EnergyData('06:00 AM', 5.2),
+                                  EnergyData('07:00 AM', 3.5),
+                                  EnergyData('08:00 AM', 6.8),
+                                  EnergyData('09:00 AM', 5.6),
+                                  EnergyData('10:00 AM', 3.9),
+                                  EnergyData('11:00 AM', 4.0),
+                                ],
+                          totalConsumption: 10000,
+                          date: blocProvider.formattedDate,
+                        ),
                       ],
                     ),
                   ),

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

@@ -47,7 +47,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
       final success = await RemoteControlDeviceService().controlDevice(
         deviceUuid: deviceId,
         status: Status(
-          code: 'countdown_1',
+          code: event.countdownCode,
           value: 0,
         ),
       );
@@ -80,15 +80,18 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
   ) {
     if (state is ScheduleLoaded) {
       final currentState = state as ScheduleLoaded;
+
       emit(currentState.copyWith(
+        countdownSeconds: currentState.countdownSeconds,
+        selectedTime: currentState.selectedTime,
+        deviceId: deviceId,
         scheduleMode: event.scheduleMode,
-        countdownRemaining: Duration.zero,
-        countdownHours: 0,
-        countdownMinutes: 0,
-        inchingHours: 0,
-        inchingMinutes: 0,
-        isCountdownActive: false,
+        countdownHours: currentState.countdownHours,
+        countdownMinutes: currentState.countdownMinutes,
+        inchingHours: currentState.inchingHours,
+        inchingMinutes: currentState.inchingMinutes,
         isInchingActive: false,
+        isCountdownActive: currentState.countdownRemaining > Duration.zero,
       ));
     }
   }
@@ -221,7 +224,6 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
         deviceId,
         event.category,
       );
-
       if (state is ScheduleLoaded) {
         final currentState = state as ScheduleLoaded;
         emit(currentState.copyWith(
@@ -230,7 +232,6 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
           selectedDays: List.filled(7, false),
           functionOn: false,
           isEditing: false,
-          countdownRemaining: Duration.zero,
         ));
       } else {
         emit(ScheduleLoaded(
@@ -285,12 +286,22 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
   ) async {
     try {
       if (state is ScheduleLoaded) {
+        Status status = Status(code: '', value: '');
+        if (event.deviceType == 'CUR_2') {
+          status = status.copyWith(
+              code: 'control',
+              value: event.functionOn == true ? 'open' : 'close');
+        } else {
+          status =
+              status.copyWith(code: event.category, value: event.functionOn);
+        }
+
         final dateTime = DateTime.parse(event.time);
         final updatedSchedule = ScheduleEntry(
           scheduleId: event.scheduleId,
           category: event.category,
           time: getTimeStampWithoutSeconds(dateTime).toString(),
-          function: Status(code: event.category, value: event.functionOn),
+          function: status,
           days: event.selectedDays,
         );
         final success = await DevicesManagementApi().editScheduleRecord(
@@ -396,7 +407,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
       final totalSeconds =
           Duration(hours: event.hours, minutes: event.minutes).inSeconds;
       final code = event.mode == ScheduleModes.countdown
-          ? 'countdown_1'
+          ? event.countDownCode
           : 'switch_inching';
       final currentState = state as ScheduleLoaded;
       final duration = Duration(seconds: totalSeconds);
@@ -423,7 +434,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
       );
 
       if (success) {
-        if (code == 'countdown_1') {
+        if (code == event.countDownCode) {
           final countdownDuration = Duration(seconds: totalSeconds);
 
           emit(
@@ -437,7 +448,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
           );
 
           if (countdownDuration.inSeconds > 0) {
-            _startCountdownTimer(emit, countdownDuration);
+            _startCountdownTimer(emit, countdownDuration, event.countDownCode);
           } else {
             _countdownTimer?.cancel();
             emit(
@@ -467,9 +478,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
   }
 
   void _startCountdownTimer(
-    Emitter<ScheduleState> emit,
-    Duration duration,
-  ) {
+      Emitter<ScheduleState> emit, Duration duration, String countdownCode) {
     _countdownTimer?.cancel();
     _countdownTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
       if (_currentCountdown != null && _currentCountdown! > Duration.zero) {
@@ -479,6 +488,7 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
       } else {
         timer.cancel();
         add(StopScheduleEvent(
+          countdownCode: countdownCode,
           mode: _currentCountdown == null
               ? ScheduleModes.countdown
               : ScheduleModes.inching,
@@ -515,70 +525,75 @@ class ScheduleBloc extends Bloc<ScheduleEvent, ScheduleState> {
     try {
       final status =
           await DevicesManagementApi().getDeviceStatus(event.deviceId);
-      print(status.status);
+      int totalSeconds = 0;
+      final countdownItem = status.status.firstWhere(
+        (item) => item.code == event.countdownCode,
+        orElse: () => Status(code: '', value: 0),
+      );
+      totalSeconds = (countdownItem.value as int?) ?? 0;
+      final countdownHours = totalSeconds ~/ 3600;
+      final countdownMinutes = (totalSeconds % 3600) ~/ 60;
+      final countdownSeconds = totalSeconds % 60;
+
       final deviceStatus =
           WaterHeaterStatusModel.fromJson(event.deviceId, status.status);
+      final isCountdownActive = totalSeconds > 0;
+      final isInchingActive = !isCountdownActive &&
+          (deviceStatus.inchingHours > 0 || deviceStatus.inchingMinutes > 0);
 
-      final scheduleMode =
-          deviceStatus.countdownHours > 0 || deviceStatus.countdownMinutes > 0
-              ? ScheduleModes.countdown
-              : deviceStatus.inchingHours > 0 || deviceStatus.inchingMinutes > 0
-                  ? ScheduleModes.inching
-                  : ScheduleModes.schedule;
-      final isCountdown = scheduleMode == ScheduleModes.countdown;
-      final isInching = scheduleMode == ScheduleModes.inching;
+      final newState = state is ScheduleLoaded
+          ? (state as ScheduleLoaded).copyWith(
+              scheduleMode: ScheduleModes.schedule,
+              countdownHours: countdownHours,
+              countdownMinutes: countdownMinutes,
+              countdownSeconds: countdownSeconds,
+              inchingHours: deviceStatus.inchingHours,
+              inchingMinutes: deviceStatus.inchingMinutes,
+              isCountdownActive: isCountdownActive,
+              isInchingActive: isInchingActive,
+              countdownRemaining: isCountdownActive
+                  ? Duration(seconds: totalSeconds)
+                  : Duration.zero,
+            )
+          : ScheduleLoaded(
+              scheduleMode: ScheduleModes.schedule,
+              schedules: const [],
+              selectedTime: null,
+              selectedDays: List.filled(7, false),
+              functionOn: false,
+              isEditing: false,
+              deviceId: event.deviceId,
+              countdownHours: countdownHours,
+              countdownMinutes: countdownMinutes,
+              countdownSeconds: countdownSeconds,
+              inchingHours: deviceStatus.inchingHours,
+              inchingMinutes: deviceStatus.inchingMinutes,
+              isCountdownActive: isCountdownActive,
+              isInchingActive: isInchingActive,
+              countdownRemaining: isCountdownActive
+                  ? Duration(seconds: totalSeconds)
+                  : Duration.zero,
+            );
+      emit(newState);
 
-      Duration? countdownRemaining;
-      var isCountdownActive = false;
-      var isInchingActive = false;
+      if (isCountdownActive) {
+        _countdownTimer?.cancel();
+        _currentCountdown = Duration(seconds: totalSeconds);
+        countdownRemaining = _currentCountdown!;
 
-      if (isCountdown) {
-        countdownRemaining = Duration(
-          hours: deviceStatus.countdownHours,
-          minutes: deviceStatus.countdownMinutes,
-        );
-        isCountdownActive = countdownRemaining > Duration.zero;
-      } else if (isInching) {
-        isInchingActive = Duration(
-              hours: deviceStatus.inchingHours,
-              minutes: deviceStatus.inchingMinutes,
-            ) >
-            Duration.zero;
-      }
-      if (state is ScheduleLoaded) {
-        final currentState = state as ScheduleLoaded;
-        emit(currentState.copyWith(
-          scheduleMode: scheduleMode,
-          countdownHours: deviceStatus.countdownHours,
-          countdownMinutes: deviceStatus.countdownMinutes,
-          inchingHours: deviceStatus.inchingHours,
-          inchingMinutes: deviceStatus.inchingMinutes,
-          isCountdownActive: isCountdownActive,
-          isInchingActive: isInchingActive,
-          countdownRemaining: countdownRemaining ?? Duration.zero,
-        ));
+        if (totalSeconds > 0) {
+          _startCountdownTimer(
+              emit, Duration(seconds: totalSeconds), event.countdownCode);
+        } else {
+          add(StopScheduleEvent(
+            countdownCode: event.countdownCode,
+            mode: ScheduleModes.countdown,
+            deviceId: event.deviceId,
+          ));
+        }
       } else {
-        emit(ScheduleLoaded(
-          schedules: const [],
-          selectedTime: null,
-          selectedDays: List.filled(7, false),
-          functionOn: false,
-          isEditing: false,
-          deviceId: deviceId,
-          scheduleMode: scheduleMode,
-          countdownHours: deviceStatus.countdownHours,
-          countdownMinutes: deviceStatus.countdownMinutes,
-          inchingHours: deviceStatus.inchingHours,
-          inchingMinutes: deviceStatus.inchingMinutes,
-          isCountdownActive: isCountdownActive,
-          isInchingActive: isInchingActive,
-          countdownRemaining: countdownRemaining ?? Duration.zero,
-        ));
+        _countdownTimer?.cancel();
       }
-
-      // if (isCountdownActive && countdownRemaining != null) {
-      //   _startCountdownTimer(emit, countdownRemaining);
-      // }
     } catch (e) {
       emit(ScheduleError('Failed to fetch device status: $e'));
     }

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

@@ -91,6 +91,7 @@ class ScheduleEditEvent extends ScheduleEvent {
   final String time;
   final List<String> selectedDays;
   final bool functionOn;
+  final String deviceType;
 
   const ScheduleEditEvent({
     required this.scheduleId,
@@ -98,6 +99,7 @@ class ScheduleEditEvent extends ScheduleEvent {
     required this.time,
     required this.selectedDays,
     required this.functionOn,
+    required this.deviceType,
   });
 
   @override
@@ -107,6 +109,7 @@ class ScheduleEditEvent extends ScheduleEvent {
         time,
         selectedDays,
         functionOn,
+        deviceType,
       ];
 }
 
@@ -138,11 +141,13 @@ class ScheduleUpdateEntryEvent extends ScheduleEvent {
 
 class UpdateScheduleModeEvent extends ScheduleEvent {
   final ScheduleModes scheduleMode;
+  final String countdownCode;
 
-  const UpdateScheduleModeEvent({required this.scheduleMode});
+  const UpdateScheduleModeEvent(
+      {required this.scheduleMode, required this.countdownCode});
 
   @override
-  List<Object> get props => [scheduleMode];
+  List<Object> get props => [scheduleMode, countdownCode!];
 }
 
 class UpdateCountdownTimeEvent extends ScheduleEvent {
@@ -177,28 +182,32 @@ class StartScheduleEvent extends ScheduleEvent {
   final ScheduleModes mode;
   final int hours;
   final int minutes;
+  final String countDownCode;
 
   const StartScheduleEvent({
     required this.mode,
     required this.hours,
     required this.minutes,
+    required this.countDownCode,
   });
 
   @override
-  List<Object?> get props => [mode, hours, minutes];
+  List<Object?> get props => [mode, hours, minutes, countDownCode];
 }
 
 class StopScheduleEvent extends ScheduleEvent {
   final ScheduleModes mode;
   final String deviceId;
+  final String countdownCode;
 
   const StopScheduleEvent({
     required this.mode,
     required this.deviceId,
+    required this.countdownCode,
   });
 
   @override
-  List<Object?> get props => [mode, deviceId];
+  List<Object?> get props => [mode, deviceId, countdownCode];
 }
 
 class ScheduleDecrementCountdownEvent extends ScheduleEvent {
@@ -210,11 +219,13 @@ class ScheduleDecrementCountdownEvent extends ScheduleEvent {
 
 class ScheduleFetchStatusEvent extends ScheduleEvent {
   final String deviceId;
+  final String countdownCode;
 
-  const ScheduleFetchStatusEvent(this.deviceId);
+  const ScheduleFetchStatusEvent(
+      {required this.deviceId, required this.countdownCode});
 
   @override
-  List<Object> get props => [deviceId];
+  List<Object> get props => [deviceId, countdownCode];
 }
 
 class DeleteScheduleEvent extends ScheduleEvent {

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

@@ -29,7 +29,7 @@ class ScheduleLoaded extends ScheduleState {
   final int inchingSeconds;
   final bool isInchingActive;
   final ScheduleModes scheduleMode;
-  final Duration? countdownRemaining;
+  final Duration countdownRemaining;
   final int? countdownSeconds;
 
   const ScheduleLoaded({
@@ -48,7 +48,7 @@ class ScheduleLoaded extends ScheduleState {
     this.inchingMinutes = 0,
     this.isInchingActive = false,
     this.scheduleMode = ScheduleModes.countdown,
-    this.countdownRemaining,
+    this.countdownRemaining = Duration.zero,
   });
 
   ScheduleLoaded copyWith({

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

@@ -11,6 +11,7 @@ class CountdownModeButtons extends StatelessWidget {
   final String deviceId;
   final int hours;
   final int minutes;
+  final String countDownCode;
 
   const CountdownModeButtons({
     super.key,
@@ -18,6 +19,7 @@ class CountdownModeButtons extends StatelessWidget {
     required this.deviceId,
     required this.hours,
     required this.minutes,
+    required this.countDownCode,
   });
 
   @override
@@ -43,6 +45,7 @@ class CountdownModeButtons extends StatelessWidget {
                           StopScheduleEvent(
                             mode: ScheduleModes.countdown,
                             deviceId: deviceId,
+                            countdownCode: countDownCode,
                           ),
                         );
                   },
@@ -54,10 +57,10 @@ class CountdownModeButtons extends StatelessWidget {
                   onPressed: () {
                     context.read<ScheduleBloc>().add(
                           StartScheduleEvent(
-                            mode: ScheduleModes.countdown,
-                            hours: hours,
-                            minutes: minutes,
-                          ),
+                              mode: ScheduleModes.countdown,
+                              hours: hours,
+                              minutes: minutes,
+                              countDownCode: countDownCode),
                         );
                   },
                   backgroundColor: ColorsManager.primaryColor,

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

@@ -75,23 +75,33 @@ class _CountdownInchingViewState extends State<CountdownInchingView> {
         final isCountDown = state.scheduleMode == ScheduleModes.countdown;
         final isActive =
             isCountDown ? state.isCountdownActive : state.isInchingActive;
-        final displayHours = isActive && state.countdownRemaining != null
-            ? state.countdownRemaining!.inHours
-            : (isCountDown ? state.countdownHours : state.inchingHours);
-        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!);
+        final displayHours =
+            isActive && state.countdownRemaining != Duration.zero
+                ? state.countdownRemaining.inHours
+                : (isCountDown ? state.countdownHours : state.inchingHours);
 
-        if (displayHours == 0 && displayMinutes == 0 && displaySeconds == 0) {
+        final displayMinutes =
+            isActive && state.countdownRemaining != Duration.zero
+                ? state.countdownRemaining.inMinutes.remainder(60)
+                : (isCountDown ? state.countdownMinutes : state.inchingMinutes);
+
+        final displaySeconds =
+            isActive && state.countdownRemaining != Duration.zero
+                ? state.countdownRemaining.inSeconds.remainder(60)
+                : (isCountDown ? (state.countdownSeconds ?? 0) : 0);
+
+        _updateControllers(displayHours, displayMinutes, displaySeconds);
+
+        if (isActive &&
+            displayHours == 0 &&
+            displayMinutes == 0 &&
+            displaySeconds == 0) {
           context.read<ScheduleBloc>().add(
                 StopScheduleEvent(
                   mode: ScheduleModes.countdown,
                   deviceId: widget.deviceId,
+                  countdownCode: '',
                 ),
               );
         }

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

@@ -43,7 +43,9 @@ class InchingModeButtons extends StatelessWidget {
                   onPressed: () {
                     context.read<ScheduleBloc>().add(
                           StopScheduleEvent(
-                              deviceId: deviceId, mode: ScheduleModes.inching),
+                              deviceId: deviceId,
+                              mode: ScheduleModes.inching,
+                              countdownCode: ''),
                         );
                   },
                   backgroundColor: Colors.red,

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

@@ -18,11 +18,15 @@ class BuildScheduleView extends StatelessWidget {
     super.key,
     required this.deviceUuid,
     required this.category,
+    required this.countdownCode,
     this.code,
+    required this.deviceType,
   });
   final String deviceUuid;
   final String category;
   final String? code;
+  final String? countdownCode;
+  final String deviceType;
 
   @override
   Widget build(BuildContext context) {
@@ -31,7 +35,8 @@ class BuildScheduleView extends StatelessWidget {
         deviceId: deviceUuid,
       )
         ..add(ScheduleGetEvent(category: category))
-        ..add(ScheduleFetchStatusEvent(deviceUuid)),
+        ..add(ScheduleFetchStatusEvent(
+            deviceId: deviceUuid, countdownCode: countdownCode ?? '')),
       child: Dialog(
         backgroundColor: Colors.white,
         insetPadding: const EdgeInsets.all(20),
@@ -52,28 +57,32 @@ class BuildScheduleView extends StatelessWidget {
                       children: [
                         const ScheduleHeader(),
                         const SizedBox(height: 20),
-                        ScheduleModeSelector(
-                          currentMode: state.scheduleMode,
-                        ),
+                        if (deviceType == 'CUR_2')
+                          const SizedBox()
+                        else
+                          ScheduleModeSelector(
+                            countdownCode: countdownCode ?? '',
+                            currentMode: state.scheduleMode,
+                          ),
                         const SizedBox(height: 20),
                         if (state.scheduleMode == ScheduleModes.schedule)
                           ScheduleManagementUI(
+                            deviceType: deviceType,
                             category: category,
                             deviceUuid: deviceUuid,
                             onAddSchedule: () async {
                               final entry = await ScheduleDialogHelper
-                                  .showAddScheduleDialog(
-                                context,
-                                schedule: ScheduleEntry(
-                                  category: category,
-                                  time: '',
-                                  function: Status(
-                                      code: code.toString(), value: null),
-                                  days: [],
-                                ),
-                                isEdit: false,
-                                code: code,
-                              );
+                                  .showAddScheduleDialog(context,
+                                      schedule: ScheduleEntry(
+                                        category: category,
+                                        time: '',
+                                        function: Status(
+                                            code: code.toString(), value: null),
+                                        days: [],
+                                      ),
+                                      isEdit: false,
+                                      code: code,
+                                      deviceType: deviceType);
                               if (entry != null) {
                                 context.read<ScheduleBloc>().add(
                                       ScheduleAddEvent(
@@ -87,14 +96,16 @@ class BuildScheduleView extends StatelessWidget {
                               }
                             },
                           ),
-                        if (state.scheduleMode == ScheduleModes.countdown ||
-                            state.scheduleMode == ScheduleModes.inching)
-                          CountdownInchingView(
-                            deviceId: deviceUuid,
-                          ),
+                        if (deviceType != 'CUR_2')
+                          if (state.scheduleMode == ScheduleModes.countdown ||
+                              state.scheduleMode == ScheduleModes.inching)
+                            CountdownInchingView(
+                              deviceId: deviceUuid,
+                            ),
                         const SizedBox(height: 20),
                         if (state.scheduleMode == ScheduleModes.countdown)
                           CountdownModeButtons(
+                            countDownCode: countdownCode ?? '',
                             isActive: state.isCountdownActive,
                             deviceId: deviceUuid,
                             hours: state.countdownHours,

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

@@ -5,14 +5,16 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class ScheduleManagementUI extends StatelessWidget {
-  final String deviceUuid; 
+  final String deviceUuid;
   final VoidCallback onAddSchedule;
   final String category;
+  final String deviceType;
 
   const ScheduleManagementUI({
     super.key,
     required this.deviceUuid,
     required this.onAddSchedule,
+    required this.deviceType,
     this.category = 'switch_1',
   });
 
@@ -44,7 +46,11 @@ class ScheduleManagementUI extends StatelessWidget {
           ),
         ),
         const SizedBox(height: 20),
-        ScheduleTableWidget(deviceUuid: deviceUuid, category: category),
+        ScheduleTableWidget(
+          deviceUuid: deviceUuid,
+          category: category,
+          deviceType: deviceType,
+        ),
       ],
     );
   }

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

@@ -7,10 +7,12 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class ScheduleModeSelector extends StatelessWidget {
   final ScheduleModes currentMode;
+  final String countdownCode;
 
   const ScheduleModeSelector({
     super.key,
     required this.currentMode,
+    required this.countdownCode,
   });
 
   @override
@@ -71,7 +73,8 @@ class ScheduleModeSelector extends StatelessWidget {
           onChanged: (ScheduleModes? value) {
             if (value != null) {
               context.read<ScheduleBloc>().add(
-                    UpdateScheduleModeEvent(scheduleMode: value),
+                    UpdateScheduleModeEvent(
+                        scheduleMode: value, countdownCode: countdownCode),
                   );
               if (value == ScheduleModes.schedule) {
                 context.read<ScheduleBloc>().add(

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

@@ -12,11 +12,13 @@ import 'package:syncrow_web/utils/format_date_time.dart';
 class ScheduleTableWidget extends StatelessWidget {
   final String deviceUuid;
   final String category;
+  final String deviceType;
 
   const ScheduleTableWidget({
     super.key,
     required this.deviceUuid,
     this.category = 'switch_1',
+    required this.deviceType,
   });
 
   @override
@@ -25,13 +27,14 @@ class ScheduleTableWidget extends StatelessWidget {
       create: (_) => ScheduleBloc(
         deviceId: deviceUuid,
       )..add(ScheduleGetEvent(category: category)),
-      child: _ScheduleTableView(),
+      child: _ScheduleTableView(deviceType),
     );
   }
 }
 
 class _ScheduleTableView extends StatelessWidget {
-  const _ScheduleTableView();
+  final String deviceType;
+  const _ScheduleTableView(this.deviceType);
 
   @override
   Widget build(BuildContext context) {
@@ -81,7 +84,7 @@ class _ScheduleTableView extends StatelessWidget {
                         bottomLeft: Radius.circular(20),
                         bottomRight: Radius.circular(20)),
                   ),
-                  child: _buildTableBody(state.schedules, context));
+                  child: _buildTableBody(state.schedules, context, deviceType));
             }
             if (state is ScheduleError) {
               return Center(child: Text(state.error));
@@ -123,7 +126,8 @@ class _ScheduleTableView extends StatelessWidget {
     );
   }
 
-  Widget _buildTableBody(List<ScheduleModel> schedules, BuildContext context) {
+  Widget _buildTableBody(
+      List<ScheduleModel> schedules, BuildContext context, String deviceType) {
     return SizedBox(
       height: 200,
       child: SingleChildScrollView(
@@ -132,7 +136,8 @@ class _ScheduleTableView extends StatelessWidget {
           defaultVerticalAlignment: TableCellVerticalAlignment.middle,
           children: [
             for (int i = 0; i < schedules.length; i++)
-              _buildScheduleRow(schedules[i], i, context),
+              _buildScheduleRow(schedules[i], i, context,
+                  deviceType: deviceType),
           ],
         ),
       ),
@@ -155,25 +160,19 @@ class _ScheduleTableView extends StatelessWidget {
   }
 
   TableRow _buildScheduleRow(
-      ScheduleModel schedule, int index, BuildContext context) {
+      ScheduleModel schedule, int index, BuildContext context,
+      {required String deviceType}) {
     return TableRow(
       children: [
         Center(
           child: GestureDetector(
             behavior: HitTestBehavior.opaque,
             onTap: () {
-              bool temp;
-              if (schedule.category == 'CUR_2') {
-                temp = schedule.function.value == 'open' ? true : false;
-              } else {
-                temp = schedule.function.value as bool;
-              }
               context.read<ScheduleBloc>().add(
                     ScheduleUpdateEntryEvent(
                       category: schedule.category,
                       scheduleId: schedule.scheduleId,
-                      functionOn: temp,
-                      //  schedule.function.value,
+                      functionOn: schedule.function.value,
                       enable: !schedule.enable,
                     ),
                   );
@@ -195,10 +194,11 @@ class _ScheduleTableView extends StatelessWidget {
             child: Text(_getSelectedDays(
                 ScheduleModel.parseSelectedDays(schedule.days)))),
         Center(child: Text(formatIsoStringToTime(schedule.time, context))),
-        schedule.category == 'CUR_2'
-            ? Center(
-                child: Text(schedule.function.value == true ? 'open' : 'close'))
-            : Center(child: Text(schedule.function.value ? 'On' : 'Off')),
+        if (deviceType == 'CUR_2')
+          Center(
+              child: Text(schedule.function.value == true ? 'open' : 'close'))
+        else
+          Center(child: Text(schedule.function.value ? 'On' : 'Off')),
         Center(
           child: Wrap(
             runAlignment: WrapAlignment.center,
@@ -206,18 +206,27 @@ class _ScheduleTableView extends StatelessWidget {
               TextButton(
                 style: TextButton.styleFrom(padding: EdgeInsets.zero),
                 onPressed: () {
-                  ScheduleDialogHelper.showAddScheduleDialog(
-                    context,
-                    schedule: ScheduleEntry.fromScheduleModel(schedule),
-                    isEdit: true,
-                  ).then((updatedSchedule) {
+                  ScheduleDialogHelper.showAddScheduleDialog(context,
+                          schedule: ScheduleEntry.fromScheduleModel(schedule),
+                          isEdit: true,
+                          deviceType: deviceType)
+                      .then((updatedSchedule) {
                     if (updatedSchedule != null) {
+                      bool temp;
+                      if (deviceType == 'CUR_2') {
+                        updatedSchedule.function.value == 'open'
+                            ? temp = true
+                            : temp = false;
+                      } else {
+                        temp = updatedSchedule.function.value;
+                      }
                       context.read<ScheduleBloc>().add(
                             ScheduleEditEvent(
+                                deviceType: deviceType,
                                 scheduleId: schedule.scheduleId,
                                 category: schedule.category,
                                 time: updatedSchedule.time,
-                                functionOn: updatedSchedule.function.value,
+                                functionOn: temp,
                                 selectedDays: updatedSchedule.days),
                           );
                     }

lib/pages/device_managment/three_g_glass_switch/bloc/three_gang_glass_switch_bloc.dart

@@ -41,7 +41,7 @@ class ThreeGangGlassSwitchBloc
     emit(ThreeGangGlassSwitchLoading());
     try {
       final status = await DevicesManagementApi().getDeviceStatus(event.deviceId);
-      _listenToChanges(event.deviceId, emit);
+      _listenToChanges(event.deviceId);
       deviceStatus =
           ThreeGangGlassStatusModel.fromJson(event.deviceId, status.status);
       emit(ThreeGangGlassSwitchStatusLoaded(deviceStatus));
@@ -50,42 +50,28 @@ class ThreeGangGlassSwitchBloc
     }
   }
 
-  void _listenToChanges(
-    String deviceId,
-    Emitter<ThreeGangGlassSwitchState> emit,
-  ) {
+  StreamSubscription<DatabaseEvent>? _deviceStatusSubscription;
+
+  void _listenToChanges(String deviceId) {
     try {
       final ref = FirebaseDatabase.instance.ref('device-status/$deviceId');
-      final stream = ref.onValue;
+      _deviceStatusSubscription = ref.onValue.listen((DatabaseEvent event) async {
+        if (event.snapshot.value == null) return;
 
-      stream.listen((DatabaseEvent event) {
-        final data = event.snapshot.value as Map<dynamic, dynamic>?;
-        if (data == null) return;
+        final usersMap = event.snapshot.value! as Map<dynamic, dynamic>;
 
         final statusList = <Status>[];
-        if (data['status'] != null) {
-          for (var element in data['status']) {
-            statusList.add(
-              Status(
-                code: element['code'].toString(),
-                value: element['value'].toString(),
-              ),
-            );
-          }
-        }
-        if (statusList.isNotEmpty) {
-          final newStatus = ThreeGangGlassStatusModel.fromJson(deviceId, statusList);
-          if (newStatus != deviceStatus) {
-            deviceStatus = newStatus;
-            if (!isClosed) {
-              add(StatusUpdated(deviceStatus));
-            }
-          }
-        }
+
+        usersMap['status'].forEach((element) {
+          statusList.add(Status(code: element['code'], value: element['value']));
+        });
+
+        deviceStatus =
+            ThreeGangGlassStatusModel.fromJson(usersMap['productUuid'], statusList);
+
+        add(StatusUpdated(deviceStatus));
       });
-    } catch (e) {
-      emit(ThreeGangGlassSwitchError('Failed to listen to changes: $e'));
-    }
+    } catch (_) {}
   }
 
   void _onStatusUpdated(
@@ -184,4 +170,10 @@ class ThreeGangGlassSwitchBloc
         break;
     }
   }
+
+  @override
+  Future<void> close() {
+    _deviceStatusSubscription?.cancel();
+    return super.close();
+  }
 }

lib/pages/device_managment/three_g_glass_switch/view/three_gang_glass_switch_control_view.dart

@@ -111,6 +111,8 @@ class ThreeGangGlassSwitchControlView extends StatelessWidget
                       child: BuildScheduleView(
                         category: 'switch_1',
                         deviceUuid: deviceId,
+                        countdownCode: 'countdown_1',
+                        deviceType: '3GT',
                       ),
                     ));
           },
@@ -127,6 +129,8 @@ class ThreeGangGlassSwitchControlView extends StatelessWidget
                       child: BuildScheduleView(
                         category: 'switch_2',
                         deviceUuid: deviceId,
+                        countdownCode: 'countdown_2',
+                        deviceType: '3GT',
                       ),
                     ));
           },
@@ -143,6 +147,8 @@ class ThreeGangGlassSwitchControlView extends StatelessWidget
                       child: BuildScheduleView(
                         category: 'switch_3',
                         deviceUuid: deviceId,
+                        countdownCode: 'countdown_3',
+                        deviceType: '3GT',
                       ),
                     ));
           },

lib/pages/device_managment/three_gang_switch/view/living_room_device_control.dart

@@ -102,6 +102,8 @@ class LivingRoomDeviceControlsView extends StatelessWidget
                       child: BuildScheduleView(
                         deviceUuid: deviceId,
                         category: 'switch_1',
+                        countdownCode: 'countdown_1',
+                        deviceType: '3G',
                       ),
                     ));
           },
@@ -118,6 +120,8 @@ class LivingRoomDeviceControlsView extends StatelessWidget
                       child: BuildScheduleView(
                         deviceUuid: deviceId,
                         category: 'switch_2',
+                        countdownCode: 'countdown_2',
+                        deviceType: '3G',
                       ),
                     ));
           },
@@ -134,6 +138,8 @@ class LivingRoomDeviceControlsView extends StatelessWidget
                       child: BuildScheduleView(
                         deviceUuid: deviceId,
                         category: 'switch_3',
+                        countdownCode: 'countdown_3',
+                        deviceType: '3G',
                       ),
                     ));
           },

lib/pages/device_managment/two_g_glass_switch/bloc/two_gang_glass_switch_bloc.dart

@@ -1,173 +1,177 @@
-import 'dart:async';
-import 'dart:developer';
+  import 'dart:async';
 
-import 'package:bloc/bloc.dart';
-import 'package:equatable/equatable.dart';
-import 'package:firebase_database/firebase_database.dart';
-import 'package:flutter/foundation.dart';
-import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
-import 'package:syncrow_web/pages/device_managment/all_devices/models/factory_reset_model.dart';
-import 'package:syncrow_web/pages/device_managment/two_g_glass_switch/models/two_gang_glass_status_model.dart';
-import 'package:syncrow_web/services/batch_control_devices_service.dart';
-import 'package:syncrow_web/services/control_device_service.dart';
-import 'package:syncrow_web/services/devices_mang_api.dart';
+  import 'package:bloc/bloc.dart';
+  import 'package:equatable/equatable.dart';
+  import 'package:firebase_database/firebase_database.dart';
+  import 'package:flutter/foundation.dart';
+  import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+  import 'package:syncrow_web/pages/device_managment/all_devices/models/factory_reset_model.dart';
+  import 'package:syncrow_web/pages/device_managment/two_g_glass_switch/models/two_gang_glass_status_model.dart';
+  import 'package:syncrow_web/services/batch_control_devices_service.dart';
+  import 'package:syncrow_web/services/control_device_service.dart';
+  import 'package:syncrow_web/services/devices_mang_api.dart';
 
-part 'two_gang_glass_switch_event.dart';
-part 'two_gang_glass_switch_state.dart';
+  part 'two_gang_glass_switch_event.dart';
+  part 'two_gang_glass_switch_state.dart';
 
-class TwoGangGlassSwitchBloc
-    extends Bloc<TwoGangGlassSwitchEvent, TwoGangGlassSwitchState> {
-  final String deviceId;
-  final ControlDeviceService controlDeviceService;
-  final BatchControlDevicesService batchControlDevicesService;
+  class TwoGangGlassSwitchBloc
+      extends Bloc<TwoGangGlassSwitchEvent, TwoGangGlassSwitchState> {
+    final String deviceId;
+    final ControlDeviceService controlDeviceService;
+    final BatchControlDevicesService batchControlDevicesService;
 
-  late TwoGangGlassStatusModel deviceStatus;
+    late TwoGangGlassStatusModel deviceStatus;
 
-  TwoGangGlassSwitchBloc({
-    required this.deviceId,
-    required this.controlDeviceService,
-    required this.batchControlDevicesService,
-  }) : super(TwoGangGlassSwitchInitial()) {
-    on<TwoGangGlassSwitchFetchDeviceEvent>(_onFetchDeviceStatus);
-    on<TwoGangGlassSwitchControl>(_onControl);
-    on<TwoGangGlassSwitchBatchControl>(_onBatchControl);
-    on<TwoGangGlassSwitchFetchBatchStatusEvent>(_onFetchBatchStatus);
-    on<TwoGangGlassFactoryReset>(_onFactoryReset);
-    on<StatusUpdated>(_onStatusUpdated);
-  }
-
-  Future<void> _onFetchDeviceStatus(
-    TwoGangGlassSwitchFetchDeviceEvent event,
-    Emitter<TwoGangGlassSwitchState> emit,
-  ) async {
-    emit(TwoGangGlassSwitchLoading());
-    try {
-      final status = await DevicesManagementApi().getDeviceStatus(event.deviceId);
-      deviceStatus = TwoGangGlassStatusModel.fromJson(event.deviceId, status.status);
-      _listenToChanges(event.deviceId);
-      emit(TwoGangGlassSwitchStatusLoaded(deviceStatus));
-    } catch (e) {
-      emit(TwoGangGlassSwitchError(e.toString()));
+    TwoGangGlassSwitchBloc({
+      required this.deviceId,
+      required this.controlDeviceService,
+      required this.batchControlDevicesService,
+    }) : super(TwoGangGlassSwitchInitial()) {
+      on<TwoGangGlassSwitchFetchDeviceEvent>(_onFetchDeviceStatus);
+      on<TwoGangGlassSwitchControl>(_onControl);
+      on<TwoGangGlassSwitchBatchControl>(_onBatchControl);
+      on<TwoGangGlassSwitchFetchBatchStatusEvent>(_onFetchBatchStatus);
+      on<TwoGangGlassFactoryReset>(_onFactoryReset);
+      on<StatusUpdated>(_onStatusUpdated);
     }
-  }
 
-  void _listenToChanges(String deviceId) {
-    try {
-      final ref = FirebaseDatabase.instance.ref(
-        'device-status/$deviceId',
-      );
-
-      ref.onValue.listen((event) {
-        final eventsMap = event.snapshot.value as Map<dynamic, dynamic>;
-
-        List<Status> statusList = [];
-        eventsMap['status'].forEach((element) {
-          statusList.add(Status(code: element['code'], value: element['value']));
-        });
-
-        deviceStatus = TwoGangGlassStatusModel.fromJson(deviceId, statusList);
-        add(StatusUpdated(deviceStatus));
-      });
-    } catch (_) {
-      log(
-        'Error listening to changes',
-        name: 'TwoGangGlassSwitchBloc._listenToChanges',
-      );
-    }
-  }
-
-  Future<void> _onControl(
-    TwoGangGlassSwitchControl event,
-    Emitter<TwoGangGlassSwitchState> emit,
-  ) async {
-    emit(TwoGangGlassSwitchLoading());
-    _updateLocalValue(event.code, event.value);
-    emit(TwoGangGlassSwitchStatusLoaded(deviceStatus));
-
-    try {
-      await controlDeviceService.controlDevice(
-        deviceUuid: event.deviceId,
-        status: Status(code: event.code, value: event.value),
-      );
-    } catch (e) {
-      _updateLocalValue(event.code, !event.value);
-      emit(TwoGangGlassSwitchError(e.toString()));
-    }
-  }
-
-  Future<void> _onBatchControl(
-    TwoGangGlassSwitchBatchControl event,
-    Emitter<TwoGangGlassSwitchState> emit,
-  ) async {
-    emit(TwoGangGlassSwitchLoading());
-    _updateLocalValue(event.code, event.value);
-    emit(TwoGangGlassSwitchBatchStatusLoaded(deviceStatus));
-
-    try {
-      await batchControlDevicesService.batchControlDevices(
-        uuids: event.deviceIds,
-        code: event.code,
-        value: event.value,
-      );
-    } catch (e) {
-      _updateLocalValue(event.code, !event.value);
-      emit(TwoGangGlassSwitchError(e.toString()));
-    }
-  }
-
-  Future<void> _onFetchBatchStatus(
-    TwoGangGlassSwitchFetchBatchStatusEvent event,
-    Emitter<TwoGangGlassSwitchState> emit,
-  ) async {
-    emit(TwoGangGlassSwitchLoading());
-    try {
-      final status = await DevicesManagementApi().getBatchStatus(event.deviceIds);
-      deviceStatus = TwoGangGlassStatusModel.fromJson(
-        event.deviceIds.first,
-        status.status,
-      );
-      emit(TwoGangGlassSwitchBatchStatusLoaded(deviceStatus));
-    } catch (e) {
-      emit(TwoGangGlassSwitchError(e.toString()));
-    }
-  }
-
-  Future<void> _onFactoryReset(
-    TwoGangGlassFactoryReset event,
-    Emitter<TwoGangGlassSwitchState> emit,
-  ) async {
-    emit(TwoGangGlassSwitchLoading());
-    try {
-      final response = await DevicesManagementApi().factoryReset(
-        event.factoryReset,
-        event.deviceId,
-      );
-      if (!response) {
-        emit(TwoGangGlassSwitchError('Failed to reset device'));
-      } else {
-        add(TwoGangGlassSwitchFetchDeviceEvent(event.deviceId));
+    Future<void> _onFetchDeviceStatus(
+      TwoGangGlassSwitchFetchDeviceEvent event,
+      Emitter<TwoGangGlassSwitchState> emit,
+    ) async {
+      emit(TwoGangGlassSwitchLoading());
+      try {
+        final status = await DevicesManagementApi().getDeviceStatus(event.deviceId);
+        deviceStatus = TwoGangGlassStatusModel.fromJson(event.deviceId, status.status);
+        _listenToChanges(event.deviceId);
+        emit(TwoGangGlassSwitchStatusLoaded(deviceStatus));
+      } catch (e) {
+        emit(TwoGangGlassSwitchError(e.toString()));
       }
-    } catch (e) {
-      emit(TwoGangGlassSwitchError(e.toString()));
     }
-  }
 
-  void _onStatusUpdated(
-    StatusUpdated event,
-    Emitter<TwoGangGlassSwitchState> emit,
-  ) {
-    deviceStatus = event.deviceStatus;
-    emit(TwoGangGlassSwitchStatusLoaded(deviceStatus));
-  }
+    StreamSubscription<DatabaseEvent>? _deviceStatusSubscription;
 
-  void _updateLocalValue(String code, bool value) {
-    switch (code) {
-      case 'switch_1':
-        deviceStatus = deviceStatus.copyWith(switch1: value);
-        break;
-      case 'switch_2':
-        deviceStatus = deviceStatus.copyWith(switch2: value);
-        break;
+    void _listenToChanges(String deviceId) {
+      try {
+        final ref = FirebaseDatabase.instance.ref('device-status/$deviceId');
+        _deviceStatusSubscription = ref.onValue.listen((DatabaseEvent event) async {
+          if (event.snapshot.value == null) return;
+
+          final usersMap = event.snapshot.value! as Map<dynamic, dynamic>;
+
+          final statusList = <Status>[];
+
+          usersMap['status'].forEach((element) {
+            statusList.add(Status(code: element['code'], value: element['value']));
+          });
+
+          deviceStatus =
+              TwoGangGlassStatusModel.fromJson(usersMap['productUuid'], statusList);
+
+          add(StatusUpdated(deviceStatus));
+        });
+      } catch (_) {}
     }
+
+    Future<void> _onControl(
+      TwoGangGlassSwitchControl event,
+      Emitter<TwoGangGlassSwitchState> emit,
+    ) async {
+      emit(TwoGangGlassSwitchLoading());
+      _updateLocalValue(event.code, event.value);
+      emit(TwoGangGlassSwitchStatusLoaded(deviceStatus));
+
+      try {
+        await controlDeviceService.controlDevice(
+          deviceUuid: event.deviceId,
+          status: Status(code: event.code, value: event.value),
+        );
+      } catch (e) {
+        _updateLocalValue(event.code, !event.value);
+        emit(TwoGangGlassSwitchError(e.toString()));
+      }
+    }
+
+    Future<void> _onBatchControl(
+      TwoGangGlassSwitchBatchControl event,
+      Emitter<TwoGangGlassSwitchState> emit,
+    ) async {
+      emit(TwoGangGlassSwitchLoading());
+      _updateLocalValue(event.code, event.value);
+      emit(TwoGangGlassSwitchBatchStatusLoaded(deviceStatus));
+
+      try {
+        await batchControlDevicesService.batchControlDevices(
+          uuids: event.deviceIds,
+          code: event.code,
+          value: event.value,
+        );
+      } catch (e) {
+        _updateLocalValue(event.code, !event.value);
+        emit(TwoGangGlassSwitchError(e.toString()));
+      }
+    }
+
+    Future<void> _onFetchBatchStatus(
+      TwoGangGlassSwitchFetchBatchStatusEvent event,
+      Emitter<TwoGangGlassSwitchState> emit,
+    ) async {
+      emit(TwoGangGlassSwitchLoading());
+      try {
+        final status = await DevicesManagementApi().getBatchStatus(event.deviceIds);
+        deviceStatus = TwoGangGlassStatusModel.fromJson(
+          event.deviceIds.first,
+          status.status,
+        );
+        emit(TwoGangGlassSwitchBatchStatusLoaded(deviceStatus));
+      } catch (e) {
+        emit(TwoGangGlassSwitchError(e.toString()));
+      }
+    }
+
+    Future<void> _onFactoryReset(
+      TwoGangGlassFactoryReset event,
+      Emitter<TwoGangGlassSwitchState> emit,
+    ) async {
+      emit(TwoGangGlassSwitchLoading());
+      try {
+        final response = await DevicesManagementApi().factoryReset(
+          event.factoryReset,
+          event.deviceId,
+        );
+        if (!response) {
+          emit(TwoGangGlassSwitchError('Failed to reset device'));
+        } else {
+          add(TwoGangGlassSwitchFetchDeviceEvent(event.deviceId));
+        }
+      } catch (e) {
+        emit(TwoGangGlassSwitchError(e.toString()));
+      }
+    }
+
+    void _onStatusUpdated(
+      StatusUpdated event,
+      Emitter<TwoGangGlassSwitchState> emit,
+    ) {
+      deviceStatus = event.deviceStatus;
+      emit(TwoGangGlassSwitchStatusLoaded(deviceStatus));
+    }
+
+    void _updateLocalValue(String code, bool value) {
+      switch (code) {
+        case 'switch_1':
+          deviceStatus = deviceStatus.copyWith(switch1: value);
+          break;
+        case 'switch_2':
+          deviceStatus = deviceStatus.copyWith(switch2: value);
+          break;
+      }
+    }
+
+    @override
+    Future<void> close() {
+      _deviceStatusSubscription?.cancel();
+      return super.close();
   }
 }

lib/pages/device_managment/two_g_glass_switch/view/two_gang_glass_switch_control_view.dart

@@ -102,6 +102,8 @@ class TwoGangGlassSwitchControlView extends StatelessWidget
                 builder: (ctx) => BlocProvider.value(
                       value: BlocProvider.of<TwoGangGlassSwitchBloc>(context),
                       child: BuildScheduleView(
+                        deviceType: '2GT',
+                        countdownCode: 'countdown_1',
                         deviceUuid: deviceId,
                         category: 'switch_1',
                       ),
@@ -118,6 +120,8 @@ class TwoGangGlassSwitchControlView extends StatelessWidget
                 builder: (ctx) => BlocProvider.value(
                       value: BlocProvider.of<TwoGangGlassSwitchBloc>(context),
                       child: BuildScheduleView(
+                        deviceType: '2GT',
+                        countdownCode: 'countdown_2',
                         deviceUuid: deviceId,
                         category: 'switch_2',
                       ),

lib/pages/device_managment/two_gang_switch/view/wall_light_batch_control.dart

@@ -97,6 +97,8 @@ class TwoGangBatchControlView extends StatelessWidget
                         child: BuildScheduleView(
                           category: 'switch_1',
                           deviceUuid: deviceIds.first,
+                          countdownCode: 'countdown_1',
+                          deviceType: '2G',
                         ),
                       ));
             },
@@ -114,6 +116,8 @@ class TwoGangBatchControlView extends StatelessWidget
                         child: BuildScheduleView(
                           category: 'switch_2',
                           deviceUuid: deviceIds.first,
+                          countdownCode: 'countdown_2',
+                          deviceType: '2G',
                         ),
                       ));
             },
@@ -121,10 +125,7 @@ class TwoGangBatchControlView extends StatelessWidget
             subtitle: 'Scheduling',
             iconPath: Assets.scheduling,
           ),
-          // FirmwareUpdateWidget(
-          //   deviceId: deviceIds.first,
-          //   version: 12,
-          // ),
+  
           FactoryResetWidget(callFactoryReset: () {
             context.read<TwoGangSwitchBloc>().add(
                   TwoGangFactoryReset(

lib/pages/device_managment/two_gang_switch/view/wall_light_device_control.dart

@@ -103,6 +103,8 @@ class TwoGangDeviceControlView extends StatelessWidget
                               child: BuildScheduleView(
                                 deviceUuid: deviceId,
                                 category: 'switch_1',
+                                countdownCode: 'countdown_1',
+                                deviceType: '2G',
                               ),
                             ));
                   },
@@ -125,6 +127,8 @@ class TwoGangDeviceControlView extends StatelessWidget
                               child: BuildScheduleView(
                                 deviceUuid: deviceId,
                                 category: 'switch_2',
+                                countdownCode: 'countdown_2',
+                                deviceType: '2G',
                               ),
                             ));
                   },

lib/pages/device_managment/water_heater/helper/add_schedule_dialog_helper.dart

@@ -18,14 +18,21 @@ class ScheduleDialogHelper {
     ScheduleEntry? schedule,
     bool isEdit = false,
     String? code,
+    required String deviceType,
   }) {
+    bool temp;
+    if (deviceType == 'CUR_2') {
+      temp = schedule!.function.value == 'open' ? true : false;
+    } else {
+      temp = schedule!.function.value;
+    }
     final initialTime = schedule != null
         ? _convertStringToTimeOfDay(schedule.time)
         : TimeOfDay.now();
     final initialDays = schedule != null
         ? _convertDaysStringToBooleans(schedule.days)
         : List.filled(7, false);
-    bool? functionOn = schedule?.function.value ?? true;
+    bool? functionOn = temp;
     TimeOfDay selectedTime = initialTime;
     List<bool> selectedDays = List.of(initialDays);
 
@@ -97,8 +104,7 @@ class ScheduleDialogHelper {
                     setState(() => selectedDays[i] = v);
                   }),
                   const SizedBox(height: 16),
-                  _buildFunctionSwitch(schedule!.category, ctx, functionOn!,
-                      (v) {
+                  _buildFunctionSwitch(deviceType, ctx, functionOn!, (v) {
                     setState(() => functionOn = v);
                   }),
                 ],
@@ -114,32 +120,29 @@ class ScheduleDialogHelper {
                   ),
                 ),
                 SizedBox(
-                  width: 100,
-                  child: ElevatedButton(
-                    onPressed: () {
-                      dynamic temp;
-                      if (schedule?.category == 'CUR_2') {
-                        temp = functionOn! ? 'open' : 'close';
-                      } else {
-                        temp = functionOn;
-                      }
-                      print(temp);
-                      final entry = ScheduleEntry(
-                        category: schedule?.category ?? 'switch_1',
-                        time: _formatTimeOfDayToISO(selectedTime),
-                        function: Status(
-                          code: code ?? 'switch_1',
-                          value: temp,
-                          //  functionOn,
-                        ),
-                        days: _convertSelectedDaysToStrings(selectedDays),
-                        scheduleId: schedule?.scheduleId,
-                      );
-                      Navigator.pop(ctx, entry);
-                    },
-                    child: const Text('Save'),
-                  ),
-                ),
+                    width: 100,
+                    child: ElevatedButton(
+                      onPressed: () {
+                        dynamic temp;
+                        if (deviceType == 'CUR_2') {
+                          temp = functionOn! ? 'open' : 'close';
+                        } else {
+                          temp = functionOn;
+                        }
+                        final entry = ScheduleEntry(
+                          category: schedule?.category ?? 'switch_1',
+                          time: _formatTimeOfDayToISO(selectedTime),
+                          function: Status(
+                            code: code ?? 'switch_1',
+                            value: temp,
+                          ),
+                          days: _convertSelectedDaysToStrings(selectedDays),
+                          scheduleId: schedule.scheduleId,
+                        );
+                        Navigator.pop(ctx, entry);
+                      },
+                      child: const Text('Save'),
+                    )),
               ],
             );
           },

lib/pages/device_managment/water_heater/view/water_heater_device_control.dart

@@ -84,6 +84,8 @@ class WaterHeaterDeviceControlView extends StatelessWidget
                       child: BuildScheduleView(
                         deviceUuid: device.uuid ?? '',
                         category: 'switch_1',
+                        countdownCode: 'countdown_1',
+                        deviceType: 'WH',
                       ),
                     ));
           },

lib/pages/home/bloc/home_bloc.dart

@@ -105,7 +105,7 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
       color: const Color(0xFF0026A2),
     ),
     HomeItemModel(
-      title: 'Devices Management',
+      title: 'Device Management',
       icon: Assets.devicesIcon,
       active: true,
       onPress: (context) {

lib/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_bloc.dart

@@ -455,7 +455,7 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
   Future<void> checkEmail(
       CheckEmailEvent event, Emitter<UsersState> emit) async {
     emit(UsersLoadingState());
-    String? res = await UserPermissionApi().checkEmail(
+    String?  res = await UserPermissionApi().checkEmail(
       emailController.text,
     );
     checkEmailValid = res!;

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

@@ -34,7 +34,8 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
               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: [
@@ -63,7 +64,8 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                                 children: [
                                   _buildStep1Indicator(1, "Basics", _blocRole),
                                   _buildStep2Indicator(2, "Spaces", _blocRole),
-                                  _buildStep3Indicator(3, "Role & Permissions", _blocRole),
+                                  _buildStep3Indicator(
+                                      3, "Role & Permissions", _blocRole),
                                 ],
                               ),
                             ),
@@ -105,18 +107,32 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                           ),
                           InkWell(
                             onTap: () {
+                              final isBasicsStep = currentStep == 1;
+
+                              if (isBasicsStep) {
+                                // Validate the form first
+                                final isValid = _blocRole.formKey.currentState
+                                        ?.validate() ??
+                                    false;
+
+                                if (!isValid)
+                                  return; // Stop if form is not valid
+                              }
                               _blocRole.add(const CheckEmailEvent());
 
                               setState(() {
                                 if (currentStep < 3) {
                                   currentStep++;
                                   if (currentStep == 2) {
-                                    _blocRole.add(const CheckStepStatus(isEditUser: false));
+                                    _blocRole.add(const CheckStepStatus(
+                                        isEditUser: false));
                                   } else if (currentStep == 3) {
-                                    _blocRole.add(const CheckSpacesStepStatus());
+                                    _blocRole
+                                        .add(const CheckSpacesStepStatus());
                                   }
                                 } else {
-                                  _blocRole.add(SendInviteUsers(context: context));
+                                  _blocRole
+                                      .add(SendInviteUsers(context: context));
                                 }
                               });
                             },
@@ -124,8 +140,11 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                               currentStep < 3 ? "Next" : "Save",
                               style: TextStyle(
                                   color: (_blocRole.isCompleteSpaces == false ||
-                                              _blocRole.isCompleteBasics == false ||
-                                              _blocRole.isCompleteRolePermissions == false) &&
+                                              _blocRole.isCompleteBasics ==
+                                                  false ||
+                                              _blocRole
+                                                      .isCompleteRolePermissions ==
+                                                  false) &&
                                           currentStep == 3
                                       ? ColorsManager.grayColor
                                       : ColorsManager.secondaryColor),
@@ -143,7 +162,7 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
   Widget _getFormContent() {
     switch (currentStep) {
       case 1:
-        return const BasicsView(
+        return BasicsView(
           userId: '',
         );
       case 2:
@@ -196,8 +215,12 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
+                    color: currentStep == step
+                        ? ColorsManager.blackColor
+                        : ColorsManager.greyColor,
+                    fontWeight: currentStep == step
+                        ? FontWeight.bold
+                        : FontWeight.normal,
                   ),
                 ),
               ],
@@ -260,8 +283,12 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
+                    color: currentStep == step
+                        ? ColorsManager.blackColor
+                        : ColorsManager.greyColor,
+                    fontWeight: currentStep == step
+                        ? FontWeight.bold
+                        : FontWeight.normal,
                   ),
                 ),
               ],
@@ -318,8 +345,12 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
+                    color: currentStep == step
+                        ? ColorsManager.blackColor
+                        : ColorsManager.greyColor,
+                    fontWeight: currentStep == step
+                        ? FontWeight.bold
+                        : FontWeight.normal,
                   ),
                 ),
               ],

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

@@ -1,9 +1,12 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:intl_phone_field/countries.dart';
 import 'package:intl_phone_field/country_picker_dialog.dart';
 import 'package:intl_phone_field/intl_phone_field.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';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
@@ -11,7 +14,9 @@ import 'package:syncrow_web/utils/style.dart';
 
 class BasicsView extends StatelessWidget {
   final String? userId;
-  const BasicsView({super.key, this.userId = ''});
+  Timer? _debounce;
+
+  BasicsView({super.key, this.userId = ''});
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<UsersBloc, UsersState>(builder: (context, state) {
@@ -21,6 +26,7 @@ class BasicsView extends StatelessWidget {
       }
       return Form(
         key: _blocRole.formKey,
+        autovalidateMode: AutovalidateMode.onUserInteraction,
         child: ListView(
           shrinkWrap: true,
           children: [
@@ -208,6 +214,14 @@ class BasicsView extends StatelessWidget {
                           fontSize: 12,
                           color: ColorsManager.textGray),
                     ),
+
+                    onChanged: (value) {
+                      if (_debounce?.isActive ?? false) _debounce!.cancel();
+                      _debounce = Timer(const Duration(milliseconds: 800), () {
+                        _blocRole.add(const CheckEmailEvent());
+                      });
+                    },
+
                     validator: (value) {
                       if (value == null || value.isEmpty) {
                         return 'Enter Email Address';

lib/pages/routines/create_new_routines/space_dropdown.dart

@@ -32,113 +32,114 @@ class SpaceDropdown extends StatelessWidget {
                   color: ColorsManager.blackColor,
                 ),
           ),
-          SizedBox(
-            child: Container(
+          DropdownButton2<String>(
+            underline: const SizedBox(),
+            buttonStyleData: ButtonStyleData(
+              decoration:
+                  BoxDecoration(borderRadius: BorderRadius.circular(12)),
+            ),
+            value: selectedValue,
+            items: spaces.map((space) {
+              return DropdownMenuItem<String>(
+                value: space.uuid,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      '   ${space.name}',
+                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                            fontSize: 16,
+                            fontWeight: FontWeight.bold,
+                            color: selectedValue == space.uuid
+                                ? ColorsManager.dialogBlueTitle
+                                : ColorsManager.blackColor,
+                          ),
+                    ),
+                    Text(
+                      '   ${space.lastThreeParents}',
+                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                            fontSize: 12,
+                            color: selectedValue == space.uuid
+                                ? ColorsManager.dialogBlueTitle
+                                : ColorsManager.blackColor,
+                          ),
+                    ),
+                  ],
+                ),
+              );
+            }).toList(),
+            onChanged: onChanged,
+            style: TextStyle(
+              color: Colors.black,
+              fontSize: 13,
+            ),
+            hint: Padding(
+              padding: const EdgeInsets.only(left: 10),
+              child: Text(
+                hintMessage,
+                style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                      color: ColorsManager.textGray,
+                    ),
+              ),
+            ),
+            customButton: Container(
               height: 40,
+              decoration: BoxDecoration(
+                border: Border.all(color: ColorsManager.textGray, width: 1.0),
+                borderRadius: BorderRadius.circular(10),
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Expanded(
+                    flex: 8,
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: 10),
+                      child: Text(
+                        selectedValue != null
+                            ? spaces
+                                .firstWhere((e) => e.uuid == selectedValue)
+                                .name
+                            : hintMessage,
+                        style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                              fontSize: 13,
+                              color: selectedValue != null
+                                  ? Colors.black
+                                  : ColorsManager.textGray,
+                            ),
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: Colors.grey[200],
+                        borderRadius: const BorderRadius.only(
+                          topRight: Radius.circular(10),
+                          bottomRight: Radius.circular(10),
+                        ),
+                      ),
+                      height: 45,
+                      child: const Icon(
+                        Icons.keyboard_arrow_down,
+                        color: ColorsManager.textGray,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            dropdownStyleData: DropdownStyleData(
+              maxHeight: MediaQuery.of(context).size.height * 0.4,
               decoration: BoxDecoration(
                 color: ColorsManager.whiteColors,
                 borderRadius: BorderRadius.circular(10),
               ),
-              child: DropdownButton2<String>(
-                underline: const SizedBox(),
-                value: selectedValue,
-                items: spaces.map((space) {
-                  return DropdownMenuItem<String>(
-                    value: space.uuid,
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      children: [
-                        Text(
-                          '   ${space.name}',
-                          style:
-                              Theme.of(context).textTheme.bodyMedium!.copyWith(
-                                    fontSize: 12,
-                                    color: ColorsManager.blackColor,
-                                  ),
-                        ),
-                        Text(
-                          '   ${space.lastThreeParents}',
-                          style:
-                              Theme.of(context).textTheme.bodyMedium!.copyWith(
-                                    fontSize: 12,
-                                  ),
-                        ),
-                      ],
-                    ),
-                  );
-                }).toList(),
-                onChanged: onChanged,
-                style: TextStyle(color: Colors.black),
-                hint: Padding(
-                  padding: const EdgeInsets.only(left: 10),
-                  child: Text(
-                    hintMessage,
-                    style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                          color: ColorsManager.textGray,
-                        ),
-                  ),
-                ),
-                customButton: Container(
-                  height: 45,
-                  decoration: BoxDecoration(
-                    border:
-                        Border.all(color: ColorsManager.textGray, width: 1.0),
-                    borderRadius: BorderRadius.circular(10),
-                  ),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      Expanded(
-                        flex: 8,
-                        child: Padding(
-                          padding: const EdgeInsets.only(left: 10),
-                          child: Text(
-                            selectedValue != null
-                                ? spaces
-                                    .firstWhere((e) => e.uuid == selectedValue)
-                                    .name
-                                : hintMessage,
-                            style:
-                                Theme.of(context).textTheme.bodySmall!.copyWith(
-                                      color: selectedValue != null
-                                          ? Colors.black
-                                          : ColorsManager.textGray,
-                                    ),
-                            overflow: TextOverflow.ellipsis,
-                          ),
-                        ),
-                      ),
-                      Expanded(
-                        child: Container(
-                          decoration: BoxDecoration(
-                            color: Colors.grey[200],
-                            borderRadius: const BorderRadius.only(
-                              topRight: Radius.circular(10),
-                              bottomRight: Radius.circular(10),
-                            ),
-                          ),
-                          height: 45,
-                          child: const Icon(
-                            Icons.keyboard_arrow_down,
-                            color: ColorsManager.textGray,
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-                dropdownStyleData: DropdownStyleData(
-                  maxHeight: MediaQuery.of(context).size.height * 0.4,
-                  decoration: BoxDecoration(
-                    color: ColorsManager.whiteColors,
-                    borderRadius: BorderRadius.circular(10),
-                  ),
-                ),
-                menuItemStyleData: const MenuItemStyleData(
-                  height: 60,
-                ),
-              ),
+            ),
+            menuItemStyleData: const MenuItemStyleData(
+              height: 60,
             ),
           ),
         ],

lib/pages/routines/widgets/main_routine_view/routine_view_card.dart

@@ -121,7 +121,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                 child: SizedBox(
                                   width: 16,
                                   height: 16,
-                                  child: CircularProgressIndicator(strokeWidth: 2),
+                                  child:
+                                      CircularProgressIndicator(strokeWidth: 2),
                                 ),
                               ),
                             )
@@ -159,8 +160,9 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                       height: iconSize,
                                       width: iconSize,
                                       fit: BoxFit.contain,
-                                      errorBuilder: (context, error, stackTrace) =>
-                                          Image.asset(
+                                      errorBuilder:
+                                          (context, error, stackTrace) =>
+                                              Image.asset(
                                         Assets.logo,
                                         height: iconSize,
                                         width: iconSize,
@@ -203,7 +205,8 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                             maxLines: 1,
                             style: context.textTheme.bodySmall?.copyWith(
                               color: ColorsManager.blackColor,
-                              fontSize: widget.isSmallScreenSize(context) ? 10 : 12,
+                              fontSize:
+                                  widget.isSmallScreenSize(context) ? 10 : 12,
                             ),
                           ),
                           if (widget.spaceName != '')
@@ -222,8 +225,9 @@ class _RoutineViewCardState extends State<RoutineViewCard> {
                                   maxLines: 1,
                                   style: context.textTheme.bodySmall?.copyWith(
                                     color: ColorsManager.blackColor,
-                                    fontSize:
-                                        widget.isSmallScreenSize(context) ? 10 : 12,
+                                    fontSize: widget.isSmallScreenSize(context)
+                                        ? 10
+                                        : 12,
                                   ),
                                 ),
                               ],

lib/pages/routines/widgets/routine_dialogs/curtain_dialog.dart

@@ -58,7 +58,9 @@ class CurtainHelper {
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
                   children: [
-                    const DialogHeader('AC Functions'),
+                    DialogHeader(dialogType == 'THEN'
+                        ? 'Curtain Functions'
+                        : 'Curtain Conditions'),
                     Expanded(
                       child: Row(
                         crossAxisAlignment: CrossAxisAlignment.stretch,

lib/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart

@@ -1,24 +1,39 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.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/communities/domain/models/community_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_community/presentation/edit_community_dialog.dart';
 
 abstract final class SpaceManagementCommunityDialogHelper {
-  static void showCreateDialog(BuildContext context) {
+  static void showCreateDialog(BuildContext context) => showDialog<void>(
+        context: context,
+        builder: (_) => const CreateCommunityDialog(),
+      );
+
+  static void showEditDialog(
+    BuildContext context,
+    CommunityModel community,
+  ) {
     showDialog<void>(
       context: context,
-      builder: (_) => CreateCommunityDialog(
-        title: const SelectableText('Community Name'),
-        onCreateCommunity: (community) {
-          context.read<CommunitiesBloc>().add(
-                InsertCommunity(community),
-              );
-          context.read<CommunitiesTreeSelectionBloc>().add(
-                SelectCommunityEvent(community: community),
-              );
-        },
+      builder: (_) => EditCommunityDialog(
+        community: community,
+        parentContext: context,
       ),
     );
   }
+
+  static void showLoadingDialog(BuildContext context) => showDialog<void>(
+        context: context,
+        barrierDismissible: false,
+        builder: (context) => const Center(
+          child: CircularProgressIndicator(),
+        ),
+      );
+
+  static void showSuccessSnackBar(BuildContext context, String message) =>
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text(message),
+        ),
+      );
 }

lib/pages/space_management_v2/main_module/shared/widgets/community_dialog.dart

@@ -1,28 +1,29 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
 import 'package:syncrow_web/pages/common/buttons/default_button.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_name_text_field.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
-class CreateCommunityDialogWidget extends StatefulWidget {
+class CommunityDialog extends StatefulWidget {
   final String? initialName;
   final Widget title;
+  final void Function(String name) onSubmit;
+  final String? errorMessage;
 
-  const CreateCommunityDialogWidget({
-    super.key,
+  const CommunityDialog({
     required this.title,
+    required this.onSubmit,
     this.initialName,
+    this.errorMessage,
+    super.key,
   });
 
   @override
-  State<CreateCommunityDialogWidget> createState() =>
-      _CreateCommunityDialogWidgetState();
+  State<CommunityDialog> createState() => _CommunityDialogState();
 }
 
-class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidget> {
+class _CommunityDialogState extends State<CommunityDialog> {
   late final TextEditingController _nameController;
 
   @override
@@ -63,35 +64,20 @@ class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidge
         child: Form(
           key: _formKey,
           child: SingleChildScrollView(
-            child: BlocBuilder<CreateCommunityBloc, CreateCommunityState>(
-              builder: (context, state) {
-                return Column(
-                  mainAxisSize: MainAxisSize.min,
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    DefaultTextStyle(
-                      style: Theme.of(context).textTheme.headlineMedium!,
-                      child: widget.title,
-                    ),
-                    const SizedBox(height: 18),
-                    CreateCommunityNameTextField(
-                      nameController: _nameController,
-                    ),
-                    if (state case CreateCommunityFailure(:final message))
-                      Padding(
-                        padding: const EdgeInsets.only(top: 18),
-                        child: SelectableText(
-                          '* $message',
-                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                                color: Theme.of(context).colorScheme.error,
-                              ),
-                        ),
-                      ),
-                    const SizedBox(height: 24),
-                    _buildActionButtons(context),
-                  ],
-                );
-              },
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                DefaultTextStyle(
+                  style: Theme.of(context).textTheme.headlineMedium!,
+                  child: widget.title,
+                ),
+                const SizedBox(height: 18),
+                CreateCommunityNameTextField(nameController: _nameController),
+                _buildErrorMessage(),
+                const SizedBox(height: 24),
+                _buildActionButtons(context),
+              ],
             ),
           ),
         ),
@@ -132,13 +118,22 @@ class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidge
 
   void _onSubmit(BuildContext context) {
     if (_formKey.currentState?.validate() ?? false) {
-      context.read<CreateCommunityBloc>().add(
-            CreateCommunity(
-              CreateCommunityParam(
-                name: _nameController.text.trim(),
-              ),
-            ),
-          );
+      widget.onSubmit.call(_nameController.text.trim());
     }
   }
+
+  Widget _buildErrorMessage() {
+    return Visibility(
+      visible: widget.errorMessage != null,
+      child: Padding(
+        padding: const EdgeInsetsDirectional.symmetric(vertical: 18),
+        child: SelectableText(
+          '* ${widget.errorMessage}',
+          style: context.textTheme.bodyMedium?.copyWith(
+            color: context.theme.colorScheme.error,
+          ),
+        ),
+      ),
+    );
+  }
 }

lib/pages/space_management_v2/main_module/views/space_management_page.dart

@@ -7,6 +7,11 @@ import 'package:syncrow_web/pages/space_management_v2/modules/communities/data/s
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.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/products/data/services/remote_products_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/presentation/bloc/products_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/remote_space_details_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/unique_subspaces_decorator.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
@@ -26,6 +31,18 @@ class SpaceManagementPage extends StatelessWidget {
           )..add(const LoadCommunities(LoadCommunitiesParam())),
         ),
         BlocProvider(create: (context) => CommunitiesTreeSelectionBloc()),
+        BlocProvider(
+          create: (context) => SpaceDetailsBloc(
+            UniqueSubspacesDecorator(
+              RemoteSpaceDetailsService(httpService: HTTPService()),
+            ),
+          ),
+        ),
+        BlocProvider(
+          create: (context) => ProductsBloc(
+            RemoteProductsService(HTTPService()),
+          ),
+        ),
       ],
       child: WebScaffold(
         appBarTitle: Text(